/* ============================================================
   José & Katty — 24 de octubre de 2026
   Estilo: acuarela botánica.
   Organización: tokens → base → tipografía → componentes →
   secciones en orden de página. Mobile first.
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */

:root{

    /* color */
    --pine:#2A4B44;
    --pine-deep:#1E3630;
    --sage:#5E6E61;
    --gold:#BDA042;
    --gold-soft:rgba(189,160,66,.82);
    --gold-line:rgba(189,160,66,.5);
    --paper:#F4F1E9;
    --paper-warm:#FBFAF6;
    --ink:#2A4B44;

    /* tipografía */
    --serif:'Lora', Georgia, serif;
    --display:'Cormorant Garamond', Georgia, serif;
    --script:'Parisienne', cursive;
    --caps:'Amiri', Georgia, serif;

    /* ritmo */
    --step:clamp(1rem, .6rem + 1.6vw, 1.6rem);
    --seccion:clamp(3.5rem, 2rem + 8vw, 7.5rem);

    /* sombra de las polaroid */
    --sombra:0 14px 34px rgba(42,75,68,.16);

}


/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */

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

[hidden]{
    display:none !important;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-size:clamp(15px, 1.9vw, 17px);
    line-height:1.85;
    overflow-x:hidden;
}

/* La textura de acuarela va en una capa fija propia.
   background-attachment:fixed es poco fiable en iOS; una capa
   position:fixed se comporta igual en todos los navegadores. */
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    background:var(--paper) url('../img/deco/fondo-movil.jpg') center / cover no-repeat;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:var(--pine);
}

::selection{
    background:var(--gold-soft);
    color:#fff;
}

:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}


/* ------------------------------------------------------------
   3. TIPOGRAFÍA
   ------------------------------------------------------------ */

.titulo{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(2.4rem, 1.4rem + 4.4vw, 3.9rem);
    line-height:1.1;
    color:var(--pine);
    letter-spacing:.01em;
    margin-bottom:calc(var(--step) * .9);
}

.titulo--claro{
    color:#fff;
}

/* filete dorado bajo cada título */
.titulo::after{
    content:'';
    display:block;
    width:64px;
    height:1px;
    margin:calc(var(--step) * .8) auto 0;
    background:var(--gold-line);
}

.eyebrow{
    font-family:var(--caps);
    font-weight:700;
    font-size:clamp(.72rem, .6rem + .5vw, .84rem);
    text-transform:uppercase;
    letter-spacing:.22em;
    line-height:1.6;
    color:var(--sage);
}

.bajada{
    font-size:clamp(1rem, .9rem + .5vw, 1.15rem);
    color:var(--sage);
    max-width:34rem;
    margin:0 auto calc(var(--step) * 1.6);
}

.bajada--clara{
    color:rgba(255,255,255,.82);
}

.prosa{
    max-width:38rem;
    margin-inline:auto;
    color:var(--sage);
}

.prosa p + p{
    margin-top:var(--step);
}

.prosa--suelta{
    margin-bottom:calc(var(--step) * 1.8);
}

.prosa__cierre{
    font-family:var(--display);
    font-size:clamp(1.2rem, 1rem + 1vw, 1.5rem);
    font-style:italic;
    color:var(--pine);
}


/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */

.seccion{
    padding:var(--seccion) 2px;
}

.contenido{
    width:min(100% - 2.5rem, 46rem);
    margin-inline:auto;
    text-align:center;
}

.contenido--ancho{
    width:min(100% - 2.5rem, 68rem);
}

/* Divisores animados. Son iconos de línea blanca, así que sólo se
   leen sobre la banda verde — en crema quedarían invisibles. */
.divisor{
    width:min(60%, 13rem);
    height:auto;
    margin:0 auto calc(var(--step) * .6);
}


/* ------------------------------------------------------------
   5. COMPONENTES
   ------------------------------------------------------------ */

/* --- botón dorado --- */

