/* Generado desde la web de la boda (npm run web-hotel): no editar a mano */
/* Tipografías servidas desde la propia web (sin Google): más privacidad para los invitados (RGPD) y sin depender de nadie.
   Archivos en fuentes/ (licencia SIL Open Font License). Solo el alfabeto latino (español, catalán, alemán, italiano). */
@font-face{font-family:"Allura";font-style:normal;font-weight:400;font-display:swap;src:url("../fuentes/allura.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fuentes/eb-garamond-cursiva.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fuentes/eb-garamond.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fuentes/montserrat.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("../fuentes/playfair-cursiva.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fuentes/playfair.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Dibujos de la web (SVG dentro del CSS). Colores: gris pizarra #4f5e69 y oro viejo #8a6d2a.
   Para cambiar un dibujo, cambia su variable aquí; se usa en el resto de archivos con var(--nombre). */
:root{
  /* Rosa de los vientos (fondo de la portada) */
  --compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='.8'%3E%3Ccircle r='92'/%3E%3Ccircle r='86' stroke-dasharray='1 5'/%3E%3Ccircle r='60'/%3E%3Ccircle r='18'/%3E%3Cpath d='M0-96V96M-96 0H96M-68-68L68 68M-68 68L68-68' stroke-width='.4'/%3E%3C/g%3E%3Cg fill='%234f5e69'%3E%3Cpath d='M0-80L9-9 0 0-9-9z'/%3E%3Cpath d='M0 80L9 9 0 0-9 9z' opacity='.45'/%3E%3Cpath d='M80 0L9 9 0 0 9-9z' opacity='.45'/%3E%3Cpath d='M-80 0L-9 9 0 0-9-9z' opacity='.45'/%3E%3Cpath d='M38-38L5 0 0 0 0-5z' opacity='.3'/%3E%3Cpath d='M-38 38L-5 0 0 0 0 5z' opacity='.3'/%3E%3Cpath d='M38 38L0 5 0 0 5 0z' opacity='.3'/%3E%3Cpath d='M-38-38L0-5 0 0-5 0z' opacity='.3'/%3E%3Ctext y='-62' font-family='Georgia,serif' font-size='13' text-anchor='middle' dy='-8'%3EN%3C/text%3E%3C/g%3E%3C/svg%3E");
  /* Matasellos «Mallorca 02·10·2027» */
  --postmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%234f5e69' opacity='.75'%3E%3Ccircle cx='60' cy='60' r='44' stroke-width='2'/%3E%3Ccircle cx='60' cy='60' r='30' stroke-width='1'/%3E%3C/g%3E%3Cdefs%3E%3Cpath id='a' d='M24 60a36 36 0 1 1 72 0'/%3E%3Cpath id='b' d='M22 64a38 38 0 0 0 76 0'/%3E%3C/defs%3E%3Ctext font-family='Georgia,serif' font-size='11' letter-spacing='3' fill='%234f5e69' opacity='.8'%3E%3CtextPath href='%23a' startOffset='50%25' text-anchor='middle'%3EMALLORCA%3C/textPath%3E%3C/text%3E%3Ctext font-family='Georgia,serif' font-size='9' letter-spacing='2' fill='%234f5e69' opacity='.8'%3E%3CtextPath href='%23b' startOffset='50%25' text-anchor='middle'%3E02 · 10 · 2027%3C/textPath%3E%3C/text%3E%3Cpath d='M48 61l22-8-3-2-7 2-6-5-2 1 3 5-6 2-2-1-1 1 3 3z' fill='%234f5e69' opacity='.8'/%3E%3C/svg%3E");
  /* Autobús moderno con su carretera discontinua (encima del título de Autobuses) */
  --bus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80'%3E%3Cpath d='M6 67H294' fill='none' stroke='%234f5e69' stroke-width='1.6' stroke-dasharray='5 6' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M150 56V26Q150 18 158 18H266Q279 18 281 31L283 52Q283 56 279 56H254A10 10 0 0 0 234 56H188A10 10 0 0 0 168 56Z'/%3E%3Cpath d='M156 24H250V40H156ZM180 24V40M204 24V40M228 24V40'/%3E%3Cpath d='M256 24H272Q276 25 277 40H256Z'/%3E%3Cpath d='M262 44V54H274V44Z' stroke-width='1.4'/%3E%3Cpath d='M154 46H252' stroke-width='1.2' stroke-dasharray='1.5 3.5'/%3E%3Cpath d='M279 46H282' /%3E%3Ccircle cx='178' cy='58' r='7'/%3E%3Ccircle cx='244' cy='58' r='7'/%3E%3Ccircle cx='178' cy='58' r='2.2'/%3E%3Ccircle cx='244' cy='58' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  /* Separador entre secciones: línea fina con avión */
  --sep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cpath d='M0 10H122M178 10H300' stroke='%238a6d2a' stroke-width='.8'/%3E%3Ccircle cx='126' cy='10' r='1.6' fill='%238a6d2a'/%3E%3Ccircle cx='174' cy='10' r='1.6' fill='%238a6d2a'/%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round' transform='translate(150 10) scale(.32)'%3E%3Cpath d='M-40 -2 L28 -5 C40 -5 47 -2 47 0 C47 2 40 5 28 5 L-34 4 C-38 3.5 -40 1 -40 -2Z' stroke-width='4'/%3E%3Cpath d='M6 4 L-10 27 L-3 27 L20 5M8 -5 L-2 -19 L3 -19 L18 -5M-30 -2.6 L-41 -17 L-35 -17 L-22 -3' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
  /* Icono percha (vestimenta) */
  --ico-hanger:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234f5e69' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 15a4 4 0 1 1 4-4M24 15v3L8 30h32L24 18'/%3E%3C/svg%3E");
  /* Icono paleta (colores) */
  --ico-palette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%234f5e69' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M24 9C15 9 8 15 8 23s6 15 14 15c2 0 3-1 3-3s-1-2-1-4 1-3 3-3h5c5 0 8-3 8-8 0-6-7-11-16-11z'/%3E%3Ccircle cx='16' cy='22' r='2'/%3E%3Ccircle cx='21' cy='15' r='2'/%3E%3Ccircle cx='29' cy='15' r='2'/%3E%3Ccircle cx='34' cy='21' r='2'/%3E%3C/svg%3E");
  /* Grano de papel / película, muy suave */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Avión de hélice antiguo y maleta retro con pegatinas (dibujos de fondo, ver fondos.css) */
  --avion-retro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'%3E %3Cpath d='M24 60C46 50 196 46 248 51C266 53 280 58 287 63C281 69 262 72 240 72L44 74C30 74 20 70 24 60Z'/%3E %3Cpath d='M34 58L20 26L32 26L56 56'/%3E%3Cpath d='M36 67L12 75L22 77L54 71'/%3E %3Cpath d='M40 64.5L252 62' stroke-width='.7'/%3E %3Cpath d='M262 55L274 58L272 62L260 61Z'/%3E %3Crect x='212' y='55' width='7' height='12' rx='2'/%3E %3Cpath d='M128 70L100 96L116 98L168 72'/%3E %3Cellipse cx='126' cy='81' rx='15' ry='5'/%3E%3Cpath d='M141 72V90' stroke-width='1'/%3E%3Ccircle cx='141' cy='81' r='1.6'/%3E %3Cellipse cx='154' cy='76' rx='12' ry='4'/%3E%3Cpath d='M166 69V83' stroke-width='1'/%3E %3C/g%3E%3Cg fill='%234f5e69'%3E%3Ccircle cx='70' cy='58' r='1.9'/%3E%3Ccircle cx='82' cy='58' r='1.9'/%3E%3Ccircle cx='94' cy='58' r='1.9'/%3E%3Ccircle cx='106' cy='58' r='1.9'/%3E%3Ccircle cx='118' cy='58' r='1.9'/%3E%3Ccircle cx='130' cy='58' r='1.9'/%3E%3Ccircle cx='142' cy='58' r='1.9'/%3E%3Ccircle cx='154' cy='58' r='1.9'/%3E%3Ccircle cx='166' cy='58' r='1.9'/%3E%3Ccircle cx='178' cy='58' r='1.9'/%3E%3Ccircle cx='190' cy='58' r='1.9'/%3E%3Ccircle cx='202' cy='58' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
  --maleta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 124'%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='1.3' stroke-linejoin='round'%3E %3Cpath d='M62 32V22C62 15 98 15 98 22V32'/%3E%3Cpath d='M68 32V25C68 21 92 21 92 25V32'/%3E %3Crect x='8' y='32' width='144' height='84' rx='9'/%3E %3Crect x='14' y='38' width='132' height='72' rx='6' stroke-dasharray='2 3' stroke-width='.8'/%3E %3Crect x='38' y='32' width='12' height='84'/%3E%3Crect x='110' y='32' width='12' height='84'/%3E %3Crect x='36' y='68' width='16' height='10' rx='1.5'/%3E%3Crect x='108' y='68' width='16' height='10' rx='1.5'/%3E %3Cpath d='M8 46V41C8 36 12 32 17 32H22M152 46V41C152 36 148 32 143 32H138M8 102V107C8 112 12 116 17 116H22M152 102V107C152 112 148 116 143 116H138' stroke-width='2.4'/%3E %3Ccircle cx='80' cy='60' r='15'/%3E%3Ccircle cx='80' cy='60' r='11' stroke-width='.6'/%3E %3Crect x='62' y='84' width='34' height='16' rx='2' transform='rotate%28-8 79 92%29'/%3E %3C/g%3E%3Cg fill='%234f5e69' font-family='Georgia,serif' text-anchor='middle'%3E%3Ctext x='80' y='62.5' font-size='6' textLength='20' lengthAdjust='spacingAndGlyphs'%3EPALMA%3C/text%3E%3Ctext x='79' y='94.3' font-size='6' textLength='27' lengthAdjust='spacingAndGlyphs' transform='rotate%28-8 79 92%29'%3EMALLORCA%3C/text%3E%3C/g%3E %3Cg fill='%234f5e69'%3E%3Ccircle cx='30' cy='120' r='3'/%3E%3Ccircle cx='130' cy='120' r='3'/%3E%3C/g%3E%3C/svg%3E");
  /* Dibujos a mano para los fondos (estilo boceto: mapa, globo con avión, postal con palmera, gafas y sombrero) */
  --mapa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 210'%3E%3Cdefs%3E%3Cfilter id='m' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23m)'%3E %3Cpath d='M14 46L82 58L56 178L4 166Z'/%3E%3Cpath d='M82 58L146 38L126 196L56 178'/%3E%3Cpath d='M146 38L192 18L212 158L126 196'/%3E %3Cpath d='M15 49L80 60' stroke-width='.9'/%3E%3Cpath d='M147 42L190 23' stroke-width='.9'/%3E %3Cpath d='M20 128C30 104 46 102 54 118C62 136 78 146 96 138C112 130 116 108 132 104C142 102 150 108 156 116' stroke-dasharray='7 6' stroke-width='1.6'/%3E %3Cpath d='M170 106C160 92 154 84 154 74A16 16 0 1 1 186 74C186 84 180 92 170 106Z'/%3E%3Ccircle cx='170' cy='73' r='5.5'/%3E %3Cpath d='M170 112l3 3' stroke-width='1.4'/%3E%3Cg transform='translate(26 64) rotate(8) scale(1)' stroke-width='1.3'%3E%3Cpath d='M-4 -7L-6 7M3 -7L1 7M-8 -2L7 -3M-8 3L6 2'/%3E%3C/g%3E%3Cg transform='translate(196 150) rotate(-6) scale(1.1)' stroke-width='1.3'%3E%3Cpath d='M-4 -7L-6 7M3 -7L1 7M-8 -2L7 -3M-8 3L6 2'/%3E%3C/g%3E%3Cg transform='translate(96 176) rotate(0) scale(0.8)' stroke-width='1.3'%3E%3Cpath d='M-4 -7L-6 7M3 -7L1 7M-8 -2L7 -3M-8 3L6 2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --globo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cdefs%3E%3Cfilter id='m' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23m)'%3E %3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='105' cy='150' r='82'/%3E%3C/clipPath%3E%3C/defs%3E %3Ccircle cx='105' cy='150' r='82'/%3E%3Ccircle cx='105' cy='150' r='79' stroke-width='.8'/%3E %3Cg clip-path='url(%23c)'%3E%3Cg transform='rotate(-18 105 150)'%3E %3Cellipse cx='105' cy='150' rx='34' ry='84'/%3E%3Cellipse cx='105' cy='150' rx='64' ry='84'/%3E%3Cpath d='M105 64V236'/%3E %3Cpath d='M15 150Q105 172 195 150'/%3E%3Cpath d='M22 110Q105 128 188 110'/%3E%3Cpath d='M22 190Q105 210 188 190'/%3E %3C/g%3E%3C/g%3E %3Cg transform='translate(188 58) rotate(-24)'%3E %3Cpath d='M-44 0C-30 -6 20 -8 34 -6C42 -5 48 -2 50 0C48 2 42 5 34 6C20 8 -30 6 -44 0Z'/%3E %3Cpath d='M-6 -6L-22 -32L-12 -32L14 -6'/%3E%3Cpath d='M-6 6L-22 32L-12 32L14 6'/%3E %3Cpath d='M-40 -2L-48 -16L-42 -16L-30 -3'/%3E%3Cpath d='M-40 2L-46 10L-41 10L-32 4'/%3E %3Cpath d='M-28 -1L26 -1' stroke-dasharray='2 4' stroke-width='1.4'/%3E %3C/g%3E%3Cg transform='translate(56 94) rotate(-20) scale(0.9)' stroke-width='1.3'%3E%3Cpath d='M-4 -7L-6 7M3 -7L1 7M-8 -2L7 -3M-8 3L6 2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --postal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 250'%3E%3Cdefs%3E%3Cfilter id='m' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23m)'%3E %3Cg transform='rotate(13 105 125)'%3E %3Crect x='22' y='22' width='166' height='206'/%3E%3Crect x='34' y='34' width='142' height='164' stroke-width='1.4'/%3E %3Cpath d='M44 176C58 170 70 178 84 172C98 166 110 176 124 170C138 164 150 172 166 168' stroke-width='1.5'/%3E %3Cpath d='M50 188C66 184 80 190 96 186M110 186C126 182 140 188 158 184' stroke-width='1.2'/%3E %3Cpath d='M56 170C70 150 108 148 130 166' stroke-width='1.6'/%3E %3Cpath d='M98 156C100 132 98 112 92 96' /%3E%3Cpath d='M104 156C106 132 104 112 98 96' stroke-width='1.3'/%3E %3Cpath d='M94 96C80 86 62 90 52 102C66 96 80 96 94 98Z'/%3E %3Cpath d='M94 96C92 80 80 70 64 70C78 76 88 86 92 98'/%3E %3Cpath d='M95 96C106 82 124 80 138 90C124 88 110 92 97 99Z'/%3E %3Cpath d='M96 96C110 92 128 100 134 116C122 104 108 100 96 99'/%3E %3Cpath d='M94 97C86 104 82 116 84 128C88 116 92 106 96 99'/%3E %3Cpath d='M100 120l6 3M101 132l6 2M101 144l5 2' stroke-width='1.1'/%3E %3Cpath d='M56 56q5-5 10 0q5-5 10 0' stroke-width='1.5'/%3E%3Cpath d='M126 50q4-4 8 0q4-4 8 0' stroke-width='1.4'/%3E%3Cpath d='M150 70q3-3 6 0q3-3 6 0' stroke-width='1.2'/%3E %3C/g%3E%3C/g%3E%3C/svg%3E");
  --gafas-sombrero:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 275'%3E%3Cdefs%3E%3Cfilter id='m' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%234f5e69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23m)'%3E %3Cg transform='rotate(8 115 70)'%3E %3Cpath d='M18 58C16 50 22 46 32 46H86C96 46 100 52 98 62C94 86 82 100 62 100C38 100 22 86 18 58Z'/%3E %3Cpath d='M128 50C128 44 134 40 144 40H198C208 40 212 46 210 56C206 80 194 94 174 94C150 94 132 80 128 50Z'/%3E %3Cpath d='M98 56C106 48 120 46 128 50'/%3E %3Cpath d='M18 56L4 62' /%3E%3Cpath d='M210 50C214 40 214 30 206 22L194 20'/%3E %3Cpath d='M40 64l12 -6M44 72l14 -7M70 82l12 -6M72 74l8 -4' stroke-width='1.2'/%3E %3Cpath d='M150 60l14 -7M154 68l14 -7M182 76l10 -5' stroke-width='1.2'/%3E %3C/g%3E %3Cpath d='M26 226C26 196 52 174 86 174C120 174 144 196 144 226'/%3E %3Cpath d='M28 214C60 228 112 228 142 214' stroke-width='1.4'/%3E%3Cpath d='M27 222C60 236 112 236 143 222' stroke-width='1.4'/%3E %3Cpath d='M26 226C4 234 -2 250 20 256C60 266 150 262 198 248C222 240 218 224 190 220C176 218 160 220 144 224'/%3E %3Cpath d='M30 250C80 256 150 254 196 242' stroke-width='1'/%3E %3Cpath d='M90 186l10 -6M94 194l12 -7M100 202l10 -6M104 186l8 -4' stroke-width='1.2'/%3E %3Cpath d='M178 236l10 -4M182 244l8 -3' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Base de la web: colores, tipografías, medidas y estilos generales.
   Para cambiar el aspecto de toda la web, empieza por las variables de :root.
   Orden de los archivos: dibujos.css → base.css → componentes.css → portada.css → secciones.css */

:root{
  color-scheme:light; /* sin modo oscuro: la web se ve siempre clara */

  /* Colores */
  --bg:#efebe4;      /* fondo beige */
  --stone:#f7f4ef;   /* fondo blanco roto de las bandas alternas */
  --paper:#fffefb;   /* tarjetas */
  --ink:#2f3c46;     /* texto y títulos: gris pizarra */
  --muted:#4e5a63;   /* texto secundario (oscuro para que se lea bien) */
  --gold:#8a6d2a;    /* detalles: oro viejo (líneas, dibujos, bordes) */
  --gold-text:#735a20; /* oro viejo algo más oscuro para letras: se lee bien (contraste AA) */
  --line:#d9d1c2;    /* líneas finas */
  --deep:#2f3c46;    /* botones */
  --deep-hover:#1f2930;
  --on-deep:#ffffff;
  --danger:#9c2f1e;

  /* Tipografías */
  --display:"Playfair Display",Georgia,serif;          /* títulos */
  --script:"Allura","Snell Roundhand",cursive;         /* nombres, escritos a mano */
  --body:"EB Garamond",Garamond,Georgia,serif;          /* texto: serifa clásica, más formal */
  --caps:"Montserrat","Helvetica Neue",Arial,sans-serif;/* letras pequeñas en mayúsculas (rótulos, botones, menú) */

  /* Medidas */
  --nav-h:56px;
  --radius:2px;
  --shadow:0 1px 1px rgba(47,60,70,.03),0 6px 22px rgba(47,60,70,.05);
  --ease:cubic-bezier(.22,.61,.36,1); /* movimiento suave, tipo vídeo */
}

/* Reinicio */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;font-size:19px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Grano de película muy suave sobre toda la página (no se puede pulsar) */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background:var(--grain);opacity:.035;mix-blend-mode:multiply}

/* Tipografía */
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);text-wrap:balance;margin:0}
h2{font-size:clamp(32px,5.6vw,46px);line-height:1.15;letter-spacing:.01em;margin-bottom:30px}
h3{font-weight:500}
/* Cabecera de cada sección centrada, como en una invitación impresa */
.band>.wrap>.eyebrow,.band>.wrap>h2{justify-content:center;text-align:center}
.band>.wrap>.eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.band>.wrap>h2+p{text-align:center;margin-inline:auto}
/* Párrafos de texto seguido: alineados a la izquierda con todo el ancho (como las tarjetas) */
.band>.wrap>h2+p.texto,.band>.wrap>p.texto{text-align:left;max-width:none;margin:0 0 14px}
.band>.wrap>p.texto a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
p{margin:0 0 12px;max-width:62ch}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7;flex:none} /* rayita fina delante */
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.lead{font-size:clamp(20px,2.6vw,22px);font-style:italic;color:var(--muted)}
.small{font-size:16px;color:var(--muted);margin-top:16px}
.center{text-align:center}
.center p{margin-inline:auto}

