/* =========================================================
   SOLARA · BASE
   Reset, tipografía de arranque y primitivas de layout.
   Acá NO se decide estética: eso es fase 2 (sections.css y
   components.css). Esto es solo el esqueleto legible.
   Ningún color literal: todo sale de tokens.css.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-alto);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-cuerpo);
  font-size: var(--fs-cuerpo);
  line-height: 1.65;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Sin `touch-action`, al tocar un control el navegador movil espera unos
   300 ms por si viene un segundo toque que signifique "zoom". Ese retardo
   se siente como que el sitio no responde, y es justo en la pantalla desde
   la que llega la mayoria de la gente. `manipulation` mantiene el scroll y
   el pinch —que son gestos sobre la pagina, no sobre el control— y descarta
   solo el doble toque para zoom encima del control.

   No cambia un pixel: no dibuja nada, solo cambia cuando se despacha el
   click. */
button, summary, [role="button"], .btn, a[href] { touch-action: manipulation; }

/* ---------- Foco visible: requisito de WCAG 2.1 AA ---------- */
/* Anillo DOBLE. El naranja va donde estaba —outline de 3 px a 3 px de
   distancia— y por fuera lo envuelve un anillo oscuro dibujado con
   box-shadow, que se pinta debajo del outline y se extiende 8 px: queda
   oscuro de 0 a 3, naranja de 3 a 6 y oscuro otra vez de 6 a 8.

   Asi el naranja tiene contra que contrastar (4.97 contra el marron) y el
   marron contrasta contra la pagina. Con el outline solo, el anillo media
   entre 1.86 y 2.73 sobre los fondos claros del sitio, contra los 3.0 que
   pide SC 1.4.11. El detalle completo esta en tokens.css.

   El box-shadow pisa la sombra propia del elemento mientras tiene el foco
   —las fechas y las fotos de galeria tienen una en reposo— y esta bien que
   sea asi: durante ese momento lo que importa es que se vea donde esta el
   foco, no la elevacion. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
  box-shadow: 0 0 0 8px var(--foco-contorno);
}

/* ---------- Utilidades ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El honeypot de los formularios. No usa display:none porque varios bots
   saltean lo que está oculto así; esto lo saca de la vista sin sacarlo
   del DOM ni del alcance de un bot ingenuo. */
.miel {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--bg-oscuro);
  color: var(--texto-sobre-oscuro);
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.contenedor {
  width: min(100% - 2 * var(--gap), var(--maxw));
  margin-inline: auto;
}
.contenedor--angosto { max-width: 760px; }

.seccion { padding-block: clamp(3rem, 8vw, 6rem); }

.dos-col {
  display: grid;
  gap: var(--gap);
  align-items: center;
}

.seccion__head { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
/* El limite de 60ch va en la BAJADA, no en el bloque entero. Existe para
   que un parrafo no quede en renglones larguisimos e ilegibles; aplicado
   a todo el head tambien estrangulaba al titulo, que es corto y en
   cuerpo grande. Medido: "Tu entrada, en cuatro pasos" necesitaba 658 px
   y tenia 606, asi que caia en dos renglones sin motivo. */
.seccion__head--centro { text-align: center; margin-inline: auto; }
.seccion__head--centro .bajada { max-width: 60ch; margin-inline: auto; }

/* ---------- Tipografía de marca ---------- */

/* El claim del deck: serif, versalitas y tracking muy abierto. Sale
   directo de la página 5 del deck y de la carta.

   HOY NO SE USA EN NINGÚN LADO: el claim estaba en el hero y se sacó
   de la vista porque competía con el isologotipo y se comía tres
   renglones. La regla se conserva a propósito, no por olvido — es la
   tipografía de marca para cuando el claim vuelva a aparecer, y
   redescubrirla desde el deck costaría más que estas ocho líneas. */
.claim {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-claim);
  line-height: 1.1;
}

.titulo {
  font-family: var(--ff-titulo);
  font-size: var(--fs-h2);
  font-weight: 800;
  /* Reparte los renglones en vez de llenar el primero y dejar el sobrante
     abajo. Sin esto, "Solara, un entorno único rodeado de montañas y ríos"
     dejaba "ríos" solo en la segunda línea: una palabra huérfana debajo de
     un renglón lleno es lo que hace ver desprolijo un título que por lo
     demás está bien.

     Donde no está soportado —Safari anterior a 17.4— la declaración se
     ignora y el título vuelve al corte de antes. No hay nada que reponer. */
  text-wrap: balance;
}

.kicker {
  font-family: var(--ff-cuerpo);
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--acento);
  margin-bottom: 0.75rem;
}

.bajada { font-size: 1.06em; color: var(--texto-suave); }

.nota { font-size: var(--fs-chico); color: var(--texto-suave); }

h3 { font-family: var(--ff-titulo); font-size: var(--fs-h3); }

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  .dos-col { grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 1.5); }
  .dos-col--invertida .dos-col__media { order: 2; }
}