.btn{
    display:inline-block;
    padding:.95rem 2.4rem;
    background:var(--gold-soft);
    color:#fff;
    border:0;
    border-radius:2px;
    font-family:var(--caps);
    font-weight:700;
    font-size:.82rem;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:.15em;
    text-decoration:none;
    cursor:pointer;
    transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.btn:hover,
.btn:focus-visible{
    background:var(--gold);
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(42,75,68,.18);
}

.btn--claro{
    background:transparent;
    border:1px solid var(--gold);
    color:#fff;
}

.btn--claro:hover,
.btn--claro:focus-visible{
    background:var(--gold);
}


/* --- polaroid --- */

.polaroid{
    width:min(78vw, 17rem);
    padding:.85rem .85rem 2.8rem;
    background:#fff;
    box-shadow:var(--sombra);
}

.polaroid img{
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
}

.polaroid--grande{
    width:min(82vw, 21rem);
    margin:0 auto calc(var(--step) * 2);
    transform:rotate(-3deg);
}


/* --- rombo dorado con los nombres ---
   El rombo se dibuja como polígono SVG detrás del texto en vez de
   rotar una caja real: así no hay que contrarrotar el contenido ni
   pelear con el área inscrita, y non-scaling-stroke mantiene el
   filete dorado en 1px a cualquier tamaño. */

.rombo{
    position:relative;
    display:grid;
    place-items:center;
    width:min(88vw, 27rem);
    aspect-ratio:1;
    margin:0 auto;
}

.rombo__marco{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.rombo__marco polygon{
    fill:none;
    stroke:var(--gold);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
}

.rombo__txt{
    position:relative;
    width:74%;
    font-weight:400;
    text-align:center;
}

/* Nombres en cursiva. La caja alta se cambió por caja mixta a
   propósito: una tipografía script en mayúsculas pierde los enlaces
   entre letras y se vuelve ilegible. Tampoco lleva letter-spacing,
   que rompería esos mismos enlaces. */
.rombo__txt span{
    display:block;
    font-family:var(--script);
    font-size:clamp(2.4rem, 1.1rem + 7vw, 4.2rem);
    line-height:1.2;
    letter-spacing:0;
    color:var(--gold);
}

.rombo__txt em{
    display:block;
    font-family:var(--script);
    font-style:normal;
    font-size:clamp(1.4rem, .85rem + 3.2vw, 2.3rem);
    line-height:1.35;
    color:var(--gold);
}


/* ------------------------------------------------------------
   6. HERO + SOBRE
   ------------------------------------------------------------ */

.hero{
    position:relative;
    display:grid;
    place-items:center;
    min-height:100svh;
    padding:var(--step);
    text-align:center;
}

/* El sobre y el contenido comparten celda en vez de posicionarse
   en absoluto: así la celda crece con el más alto de los dos y el
   hero nunca desborda en pantallas bajas. */
.sobre,
.hero__contenido{
    grid-area:1 / 1;
}

/* --- el sobre --- */

.sobre{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    gap:1.2rem;
    width:min(86vw, 23rem);
    aspect-ratio:7 / 5;
    padding-bottom:1.8rem;
    background:var(--paper-warm);
    border:1px solid var(--gold-line);
    box-shadow:var(--sombra);
    cursor:pointer;
    transition:transform .8s ease, opacity .8s ease;
}

/* la solapa triangular */
.sobre__solapa{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:58%;
    background:linear-gradient(160deg, #efe9dc 0%, #e7dfcd 100%);
    clip-path:polygon(0 0, 100% 0, 50% 100%);
}

/* sello: mini rombo con las iniciales, sobre la punta de la solapa */
.sobre__sello{
    position:relative;
    display:grid;
    place-items:center;
    width:5.4rem;
    aspect-ratio:1;
    margin-top:auto;
}

.sobre__sello svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.sobre__sello polygon{
    fill:var(--paper-warm);
    stroke:var(--gold);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
}

.sobre__iniciales{
    position:relative;
    font-family:var(--display);
    font-size:1.5rem;
    letter-spacing:.05em;
    color:var(--gold);
}

.sobre__iniciales em{
    font-family:var(--script);
    font-style:normal;
    font-size:1.1rem;
}

.sobre__txt{
    font-family:var(--caps);
    font-weight:700;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--pine);
}

.sobre.abierto{
    transform:scale(1.12);
    opacity:0;
    pointer-events:none;
}


/* --- contenido del hero (oculto hasta abrir el sobre) --- */

.hero__contenido{
    display:grid;
    align-content:center;
    justify-items:center;
    gap:calc(var(--step) * .8);
    width:100%;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:opacity .9s ease .25s, transform .9s ease .25s, visibility 0s linear 1.15s;
}

.hero.abierto .hero__contenido{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .9s ease .25s, transform .9s ease .25s, visibility 0s;
}

.hero__contenido:focus{
    outline:none;
}

.hero__fecha{
    font-family:var(--caps);
    font-weight:700;
    font-size:clamp(.78rem, .66rem + .5vw, .92rem);
    text-transform:uppercase;
    letter-spacing:.3em;
    color:var(--pine);
}


/* ------------------------------------------------------------
   7. EVENTO — fecha, ceremonia y recepción
   ------------------------------------------------------------ */

.invitacion{
    max-width:32rem;
    margin:0 auto calc(var(--step) * 2);
    font-family:var(--display);
    font-size:clamp(1.25rem, 1rem + 1.4vw, 1.7rem);
    font-style:italic;
    line-height:1.6;
    color:var(--sage);
}

.invitacion strong{
    display:block;
    margin-top:.5rem;
    font-weight:500;
    font-style:normal;
    color:var(--pine);
}

/* --- bloque de fecha: número dorado + mes manuscrito --- */

.fecha{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(.6rem, 2vw, 1.4rem);
    margin-bottom:calc(var(--step) * 2.6);
}

.fecha__dia{
    font-family:var(--display);
    font-weight:300;
    font-size:clamp(5rem, 2rem + 17vw, 9rem);
    line-height:.85;
    color:var(--gold);
}

.fecha__txt{
    display:grid;
    gap:.35rem;
    text-align:left;
}

.fecha__mes{
    font-family:var(--script);
    font-size:clamp(2rem, 1rem + 6vw, 3.4rem);
    line-height:1;
    color:var(--pine);
}

.fecha__hora{
    font-family:var(--caps);
    font-weight:700;
    font-size:clamp(.72rem, .6rem + .55vw, .88rem);
    text-transform:uppercase;
    letter-spacing:.2em;
    color:var(--pine);
}

/* --- lugares --- */

.lugares{
    display:grid;
    gap:calc(var(--step) * 2.4);
}

.lugar__nombre{
    margin:.5rem 0 .6rem;
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
    line-height:1.2;
    color:var(--pine);
}

.lugar__dir{
    color:var(--sage);
}

.lugar__hora{
    margin:.4rem 0 1.3rem;
    font-family:var(--caps);
    font-weight:700;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--gold);
}


/* ------------------------------------------------------------
   8. HISTORIA — collage de polaroids
   ------------------------------------------------------------ */

.collage{
    display:grid;
    justify-items:center;
    gap:var(--step);
    margin-bottom:calc(var(--step) * 2.4);
}

.collage .polaroid:first-child{
    transform:rotate(-4deg);
}

.collage .polaroid:last-child{
    transform:rotate(3deg);
}


/* ------------------------------------------------------------
   9. ITINERARIO
   Móvil: línea vertical dorada. Escritorio: cuerda dorada
   horizontal con las paradas alternando arriba y abajo.
   ------------------------------------------------------------ */

.itinerario{
    position:relative;
    display:grid;
    gap:calc(var(--step) * 1.6);
    padding-left:3.4rem;
    list-style:none;
    text-align:left;
}

.itinerario::before{
    content:'';
    position:absolute;
    top:.5rem;
    bottom:.5rem;
    left:1.4rem;
    width:1px;
    background:var(--gold-line);
}

.hito{
    position:relative;
}

/* Los cuatro iconos son line art sobre blanco sólido, sin canal
   alfa. El medallón les da un fondo claro conocido contra el que
   mix-blend-mode:darken sí recorta el blanco — la textura del papel
   vive en una capa fixed aparte y el blend no puede alcanzarla. */
.hito__icono{
    position:absolute;
    top:50%;
    left:-3.4rem;
    display:grid;
    place-items:center;
    width:2.8rem;
    height:2.8rem;
    padding:.3rem;
    transform:translateY(-50%);
    background:var(--paper-warm);
    border:1px solid var(--gold-line);
    border-radius:50%;
}

.hito__icono img{
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:darken;
}

.hito__nombre{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(1.4rem, 1.1rem + 1.4vw, 1.8rem);
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--pine);
}

