/*
 * Lo que el runtime de Claude Design resolvía en JavaScript y acá resuelve el
 * navegador.
 *
 * Todo lo demás —tipografía, color, espaciado, animaciones— sigue viviendo
 * inline dentro de `index.html`, tal como lo dejó el diseño. Este archivo solo
 * contiene las dos cosas que no se podían inlinear: los condicionales y el
 * cambio de disposición por ancho de pantalla.
 */

/* --- 1. Los condicionales ---------------------------------------------------
 *
 * En el original eran `<sc-if>`, que no dejaba rastro en el DOM. Acá quedan como
 * elementos envolventes, así que llevan `display: contents` para desaparecer del
 * layout: sin eso, un <span> de más se vuelve hijo del flex y descoloca el ícono
 * que envuelve.
 */
[data-tema],
[data-si] {
  display: contents;
}

html[data-theme='dark'] [data-tema='light'],
html[data-theme='light'] [data-tema='dark'] {
  display: none;
}

/*
 * ⚠️ Esta regla es obligatoria, no un detalle.
 *
 * El atributo `hidden` esconde un elemento porque el navegador le aplica
 * `display: none` desde su hoja de estilos propia — y **cualquier regla de autor
 * le gana**, incluida la de arriba. Sin esto, el menú de idiomas nace con
 * `hidden` puesto y se ve igual, desplegado y sin forma de cerrarlo.
 *
 * Los dos atributos suman más especificidad que `[data-si]` solo, así que no
 * hace falta `!important`.
 */
[data-si][hidden],
[data-tema][hidden] {
  display: none;
}

/* --- 2. El diagrama de flujo -----------------------------------------------
 *
 * Horizontal en pantallas anchas, vertical en angostas. El original lo decidía
 * con un flag de JavaScript recalculado en cada `resize`; acá lo decide el
 * navegador, que además no parpadea al cargar.
 *
 * El corte en 1010px es el mismo que usaba el original (`window.innerWidth >= 1010`).
 */

/* Angosto: la columna, que es el caso más simple, va de base. */
:root {
  --flow-cols: minmax(0, 1fr);
  --flow-justify: start;
  --flow-gap: 14px;
  --rail-w: 52px;
  --rail-h: 48px;
  --rail-line-w: 1px;
  --rail-line-h: 100%;
  --rail-indent: 0;
  --rail-arrow-top: calc(100% - 4px);
  --rail-arrow-left: 50%;
  --rail-arrow-rot: 135deg;
  --pk-top: 0;
  --pk-left: 50%;
  --pk-mt: 0;
  --pk-ml: -13px;
  --rail-anim: gaSendV;
}

@media (min-width: 1010px) {
  :root {
    --flow-cols: minmax(0, 1fr) clamp(60px, 7vw, 110px) minmax(0, 1fr) clamp(60px, 7vw, 110px) minmax(0, 1fr);
    --flow-justify: center;
    --flow-gap: 0 clamp(10px, 1.4vw, 20px);
    --rail-w: 100%;
    --rail-h: 52px;
    --rail-line-w: 100%;
    --rail-line-h: 1px;
    --rail-indent: 0px;
    --rail-arrow-top: 50%;
    --rail-arrow-left: calc(100% - 4px);
    --rail-arrow-rot: 45deg;
    --pk-top: 50%;
    --pk-left: 0;
    --pk-mt: -9px;
    --pk-ml: 0;
    --rail-anim: gaSend;
  }
}

/* --- 2b. La barra de navegación en celular ---------------------------------
 *
 * Los tres enlaces del nav **se esconden bajo 1010px**, que es lo que hacía el
 * original: allá el bloque colgaba de `showNav`, o sea del mismo flag `navWide`
 * del diagrama de flujo, y directamente no se montaba.
 *
 * El porte los dejó siempre visibles —los envoltorios de los condicionales
 * llevan `display: contents`, que los vuelve invisibles al layout pero no los
 * esconde— y en un teléfono la barra terminaba con el logo, tres enlaces, el
 * selector de idioma, el interruptor de tema y el botón de «Pedir una cuenta»
 * peleando por el mismo renglón.
 *
 * El corte es el mismo 1010px del original, para que la barra y el diagrama
 * cambien juntos y no en dos momentos distintos.
 */
@media (max-width: 1009px) {
  [data-si='nav'] {
    display: none;
  }
}

/* --- 2b-bis. La barra, apretada para que quepa -----------------------------
 *
 * Esconder los enlaces no alcanzaba. Lo que queda en la barra —el logo con su
 * palabra, el selector de idioma, el interruptor de tema y «Pedir una cuenta»—
 * mide unos 400px, y en un teléfono de 390px quedan ~327px útiles después de los
 * márgenes.
 *
 * El corte va hasta 760px y no hasta 560 por medición: la barra SIN apretar
 * recién entra desde ~561px, y ahí lo hace con 10px de sobra. Diez píxeles no
 * son un margen, son una casualidad.
 *
 * Se achica todo un poco en vez de sacar un elemento: cada control sigue estando.
 */
@media (max-width: 760px) {
  header img[src$='gaston-face.png'] {
    width: 34px;
  }

  /* La palabra «GastApp», al lado de la monedita. */
  header img[src$='gaston-face.png'] + span {
    font-size: 18px;
  }

  header [data-onclick='openForm'] {
    font-size: 13px;
    padding: 11px 13px;
  }

  header [data-onclick='toggleLangMenu'] {
    padding: 0 8px;
    gap: 5px;
  }

  header [data-onclick='toggleTheme'] {
    width: 34px;
  }

  /* La rayita entre el idioma y el tema: a este tamaño ya no separa nada. */
  header [data-ref='langWrap'] + span {
    display: none;
  }
}

