/* ===========================================================================
   PRODUCT TOUR
   ---------------------------------------------------------------------------
   Un panel a pantalla completa por pantalla de la app: el movil a un lado y el
   texto al otro, alternando el lado en cada panel.

   Sustituye al parallax anterior (un solo movil pegado con GSAP y los textos
   entrando por los lados). Aquel dependia de ScrollTrigger para que se viera
   cualquier cosa: si GSAP no cargaba, la seccion quedaba en blanco. Este se lee
   entero sin una linea de JavaScript.
   =========================================================================== */

/* En movil NO se fuerza pantalla completa: el mockup ya ocupa casi todo el alto
   y el texto se quedaba fuera. El panel crece con su contenido y se scrollea. */
.tour-panel {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: clamp(1.75rem, 5vw, 3.5rem);
    padding: clamp(3rem, 6vw, 4.5rem) 1.25rem;
    position: relative;
    /* Sin tope, en 1920+ el movil y el texto se iban cada uno a un borde y
       quedaba un agujero de casi mil pixeles en medio. */
    max-width: 1180px;
    margin-inline: auto;
}

/* Separador tenue entre paneles, para que el scroll no sea una masa continua. */
.tour-panel + .tour-panel::before {
    content: "";
    position: absolute;
    inset-inline: 15%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
}

/* Dos columnas desde 768, no desde 900: el iPad en vertical (768 / 834) caia en
   el layout de movil, con el telefono topado a 290px, el texto debajo y medio
   ancho de pantalla sin usar. Y apilado el tour se comia 6.900px de scroll. */
@media (min-width: 768px) {
    .tour-panel {
        /* El movil pide menos ancho que el texto: repartir 50/50 dejaba media
           columna vacia a su lado. */
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
        justify-items: stretch;
        gap: clamp(2rem, 4vw, 4rem);
        padding-inline: clamp(2rem, 5vw, 4rem);
    }

    /* Alterna el lado: impares con el movil a la izquierda, pares a la derecha. */
    .tour-panel:nth-of-type(even) .tour-panel__media { order: 2; }
    .tour-panel:nth-of-type(even) .tour-panel__copy { order: 1; }

    /* El texto se arrima al movil en vez de irse al borde de la pantalla. */
    .tour-panel:nth-of-type(odd)  .tour-panel__copy { justify-self: start; }
    .tour-panel:nth-of-type(even) .tour-panel__copy { justify-self: end; }
}

.tour-panel__media {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.tour-panel__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    max-width: 34rem;
    text-align: center;
}

@media (min-width: 768px) {
    .tour-panel__copy { text-align: left; }
}

.tour-panel__step {
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--primary, #3891A6);
}

.tour-panel__copy h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 900;
    color: #fff;
}

.tour-panel__copy p {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    color: #889DB6;
    font-weight: 500;
}

/* ===== Marco del iPhone (CSS puro, nitido a cualquier tamano) =====

   TODO el tamano sale de una sola variable, `--screen-w`: el ancho de la
   pantalla. El alto se calcula con la proporcion exacta de las capturas
   (1080 x 2347), y el chasis envuelve a la pantalla con padding y borde.

   Antes el ancho se dejaba en `auto` y se deducia del `aspect-ratio` de la
   pantalla a partir de un alto fijo. Chrome lo resolvia bien, pero Safari no:
   el chasis salia el doble de ancho que la captura (un rectangulo negro
   vacio al lado del movil) y en el tour la imagen se estiraba en horizontal.
   Con anchos y altos explicitos no hay nada que el navegador tenga que
   deducir. */

.device {
    --screen-w: min(64vw, 270px);
    --screen-h: calc(var(--screen-w) * 2347 / 1080);
    --bezel: calc(var(--screen-w) * 0.034);
    --rim: 3px;
    /* Radio de las esquinas de la pantalla de un iPhone 15/16 Pro. */
    --screen-r: calc(var(--screen-w) * 0.142);

    position: relative;
    flex: none;
    width: max-content;
    padding: var(--bezel);
    border: var(--rim) solid transparent;
    border-radius: calc(var(--screen-r) + var(--bezel) + var(--rim));
    /* Bisel negro dentro, canto de titanio fuera (el degradado solo se ve en
       el borde). */
    background:
        linear-gradient(#050607, #050607) padding-box,
        linear-gradient(145deg, #a3a8b0 0%, #4a4e55 16%, #1f2226 46%, #2c2f34 70%, #8e939b 100%) border-box;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 50px 100px -30px rgba(0, 0, 0, 0.85),
        0 30px 60px -40px rgba(56, 145, 166, 0.55);
}

.device__screen {
    position: relative;
    width: var(--screen-w);
    height: var(--screen-h);
    border-radius: var(--screen-r);
    overflow: hidden;
    background: #0C1B2A;
    /* Safari no recorta bien el contenido de un overflow:hidden redondeado si
       el hijo se compone en su propia capa; esto lo fuerza. */
    isolation: isolate;
}

.device__screen img {
    display: block;
    width: 100%;
    height: 100%;
    /* `cover`, no `fill`: si algun dia la caja no cuadra al pixel, la captura
       se recorta un poco en vez de deformarse. */
    object-fit: cover;
    object-position: top center;
}

/* Reflejo muy suave del cristal. */
.device__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%);
    pointer-events: none;
}

/* Sin Dynamic Island dibujada: las capturas son de un iPhone de verdad y ya
   traen la suya, con su barra de estado. Dibujar otra encima la duplicaba. */

/* Botones laterales. A la izquierda, en una sola pieza: boton de accion y los
   dos de volumen, separados con huecos transparentes del degradado. A la
   derecha, el lateral. */