.hito__hora{
    display:block;
    font-family:var(--serif);
    font-style:italic;
    font-size:.92rem;
    color:var(--sage);
}


/* ------------------------------------------------------------
   10. DETALLES — dress code
   ------------------------------------------------------------ */

/* Las ilustraciones vienen con el trazo en otro color y el interior
   relleno de gris claro con un halo de "sticker" — que era lo que
   peor cantaba contra el papel crema. brightness+contrast queman ese
   relleno y el halo hasta perderse en el fondo, y el hue-rotate
   lleva el trazo al verde de la paleta. Enmascararlas no servía: el
   alfa es opaco en todo el dibujo y sólo daba siluetas.

   Cada una necesita sus propios valores: parten de colores distintos
   (burdeos una, marrón la otra) y con distinta densidad de trazo, así
   que un filtro compartido dejaba la de regalos casi invisible. */
.ilustracion{
    display:block;
    height:auto;
    margin:0 auto calc(var(--step) * .9);
    /* Sin opacity a nivel de elemento: bajarla desteñía también el
       relleno blanco de las prendas contra el papel crema, y ese
       blanco tiene que leerse como el del swatch "Blanco". El trazo
       se suaviza desde el filtro de cada una. */
}

/* Anchos calculados sobre el PNG ya recortado. Al quitarle el margen
   transparente, el dibujo pasó a ocupar el 100% del ancho en vez del
   65%, así que el mismo valor de antes lo agrandaba ~1.5x. */