/*
 * La palabra «GastApp» necesita ~480px para caber, así que abajo de 560 se va y
 * queda la monedita: es la marca igual, y es lo que menos se pierde — el botón
 * de «Pedir una cuenta» es la razón de ser de la página y el selector de idioma
 * se acaba de reponer a pedido.
 *
 * El corte estaba en 430px y estaba MAL: justo dejaba afuera al iPhone 16 Pro
 * Max, que son 440px. Ahí la palabra reaparecía sin tener lugar y la píldora se
 * partía en dos renglones — el mismo síntoma del iPhone 12 Pro, por la razón
 * opuesta.
 */
@media (max-width: 560px) {
  header img[src$='gaston-face.png'] + span {
    display: none;
  }
}

/*
 * Y abajo de 420px sigue sin caber por unos pocos píxeles.
 *
 * El detalle que lo explica: el header tiene `flex-wrap: wrap`, así que **no
 * desborda — se parte en dos renglones**. Y como es una píldora con
 * `border-radius: 999px`, partida en dos se ve deforme. Por eso en un iPhone 12
 * Pro (390px) se ve mal y en un 15 Pro Max (430px) se ve bien: con 40px más de
 * ancho entra todo en un renglón.
 *
 * Lo que se suelta es la sigla «ES» del selector, no el selector: el globo
 * terráqueo ya dice de qué se trata, y al abrirlo siguen estando «Español» e
 * «English» con todas las letras.
 */
@media (max-width: 420px) {
  header [data-onclick='toggleLangMenu'] [data-v='langShort'] {
    display: none;
  }

  header {
    gap: 10px 10px;
  }

  header [data-onclick='openForm'] {
    font-size: 12.5px;
    padding: 10px 12px;
  }
}

/*
 * Y la última punta: 320px, que es el iPhone SE de 2016 y varios Android
 * baratos. Ahí faltan ~15px y se aprieta un poco más. No se saca nada: a este
 * ancho, quitarle un control a la barra deja la página sin forma de cambiar el
 * tema o el idioma en el único lugar donde están.
 */
@media (max-width: 350px) {
  header img[src$='gaston-face.png'] {
    width: 30px;
  }

  header {
    gap: 10px 8px;
  }

  header [data-onclick='openForm'] {
    font-size: 12px;
    padding: 10px 10px;
  }
}

/* --- 2b-quater. El hero en tablet vertical ---------------------------------
 *
 * El hero pide `min-height: calc(100svh - 77px)`: una pantalla completa. En
 * escritorio y en celular eso funciona, porque el contenido llena esa altura.
 *
 * En una tablet **en vertical** no. Ahí la pantalla es ancha —así que las dos
 * columnas van lado a lado y el contenido mide unos 500px— pero además es muy
 * alta: un iPad son 1024px de alto, o sea ~950px de hero. Quedan 450px de vacío
 * y hay que arrastrar el dedo dos veces para llegar a la sección siguiente.
 *
 * El filtro es por PROPORCIÓN y no por ancho, porque el problema no es el ancho:
 * es que la pantalla sea mucho más alta que ancha teniendo lugar para dos
 * columnas. `3/4` cubre todos los iPad en vertical (0.69 a 0.75) y deja afuera
 * los teléfonos —que apilan y sí llenan— y cualquier pantalla apaisada.
 */
@media (min-width: 561px) and (max-aspect-ratio: 3 / 4) {
  header + section {
    min-height: 0;
  }
}

/* --- 2b-ter. El canvas del hero, más arriba en celular ---------------------
 *
 * El canvas está en `position: absolute` cubriendo el bloque entero, y el dibujo
 * se centra solo adentro (`oy = (alto - filas) / 2`). Así que subirlo es correr
 * el canvas, no tocar el dibujo.
 *
 * Se mueve con `top` negativo y no con `height` ni con `align-items`: cambiarle
 * la altura al canvas **encoge el dibujo**, porque la escala sale de
 * `min(ancho/imgW, alto/imgH)`. Con `top` conserva exactamente el mismo tamaño.
 *
 * 40px, ajustado a ojo por Josué el 7 sep. Si hace falta más o menos, es este
 * número y ninguna otra cosa.
 */
@media (max-width: 560px) {
  [data-ref='asciiHost'] > canvas {
    top: -40px;
  }
}

/* --- 2c. Gastón «deprisa» en pantalla angosta ------------------------------
 *
 * Su tope es de 300px, pensado para la columna del diseño de escritorio. Cuando
 * la sección se apila —abajo de 560px, que es donde el `auto-fit` deja de tener
 * lugar para dos columnas— esos 300px se comen media pantalla antes de que se
 * lea una sola palabra del texto que acompaña.
 */
@media (max-width: 560px) {
  img[src$='gaston-speed.png'] {
    max-width: 220px;
  }
}

/* --- 3. Movimiento reducido -------------------------------------------------
 *
 * Quien pide menos movimiento ve la página entera y quieta. Es más que
 * accesibilidad: la conversación de WhatsApp **es** el argumento de la página, y
 * si no se reproduce tiene que verse completa igual, no vacía.
 *
 * El JavaScript también lo respeta (`this.reduceMotion`), pero eso solo apaga lo
 * que él controla; esto apaga lo que está declarado inline en el HTML.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}