/* Datos pendientes de confirmar: subrayado discontinuo (quitar la clase al confirmarlos) */
.ph{border-bottom:1px dashed var(--gold)}

/* Contenedores y bandas */
.wrap{max-width:760px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap.wide{max-width:1040px}
.band{padding-block:clamp(72px,11vw,120px)}
.band.stone{background:var(--stone)}
/* Separador al principio de cada sección: línea fina con avión */
main .band::before,footer::before{content:"";display:block;width:min(280px,60%);height:18px;margin:0 auto clamp(48px,7vw,76px);
  background:var(--sep) center/contain no-repeat;opacity:.9}

/* Accesibilidad y avisos */
.skip{position:absolute;left:-9999px;top:8px;background:var(--paper);color:var(--ink);padding:8px 14px;z-index:300}
.skip:focus{left:8px}
.draft{background:var(--stone);color:var(--ink);font-family:var(--caps);font-size:12px;letter-spacing:.06em;text-align:center;padding-block:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Aparición al hacer scroll, como en los vídeos de boda: sube, se enfoca y aparece.
   Los hijos de cada bloque .reveal entran uno detrás de otro. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal>*{opacity:0;transform:translateY(22px);filter:blur(4px);
    transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
  .reveal.in>*{opacity:1;transform:none;filter:none}
  .reveal.in>:nth-child(2){transition-delay:.12s}
  .reveal.in>:nth-child(3){transition-delay:.24s}
  .reveal.in>:nth-child(4){transition-delay:.36s}
  .reveal.in>:nth-child(5){transition-delay:.48s}
  .reveal.in>:nth-child(n+6){transition-delay:.6s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Piezas que se repiten en toda la web (y en el panel): botones, enlaces, tarjetas, formularios,
   preguntas desplegables, visor de fotos y avisos. */

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:15px 30px;
  font:inherit;font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--deep);color:var(--on-deep);border:1px solid var(--deep);border-radius:2px;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{background:var(--deep-hover);border-color:var(--deep-hover)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--on-deep)}
.btn:disabled{opacity:.5;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.center .btns,.btns.centered{justify-content:center}

/* ---------- Enlaces ---------- */
a.link{width:fit-content;color:var(--ink);font-family:var(--caps);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:1px}
a.link:hover{color:var(--gold-text)}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:17px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Tarjetas ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--paper);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;min-width:0;display:flex;flex-direction:column;gap:6px}
.card h3{font-size:25px;line-height:1.2}
.card p{font-size:17px;margin:6px 0 0}
.meta{font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.icon{width:30px;height:30px;color:var(--gold-text);margin-bottom:6px}

/* ---------- Formularios ---------- */
label{display:grid;gap:6px;font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.opt{color:var(--muted)}
input,select,textarea{width:100%;padding:12px 14px;font:inherit;font-family:var(--body);font-size:18px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);text-transform:none;letter-spacing:normal;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(138,109,42,.12)}
input[aria-invalid="true"]{border-color:var(--danger)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
fieldset{border:0;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
legend{font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;padding:0}
/* Opciones tipo botón (Viene / No viene) */
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:block;padding:12px 18px;border:1px solid var(--line);cursor:pointer;font-size:12px;letter-spacing:.14em;transition:background-color .2s,color .2s}
.choice input:checked+span{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.choice input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* campo trampa para robots */
.status{font-size:16px;color:var(--muted);margin:0}
.status.err{color:var(--danger)}
.check{display:flex;align-items:center;gap:10px;font-family:var(--body);font-size:17px;text-transform:none;letter-spacing:normal;font-weight:400}
.check input{width:auto}
@media (max-width:560px){.row{grid-template-columns:1fr}}

/* ---------- Preguntas desplegables ---------- */
details{border-top:1px solid var(--line);padding:20px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--display);font-size:21px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold-text);font-family:var(--body);font-weight:300;font-size:24px;line-height:1;transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:10px;font-size:18px}

/* ---------- Visor de fotos ---------- */
dialog.lightbox{padding:0;border:0;background:transparent;max-width:min(94vw,1100px);max-height:92vh}
dialog.lightbox::backdrop{background:rgba(20,24,28,.92)}
dialog.lightbox img{max-height:86vh;width:auto;margin:auto}
dialog.lightbox .close{position:fixed;top:16px;right:16px;min-height:0;padding:10px 14px}

/* ---------- Aviso flotante ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:150;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--deep);color:var(--on-deep);padding:12px 20px;font-family:var(--caps);font-size:12px;letter-spacing:.06em;border-radius:2px;transition:opacity .3s,transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Barra de navegación, portada (con su entrada animada) y la frase destacada. */

/* ---------- Barra fija (aparece al bajar de la portada) ---------- */
.topnav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:18px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  transform:translateY(-100%);transition:transform .5s var(--ease)}
.topnav.show{transform:none}
.topnav .mono{flex:none;font-family:var(--script);font-size:32px;line-height:1;text-decoration:none;color:var(--ink)}
.topnav .mono span{color:var(--gold-text);font-size:.8em;margin:0 2px}
.topnav nav{flex:1;display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  mask-image:linear-gradient(90deg,#000 85%,transparent)}
.topnav nav::-webkit-scrollbar{display:none}
.topnav nav a{white-space:nowrap;text-decoration:none;opacity:.7;padding-block:6px;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s}
.topnav nav a:hover,.topnav nav a.active{opacity:1;border-color:var(--gold)}
.topnav .cta{flex:none;min-height:0;padding:9px 16px;font-size:11.5px}
@media (max-width:560px){.topnav .cta{display:none}}

/* ---------- Portada ---------- */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding-block:96px 80px;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,var(--stone) 0%,var(--bg) 70%)}
/* Rosa de los vientos de fondo, girando muy despacio */
.hero::before{content:"";position:absolute;right:-110px;bottom:-90px;width:clamp(280px,42vw,520px);aspect-ratio:1;
  background:var(--compass) center/contain no-repeat;opacity:.1;pointer-events:none}
/* Foto de portada opcional (img/portada.jpg), con zoom lento */
.hero .bgimg{position:absolute;inset:0;background:center 62%/cover no-repeat;opacity:0;transition:opacity 2s var(--ease)}
.hero.con-foto .bgimg{opacity:.85;filter:contrast(1.18) brightness(.94)} /* siluetas bien marcadas (Kike eligió «más contraste») */
/* velo beige sobre la foto para que se integre con la web y el texto se lea bien */
.hero .bgimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 25%,transparent),transparent 25%,transparent 80%,var(--bg))}
.hero.con-foto::before{opacity:.06}
/* con foto, la tarjeta deja ver el fondo un poco (papel translúcido) */
.hero.con-foto .frame{background:color-mix(in srgb,var(--paper) 74%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hero .wrap{position:relative;z-index:1;width:100%}

/* Marco de invitación: papel con doble filete dorado */
.hero .frame{position:relative;padding:clamp(48px,8vw,76px) clamp(18px,4vw,52px) clamp(40px,7vw,64px);
  background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero .frame::before{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:3px;pointer-events:none}

.hero .rings{display:block;width:clamp(100px,22vw,140px);height:auto;margin:0 auto 20px}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.names{font-family:var(--script);font-weight:400;font-size:clamp(78px,19vw,160px);line-height:.95;letter-spacing:0;color:var(--ink)}
.names .amp{display:block;font-family:var(--script);font-size:.45em;color:var(--gold-text);margin:6px 0}
.hero .date{max-width:460px;margin:30px auto 0;padding-top:26px;border-top:1px dashed color-mix(in srgb,var(--gold) 55%,transparent); /* tarjeta de embarque */
  font-family:var(--display);font-size:clamp(18px,3vw,22px);letter-spacing:.06em}
.hero .place{margin-top:8px;font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text)}
.countdown{display:flex;justify-content:center;gap:clamp(16px,5vw,46px);margin-top:40px}
.countdown div{min-width:56px}
.countdown b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.countdown span{font-family:var(--caps);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.hero .btns{justify-content:center;margin-top:40px}

/* Ordenador: tarjeta más ancha y baja para que quepa entera en la pantalla (nombres en una línea) */
@media (min-width:900px){
  .hero{padding-block:72px 56px}
  .hero .wrap{max-width:900px}
  .hero .frame{padding:44px 56px 40px}
  .hero .rings{width:96px;margin-bottom:12px}
  .names{font-size:clamp(84px,8.4vw,124px);line-height:1.05}
  .names .amp{display:inline;font-size:.55em;margin:0 .22em}
  .hero .date{margin-top:18px;padding-top:18px}
  .countdown{margin-top:24px}
  .hero .btns{margin-top:26px}
}
/* Ordenador con foto: la foto ocupa la mitad izquierda (se funde con el fondo) y la tarjeta va a la derecha */
@media (min-width:900px){
  .hero.con-foto .bgimg{right:46%;opacity:1;background-position:center 70%;
    -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
  .hero.con-foto::before{left:-140px;right:auto}
  .hero.con-foto .wrap{max-width:none;padding-left:50%;padding-right:clamp(24px,5vw,80px)}
  .hero.con-foto .frame{max-width:640px;padding-inline:36px}
  .hero.con-foto .names{font-size:clamp(64px,6vw,100px)}
  .hero.con-foto .names .amp{display:block;margin:0}
}
@media (min-width:900px) and (max-height:760px){
  .hero .rings{width:76px}
  .names{font-size:clamp(72px,7vw,104px)}
  .countdown b{font-size:34px}
}

/* ---------- Entrada de la portada, tipo vídeo (empieza cuando el body tiene la clase .lista) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hero .frame>*{opacity:0;transform:translateY(16px);filter:blur(6px);
    transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),filter 1.4s var(--ease)}
  .js .hero .frame{opacity:0;transform:scale(.985);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease)}
  .lista .hero .frame,.lista .hero .frame>*{opacity:1;transform:none;filter:none}
  .lista .hero .frame>:nth-child(1){transition-delay:.3s}
  .lista .hero .frame>:nth-child(2){transition-delay:.6s}
  .lista .hero .frame>:nth-child(3){transition-delay:.85s;transition-duration:2s} /* los nombres, más lentos */
  .lista .hero .frame>:nth-child(4){transition-delay:1.3s}
  .lista .hero .frame>:nth-child(5){transition-delay:1.45s}
  .lista .hero .frame>:nth-child(6){transition-delay:1.6s}
  .lista .hero .frame>:nth-child(n+7){transition-delay:1.8s}
  /* Los anillos se dibujan solos */
  .js .rings .trazo{stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset 2.2s var(--ease) .4s}
  .lista .rings .trazo{stroke-dashoffset:0}
  .js .rings .brillo{opacity:0;transition:opacity 1s ease 2.2s}
  .lista .rings .brillo{opacity:1}
  /* Movimiento lento de fondo */
  .hero::before{animation:girar 180s linear infinite}
  .hero.con-foto .bgimg{animation:acercar 30s ease-in-out infinite alternate}
}
@keyframes girar{to{rotate:360deg}}
@keyframes acercar{from{transform:scale(1)}to{transform:scale(1.08)}}

/* ---------- Frase destacada ---------- */
#frase.band{padding-block:clamp(64px,9vw,104px)}
.big-quote{position:relative;max-width:660px;margin:0 auto;padding:34px 8px;
  font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(24px,4.4vw,34px);line-height:1.4;color:var(--ink)}
.big-quote::before,.big-quote::after{position:absolute;font-family:Georgia,"Times New Roman",serif;font-style:normal;font-size:96px;line-height:1;color:var(--gold-text);opacity:.45}
.big-quote::before{content:"\201C";left:-6px;top:-18px}
.big-quote::after{content:"\201D";right:-6px;bottom:-62px}
/* Pantallas de ordenador bajas: nombres en una línea para que la tarjeta quepa */
@media (min-width:900px) and (max-height:820px){
  .hero{padding-block:56px 40px}
  .hero.con-foto .names .amp{display:inline;margin:0 .2em}
  .hero.con-foto .names{font-size:clamp(56px,5vw,84px)}
  .hero .btns{margin-top:20px}
}

/* Estilos de cada sección de la web, en el mismo orden en que aparecen en index.html. */

/* ---------- Alojamiento: tarjeta destacada del hotel ---------- */
.feature{margin-top:26px;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.feature .head{padding:30px 30px 26px;background:var(--stone);border-bottom:1px solid var(--line)}
.feature .head h3{font-size:clamp(26px,5vw,34px);margin-top:8px}
.feature .foto-hotel{display:block;width:100%;max-width:300px;height:auto;margin-top:18px;border:1px solid var(--line);border-radius:var(--radius)}
.feature .body{padding:30px;display:grid;gap:20px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:0}
.facts dt,.feature .rotulo{font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.facts dd{margin:4px 0 0;font-size:18px}
@media (min-width:640px){.facts.dos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Alojamiento: pasos para reservar y opciones */
.reserva{margin-top:40px}
#alojamiento>.wrap>p.small{max-width:none}
@media (min-width:900px){#alojamiento>.wrap>p.small{white-space:nowrap;font-size:15px}}
.pasos-hotel{padding-top:20px;border-top:1px solid var(--line)}
.feature .rotulo{margin:0 0 14px}
.reserva h3{text-align:center;margin:0 0 18px}
.reserva h3+*{margin-top:0}
.pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;gap:14px}
.pasos li{counter-increment:paso;position:relative;padding:4px 0 14px 54px;border-bottom:1px solid var(--line)}
.pasos li:last-child{border-bottom:0;padding-bottom:0}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center;font-family:var(--display);font-size:17px;color:var(--gold-text);background:var(--paper)}
.pasos strong{display:block;font-weight:600}
.pasos .url{display:block;margin-top:10px;text-transform:none;letter-spacing:.04em;overflow-wrap:anywhere}
.captura{margin:12px 0 0;max-width:420px}
@media (max-width:560px){.captura{margin-left:-54px}}
.captura img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
/* mapa de la línea A42 (en la intro de Alojamiento) */
.opciones{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opciones ul{margin:8px 0 0;padding-left:18px}
.opciones li{margin:4px 0}

/* ---------- Nuestra historia: retrato como sello postal, con matasellos ---------- */
.story{position:relative;display:grid;gap:40px;align-items:center}
@media (min-width:760px){.story{grid-template-columns:1fr 1fr}}
.portrait{position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:visible;padding:12px;background:#fff;
  /* bordes dentados de sello */
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,#0000 4.5px,#000 5px) -8px -8px/16px 16px;
  mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle,#0000 4.5px,#000 5px) -8px -8px/16px 16px;
  -webkit-mask-composite:source-over;mask-composite:add}
.portrait img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.reveal.in .portrait img,.portrait.in img{animation:acercar 24s ease-in-out infinite alternate}}
.story::after{content:"";position:absolute;right:calc(50% - 40px);top:-46px;width:clamp(90px,18vw,130px);aspect-ratio:1;
  background:var(--postmark) center/contain no-repeat;transform:rotate(-14deg);pointer-events:none}
@media (max-width:759px){.story::after{right:-6px;top:-24px}}
.milestones{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.milestones li{display:grid;grid-template-columns:76px 1fr;gap:14px;font-size:18px}
.milestones b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--gold-text)}
.quote{max-width:none;margin:24px 0 0;padding-left:20px;border-left:1px solid var(--gold);
  font-family:var(--display);font-style:italic;font-size:clamp(22px,3.4vw,27px);line-height:1.4}

/* ---------- Programa del día ---------- */
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:96px 1fr;gap:24px;padding-block:22px;border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline time{font-family:var(--display);font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums}
.timeline h3{font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding-top:6px}
.timeline p{margin:4px 0 0;font-size:18px;color:var(--muted)}
@media (max-width:560px){.timeline li{grid-template-columns:72px 1fr;gap:16px}}

/* ---------- El lugar: foto de la finca (img/finca.jpg) y mapa (se carga al pulsar) ---------- */
.venue-photo{margin:28px 0 0;padding:10px;background:var(--paper);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--shadow);overflow:hidden}
.venue-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.reveal.in .venue-photo img{animation:acercar 30s ease-in-out infinite alternate}}
.map{position:relative;margin-top:28px;aspect-ratio:16/10;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.4) sepia(.1)}
.map .load{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center}

/* ---------- Cómo llegar y autobuses: tarjetas como billetes (muescas y línea troquelada) ---------- */
#llegar .card,#transporte .card{position:relative;overflow:visible}
#llegar .card .meta,#transporte .card .meta{padding-bottom:14px;margin-bottom:8px;border-bottom:1px dashed color-mix(in srgb,var(--gold) 45%,transparent)}
#llegar .card::before,#llegar .card::after,#transporte .card::before,#transporte .card::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%}
#transporte .card::before,#transporte .card::after{top:52px;background:var(--stone)}
#llegar .card::before,#llegar .card::after{top:100px;background:var(--bg)}
#llegar .card::before,#transporte .card::before{left:-10px}
#llegar .card::after,#transporte .card::after{right:-10px}

/* Autobuses: autobús con su carretera discontinua encima del título */
#transporte>.wrap::before{content:"";display:block;width:min(300px,80%);aspect-ratio:300/80;margin:0 auto 18px;
  background:var(--bus) center/contain no-repeat}