.ilustracion--dress{
    width:min(48%, 11rem);
    filter:brightness(1.62) contrast(1.1) hue-rotate(177deg) saturate(.26);
}

/* Más ancha que la de dress code porque el dibujo es apaisado: a
   igual ancho se vería la mitad de alta. Los dos PNG están recortados
   a su dibujo (antes traían mucho margen transparente, que hacía
   imposible igualar tamaños por ancho). */
.ilustracion--regalo{
    width:min(50%, 11.25rem);
    filter:brightness(1.05) contrast(1.95) hue-rotate(150deg) saturate(.3);
}

.colores{
    display:grid;
    gap:calc(var(--step) * 2);
    /* Separa el dress code de Regalos. Comparten sección, pero el
       resto de la página respira 2×--seccion entre bloques; con
       menos que esto los dos se leen como uno solo. */
    margin-bottom:calc(var(--seccion) * 1.7);
}

.color{
    max-width:18rem;
    margin-inline:auto;
}

.color__disco{
    display:block;
    width:4.6rem;
    height:4.6rem;
    margin:0 auto 1.1rem;
    border:1px solid var(--gold-line);
    border-radius:50%;
    box-shadow:0 8px 18px rgba(42,75,68,.1);
}

.color__disco--blanco{
    background:#fff;
}

.color__disco--azul{
    background:#24364d;
}

.color__nombre{
    margin-bottom:.35rem;
    font-family:var(--display);
    font-weight:400;
    font-size:1.5rem;
    color:var(--pine);
}

.color p{
    font-size:.95rem;
    color:var(--sage);
}


/* ------------------------------------------------------------
   11. BANDA VERDE — cuenta regresiva + confirmación
   ------------------------------------------------------------ */

.banda{
    position:relative;
    margin-top:clamp(2.5rem, 7vw, 6rem);
    padding:calc(var(--seccion) * .9) 2px var(--seccion);
    background:var(--pine);
    color:#fff;
}

/* borde superior de follaje: se enmascara la silueta para que el
   verde salga del token y no pueda desincronizarse de la banda */
.banda::before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    height:clamp(34px, 7vw, 96px);
    background:var(--pine);
    -webkit-mask:url('../img/deco/hojas-borde.png') bottom center / 100% 100% no-repeat;
            mask:url('../img/deco/hojas-borde.png') bottom center / 100% 100% no-repeat;
}

/* --- cuenta regresiva --- */

.cuenta{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:clamp(.5rem, 3vw, 2.2rem);
    margin-bottom:calc(var(--seccion) * .8);
}

.cuenta__celda{
    position:relative;
    min-width:clamp(3.6rem, 17vw, 6rem);
}

/* filete dorado entre celdas */
.cuenta__celda + .cuenta__celda::before{
    content:'';
    position:absolute;
    top:.9rem;
    bottom:.9rem;
    left:calc(clamp(.5rem, 3vw, 2.2rem) / -2);
    width:1px;
    background:var(--gold-line);
}

.cuenta__num{
    display:block;
    font-family:var(--display);
    font-weight:300;
    font-size:clamp(2.4rem, 1.2rem + 6vw, 4rem);
    line-height:1.1;
    color:var(--gold);
    font-variant-numeric:tabular-nums;
}