.device::before,
.device::after {
    content: "";
    position: absolute;
    width: 3px;
}
.device::before {
    left: calc(-1 * var(--rim) - 3px);
    top: 17%;
    height: 27%;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(180deg,
        #50545b 0 14%, transparent 14% 27%,
        #50545b 27% 61%, transparent 61% 66%,
        #50545b 66% 100%);
}
.device::after {
    right: calc(-1 * var(--rim) - 3px);
    top: 27%;
    height: 14%;
    border-radius: 0 2px 2px 0;
    background: #50545b;
}

/* En tablet y escritorio manda la ALTURA de la ventana: con el ancho, en
   pantallas bajas (portatiles de 800-900px) el movil se salia por abajo. Se
   pasa a ancho con la misma proporcion, para seguir teniendo una sola fuente
   de verdad. */
@media (min-width: 768px) {
    .tour-panel { padding-block: clamp(2.5rem, 5.5vh, 4.5rem); }
    .device { --screen-w: min(calc(52svh * 1080 / 2347), 240px); }
}

@media (min-width: 1024px) {
    .device { --screen-w: min(calc(62svh * 1080 / 2347), 268px); }
}

/* Halo detras del movil */
.device-halo {
    position: absolute;
    width: 120%;
    aspect-ratio: 1;
    border-radius: 50%;
    /* Degradado con paradas suaves en vez de blur: mismo aspecto, sin capa que
       recomponer mientras se scrollea. */
    background: radial-gradient(circle,
        rgba(56, 145, 166, 0.20) 0%,
        rgba(56, 145, 166, 0.10) 32%,
        transparent 68%);
    z-index: -1;
    pointer-events: none;
}


/* ===== Hero: el mensaje arriba, la película debajo ===== */

/* Antes era texto a un lado y un móvil fijo al otro. Ahora el producto lo enseña
   la película (ver film.css), así que arriba solo quedan el titular y una frase
   corta: en escritorio, el titular a la izquierda y la frase a la derecha,
   alineados abajo, para que la película quepa entera en la primera pantalla de
   un portátil. Los botones de las tiendas viven en la barra de arriba. */
.hero {
    padding-block: clamp(0.5rem, 2vh, 1.5rem) clamp(3rem, 7vh, 5.5rem);
}

.hero-top {
    display: grid;
    gap: clamp(1.25rem, 2.6vh, 2rem);
    justify-items: center;
    text-align: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2vh, 1.5rem);
}

.hero-title {
    font-size: clamp(3.25rem, 4.6vw + 0.5rem, 5rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
}

/* En móvil, con un suelo de 3.25rem, cada frase del titular se partía en dos y
   el titular ocupaba media pantalla. Ahora el cuerpo sale del ancho: cada frase
   en una línea. La frase más larga mide 8,3 veces el cuerpo en español e inglés
   (11,3 en alemán) con esta fuente, y el hero tiene 48px de margen, así que el
   cuerpo es (100vw - 48px) / 8,4 (o / 11,45 en alemán). */
@media (max-width: 767px) {
    .hero-title {
        font-size: clamp(1.75rem, 11.9vw - 0.36rem, 3.25rem);
        text-wrap: balance;
    }
    .hero-title:lang(de) { font-size: clamp(1.4rem, 8.6vw - 0.26rem, 3.25rem); }
}

/* La frase: lo que hace la app en una línea, con el remate en blanco. */
.hero-tagline {
    margin: 0;
    max-width: 28rem;
    /* Dos líneas parejas, sin dejar una palabra sola al final. */
    text-wrap: balance;
    font-size: clamp(1.05rem, 0.5vw + 0.85rem, 1.3rem);
    line-height: 1.45;
    font-weight: 500;
    color: #9FB2C8;
}
.hero-tagline strong { color: #fff; font-weight: 700; }

@media (min-width: 1024px) {
    .hero-top {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: end;
        justify-items: stretch;
        column-gap: clamp(2.5rem, 5vw, 5rem);
        text-align: left;
    }
    .hero-copy { align-items: flex-start; }
    /* La frase, abajo a la derecha: mismo borde que la película de debajo. */
    .hero-copy--tagline { align-items: flex-end; }
    /* En media columna el titular a 5rem se partía en tres líneas. */
    .hero-title { font-size: clamp(3.25rem, 3.4vw + 0.6rem, 4.6rem); }
}

/* ===== Titulares de sección ===== */

/* Mismo problema que el hero: `text-8xl` fijo. */
.section-title {
    font-size: clamp(3rem, 4.6vw + 0.5rem, 5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
}

.tour-heading {
    padding-block: clamp(3.5rem, 8vh, 6rem) clamp(1rem, 2vh, 2rem);
}

/* ===== Apoyo al proyecto ===== */

.support {
    padding: clamp(5rem, 12vh, 9rem) 1.5rem;
    display: flex;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 152, 0, 0.10) 0%, transparent 60%),
        #0C1B2A;
    border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.support__inner {
    max-width: 44rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.support__eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    font-weight: 900;
    color: #FF9800;
}

.support__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.9rem, 4.5vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 900;
    color: #fff;
}

.support__desc {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    color: #889DB6;
    font-weight: 500;
    max-width: 34rem;
}

.support__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.5rem;
    padding: 1.05rem 2.4rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: 1rem;
    color: #1a1205;
    background: linear-gradient(135deg, #FFC46B, #FF9800);
    box-shadow: 0 18px 40px -18px rgba(255, 152, 0, 0.9);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.support__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px -18px rgba(255, 152, 0, 1);
}

.support__note {
    font-size: 0.8rem;
    color: #889DB6;
    opacity: 0.7;
}