/* ---------- Vestimenta: iconos en círculo y muestras de color ---------- */
.dress{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dress .card{position:relative;padding-top:100px}
.dress .card::before{content:"";position:absolute;top:26px;left:30px;width:56px;height:56px;border-radius:50%;border:1px solid var(--gold);
  background:var(--paper) var(--ico-hanger) center/30px no-repeat}
.dress .card:nth-child(2)::before{background-image:var(--ico-palette)}
.dress .aviso{margin-top:12px;padding-left:12px;border-left:2px solid var(--gold);font-style:italic;color:var(--muted)}
.swatches{display:flex;gap:10px;margin-top:12px}
.swatches i{display:block;width:34px;height:34px;border-radius:50%;border:1px solid var(--line)}
.sw1{background:#9cbccc}.sw2{background:#8a9a6a}.sw3{background:#e8dcc4}.sw4{background:#c9d8bd}.sw5{background:#e6ece9}

/* ---------- Galería ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:8px}
.gallery button{padding:0;border:0;aspect-ratio:1;overflow:hidden;cursor:zoom-in;background:var(--stone)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery button:hover img{transform:scale(1.05)}

/* ---------- Confirmar asistencia ---------- */
form.card{display:grid;gap:20px;padding:clamp(22px,5vw,38px)}
.code-row{display:flex;gap:10px;flex-wrap:wrap}
.code-row input{flex:1 1 200px;width:auto;text-align:center;font-family:var(--display);font-size:22px;letter-spacing:.2em;text-transform:uppercase}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.inv-head h3{font-size:clamp(26px,5vw,32px)}
.inv-head .small{margin-top:4px}
.people{display:grid;gap:14px}
.person{display:grid;gap:14px;padding:18px;background:var(--bg);border:1px solid var(--line);border-radius:4px}
.person .meta{margin:0}
.person-top{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.seg{display:flex}
.seg .choice span{padding:12px 14px;white-space:nowrap}
.seg .choice+.choice span{border-left:0}
.person-more{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.person.no .person-more{display:none}
@media (max-width:620px){.person-top,.person-more{grid-template-columns:1fr}}
.privacy{margin:0;font-size:15px;color:var(--muted)}
.ok{padding:30px;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);border-left:3px solid var(--gold)}
.ok h3{font-size:28px;margin-bottom:6px}
.ok .btns{margin-top:16px}
/* Resumen de la respuesta: una línea por persona y el autobús */
.resumen{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.resumen li{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.resumen .quien{font-weight:500}
.resumen .que{color:var(--muted)}
.resumen .nota{flex-basis:100%;font-size:.92em;color:var(--muted);font-style:italic}

/* ---------- Regalos ---------- */
.gift{padding:clamp(26px,5vw,44px);text-align:center;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow)}
.gift p{margin-inline:auto}
.gift .eyebrow{justify-content:center}
.gift .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
#iban-locked,#iban-open{display:grid;gap:12px;justify-items:center}
.iban{margin:14px auto 18px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(15px,3.6vw,19px);letter-spacing:.06em;word-break:break-word}

/* ---------- Pie ---------- */
footer{position:relative;padding-block:72px calc(64px + env(safe-area-inset-bottom,0px));text-align:center;background:var(--stone)}
footer .wrap{position:relative}
footer .names{font-size:clamp(46px,10vw,72px)}
footer .names .amp{display:inline;margin:0 .15em;font-size:.6em}
footer .d{margin-top:14px;font-family:var(--caps);font-size:12px;letter-spacing:.34em;color:var(--muted)}
footer .contact{margin-top:28px;font-size:17px;color:var(--muted)}
/* matasellos */
footer .wrap::after{content:"";position:absolute;right:max(0px,calc(50% - 260px));top:-24px;width:96px;aspect-ratio:1;
  background:var(--postmark) center/contain no-repeat;transform:rotate(12deg);opacity:.6;pointer-events:none}
@media (max-width:560px){footer .wrap::after{width:64px;right:6px;top:-62px}}

/* Dibujos de fondo de cada sección, muy suaves (como la rosa de los vientos de la portada).
   Los dibujos están en dibujos.css: --compass (rosa de los vientos), --avion-retro, --maleta y los bocetos a mano
   --mapa, --globo, --postal y --gafas-sombrero.
   Para cambiar o quitar el dibujo de una sección, edita o borra su línea en la lista de abajo. */

main .band{position:relative;overflow:clip}
main .band>.wrap{position:relative;z-index:1}
main .band::after{content:"";position:absolute;z-index:0;pointer-events:none;background:center/contain no-repeat;opacity:.08;
  --tam:clamp(200px,32vw,380px);width:var(--tam);aspect-ratio:1}

/* ---------- Qué dibujo va en cada sección y dónde ---------- */
#alojamiento::after{background-image:var(--postal);aspect-ratio:210/250;--tam:clamp(170px,22vw,280px);opacity:.11;right:-30px;bottom:6%;transform:rotate(-4deg)}
#historia::after{background-image:var(--compass);left:-110px;bottom:-90px}
#programa::after{background-image:var(--globo);--tam:clamp(220px,28vw,360px);opacity:.1;right:-30px;top:10%}
#lugar::after{background-image:var(--mapa);aspect-ratio:220/210;--tam:clamp(200px,26vw,330px);opacity:.1;right:-60px;top:10%;transform:rotate(6deg)}
#llegar::after{background-image:var(--avion-retro);aspect-ratio:300/120;--tam:clamp(260px,42vw,520px);left:-80px;bottom:8%;transform:scaleX(-1) rotate(-6deg)}
#transporte::after{background-image:var(--maleta);aspect-ratio:160/124;left:-50px;top:14%;transform:rotate(7deg)}
#vestimenta::after{background-image:var(--gafas-sombrero);aspect-ratio:230/275;--tam:clamp(170px,22vw,280px);opacity:.11;left:-40px;bottom:4%;transform:rotate(-6deg)}
#rsvp::after{background-image:var(--avion-retro);aspect-ratio:300/120;--tam:clamp(260px,42vw,520px);right:-70px;bottom:6%;transform:rotate(-10deg)}
#regalos::after{background-image:var(--maleta);aspect-ratio:160/124;right:-30px;top:12%;transform:rotate(-5deg)}
#preguntas::after{background-image:var(--mapa);aspect-ratio:220/210;--tam:clamp(200px,24vw,300px);opacity:.09;left:-80px;top:8%;transform:scaleX(-1) rotate(4deg)}

/* La rosa de los vientos gira muy despacio, como en la portada */
@media (prefers-reduced-motion:no-preference){
  #historia::after{animation:girar 240s linear infinite}
}

/* SECCIÓN «Idiomas»: selector ES · CA · DE · IT */
.langs{display:flex;gap:2px;flex:none}
.langs button{font:inherit;font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.1em;background:none;border:1px solid transparent;border-radius:999px;color:inherit;padding:5px 8px;cursor:pointer;opacity:.7;min-height:32px}
.langs button:hover{opacity:1}
.langs button[aria-pressed="true"]{opacity:1;border-color:var(--gold);color:var(--gold-text)}
.hero .langs{position:absolute;top:12px;right:max(12px,env(safe-area-inset-right,0px));z-index:2;background:color-mix(in srgb,#fff 80%,transparent);border-radius:999px;padding:2px}
@media (max-width:560px){.topnav .langs{display:none}}
footer .langs{justify-content:center;margin-top:22px}

/* SECCIÓN «Bienvenida»: sobre antiguo de papel verjurado color marfil, a pantalla completa,
   cerrado con un sello de lacre M/K. Al tocar el sello: el sello salta, la solapa se abre,
   sube la tarjeta y aparece la web.
   Capas, de atrás adelante: forro del sobre (fondo) → tarjeta → bolsillo (laterales + solapa de abajo)
   → solapa de arriba → sello y textos. */

.welcome{
  --tinta:#2f3c46; --oro:#8a6d2a; --oro-texto:#735a20; --forro:#26323b;
  /* Papel antiguo: fibras, líneas del verjurado, manchas de óxido y bordes envejecidos */
  --env-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  --env-blot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23b)'/%3E%3C/svg%3E");
  --verjurado:repeating-linear-gradient(0deg,rgba(110,85,40,.04) 0 1px,transparent 1px 5px),
              repeating-linear-gradient(90deg,rgba(110,85,40,.035) 0 1px,transparent 1px 64px);
  --oxido:radial-gradient(circle at 14% 82%,rgba(140,100,45,.12) 0 .6%,transparent 2.2%),
          radial-gradient(circle at 88% 18%,rgba(140,100,45,.10) 0 .5%,transparent 1.8%),
          radial-gradient(circle at 71% 90%,rgba(140,100,45,.08) 0 .4%,transparent 1.5%);
  --papel:var(--env-noise),var(--verjurado),var(--oxido),var(--env-blot) center/cover,
          radial-gradient(ellipse 80% 75% at 50% 45%,#f4ecda 0%,#ecdfc4 55%,#d9c49c 100%);
  position:fixed;inset:0;z-index:100;overflow:hidden;perspective:1600px;
  /* forro interior: gris pizarra con un grabado fino dorado (solo se ve al abrir) */
  background:radial-gradient(ellipse at 50% 30%,transparent 30%,rgba(0,0,0,.35)),
    repeating-linear-gradient(45deg,rgba(201,167,96,.09) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(201,167,96,.09) 0 1px,transparent 1px 7px),var(--forro);
  transition:opacity 1.1s var(--ease,ease),transform 1.4s var(--ease,ease),filter 1.1s ease,visibility 1.4s}
.welcome.out{opacity:0;visibility:hidden;transform:scale(1.06);filter:blur(6px)}

/* ---------- Tarjeta que sale del sobre (cartulina gruesa con doble filete) ---------- */
.env-card{position:absolute;left:50%;top:30%;z-index:1;width:min(86vw,520px);height:40vh;min-height:260px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(26px,5vh,48px) 20px;text-align:center;
  background:var(--env-noise),#fdfaf3;color:var(--tinta);border-radius:2px;box-shadow:0 1px 0 #fff inset,0 18px 40px rgba(0,0,0,.35);
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1) 1s}
.env-card::before,.env-card::after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(138,109,42,.5)}
.env-card::before{inset:10px}
.env-card::after{inset:14px;border-color:rgba(138,109,42,.25)}
.env-card p{margin:0;max-width:none}
.env-card-eyebrow{font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--oro-texto)}
.env-card-names{font-family:var(--script);font-size:clamp(46px,12vw,72px);line-height:1.1;margin:6px 0 4px!important}
.env-card-names span{color:var(--oro);font-size:.7em}
.env-card-date{font-family:var(--display);font-size:18px;letter-spacing:.2em}
.env-card-sep{width:min(220px,70%);height:16px;margin:14px 0;background:var(--sep) center/contain no-repeat}
.env-card-place{margin-top:6px!important;font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#4e5a63}

/* ---------- Bolsillo: laterales (con la V arriba) y solapa de abajo ---------- */
.env-pocket{position:absolute;inset:0;z-index:2;clip-path:polygon(0 14%,50% 48%,100% 14%,100% 100%,0 100%);
  background:linear-gradient(90deg,rgba(90,62,25,.10),transparent 18%,transparent 82%,rgba(90,62,25,.10)),var(--papel)}
/* solapa de abajo: un poco más clara, con su sombra sobre los laterales */
.env-bottom-w{position:absolute;inset:0;filter:drop-shadow(0 -2px 3px rgba(80,55,20,.22))}
.env-bottom{position:absolute;inset:0;clip-path:polygon(0 100%,0 99%,50% 60%,100% 99%,100% 100%);
  background:linear-gradient(to top,rgba(255,250,235,.18),transparent 60%),var(--papel)}

/* ---------- Solapa de arriba: se abre girando hacia arriba ---------- */
.env-flap-w{position:absolute;left:0;right:0;top:0;height:56%;z-index:3;transform-origin:top center;
  filter:drop-shadow(0 6px 5px rgba(60,38,10,.28)) drop-shadow(0 14px 18px rgba(60,38,10,.18));
  transition:transform 1.1s cubic-bezier(.45,.05,.3,1) .35s,z-index 0s .9s}
.env-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% 34%,50% 100%,0 34%);
  background:linear-gradient(to bottom,rgba(255,250,235,.15),rgba(90,62,25,.08)),var(--papel)}
/* matasellos antiguo en la esquina, medio borrado */
.env-flap::before{content:"";position:absolute;top:7%;right:7%;width:clamp(72px,18vw,118px);aspect-ratio:1;
  background:var(--postmark) center/contain no-repeat;opacity:.45;transform:rotate(-14deg);mix-blend-mode:multiply}

/* ---------- Sello de lacre ---------- */
.env-seal{position:absolute;left:50%;top:56%;z-index:4;width:clamp(128px,34vw,184px);aspect-ratio:1;transform:translate(-50%,-50%);
  padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
  filter:drop-shadow(0 2px 1px rgba(30,20,5,.35)) drop-shadow(0 10px 14px rgba(40,25,5,.35));
  transition:transform .6s cubic-bezier(.5,-.4,.6,1),opacity .5s ease .1s}
.env-seal::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(138,109,42,.6);opacity:0} /* aro que invita a tocar */
.seal-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.env-seal:hover{transform:translate(-50%,-50%) scale(1.03)}
.env-seal:focus-visible{outline:2px solid var(--oro);outline-offset:10px}

/* ---------- Idiomas y textos (escritos en tinta sobre el papel) ---------- */
.welcome-langs{position:absolute;top:max(14px,env(safe-area-inset-top,0px));left:14px;z-index:5}
.welcome .welcome-langs button{color:var(--tinta)}
.welcome .welcome-langs button[aria-pressed="true"]{border-color:var(--oro);color:var(--oro-texto)}
.welcome-text{position:absolute;left:0;right:0;bottom:max(5vh,calc(env(safe-area-inset-bottom,0px) + 28px));z-index:4;padding:0 20px;
  text-align:center;color:var(--tinta);transition:opacity .6s}
.welcome-text p{max-width:none;margin-inline:auto}
.welcome-big{margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:clamp(28px,8vw,52px);line-height:1;letter-spacing:.14em;text-transform:uppercase}
.welcome-sub{margin:0;font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#4e5a63}
.welcome-names{display:block;margin-top:6px;font-family:var(--script);font-size:clamp(42px,11vw,60px);font-weight:400;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--tinta)}
.welcome-hint{margin:12px 0 0;font-family:var(--body);font-style:italic;font-size:17px;color:var(--oro-texto)}

/* Entrada: los textos aparecen poco a poco y el aro del sello late */
@media (prefers-reduced-motion:no-preference){
  .welcome-text p,.env-seal{animation:aparece 1.6s cubic-bezier(.22,.61,.36,1) both}
  .env-seal{animation-name:aparece-sello;animation-delay:.2s}
  .welcome-big{animation-delay:.5s}
  .welcome-sub{animation-delay:.8s}
  .welcome-hint{animation-delay:1.4s}
  .env-seal::after{animation:latido 2.8s ease-out 2s infinite}
}
@keyframes aparece{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
@keyframes aparece-sello{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes latido{0%{opacity:.8;transform:scale(.94)}100%{opacity:0;transform:scale(1.22)}}

/* ---------- Al abrir ---------- */
.welcome.open .env-seal{opacity:0;transform:translate(-50%,-30%) scale(.6) rotate(-25deg);animation:none;pointer-events:none}
.welcome.open .env-seal::after{animation:none}
/* El sello, ya invisible, se quita del todo (lo hace bienvenida.js): ver el comentario allí. */
.welcome.sin-sello .env-seal{display:none}
.welcome.open .env-flap-w{transform:rotateX(180deg);z-index:0} /* a mitad del giro pasa detrás de la tarjeta */
/* La tarjeta sube hasta salir del bolsillo (su borde de abajo queda por encima de los laterales)
   y después baja por delante del sobre. Si no saliera del todo, se vería cortada y daría un salto. */
.welcome.open .env-card{transform:translateX(-50%) translateY(-52vh)}
.welcome.sacar .env-card{z-index:6;transform:translateX(-50%) translateY(-6vh) scale(1.04);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.welcome.open .welcome-text,.welcome.open .welcome-langs{opacity:0}

/* ---------- Pantallas apaisadas (ordenador) ---------- */
@media (min-aspect-ratio:1/1){
  .env-flap-w{height:52%}
  .env-pocket{clip-path:polygon(0 12%,50% 44%,100% 12%,100% 100%,0 100%)}
  .env-bottom{clip-path:polygon(0 100%,0 98%,50% 58%,100% 98%,100% 100%)}
  .env-seal{top:52%;width:clamp(128px,22vh,210px)}
  /* tarjeta apaisada, como una invitación de verdad, que crece con la pantalla */
  .env-card{top:24%;height:44vh;width:min(70vw,calc(44vh * 1.45),680px)}
  .welcome.open .env-card{transform:translateX(-50%) translateY(-41vh)}
  .welcome.sacar .env-card{transform:translateX(-50%) translateY(-2vh) scale(1.04)}
  .welcome-text{bottom:5vh}
}
/* Móvil girado (poca altura): todo más compacto para que quepa sin taparse */
@media (max-height:560px){
  .welcome-names{display:inline;font-size:clamp(24px,8vh,30px)}
  .welcome-big{font-size:clamp(22px,8vh,34px);margin-bottom:6px}
  .welcome-hint{margin-top:4px;font-size:14px}
  .welcome-text{bottom:max(3vh,calc(env(safe-area-inset-bottom,0px) + 8px))}
  .env-seal{top:40%;width:clamp(80px,25vh,120px)}
  .env-flap::before{width:clamp(56px,18vh,90px)}
  .env-card{top:14%;height:72vh;min-height:0;width:min(80vw,calc(72vh * 1.6));padding:12px 20px}
  .env-card-names{font-size:clamp(32px,12vh,54px)}
  .env-card-sep{margin:6px 0}
  .welcome.open .env-card{transform:translateX(-50%) translateY(-61vh)}
  .welcome.sacar .env-card{transform:translateX(-50%) translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){.welcome,.env-flap-w,.env-seal,.env-card{transition-duration:.01s;transition-delay:0s}}
body.welcome-on{overflow:hidden}

/* Ajustes propios de la Web hotel. El resto de estilos es el mismo que el de la web de la boda. */

/* Foto de la portada fija (en la web de la boda la pone galeria.js). La .webp pesa menos; si el navegador no la entiende, usa la .jpg */
#hero-img{background-image:url("../img/portada.jpg");background-image:image-set(url("../img/portada.webp") type("image/webp"),url("../img/portada.jpg") type("image/jpeg"))}