.cuenta__lab{
    display:block;
    font-family:var(--caps);
    font-weight:400;
    font-size:clamp(.62rem, .55rem + .3vw, .74rem);
    text-transform:uppercase;
    letter-spacing:.16em;
    color:rgba(255,255,255,.75);
}

.cuenta__espera,
.cuenta__final{
    font-family:var(--display);
    font-size:clamp(1.5rem, 1rem + 2.4vw, 2.2rem);
    color:var(--gold);
}

/* --- formulario RSVP sobre verde --- */

.rsvp{
    padding-top:calc(var(--step) * 1.5);
}

#rsvpForm{
    display:grid;
    gap:calc(var(--step) * 1.35);
    width:min(100%, 30rem);
    margin:calc(var(--step) * 1.4) auto 0;
    text-align:left;
}

.campo{
    display:grid;
    gap:.5rem;
}

.campo label,
.opciones legend{
    font-family:var(--caps);
    font-weight:700;
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:rgba(255,255,255,.8);
}

#rsvpForm input[type="text"],
#rsvpForm textarea{
    width:100%;
    padding:.7rem .2rem;
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(189,160,66,.55);
    color:#fff;
    font-family:var(--serif);
    font-size:1rem;
    line-height:1.6;
    transition:border-color .3s ease;
}

#rsvpForm input[type="text"]:focus,
#rsvpForm textarea:focus{
    outline:none;
    border-bottom-color:var(--gold);
}

#rsvpForm textarea{
    resize:vertical;
}

.opciones{
    border:0;
}

.opciones legend{
    margin-bottom:.7rem;
}

.opcion{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-right:1.8rem;
    cursor:pointer;
}

.opcion input{
    width:1.05rem;
    height:1.05rem;
    accent-color:var(--gold);
    cursor:pointer;
}

.campo--error input,
.campo--error textarea{
    border-bottom-color:#e5a3a3;
}

.opciones--error legend{
    color:#e5a3a3;
}

#rsvpForm .btn{
    justify-self:center;
    margin-top:.4rem;
}

.mensaje{
    min-height:1.4rem;
    font-size:.95rem;
    text-align:center;
    color:var(--gold);
}

.mensaje--error{
    color:#e5a3a3;
}


/* ------------------------------------------------------------
   12. CIERRE
   ------------------------------------------------------------ */

.cierre{
    padding:var(--seccion) 2px calc(var(--seccion) * .7);
    text-align:center;
}

.cierre__aviso{
    font-family:var(--caps);
    font-weight:700;
    font-size:clamp(.74rem, .64rem + .45vw, .86rem);
    text-transform:uppercase;
    letter-spacing:.2em;
    color:var(--sage);
}

.cierre__despedida{
    margin-top:calc(var(--step) * 1.6);
    font-family:var(--display);
    font-size:clamp(1.5rem, 1.1rem + 2.2vw, 2.2rem);
    font-style:italic;
    line-height:1.5;
    color:var(--pine);
}

.cierre__monograma{
    margin-top:calc(var(--step) * 1.4);
    font-family:var(--display);
    font-size:clamp(3rem, 2rem + 5vw, 4.6rem);
    line-height:1;
    color:var(--gold);
}

.cierre__monograma em{
    font-family:var(--script);
    font-style:normal;
    font-size:.62em;
}


/* ------------------------------------------------------------
   13. REPRODUCTOR DE MÚSICA (dentro del hero)
   ------------------------------------------------------------ */

.reproductor{
    display:flex;
    align-items:center;
    gap:.85rem;
    width:min(100%, 17rem);
    margin-top:calc(var(--step) * .6);
}

.reproductor__btn{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:2.6rem;
    height:2.6rem;
    padding:0;
    background:transparent;
    color:var(--gold);
    border:1px solid var(--gold-line);
    border-radius:50%;
    cursor:pointer;
    transition:background .3s ease, color .3s ease, border-color .3s ease;
}

.reproductor__btn:hover,
.reproductor__btn:focus-visible{
    background:var(--gold);
    border-color:var(--gold);
    color:#fff;
}

.reproductor__ico{
    width:1.35rem;
    height:1.35rem;
    fill:currentColor;
}

/* un solo icono a la vez, según el estado real del audio */
.reproductor__ico--pausa{ display:none; }

.reproductor__btn[aria-pressed="true"] .reproductor__ico--play{ display:none; }
.reproductor__btn[aria-pressed="true"] .reproductor__ico--pausa{ display:block; }

/* barra de avance: accent-color basta para teñir el nativo en
   todos los navegadores actuales, y así conserva el teclado */
.reproductor__barra{
    flex:1 1 auto;
    width:100%;
    height:2px;
    margin:0;
    accent-color:var(--gold);
    background:var(--gold-line);
    border-radius:2px;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

.reproductor__barra::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:.7rem;
    height:.7rem;
    background:var(--gold);
    border:0;
    border-radius:50%;
}

.reproductor__barra::-moz-range-thumb{
    width:.7rem;
    height:.7rem;
    background:var(--gold);
    border:0;
    border-radius:50%;
}

.reproductor__tiempo{
    flex:0 0 auto;
    min-width:2.6rem;
    font-family:var(--caps);
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.1em;
    color:var(--sage);
    font-variant-numeric:tabular-nums;
}


/* ------------------------------------------------------------
   14. TABLET — 760px
   ------------------------------------------------------------ */

@media (min-width:760px){

    body::before{
        background-image:url('../img/deco/fondo.jpg');
    }

    /* collage: las polaroid se superponen */
    .collage{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:0;
        align-items:start;
    }

    .collage .polaroid:first-child{
        justify-self:end;
        margin-right:-14%;
        transform:rotate(-6deg);
        z-index:2;
    }

    .collage .polaroid:last-child{
        justify-self:start;
        margin-left:-14%;
        margin-top:9%;
        transform:rotate(4deg);
    }

    /* Variante sin superposición. El hueco tiene que superar lo que
       las esquinas ganan al rotar (la rotación ocurre después del
       layout, así que la caja no crece sola y si no se tocan). */
    .collage--separado{
        gap:calc(var(--step) * 2.5);
    }

    .collage--separado .polaroid:first-child{
        margin-right:0;
    }

    .collage--separado .polaroid:last-child{
        margin-left:0;
        margin-top:5%;
    }

    /* los dos lugares, lado a lado con separador dorado */
    .lugares{
        grid-template-columns:1fr 1px 1fr;
        gap:calc(var(--step) * 1.8);
        align-items:start;
    }

    /* columnas explícitas: el ::before va primero en orden de DOM,
       así que dejar cualquiera en auto desordena la fila */
    .lugares .lugar:first-child{
        grid-column:1;
    }

    .lugares::before{
        content:'';
        grid-column:2;
        align-self:stretch;
        background:var(--gold-line);
    }

    .lugares .lugar:last-child{
        grid-column:3;
    }

    .colores{
        grid-template-columns:repeat(2, 1fr);
        gap:calc(var(--step) * 2.5);
    }

}


/* ------------------------------------------------------------
   15. ESCRITORIO — 900px: la cuerda del itinerario
   ------------------------------------------------------------ */

@media (min-width:900px){

    .itinerario{
        grid-template-columns:repeat(4, 1fr);
        align-items:center;
        gap:0;
        min-height:27rem;
        padding-left:0;
        text-align:center;
    }

    .itinerario::before{
        top:50%;
        bottom:auto;
        left:0;
        right:0;
        width:auto;
        height:10rem;
        transform:translateY(-50%);
        background:url('../img/deco/rope.svg') center / 100% 100% no-repeat;
    }

    .hito{
        padding-inline:.6rem;
    }

    /* Las paradas alternan por encima y por debajo de la cuerda.
       El desplazamiento (8rem) debe superar la media altura de la
       parada más la amplitud de la cuerda (±2.25rem), o las
       etiquetas se montan sobre el trazo. transform en vez de
       margin: no altera la altura de la fila, ya fijada arriba. */
    .hito--arriba{
        transform:translateY(-8rem);
    }

    .hito--abajo{
        transform:translateY(8rem);
    }

    .hito__icono{
        position:static;
        width:5.4rem;
        height:5.4rem;
        padding:.75rem;
        margin:0 auto .9rem;
        transform:none;
        transition:transform .3s ease;
    }

    .hito:hover .hito__icono{
        transform:scale(1.06);
    }

}


/* ------------------------------------------------------------
   16. PREFERENCIAS DE MOVIMIENTO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .hero__contenido{
        transform:none;
    }

}