/* Amo Invitar! · web nueva (etapa 2). Sin Bootstrap ni jQuery. Identidad de la web original: verde #4e9c87 + arena, Jost y Gwendolyn.
   Todo propio de /web/: no se pisa nada del sitio viejo. Móvil primero. */
@font-face { font-family: 'Jost'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(/web/fonts/jost-35841fe7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(/web/fonts/jost-5054f2c4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113; }
@font-face { font-family: 'Dantina'; font-weight: 400; font-display: swap; src: url(/web/fonts/dantina-webfont.woff2) format('woff2'); }
@font-face { font-family: 'Gwendolyn'; font-weight: 400; font-display: swap; src: url(/web/fonts/gwendolyn-400.ttf) format('truetype'); }
@font-face { font-family: 'Gwendolyn'; font-weight: 700; font-display: swap; src: url(/web/fonts/gwendolyn-700.ttf) format('truetype'); }

:root {
  --verde: #4e9c87; --verde-2: #3f8a77; --verde-osc: #2f6f5f; --verde-claro: #e5f3ec; --verde-palido: #f3f9f6;
  --arena: #7e725b; --crema: #f8f5ef; --tinta: #1e2a26; --texto: #3b4743; --suave: #66736e; --linea: #d8e8e1; --blanco: #fff;
  --coral: #ff8f73; --oro: #c9a45c;
  --radio: 18px; --sombra: 0 18px 44px rgba(21, 75, 63, .14); --sombra-s: 0 6px 18px rgba(21, 75, 63, .10);
  --ancho: 1180px; --cab: 64px;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --script: 'Gwendolyn', cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.65 var(--sans); color: var(--texto); background: var(--blanco); overflow-x: hidden; }
img, svg, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--verde-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--verde-osc); }
h1, h2, h3, h4 { color: var(--tinta); line-height: 1.15; margin: 0 0 .5em; font-weight: 500; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caja { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--verde-osc); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 200; }
.skip:focus { top: 10px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; border-radius: 999px; padding: 12px 26px; font: 600 15px/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-verde { background: var(--verde); color: #fff; box-shadow: 0 8px 22px rgba(78, 156, 135, .38); }
.btn-verde:hover { background: var(--verde-2); color: #fff; }
.btn-claro { background: #fff; color: var(--verde-osc); }
.btn-claro:hover { color: var(--verde-osc); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.btn-borde { border-color: currentColor; color: var(--verde-osc); background: transparent; }
.btn-borde:hover { background: var(--verde-osc); border-color: var(--verde-osc); color: #fff; }
.btn-borde-claro { border-color: rgba(255, 255, 255, .85); color: #fff; background: transparent; }
.btn-borde-claro:hover { background: #fff; color: var(--verde-osc); }
.btn-grande { padding: 16px 34px; font-size: 16px; }
.enlace-video { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: inherit; }
.enlace-video:hover { text-decoration: underline; }
.fila-btn { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* ---------- Encabezado: transparente arriba (logo y textos blancos); al bajar, blanco con logo verde y textos negros ---------- */
.cab { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; color: #fff; transition: background .25s, box-shadow .25s, border-color .25s; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.cab.solida, html.sin-js .cab { background: #fff; color: #1c1c1c; border-bottom-color: transparent; box-shadow: 4px 0 20px -5px rgba(0, 0, 0, .12); }
.cab-fila { display: flex; align-items: center; gap: 14px; min-height: var(--cab); }
.logo { display: block; flex: none; }
.logo img { display: block; height: 30px; width: auto; }
.logo .l-v { display: none; }
.cab.solida .logo .l-b, html.sin-js .cab .logo .l-b { display: none; }
.cab.solida .logo .l-v, html.sin-js .cab .logo .l-v { display: block; }
.nav-principal { display: none; margin-left: 28px; align-items: center; gap: 2px; }
.nav-principal > a, .nav-principal > .menu-ev > button { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: inherit; text-decoration: none; padding: 14px 10px; border-radius: 8px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.cab.solida .nav-principal > a, .cab.solida .nav-principal > .menu-ev > button { text-shadow: none; }
.nav-principal a[aria-current], .nav-principal > .menu-ev.en > button { font-weight: 600; }
.nav-principal > a:hover, .nav-principal > .menu-ev > button:hover, .nav-principal a[aria-current], .menu-ev.abierto > button { opacity: .8; }
.cab.solida .nav-principal > a:hover, .cab.solida .nav-principal > .menu-ev > button:hover, .cab.solida .nav-principal a[aria-current], .cab.solida .menu-ev.abierto > button { color: var(--verde); opacity: 1; }
.menu-ev { position: relative; }
.menu-ev .icono { width: 14px; height: 14px; transition: transform .2s; }
.menu-ev.abierto .icono { transform: rotate(180deg); }
/* La lista pegada al botón (sin hueco), así no se cierra al mover el puntero */
.menu-ev-lista { position: absolute; left: 0; top: 100%; min-width: 240px; background: #fff; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); padding: 8px 0; display: none; }
.menu-ev-lista::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.menu-ev.abierto .menu-ev-lista, .menu-ev:hover .menu-ev-lista, .menu-ev:focus-within .menu-ev-lista { display: block; }
.menu-ev-lista a { display: block; font: 500 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #1c1c1c; text-decoration: none; padding: 12px 22px; text-shadow: none; }
.menu-ev-lista a:hover, .menu-ev-lista a[aria-current] { background: var(--verde-claro); color: var(--verde); }
.cab-acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mi-panel { white-space: nowrap; align-items: center; gap: 6px; display: none; color: inherit; font: 700 13px/1 var(--sans); letter-spacing: .12em; text-decoration: none; padding: 10px 6px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.cab.solida .mi-panel { text-shadow: none; }
.mi-panel:hover { color: inherit; opacity: .8; }
.cab.solida .mi-panel:hover { color: var(--verde); opacity: 1; }
.cab .btn { padding: 12px 22px; font-size: 13px; letter-spacing: .12em; white-space: nowrap; }
.cab .btn-crear { display: none; background: #fff; color: var(--verde-osc); box-shadow: none; }
.cab.solida .btn-crear { background: var(--verde); color: #fff; }
.cab.solida .btn-crear:hover { background: var(--verde-2); }
.moneda { position: relative; margin-right: 10px; }
.moneda-boton { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--sans); color: #1c1c1c; background: #e5f3ec; border: 0; border-radius: 6px; padding: 9px 12px 9px 10px; cursor: pointer; }
.moneda-boton img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; display: block; }
.moneda-boton .icono { width: 14px; height: 14px; margin-right: 2px; }
.moneda-lista { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; max-height: 340px; overflow: auto; background: #fff; border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); padding: 6px; display: none; z-index: 5; }
.moneda.abierta .moneda-lista { display: block; }
.moneda-lista button { display: flex; justify-content: space-between; width: 100%; text-align: left; font: 400 15px/1.2 var(--sans); border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: #1c1c1c; }
.moneda-lista button:hover, .moneda-lista button[aria-checked="true"] { background: var(--verde-claro); }
.moneda-lista small { color: var(--suave); }
.hamb { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; color: inherit; }
.hamb .icono { width: 30px; height: 30px; stroke-width: 2.2; }
@media (min-width: 1100px) {
  .nav-principal { display: flex; }
  .mi-panel, .cab .btn-crear { display: inline-flex; }
  .hamb { display: none; }
}
/* Menú del celular: panel blanco que baja desde la barra */
.cajon { position: fixed; left: 0; right: 0; top: var(--cab); bottom: 0; z-index: 95; background: #fff; color: #1c1c1c; transform: translateY(-8%); opacity: 0; transition: transform .25s ease, opacity .2s ease; overflow-y: auto; visibility: hidden; }
.cajon.abierto { transform: none; opacity: 1; visibility: visible; }
.cajon-cuerpo { padding: 22px 22px 40px; }
.cajon .cajon-titulo { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--verde); margin: 0 0 4px; background: none; border: 0; padding: 12px 0; width: 100%; cursor: pointer; text-align: left; }
.cajon .cajon-titulo .icono { width: 16px; height: 16px; transition: transform .2s; }
.cajon .cajon-titulo[aria-expanded="false"] .icono { transform: rotate(-90deg); }
.cajon-eventos[hidden] { display: none; }
.cajon-eventos { display: grid; gap: 0; margin: 0 0 6px 22px; }
.cajon-eventos a { color: #1c1c1c; text-decoration: none; font: 400 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 11px 0; }
.cajon-eventos a[aria-current] { color: var(--verde); font-weight: 600; }
.cajon-lista { display: grid; gap: 0; }
.cajon-lista a { color: #1c1c1c; text-decoration: none; font: 500 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 12px 0; }
.cajon-botones { display: grid; gap: 12px; margin-top: 26px; }
.cajon-botones .btn { width: 100%; padding-block: 14px; font-size: 14px; letter-spacing: .12em; margin: 0; }
.btn-panel { border-color: #1c1c1c; color: #1c1c1c; background: #fff; justify-content: center; }
.btn-panel:hover { background: #1c1c1c; color: #fff; }
.btn-ayuda { border-color: var(--verde); color: var(--verde); background: #fff; }
.btn-ayuda:hover { background: var(--verde); color: #fff; }
body.cajon-abierto { overflow: hidden; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(56px, 8vw, 100px) 0; position: relative; }
.seccion.alt { background: var(--verde-palido); }
.seccion.crema { background: var(--crema); }
.seccion.verde { background: linear-gradient(160deg, var(--verde-osc), #20695a 55%, var(--verde-2)); color: #e6f3ee; }
.seccion.verde h2, .seccion.verde h3 { color: #fff; }
.titulo { text-align: center; max-width: 780px; margin: 0 auto clamp(30px, 5vw, 52px); }
.titulo .sobre { display: block; font: 600 13px/1.2 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--verde); margin-bottom: 18px; }
.verde .titulo .sobre { color: #a9d6c8; }
.titulo h2 { font-size: clamp(30px, 4.4vw, 46px); }
/* README (ronda 40): los énfasis vuelven a Dantina. Es una letra de trazos altos y muy ancha: tamaño bajo, interlineado generoso y aire a los costados para que no pise las líneas vecinas */
.titulo h2 em, .h-script { font-family: 'Dantina', var(--script); font-style: normal; font-weight: 400; color: var(--verde); font-size: .72em; line-height: 1.5; letter-spacing: .01em; word-spacing: .2em; display: inline-block; padding: .2em .06em .14em; vertical-align: baseline; }
.verde .titulo h2 em { color: #fff; }
.titulo p { font-size: 1.12rem; color: var(--suave); }
.verde .titulo p { color: #cde6dd; }
.centro { text-align: center; }

/* ---------- Portada ---------- */
.portada { position: relative; color: #fff; overflow: hidden; background: var(--hero-g, linear-gradient(rgba(0, 0, 0, .1), rgba(126, 114, 91, .6))), var(--hero-m, url(/web/img/hero-movil.jpg)) var(--hero-pm, center) / cover no-repeat, var(--hero-mt, none) var(--hero-pm, center) / cover no-repeat var(--hero-c, #4e9c87); isolation: isolate; clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(28px, 6vw, 84px)), 0 100%); margin-bottom: -1px; }
@media (min-width: 800px) { .portada { background: var(--hero-gd, var(--hero-g, linear-gradient(rgba(0, 0, 0, .1), rgba(126, 114, 91, .6)))), var(--hero-d, url(/web/img/hero-desktop.jpg)) center / cover no-repeat, var(--hero-dt, none) center / cover no-repeat var(--hero-cd, var(--hero-c, #4e9c87)); } }
.portada-grid { display: grid; gap: 36px; padding: calc(var(--cab) + clamp(24px, 5vw, 70px)) 0 clamp(80px, 10vw, 150px); align-items: center; }
@media (min-width: 960px) { .portada-grid { grid-template-columns: 1.04fr .96fr; gap: 56px; } }
.etiqueta { display: block; font: 700 clamp(13px, 1.6vw, 18px)/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; margin-bottom: 22px; color: #fff; }
.portada h1 { color: #fff; font-size: clamp(32px, 4.4vw, 52px); font-weight: 500; letter-spacing: -.01em; margin-bottom: 18px; line-height: 1.12; }
.portada h1 em { font-style: normal; }
.portada .lead { font-size: clamp(17px, 1.7vw, 20px); color: #fff; max-width: 580px; margin-bottom: 26px; }
.portada .lead strong { color: #fff; }
.puntos { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15.5px; color: #fff; }
.puntos li { display: flex; gap: 8px; align-items: center; }
.puntos .icono { color: #fff; width: 22px; height: 22px; stroke-width: 2.6; }
.portada-nota { font-size: 14.5px; color: #cfe6dd; margin: 16px 0 0; }
@media (max-width: 959px) { .portada-texto { text-align: center; } .portada .lead { margin-inline: auto; } .portada .fila-btn, .portada .puntos { justify-content: center; } }

/* Tableta + celular superpuestos (la invitación real en vivo; se miden en cqw para escalar igual en todas las pantallas) */
.escena { position: relative; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 1.18; container-type: inline-size; }
.esc-tablet { position: absolute; left: 0; top: 17%; width: 76%; aspect-ratio: 1.34; border-radius: 2.6cqw; border: 1.5cqw solid #14181a; background: #e9e4da; box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, .4); overflow: hidden; }
.esc-tablet img, .esc-cel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.esc-tablet iframe, .esc-cel iframe { max-width: none; position: absolute; left: 0; top: 0; border: 0; background: #fff; transform-origin: 0 0; pointer-events: none; }
.esc-cel { position: absolute; right: 2%; top: 0; width: 38%; aspect-ratio: 9 / 19; border-radius: 5.4cqw; border: 1.5cqw solid #14181a; background: #f4efe6; box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .5); overflow: hidden; z-index: 2; }
.esc-cel::before { content: ''; position: absolute; top: 1.2cqw; left: 50%; width: 9cqw; height: 2cqw; background: #14181a; border-radius: 99px; transform: translateX(-50%); z-index: 3; }
.esc-poster { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.esc-cel.cargado .esc-poster, .esc-tablet.cargado .esc-poster { opacity: 0; transition: opacity .5s; pointer-events: none; }
.ficha { position: absolute; z-index: 3; background: #fff; color: var(--tinta); border-radius: 3cqw; padding: 2cqw 3cqw; font-size: 2.8cqw; line-height: 1.2; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .3); display: flex; align-items: center; gap: 2cqw; font-weight: 600; white-space: nowrap; animation: flota 6s ease-in-out infinite; }
.ficha .icono { width: 5cqw; height: 5cqw; color: var(--verde); }
.ficha small { display: block; font-weight: 400; color: var(--suave); font-size: 2.2cqw; }
.ficha.f1 { left: 2%; top: 4%; animation-delay: -2s; }
.ficha.f2 { right: 0; bottom: 30%; animation-delay: -4s; z-index: 4; }
.ficha.f3 { left: 8%; bottom: 24%; animation-delay: -1s; background: var(--verde-osc); color: #fff; }
.ficha.f3 .icono { color: #8fd3bd; }
.ficha.f3 small { color: #bde5d8; }
@keyframes flota { 50% { transform: translateY(-1.4cqw); } }
@media (prefers-reduced-motion: reduce) { .ficha { animation: none; } }

/* Portada de evento (más compacta) */
.portada-centro { padding-block: calc(var(--cab) + clamp(30px, 5vw, 70px)) clamp(80px, 10vw, 130px); text-align: center; }

/* ---------- Pasos (línea de tiempo con mini pantallas) ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; }
.paso { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.paso-num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; font: 600 19px/1 var(--sans); position: relative; z-index: 1; }
.paso h3 { font: 600 clamp(22px, 2vw, 26px)/1.1 var(--sans); color: var(--verde); margin: 14px 0 8px; }
.paso p { margin: 0 0 18px; color: var(--tinta); font-size: 16px; line-height: 1.45; max-width: 270px; }
.paso-ui { width: 100%; max-width: 270px; background: #fff; border-radius: 16px; box-shadow: 0 8px 26px rgba(21, 75, 63, .14); padding: 14px; margin-top: auto; text-align: left; font-size: 13px; color: var(--tinta); display: grid; gap: 8px; }
.paso-ui .campo { border: 1px solid #e3ebe8; border-radius: 9px; padding: 9px 11px; background: #fff; display: flex; justify-content: space-between; gap: 8px; align-items: center; color: #55635e; }
.paso-ui .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.paso-ui .dos .campo { justify-content: center; }
.paso-ui .interr { display: flex; justify-content: space-between; align-items: center; border: 1px solid #edf2f0; border-radius: 9px; padding: 8px 11px; font-weight: 500; }
.paso-ui .sw { width: 34px; height: 19px; border-radius: 99px; background: #cfd8d5; position: relative; flex: none; }
.paso-ui .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .2s; }
.paso-ui .sw.on { background: var(--verde); } .paso-ui .sw.on::after { left: 17px; }
.paso-ui .minis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paso-ui .minis i { display: block; aspect-ratio: 9 / 14; border-radius: 9px; background-size: cover; background-position: center; border: 2px solid transparent; }
.paso-ui .minis i.sel { border-color: var(--verde); box-shadow: 0 0 0 2px #fff inset; }
.paso-ui .pill { display: flex; align-items: center; gap: 7px; justify-content: center; border-radius: 9px; padding: 11px; color: #fff; font-weight: 600; background: #5a9b8a; }
.paso-ui .pill.wa { background: #25d366; }
.paso-ui .pill .icono { width: 16px; height: 16px; }
.paso-ui .cifras3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; text-align: center; }
.paso-ui .cifras3 div { border: 1px solid #e3ebe8; border-radius: 9px; padding: 8px 2px; font-size: 11px; color: #66736e; }
.paso-ui .cifras3 b { display: block; font-size: 21px; color: var(--tinta); font-weight: 600; line-height: 1.1; }
.paso-ui .cifras3 .v b { color: var(--verde); } .paso-ui .cifras3 .r b { color: #b3392c; }
.paso-ui .estado { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; color: var(--verde); }
.paso-ui .estado span:first-child { color: var(--tinta); text-transform: none; letter-spacing: 0; display: flex; gap: 6px; align-items: center; }
.paso-ui .estado span:first-child::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #25c36b; }
.paso-ui .plan-l { display: flex; justify-content: space-between; font-weight: 600; }
.paso-ui .botones2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paso-ui .botones2 span { background: #eef3f1; border-radius: 8px; padding: 8px; text-align: center; font-weight: 500; }
@media (min-width: 560px) and (max-width: 1099px) { .pasos { grid-template-columns: repeat(2, 1fr); } .paso:last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .pasos { grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .paso::before { content: ''; position: absolute; top: 21px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: repeating-linear-gradient(90deg, var(--verde) 0 6px, transparent 6px 12px); opacity: .6; }
  .paso:last-child::before { display: none; }
}
.bloque-dos { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .bloque-dos { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.checks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.checks .icono { color: var(--verde); margin-top: 3px; width: 22px; height: 22px; }
.nota-pago { margin: 20px 0 0; font-size: 15.5px; color: var(--suave); display: flex; gap: 8px; align-items: flex-start; }
.nota-pago .icono { color: var(--verde); margin-top: 3px; }
.video-mini { position: relative; display: block; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 9 / 16; max-width: 330px; margin-inline: auto; background: var(--verde-osc); }
.video-mini img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.video-mini span { position: absolute; inset: 0; display: grid; place-items: center; }
.video-mini span i { width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: var(--verde-osc); transition: transform .25s; }
.video-mini:hover span i { transform: scale(1.1); }
.video-mini .icono { width: 34px; height: 34px; fill: currentColor; stroke: none; }

/* ---------- Eventos (¿Qué celebramos?) ---------- */
.eventos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .eventos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.evento-card { position: relative; display: block; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3.2; color: #fff; text-decoration: none; background: var(--verde-osc); box-shadow: var(--sombra-s); }
.evento-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.evento-card:hover img { transform: scale(1.06); }
.evento-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 45, 38, .86) 0%, rgba(10, 45, 38, .12) 62%); }
.evento-card div { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; z-index: 1; }
.evento-card h3 { color: #fff; font-size: clamp(19px, 2.2vw, 26px); margin: 0 0 2px; }
.evento-card p { margin: 0; font-size: 14.5px; color: #cfe9df; display: flex; align-items: center; gap: 6px; }
.evento-card:hover { color: #fff; }

/* ---------- Funciones ---------- */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; }
.filtros button { font: 500 15px/1 var(--sans); border: 1px solid var(--linea); background: #fff; color: var(--tinta); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.funciones { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .funciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .funciones { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.funcion { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 20px; transition: transform .25s, box-shadow .25s; position: relative; }
.funcion:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.funcion .ic { width: 52px; height: 52px; border-radius: 15px; background: var(--verde-claro); color: var(--verde-2); display: grid; place-items: center; margin-bottom: 14px; }
.funcion .ic .icono { width: 28px; height: 28px; }
.funcion h3 { font-size: 18.5px; margin: 0 0 6px; }
.funcion p { margin: 0; font-size: 15.5px; color: var(--suave); line-height: 1.55; }
.funcion .plan { position: absolute; top: 14px; right: 14px; font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--verde-osc); background: var(--verde-claro); border-radius: 99px; padding: 5px 8px; }
.funcion[hidden] { display: none; }

/* ---------- Planes y precios ---------- */
.aviso-pago { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; text-align: center; background: linear-gradient(90deg, var(--verde-2), var(--verde)); color: #fff; padding: 14px 20px; border-radius: 16px; font-weight: 500; margin: 0 auto 36px; max-width: 760px; }
.aviso-pago .icono { color: #bde5d8; }
.aviso-pago strong { color: #fff; }
.planes { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 700px) { .planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .planes { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.plan-card { background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 28px 22px 24px; display: flex; flex-direction: column; position: relative; transition: transform .25s, box-shadow .25s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.plan-card.destacado { border: 2px solid var(--verde); box-shadow: var(--sombra); }
.plan-card .cinta { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--verde); color: #fff; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 7px 14px; border-radius: 99px; white-space: nowrap; }
.plan-card h3 { font: 600 13px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--verde); margin-bottom: 14px; }
.plan-card .precio { font: 500 clamp(34px, 3.6vw, 44px)/1 var(--sans); color: var(--tinta); margin: 0 0 4px; min-height: 1.1em; }
.plan-card .precio-s { font-size: 14.5px; color: var(--suave); margin: 0 0 18px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; align-content: start; font-size: 15.5px; flex: 1; }
.plan-card li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.plan-card li .icono { color: var(--verde); width: 18px; height: 18px; margin-top: 2px; }
.plan-card li.todo { font-weight: 600; color: var(--tinta); }
.plan-card .btn { width: 100%; }
.planes-nota { text-align: center; max-width: 820px; margin: 26px auto 0; font-size: 15.5px; color: var(--suave); }
.planes-nota strong { color: var(--tinta); }
.pago-seguro { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 6px; font-weight: 500; color: var(--tinta); }
.pago-seguro > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.pago-seguro .icono { color: var(--verde); }
.pago-iconos { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pago-iconos img { height: 26px; width: auto; display: block; background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: 2px 4px; }
.pago-iconos .pi { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; background: #fff; border: 1px solid var(--linea); border-radius: 6px; font-size: 13px; color: var(--tinta); }
.pago-iconos .pi .icono { width: 16px; height: 16px; }
/* Tabla comparativa */
.comparar-tit { text-align: center; margin: 54px 0 20px; font-size: 24px; }
.comparar-caja { position: relative; overflow-x: auto; border: 1px solid var(--linea); border-radius: 20px; background: #fff; -webkit-overflow-scrolling: touch; }
.comparar { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 15.5px; }
.comparar th, .comparar td { padding: 12px 14px; text-align: center; border-bottom: 1px solid #edf4f1; }
.comparar thead th { font: 600 13px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--verde-osc); background: var(--verde-palido); position: sticky; top: 0; }
.comparar tbody th { text-align: left; font-weight: 500; color: var(--tinta); }
.comparar tbody tr:last-child th, .comparar tbody tr:last-child td { border-bottom: 0; }
.comparar .si { color: var(--verde); } .comparar .si .icono { width: 20px; height: 20px; }
.comparar .no { color: #c8d3ce; }
.comparar .col-d { background: rgba(78, 156, 135, .06); }
.comparar td small { color: var(--suave); }
.medida { display: grid; gap: 0; margin-top: 34px; border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, var(--verde-2), var(--verde)); color: #f0f9f6; box-shadow: var(--sombra); }
@media (min-width: 860px) { .medida { grid-template-columns: .9fr 1.1fr; } }
.medida img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; display: block; }
.medida > div { padding: clamp(26px, 4vw, 46px); align-self: center; }
.medida h3 { color: #fff; font-size: clamp(24px, 3vw, 32px); }
.medida .desde { font: 500 15px/1 var(--sans); color: #bde5d8; letter-spacing: .08em; text-transform: uppercase; }
.medida .precio-m { font: 500 40px/1.1 var(--sans); color: #fff; margin: 4px 0 14px; }
.medida .checks .icono { color: #8fd3bd; }
.pros { display: grid; gap: 22px; margin-top: 34px; padding: clamp(24px, 4vw, 40px); background: #fff; border: 1px solid var(--linea); border-radius: 24px; }
@media (min-width: 900px) { .pros { grid-template-columns: 1fr 1fr; gap: 44px; } }
.pros h3 { font-size: clamp(22px, 2.6vw, 28px); }
.pros .sobre { font: 600 12.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--verde); display: block; margin-bottom: 10px; }
.formu { display: grid; gap: 12px; }
.formu input, .formu select, .formu textarea { width: 100%; font: 400 16px/1.3 var(--sans); padding: 13px 15px; border: 1px solid #c9dcd4; border-radius: 12px; background: #fff; color: var(--tinta); }
.formu textarea { resize: vertical; min-height: 110px; }
.formu input:focus, .formu select:focus, .formu textarea:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
.formu label { display: grid; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--tinta); }
.formu .dos { display: grid; gap: 12px; }
@media (min-width: 640px) { .formu .dos { grid-template-columns: 1fr 1fr; } }
.formu .acepto { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--suave); }
.formu .acepto input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--verde); }
.contacto-estado { margin: 0; font-weight: 500; }
.contacto-estado.ok { color: var(--verde-2); }
.contacto-estado.error { color: #b3392c; }

/* ---------- Mejor juntos ---------- */
.juntos { background: linear-gradient(180deg, #fff, var(--verde-claro)); }
.juntos-logos { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.4vw, 16px); margin: 0 0 14px; }
.juntos-logos .l-ai { height: clamp(26px, 7vw, 40px); width: auto; }
.juntos-logos .l-alb { height: clamp(32px, 9vw, 52px); width: auto; margin-top: 6px; }
.juntos-logos span { font: 300 clamp(24px, 6vw, 32px)/1 var(--sans); color: var(--tinta); }
.promo { display: inline-block; background: var(--verde); color: #fff; border-radius: 16px; padding: 12px 20px; font-size: 15.5px; }
.promo strong { color: #fff; }
.juntos-escena { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 34px; }
@media (min-width: 1060px) { .juntos-escena { grid-template-columns: auto 1fr; } }
.juntos-cels { display: flex; gap: 22px; justify-content: center; }
.juntos-cels figure { margin: 0; text-align: center; }
.juntos-cels figcaption { margin-top: 12px; font-size: 14px; color: var(--suave); letter-spacing: .04em; }
.pantalla { position: relative; width: 240px; height: 500px; border-radius: 34px; border: 9px solid #1c1c1c; overflow: hidden; background: #fbf9f4; box-shadow: 0 30px 60px rgba(21, 75, 63, .28); }
.pantalla::before { content: ''; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; background: #1c1c1c; border-radius: 50%; transform: translateX(-50%); z-index: 2; }
.pantalla.poster { background: url(/web/img/lovestory.webp) center / cover; }
.pantalla iframe { position: absolute; top: 0; left: 0; width: 390px; height: 852px; border: 0; transform: scale(.5641); transform-origin: 0 0; background: transparent; }
.pantalla.alb iframe { background: #fff; }
@media (max-width: 600px) { .juntos-cels { gap: 10px; } .pantalla { width: 150px; height: 312px; border-width: 7px; border-radius: 24px; } .pantalla iframe { transform: scale(.3436); } }
.impresos { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1.08; container-type: inline-size; justify-self: center; }
.imp { position: absolute; container-type: inline-size; margin: 0; filter: drop-shadow(0 14px 22px rgba(28, 28, 28, .22)); color: #9e906b; text-align: center; font-family: 'Montserrat', var(--sans); }
.imp > img:first-child { display: block; width: 100%; height: auto; }
.imp p { position: absolute; left: 0; right: 0; margin: 0; line-height: 1.15; transform: translateY(-50%); white-space: nowrap; }
.imp-std { width: 37%; left: 1%; top: 3%; transform: rotate(-5deg); }
.imp-std .t1 { top: 34.1%; font-size: 5.4cqw; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.imp-std .dw, .imp-std .dm { top: 69.4%; font-size: 4cqw; font-weight: 500; color: #fff; text-transform: uppercase; }
.imp-std .dw { left: auto; right: 62%; } .imp-std .dm { left: 60%; right: auto; }
.imp-std .dd { top: 69.4%; font-size: 7.6cqw; color: #fff; }
.imp-std .dy { top: 76.4%; font-size: 3.9cqw; font-weight: 500; color: #fff; }
.imp-qr { width: 29%; left: 34%; top: 38%; transform: rotate(4deg); z-index: 2; }
.imp-qr .t1 { top: 23.4%; font-size: 5.2cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.imp-qr .code { position: absolute; left: 30.6%; top: 50.2%; width: 38.8%; height: auto; }
.imp-qr .t2 { top: 88.2%; font-size: 4.2cqw; font-weight: 500; color: #fff; text-transform: uppercase; white-space: normal; padding: 0 16%; }
.imp-menu { width: 23%; left: 64%; top: 1%; transform: rotate(3deg); }
.imp-menu .t1 { top: 22.4%; font: 400 21cqw/1 'Allura', var(--script); }
.imp-menu i { position: absolute; left: 30%; width: 40%; height: 1%; background: #e5d5b0; }
.imp-menu i:nth-of-type(2n) { left: 23%; width: 54%; }
.imp-menu i:nth-of-type(1) { top: 31.6%; } .imp-menu i:nth-of-type(2) { top: 38.9%; } .imp-menu i:nth-of-type(3) { top: 45.8%; }
.imp-menu i:nth-of-type(4) { top: 53.1%; } .imp-menu i:nth-of-type(5) { top: 59.8%; } .imp-menu i:nth-of-type(6) { top: 67.1%; }
.imp-mesa { width: 22%; left: 75%; top: 50%; transform: rotate(-4deg); z-index: 3; }
.imp-mesa .t1 { top: 13.7%; font-size: 8cqw; font-weight: 500; text-transform: uppercase; }
.imp-mesa .num { top: 30.5%; font: 700 46cqw/1 Georgia, serif; }
.imp-sou { width: 23%; left: 5%; top: 66%; transform: rotate(-6deg); z-index: 3; }
.imp-sou .t1 { top: 45.6%; font-size: 8.4cqw; font-weight: 500; text-transform: uppercase; white-space: normal; padding: 0 14%; line-height: 1.12; }

/* ---------- Trayectoria y opiniones ---------- */
.t-premio { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px; flex-wrap: wrap; }
.t-premio .icono { width: 44px; height: 44px; color: var(--oro); stroke-width: 1.5; }
.t-premio p { margin: 0; line-height: 1.35; }
.t-premio strong { color: #fff; display: block; font-size: 18px; }
.t-premio img { height: 17px; width: auto; vertical-align: -3px; margin-left: 4px; }
.estrellas { position: relative; display: inline-block; font-size: 16px; letter-spacing: 2px; line-height: 1; color: #d9d4c5; }
.estrellas::before { content: '\2605\2605\2605\2605\2605'; }
.estrellas > span { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #e3a92a; }
.estrellas > span::before { content: '\2605\2605\2605\2605\2605'; }
.opiniones { display: grid; gap: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.op-fila { overflow-x: auto; scrollbar-width: none; }
.op-fila::-webkit-scrollbar { display: none; }
.op-pista { display: flex; width: max-content; }
.op-fila.bucle { overflow: hidden; }
.op-fila.bucle .op-pista { animation: desliza var(--dur, 300s) linear infinite; }
.op-fila:nth-child(2).bucle .op-pista { animation-direction: reverse; }
.op-fila:hover .op-pista { animation-play-state: paused; }
.op-set { display: flex; align-items: flex-start; }
@keyframes desliza { to { transform: translateX(-50%); } }
.opinion { flex: none; width: 340px; margin: 0 18px 0 0; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sombra-s); }
.opinion .tit { margin: 0; font-weight: 600; color: var(--tinta); font-size: 17px; line-height: 1.3; }
.opinion blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; flex: 1; }
.opinion figcaption { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--tinta); font-size: 15px; }
.opinion .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-claro); color: var(--verde-osc); font-weight: 600; }
.op-nota { text-align: center; font-size: 14px; color: var(--suave); margin-top: 20px; }
@media (max-width: 600px) { .opinion { width: 280px; padding: 20px 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .op-fila.bucle .op-pista { animation: none; } .op-fila.bucle { overflow-x: auto; } .op-set[aria-hidden] { display: none; } }

/* ---------- Preguntas frecuentes ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--linea); border-radius: 16px; margin-bottom: 10px; padding: 0 22px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--sombra-s); border-color: #bcdacf; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; font-weight: 600; font-size: 17.5px; color: var(--tinta); position: relative; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font: 300 28px/1 var(--sans); color: var(--verde); }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 0 18px; color: var(--suave); }
.faq details > div p:last-child { margin-bottom: 0; }
.faq .apagada { display: none; }
.faq-mas { display: block; margin: 22px auto 0; }
.faq-mas[hidden] { display: none; }

/* ---------- Nosotros ---------- */
.nosotros { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .nosotros { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.nosotros-foto { border-radius: 24px; overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4 / 3; background: var(--verde-osc) url(/web/img/hero-desktop.jpg) center / cover; position: relative; }
.nosotros-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 0; }
.cifras div { background: var(--verde-claro); border-radius: 16px; padding: 16px 12px; text-align: center; }
.cifras b { display: block; font: 500 clamp(26px, 3.4vw, 36px)/1 var(--sans); color: var(--verde-osc); margin-bottom: 4px; }
.cifras span { font-size: 14px; color: var(--suave); line-height: 1.25; display: block; }

/* ---------- Llamada final ---------- */
.llamada { background: linear-gradient(150deg, var(--verde-2) 0%, var(--verde) 55%, #79b5a3 100%); color: #fff; border-radius: 30px; padding: clamp(38px, 6vw, 72px) clamp(22px, 6vw, 72px); text-align: center; box-shadow: 0 26px 56px rgba(21, 75, 63, .24); position: relative; overflow: hidden; }
.llamada::before { content: ''; position: absolute; inset: -30% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); pointer-events: none; }
.llamada > * { position: relative; }
.llamada h2 { color: #fff; font-size: clamp(27px, 4vw, 44px); max-width: 760px; margin-inline: auto; }
.llamada p { max-width: 700px; margin-inline: auto; color: #f0f9f6; font-size: 1.12rem; }
.llamada .fila-btn { justify-content: center; margin: 24px 0 6px; }
.llamada .mini { font-size: 15px; color: #e3f3ed; margin: 16px auto 0; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.llamada .mini span { display: inline-flex; gap: 8px; align-items: flex-start; text-align: left; }
.llamada .mini .icono { margin-top: 3px; }

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .contacto { grid-template-columns: .8fr 1.2fr; gap: 56px; } }
.contacto-datos { display: grid; gap: 14px; margin-top: 22px; }
.contacto-datos a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); font-weight: 500; }
.contacto-datos .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--verde-claro); color: var(--verde-2); display: grid; place-items: center; flex: none; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 24px; padding: clamp(22px, 4vw, 38px); box-shadow: var(--sombra-s); }

/* ---------- Pie ---------- */
.pie { background: #333; color: #b5b5b5; padding: 54px 0 24px; font-size: 15.5px; }
.pie a { color: #bdbdbd; text-decoration: none; } .pie a:hover { color: #fff; text-decoration: underline; }
.pie h2 { font: 600 12.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pie-redes { display: flex; gap: 10px; margin-top: 16px; }
.pie-redes a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.pie-redes a:hover { background: var(--verde); text-decoration: none; }
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 84px 12px 16px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--linea); transform: translateY(110%); transition: transform .3s; display: none; }
.barra-movil.on { transform: none; }
.barra-movil .btn { width: 100%; padding-block: 13px; }
@media (max-width: 1039px) { .barra-movil { display: block; } }

/* ---------- Revelado al desplazarse ---------- */
.rev { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.rev.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
.sin-js .rev { opacity: 1; transform: none; }

/* Elegir diseño (widget de crear-invitacion) dentro de la web nueva */
.disenos .ci-widget { max-width: 1120px; }
.disenos .ci-tab { letter-spacing: .14em; font-size: 1rem; }

/* ---------- Álbum QR ---------- */
.escena-album .esc-tablet { top: 8%; width: 82%; }
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: .6cqw; background: #14181a; }
.mosaico img { position: static !important; width: 100%; height: 100%; object-fit: cover; }
.qr-cel { background: url(/web/img/garden.webp) center / cover, #eef3ef; display: grid; place-items: center; }
.qr-tarjeta { background: rgba(255, 255, 255, .88); border-radius: 3cqw; padding: 3cqw 2.4cqw; text-align: center; width: 78%; }
.qr-tarjeta p { margin: 0; line-height: 1.25; color: #3a3a36; }
.qr-tarjeta .q0 { font-size: 1.9cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-2); font-weight: 600; }
.qr-tarjeta .q1 { font: 500 4.2cqw/1.15 var(--sans); color: var(--tinta); margin: 1cqw 0 2cqw; }
.qr-tarjeta img { position: static; inset: auto; width: 20cqw; height: 20cqw; display: block; margin: 0 auto; object-fit: contain; }
.qr-tarjeta .q2 { font-size: 1.9cqw; color: #6f6a60; margin: 1.6cqw 0 2cqw; }
.qr-tarjeta .q3 { background: var(--verde); color: #fff; border-radius: 99px; padding: 1.6cqw; font-size: 2.2cqw; font-weight: 600; }
.alb-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: x; }
@media (min-width: 700px) { .alb-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .alb-pasos { grid-template-columns: repeat(4, 1fr); } }
.alb-pasos li { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.alb-pasos h3 { font: 600 22px/1.2 var(--sans); color: var(--verde); margin: 14px 0 8px; }
.alb-pasos p { margin: 0; color: var(--suave); font-size: 16px; }
.parcial { font-size: 13px; color: #b08a3c; font-weight: 600; }
.comparar thead th.col-d { color: #fff; background: var(--verde); }
@media (min-width: 1000px) { .funciones.tres { grid-template-columns: repeat(3, 1fr); } }
.escena-album .ficha.f2 { bottom: -2%; right: -2%; }

/* ---------- Profesionales ---------- */
.planes.dos { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
@media (min-width: 760px) { .planes.dos { grid-template-columns: repeat(2, 1fr); } }
.pro-mini { display: grid; gap: 14px; align-content: center; }
.pro-mini div { background: var(--verde-palido); border: 1px solid var(--linea); border-radius: 16px; padding: 18px 20px; }
.pro-mini b { display: block; font: 500 34px/1.1 var(--sans); color: var(--verde-osc); }
.pro-mini span { color: var(--suave); font-size: 15px; }
.packs-dos { display: grid; gap: 30px; }
@media (min-width: 900px) { .packs-dos { grid-template-columns: 1fr 1fr; gap: 36px; } }
.aparte { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 24px; margin-top: 34px; }
.aparte > .icono { width: 34px; height: 34px; color: var(--verde); margin-top: 4px; }
.aparte h3 { font-size: 21px; margin: 0 0 6px; }
.aparte p { color: var(--suave); }
.pasar-studio { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; background: var(--verde-claro); border-radius: 16px; padding: 18px 20px; }
.pasar-studio .icono { color: var(--verde-2); width: 28px; height: 28px; margin-top: 2px; }
.pasar-studio p { margin: 0; }

/* README (ronda 36): botones con borde en el verde principal; tabla de precios con encabezado verde y primera columna clara */
.btn-borde { color: var(--verde); }
.btn-borde:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.comparar-precios thead th { background: var(--verde); color: #fff; }
.comparar-precios thead th small { color: #fff; font-weight: 500; letter-spacing: .04em; font-size: 14px; text-transform: none; }
.comparar-precios tbody th { background: var(--verde-palido); }

/* README (ronda 36): trayectoria como en Albunear y Amo Fotear: tarjeta oscura, brillo sobre el año, marcas con link (todo en Jost) */
.trayectoria { position: relative; overflow: hidden; display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; background: #1c1c1c; color: #efe9dc; border-radius: 28px; padding: clamp(28px, 5vw, 60px); margin-bottom: clamp(48px, 7vw, 80px); }
@media (min-width: 900px) { .trayectoria { grid-template-columns: 1.25fr 1fr; } }
.trayectoria::before { content: ''; position: absolute; right: -18%; top: -40%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(111, 191, 168, .26), transparent 65%); pointer-events: none; }
.trayectoria > div { position: relative; }
.trayectoria .sobre { font: 600 13px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: #8fd3bd; display: block; margin-bottom: 12px; }
.trayectoria h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 0 0 18px; }
.trayectoria h2 em { font: inherit; font-style: normal; color: #8fd3bd; }
.trayectoria p { color: #cfc6b2; line-height: 1.7; }
.t-lado { text-align: center; }
.t-desde { margin: 0 0 26px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.t-desde span { font: 500 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #8fd3bd; }
.t-desde b { font: 500 clamp(72px, 10vw, 120px)/1 var(--sans); letter-spacing: -.02em; margin-top: 8px; background: linear-gradient(180deg, #fff 30%, #8fd3bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.t-k { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #a79f8c !important; margin: 0 0 16px; line-height: 1.3 !important; }
.t-marcas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.t-marcas li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .03); transition: background .25s, border-color .25s; font-size: 12.5px; color: #bdb4a0; line-height: 1.3; }
.t-marcas li:hover { background: rgba(255, 255, 255, .07); border-color: rgba(143, 211, 189, .5); }
.t-marcas a { display: flex; align-items: center; justify-content: center; height: 44px; }
.t-marcas img { height: 100%; width: auto; max-width: 100%; filter: none; opacity: 1; }
@media (max-width: 600px) { .t-marcas { gap: 8px; } .t-marcas li { padding: 12px 6px; font-size: 11.5px; } .t-marcas a { height: 32px; } }

/* README (ronda 36): invitación a medida con slider y banner de profesionales reorganizado */
.med-slider { position: relative; min-height: 260px; background: #14181a; }
.medida .med-slider img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.medida .med-slider img.on, .sin-js .medida .med-slider img:first-child { opacity: 1; }
.pros > div { min-width: 0; }
.pro-mini .fila-btn { background: none !important; border: 0 !important; padding: 0 !important; margin-top: 4px; }
.pro-mini .fila-btn .btn { width: 100%; white-space: normal; text-align: center; }
.pro-mini b { overflow-wrap: anywhere; }
@media (max-width: 899px) { .pros { padding: 22px 18px; } .pros .checks li { font-size: 15px; } .pro-mini b { font-size: 28px; } }
.medida > .med-slider { padding: 0; align-self: stretch; min-height: 260px; }

/* README (ronda 36): «Mejor juntos» como en el álbum viejo: subtítulo verde, cartel chico y blanco, pantallas bien escaladas */
/* README (ronda 41): «Invitación + álbum colaborativo QR» con el estilo de los títulos pequeños (Así de simple…) */
.juntos .titulo > .sobre { margin: 6px 0 14px; }
.juntos .promo, .juntos .promo strong { color: #fff; font-size: 13.5px; line-height: 1.4; }
.juntos .promo { padding: 9px 16px; border-radius: 12px; }
.pantalla iframe { max-width: none; transform: scale(.5692); }
.imp-menu .t1 { font: 400 11cqw/1 var(--script); color: #9e906b; }
@media (max-width: 600px) {
  .pantalla iframe { transform: scale(.3487); }
  .juntos-cels { gap: 8px; }
  .juntos-escena { gap: 14px; margin-top: 22px; }
}

/* README (ronda 36): pie nuevo (logo con «invitar» verde, Recursos y Productos, legales a la izquierda y Powered by a la derecha) y WhatsApp como el viejo */
.pie .logo img { height: 38px; width: auto; }
.pie-grid { display: grid; gap: 26px; }
.pie-marca p { margin: 14px 0 0; max-width: 340px; }
.pie-links { display: grid; gap: 26px; }
.pie-bloque { display: grid; gap: 26px; align-content: start; }
@media (max-width: 799px) { .pie-links { grid-template-columns: 1fr 1fr; } }
@media (min-width: 800px) {
  .pie-grid { grid-template-columns: 1.1fr 2fr; gap: 40px; }
  .pie-links { grid-template-columns: 1fr 1fr 1fr; }
  .pie-bloque { display: contents; }
  .pie-bloque:first-child .pie-col:first-child { grid-column: 1; grid-row: 1; }
  .pie-bloque:first-child .pie-col:last-child { grid-column: 2; grid-row: 1; }
  .pie-bloque:last-child { display: grid; grid-column: 3; grid-row: 1; gap: 26px; align-content: start; }
}
.pie-legal { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 36px; padding-top: 20px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.pie-legal p { margin: 0 0 6px; line-height: 1.5; }
.pie-legal .icono { width: 14px; height: 14px; color: #e0707a; fill: currentColor; stroke: none; vertical-align: -2px; }
/* README (ronda 42): la zona del país (ciudades) en el pie */
.pie-legal .pie-zona { font-size: 13px; opacity: .75; margin-bottom: 10px; }
.pie-snow { display: inline-flex; align-items: center; gap: 10px; color: #b5b5b5; font-size: 13px; }
.pie-snow img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
@media (min-width: 800px) { .pie-legal { flex-direction: row; justify-content: space-between; align-items: center; } .pie-snow { flex: none; } }
.wa-flota { position: fixed; right: 18px; bottom: 22px; z-index: 80; width: 50px; height: 50px; border-radius: 50%; display: block; }
.wa-flota::before { content: ''; position: absolute; left: -21px; top: -21px; width: 92px; height: 92px; border-radius: 50%; background: #1da14e; animation: wa-anillo 1.8s cubic-bezier(.215, .61, .355, 1) infinite; }
.wa-flota::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, .3); animation: wa-boton 1.8s cubic-bezier(.455, .03, .515, .955) -.4s infinite; background: url(/web/img/wp-icon.svg) center / 75% no-repeat #20c95f; }
@keyframes wa-anillo { 0% { transform: scale(.33); } 80%, 100% { opacity: 0; } }
@keyframes wa-boton { 0% { transform: scale(.8); } 50% { transform: scale(1); } 100% { transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .wa-flota::before, .wa-flota::after { animation: none; } }

/* README (ronda 36): tras una portada con foto y borde inclinado blanco, la sección siguiente va en blanco (si no, se ve un triángulo blanco) */
.portada + .seccion, .portada + section { background: #fff !important; }

/* README (ronda 36): video en ventana propia, miniaturas nuevas y foto de Nosotros con sello */
.video-mini { aspect-ratio: 16 / 9; max-width: none; width: 100%; }
@media (min-width: 900px) { .video-mini { aspect-ratio: 1; max-width: 460px; } }
.video-mini picture, .video-mini picture img { display: block; width: 100%; height: 100%; }
.video-mini img { object-fit: cover; opacity: 1; }
.nosotros-foto { aspect-ratio: 3 / 2; background: #1c1c1c; }
.nos-sello { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 44px 22px 20px; color: #fff; font: 400 clamp(15px, 2vw, 19px)/1.2 var(--sans); background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.nos-sello b { display: block; font: 600 clamp(26px, 4vw, 38px)/1.1 var(--sans); letter-spacing: -.01em; }
.dialogo-video { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
.dialogo-video::backdrop { background: rgba(10, 18, 16, .86); }
.dialogo-video .dv-caja { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.dialogo-video .dv-marco { position: relative; height: min(88vh, 900px); aspect-ratio: 9 / 16; max-width: 100%; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.dialogo-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.dialogo-video .dv-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #1c1c1c; font: 400 28px/1 var(--sans); cursor: pointer; }

/* README (ronda 36): portada del álbum como la vieja (degradé verde claro, logo de Albunear, maqueta con QR, TV y celular) */
@font-face { font-family: 'Allura'; font-weight: 400; font-display: swap; src: url(/web/fonts/allura-400.ttf) format('truetype'); }
html[data-cab-fija] .cab { background: #fff; color: #1c1c1c; border-bottom-color: transparent; box-shadow: 4px 0 20px -5px rgba(0, 0, 0, .12); }
html[data-cab-fija] .cab .logo .l-b { display: none; } html[data-cab-fija] .cab .logo .l-v { display: block; }
html[data-cab-fija] .cab .nav-principal > a, html[data-cab-fija] .cab .nav-principal > .menu-ev > button { text-shadow: none; }
.btn-negro { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }
.btn-negro:hover { background: #000; color: #fff; }
.alb-hero { color: #2d2d2d; }
.alb-hero::before { content: ''; position: absolute; right: -15%; top: -25%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(78, 156, 135, .22), transparent 62%); pointer-events: none; z-index: -1; }
.alb-hero .alb-logo { width: clamp(170px, 22vw, 240px); height: auto; display: block; margin-bottom: 18px; }
.alb-hero .etiqueta { color: var(--verde); font: 600 .813rem/1 var(--sans); letter-spacing: .3em; margin-bottom: 10px; }
.alb-hero h1 { color: #2d2d2d; font-weight: 500; }
.alb-hero h1 em { color: var(--verde); font-style: italic; }
.alb-hero .lead { color: #3d4643; }
.alb-hero .puntos { color: #3d4643; gap: 6px 20px; font-size: 15px; }
.alb-hero .puntos .icono { color: var(--verde); width: 17px; height: 17px; }
@media (max-width: 959px) { .alb-hero .alb-logo { margin: 0 auto 16px; } }
.alb-mock { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1.172; margin-left: auto; container-type: inline-size; }
@media (max-width: 959px) { .alb-mock { margin: 10px auto 0; } }
.alb-mock-tv { position: absolute; left: 25.1%; top: 0; width: 59.1%; aspect-ratio: 630 / 793; border-radius: 3.4cqw; border: 1.6cqw solid #1c1c1c; background: #111; overflow: hidden; box-shadow: 0 34px 70px rgba(21, 75, 63, .35); }
.alb-mock-tv i { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: albfade 24s infinite; }
.alb-mock-tv i:nth-child(2) { animation-delay: 4s; } .alb-mock-tv i:nth-child(3) { animation-delay: 8s; } .alb-mock-tv i:nth-child(4) { animation-delay: 12s; } .alb-mock-tv i:nth-child(5) { animation-delay: 16s; } .alb-mock-tv i:nth-child(6) { animation-delay: 20s; }
@keyframes albfade { 0%, 100% { opacity: 0; transform: scale(1); } 4%, 16.7% { opacity: 1; } 21% { opacity: 0; transform: scale(1.08); } }
.alb-mock-toast { position: absolute; top: 2.4cqw; left: 50%; transform: translateX(-50%); background: #154b3f; color: #fff; font-size: 2.2cqw; padding: .9cqw 2.2cqw; border-radius: 999px; white-space: nowrap; z-index: 2; }
.alb-mock-phone { position: absolute; left: 0; top: 25.1%; z-index: 2; width: 32.6%; height: 74.9%; border-radius: 5.6cqw; border: 1.4cqw solid #1c1c1c; background: url(/web/img/album/garden.webp) center / cover, #eceeec; padding: 6cqw 2.1cqw 2.1cqw; text-align: center; box-shadow: 0 26px 50px rgba(21, 75, 63, .35); animation: albfloat 6s ease-in-out infinite; overflow: hidden; }
@keyframes albfloat { 50% { transform: translateY(-10px); } }
.alb-mock-phone::before { content: ''; position: absolute; top: 1.2cqw; left: 50%; width: 2.4cqw; height: 2.4cqw; background: #1c1c1c; border-radius: 50%; transform: translateX(-50%); }
.alb-mock-phone .card-in { background: rgba(255, 255, 255, .92); border-radius: 2.8cqw; padding: 2.1cqw 1.4cqw; }
.alb-mock-phone p { line-height: 1.3; margin: 0; }
.alb-mock-phone .t0 { font-size: 1.45cqw; letter-spacing: .2em; text-transform: uppercase; color: #6f6a60; }
.alb-mock-phone .t1 { font: 400 5.3cqw/1 'Allura', cursive; margin: .7cqw 0; white-space: nowrap; color: #2d2d2d; }
.alb-mock-phone .t2 { font-size: 1.8cqw; color: #6f6a60; margin: 0 0 1.8cqw; }
.alb-mock-phone .b { background: var(--verde); color: #fff; border-radius: 999px; font-size: 1.95cqw; padding: 1.4cqw; }
.alb-mock-phone .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqw; margin-top: 1.8cqw; }
.alb-mock-phone .g i { aspect-ratio: 1; border-radius: 1cqw; background-size: cover; background-position: center; }
.alb-mock-qr { position: absolute; left: 70.8%; top: 46.5%; z-index: 3; width: 27%; padding: 2.5cqw 2.1cqw 2.1cqw; text-align: center; border-radius: 1.8cqw; isolation: isolate; background: url(/web/img/album/garden.webp) center / cover, #fff; box-shadow: 0 18px 40px rgba(21, 75, 63, .3); transform: rotate(7deg); animation: albfloatqr 7s ease-in-out infinite; }
@keyframes albfloatqr { 50% { transform: rotate(7deg) translateY(-8px); } }
.alb-mock-qr::after { content: ''; position: absolute; inset: 1.25cqw; border-radius: 1.1cqw; background: rgba(255, 255, 255, .86); z-index: -1; }
.alb-mock-qr p { line-height: 1.3; margin: 0; }
.alb-mock-qr .q0 { font-size: 1.34cqw; letter-spacing: .18em; text-transform: uppercase; color: #3f8a77; margin: .4cqw 0 0; font-weight: 600; }
.alb-mock-qr .q1 { font: 400 4.4cqw/1.1 'Allura', cursive; margin: .4cqw 0 1.1cqw; color: #3a3a36; white-space: nowrap; }
.alb-mock-qr img { width: 16.4cqw; height: 16.4cqw; display: block; margin: 0 auto; border-radius: .7cqw; }
.alb-mock-qr .q2 { font-size: 1.43cqw; color: #6f6a60; margin: 1.25cqw 0 0; }
@media (prefers-reduced-motion: reduce) { .alb-mock-phone, .alb-mock-qr, .alb-mock-tv i { animation: none; } .alb-mock-tv i:first-child { opacity: 1; } }
.alb-cards { display: grid; gap: 18px; }
@media (min-width: 640px) { .alb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .alb-cards { grid-template-columns: repeat(4, 1fr); } }
.alb-card { background: #fff; border: 1px solid #d6e7df; border-radius: 20px; padding: 26px 22px; transition: transform .25s, box-shadow .25s; text-align: left; }
.alb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(78, 156, 135, .16); }
.alb-card h3 { font-size: 1.15rem; font-weight: 600; margin: 14px 0 8px; color: #2d2d2d; }
.alb-card p { margin: 0; font-size: 15px; color: #5f6b67; }
.alb-card .alb-icon svg { width: 44px; height: 44px; color: var(--verde); }
.alb-card .alb-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #E5F3EC; color: var(--verde); font-weight: 700; font-size: 14px; margin-left: 8px; vertical-align: top; }

/* README (ronda 36): promociones: precio de lista tachado y precio con descuento */
.tachado { color: var(--suave); font-weight: 400; font-size: .62em; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.promo-precio { color: var(--verde-osc); }
.plan-card .promo-cinta { display: inline-block; background: #e8523f; color: #fff; font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; margin: 0 0 10px; }

@media (max-width: 600px) { .btn { white-space: normal; text-align: center; line-height: 1.2; } .cab .btn { white-space: nowrap; } }

/* README (ronda 37): la cinta de promoción oculta no debe verse (display la pisaba) */
.promo-cinta[hidden] { display: none !important; }

/* README (ronda 37): tablas comparativas en el celular con el sistema de columnas de Albunear:
   cada fila es una grilla; el nombre de la función va arriba a todo el ancho y los valores debajo, una columna por plan. */
@media (max-width: 760px) {
  .comparar-caja { overflow: visible; }
  .comparar, .comparar thead, .comparar tbody { display: block; min-width: 0; }
  .comparar tr { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .comparar thead th:first-child { display: none; }
  .comparar thead th { padding: 12px 3px; font-size: 10px; letter-spacing: 0; line-height: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; hyphens: auto; overflow-wrap: anywhere; position: static; border-bottom: 0; }
  .comparar thead th small { font-size: 11px; }
  .comparar tbody th { grid-column: 1 / -1; width: auto; text-align: left; padding: 11px 14px 3px; border-bottom: 0; font-size: 14px; font-weight: 500; line-height: 1.3; }
  .comparar td { padding: 4px 3px 11px; font-size: 12px; overflow-wrap: anywhere; }
  .comparar tbody tr { border-bottom: 1px solid #edf4f1; }
  .comparar tbody tr:last-child { border-bottom: 0; }
  .comparar td.col-d { border-radius: 0; }
  .comparar .si .icono { width: 18px; height: 18px; }
  .comparar .parcial { font-size: 11px; }
  .comparar-precios thead th:first-child + th { border-top-left-radius: 18px; } .comparar-precios thead th:last-child { border-top-right-radius: 18px; }
}

/* README (ronda 37): trayectoria en verde oscuro; textos en blanco y verde claro (nada dorado) */
.trayectoria { background: #0f3d33; color: #fff; }
.trayectoria::before { background: radial-gradient(circle, rgba(143, 211, 189, .22), transparent 65%); }
.trayectoria p, .trayectoria .t-premio p { color: #e6f3ee; }
.trayectoria .t-k { color: #a9d6c8 !important; }
.t-marcas li { color: #bde5d8; border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }
.t-premio { border-top-color: rgba(255, 255, 255, .18); }
.t-premio .icono { color: #8fd3bd; }
.t-premio strong { color: #fff; }

/* README (ronda 37): los 5 pasos en el celular como línea de tiempo pegada al margen izquierdo */
@media (max-width: 559px) {
  .pasos { gap: 0; }
  .paso { align-items: flex-start; text-align: left; padding: 0 0 34px 62px; }
  .paso::before { content: ''; position: absolute; left: 20px; top: 46px; bottom: 4px; width: 2px; background: var(--verde); opacity: .55; }
  .paso:last-child { padding-bottom: 0; } .paso:last-child::before { display: none; }
  .paso-num { position: absolute; left: 0; top: 0; background: #e8f4ef; color: var(--verde); border: 2px solid var(--verde); box-shadow: 0 0 0 5px #fff; }
  .paso:first-child .paso-num { background: var(--verde); color: #fff; }
  .paso h3 { margin: 7px 0 8px; }
  .paso p { max-width: none; }
  .paso-ui { max-width: none; }
}

/* README (ronda 37): encabezado sin foto; pie en el celular (col. 1: Invitaciones y Tu cuenta; col. 2: Recursos y Productos); Snow pegado a «Powered by» */
.cabecera-simple { padding: calc(var(--cab) + clamp(34px, 5vw, 64px)) 0 clamp(30px, 4vw, 48px); background: var(--verde-palido); text-align: center; }
.cabecera-simple .etiqueta { color: var(--verde); font: 600 13px/1 var(--sans); letter-spacing: .3em; margin-bottom: 14px; }
.cabecera-simple h1 { color: var(--tinta); font-size: clamp(30px, 4.4vw, 48px); font-weight: 500; margin: 0 0 12px; }
.cabecera-simple .lead { color: var(--suave); font-size: clamp(16px, 1.6vw, 19px); max-width: 640px; margin: 0 auto; }
.pie-snow { gap: 6px; } .pie-snow img { height: 26px; }
@media (max-width: 799px) {
  .pie-bloque { display: contents; }
  .pie-links { grid-template-columns: 1fr 1fr; align-items: start; }
  .pc-invitaciones { grid-column: 1; grid-row: 1; } .pc-tucuenta { grid-column: 1; grid-row: 2; }
  .pc-recursos { grid-column: 2; grid-row: 1; } .pc-productos { grid-column: 2; grid-row: 2; }
}

/* README (ronda 37): páginas legales */
.legal-txt { max-width: 820px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--tinta); }
.legal-txt h2 { font: 600 clamp(20px, 2.4vw, 25px)/1.25 var(--sans); color: var(--verde-osc); margin: 34px 0 10px; }
.legal-txt p, .legal-txt li { color: #3a4540; } .legal-txt ul, .legal-txt ol { padding-left: 22px; display: grid; gap: 8px; margin: 10px 0 16px; }
.legal-txt a { color: var(--verde); }
.legal-fecha { color: var(--suave) !important; font-size: 14.5px; margin: 0 0 18px; }
.legal-txt .centrado { text-align: center; margin: 22px 0; }
.legal-txt blockquote { margin: 14px 0; padding: 12px 18px; border-left: 4px solid var(--verde); background: var(--verde-palido); border-radius: 0 12px 12px 0; }
.tabla-legal-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: 14px; margin: 12px 0 18px; }
.tabla-legal { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.tabla-legal th, .tabla-legal td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #edf4f1; vertical-align: top; }
.tabla-legal thead th { background: var(--verde-palido); color: var(--verde-osc); font-weight: 600; }
.tabla-legal td.grupo { background: #f7fbf9; font-weight: 600; color: var(--verde-osc); padding-top: 14px; }
.legal-otros { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--suave); }
.legal-txt a.btn { color: #fff; } .legal-txt a.btn:hover { color: #fff; }
.trayectoria > div, .t-marcas li { min-width: 0; } .t-marcas a { width: 100%; } .t-marcas img { object-fit: contain; }

/* README (ronda 37): franja de confianza bajo la portada */
.confianza { background: #fff; padding: 6px 0 clamp(26px, 4vw, 44px); }
.confianza ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
@media (min-width: 900px) { .confianza ul { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.confianza li { display: flex; gap: 12px; align-items: flex-start; }
.confianza .icono { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--verde-claro); color: var(--verde-osc); }
.confianza b { display: block; font: 600 16px/1.25 var(--sans); color: var(--tinta); }
.confianza span { display: block; font-size: 14px; line-height: 1.4; color: var(--suave); margin-top: 2px; }

.comparar tbody tr[hidden] { display: none !important; }

/* README (ronda 38): selector de país */
.moneda-lista { width: 270px; }
.moneda-lista .pa { display: inline-flex; align-items: center; gap: 10px; }
.moneda-lista .pa img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; }
/* README (ronda 44): idiomas del país elegido, fijos al pie de la lista */
.moneda-idiomas { position: sticky; bottom: -6px; display: flex; gap: 6px; flex-wrap: wrap; margin: 6px -6px -6px; padding: 8px; background: #fff; border-top: 1px solid var(--linea); }
.moneda-lista .moneda-idiomas button.idi { width: auto; flex: 1; justify-content: center; font-size: 14px; padding: 8px 10px; background: #f3f3f1; }
.moneda-lista .moneda-idiomas button.idi.on { background: var(--verde, #2f8f63); color: #fff; }

/* README (ronda 39): aviso «Diséñala y mírala…» en una sola línea en el celular; secciones de precios */
@media (max-width: 600px) { .aviso-pago { flex-wrap: nowrap; justify-content: flex-start; text-align: left; padding: 12px 14px; font-size: 14.5px; gap: 8px; } .aviso-pago .icono { flex: none; } }
.comparar-tit { margin-top: 0; }
#a-medida .medida, #para-profesionales .pros { margin-top: 0; }
#formas-de-pago { padding-block: clamp(34px, 5vw, 56px); }

/* README (ronda 39): botones de portada más chicos; el celular llega hasta el borde inferior de la portada */
.portada .fila-btn .btn { padding: 11px 22px; font-size: 13px; letter-spacing: .1em; }
.portada .fila-btn { gap: 10px 12px; }
.portada:not(.alb-hero):not(.portada-centro) .portada-grid { padding-bottom: 0; align-items: end; }
.portada:not(.alb-hero) .portada-texto { padding-bottom: clamp(90px, 11vw, 160px); }
.portada:not(.alb-hero) .escena { align-self: center; margin-bottom: 0; }
@media (max-width: 959px) { .portada:not(.alb-hero) .portada-texto { padding-bottom: 8px; } .portada:not(.alb-hero) .escena { margin-top: 10px; } }

/* README (ronda 39): insignias de las funciones con los colores del panel (Gratis, Basic, Premium, Deluxe) y PLUS para los complementos */
.funcion .planes-ins { position: absolute; top: 14px; right: 14px; display: flex; gap: 5px; }
.funcion .plan { position: static; font: 600 10.5px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; background: #fff; border: 1px solid currentColor; border-radius: 99px; padding: 1px 8px; }
.funcion .plan.n-gratis { color: #64748b; } .funcion .plan.n-basic { color: #168a83; } .funcion .plan.n-premium { color: #635bdb; } .funcion .plan.n-deluxe { color: #b77924; } .funcion .plan.n-plus { color: #111; }

/* README (ronda 39): página de ejemplos a medida */
.ej-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 800px) { .ej-grilla { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.ej-item { margin: 0; text-align: center; } .ej-item figcaption { margin: 10px 0 8px; font-weight: 600; color: var(--verde-osc); }
.ej-marco { border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); background: #fff; } .ej-marco img { display: block; width: 100%; height: auto; }
.ej-pronto { text-align: center; color: var(--suave); background: var(--verde-palido); border-radius: 18px; padding: 34px 20px; }

/* README (ronda 39): página del corporativo (identidad propia, muestras, un solo plan) */
.medida.identidad { grid-template-columns: 1fr; } @media (min-width: 860px) { .medida.identidad { grid-template-columns: 1fr 1fr; } }
.medida.identidad p { color: #f0f9f6; font-size: 16.5px; line-height: 1.65; margin: 0 0 14px; }
.mu-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 800px) { .mu-grilla { grid-template-columns: repeat(5, 1fr); gap: 18px; } }
.mu-item { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, .09); padding: 12px 12px 14px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.mu-item img { width: 100%; height: auto; display: block; } .mu-item h3 { font: 600 16px/1.2 var(--sans); color: var(--verde); margin: 0; }
.mu-item .btn { padding: 9px 12px; font-size: 12.5px; }
.planes.uno { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }

/* README (ronda 39): «parcial» de la comparativa en negro y peso normal */
.comparar .parcial { color: #1c1c1c; font-weight: 400; }

/* README (ronda 40): videos del recorrido (invitación en el celular, panel en la tablet) en la portada */
.esc-tablet video, .esc-cel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }

/* README (ronda 40): los efectos al pasar el puntero van en toda la tarjeta (imagen, texto y botones), no solo en la miniatura */
.mu-item, .ej-item, .ci-item { transition: transform .25s, box-shadow .25s; }
.mu-item:hover, .ej-item:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
.mu-mini { display: block; cursor: pointer; }

/* README (ronda 41): precios — poco aire entre el título y el aviso del ojito; la invitación a medida va dentro de la sección de planes */
#planes .titulo { margin-bottom: 18px; }
#planes .aviso-pago { margin-top: 0; }
#planes .bloque-medida { margin-top: clamp(28px, 4vw, 44px); }
#planes .bloque-medida .medida { margin-top: 0; }
#planes .planes-nota { margin-top: 26px; }
.cabecera-simple + .seccion { padding-top: 26px; }

/* README (ronda 41): cabecera de Crear invitación (crear.jpg): etiqueta, 3 pasos unidos por una línea y la frase de abajo */
.cabecera-crear { padding: calc(var(--cab) + clamp(26px, 4vw, 44px)) 0 clamp(22px, 3vw, 34px); background: var(--verde-palido); text-align: center; }
.cabecera-crear .etiqueta { display: block; color: var(--verde); font: 600 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 18px; }
.pasos-crear { list-style: none; margin: 0 auto 14px; padding: 0; display: flex; align-items: flex-start; justify-content: center; max-width: 620px; position: relative; }
.pasos-crear::before { content: ''; position: absolute; left: 12%; right: 12%; top: 16px; height: 1px; background: #c9d6d1; }
.pasos-crear li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #6f7f79; font: 400 14px/1.2 var(--sans); }
.pasos-crear b { width: 32px; height: 32px; border-radius: 50%; background: #d4e4de; color: #5d6f68; display: grid; place-items: center; font: 600 15px/1 var(--sans); }
.pasos-crear li.activo b { background: var(--verde); color: #fff; }
.pasos-crear li.activo span { color: var(--verde-osc, #0c463a); }
.crear-nota { margin: 0; font-size: 13.5px; color: var(--suave); }
.cabecera-crear + .seccion { padding-top: 34px; }

/* README (ronda 41): corporativo con tres tarjetas de precio y modal de ejemplos */
.planes.tres { grid-template-columns: 1fr; max-width: 1060px; margin-inline: auto; }
@media (min-width: 860px) { .planes.tres { grid-template-columns: repeat(3, 1fr); } }
.plan-botones { display: grid; gap: 10px; margin-top: auto; padding-top: 18px; }
.plan-botones .btn { width: 100%; text-align: center; justify-content: center; }
.planes.tres .plan-card { display: flex; flex-direction: column; }
.gal-modal { border: 0; border-radius: 14px; padding: 0; width: min(920px, 94vw); max-height: 92vh; overflow: auto; background: #fff; }
.gal-modal::backdrop { background: rgba(0, 0, 0, .6); }
.gal-caja { padding: 18px 18px 22px; }
.gal-caja h3 { margin: 0 40px 14px 0; font: 600 20px/1.2 var(--sans); color: var(--verde-osc, #0c463a); }
.gal-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef5f2; font-size: 22px; line-height: 1; cursor: pointer; }
.gal-grilla { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.gal-grilla figure { margin: 0; flex: 0 1 300px; }
.gal-grilla img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); display: block; }

.planes.tres .plan-card h3 { line-height: 1.4; min-height: 2.8em; }
.portada:not(.alb-hero) .escena { margin-bottom: 5%; }

.gal-grilla img.marco { box-shadow: none; border-radius: 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }

.ej-marco.ej-phone { background: none; box-shadow: none; border-radius: 0; overflow: visible; } .ej-marco.ej-phone img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28)); }

/* README (ronda 43): ficha de cada modelo (eventos con demo y Personalizar) y sección Ideas */
.mf-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .mf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mf-grid { grid-template-columns: repeat(3, 1fr); } }
.mf-card { background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-s); display: flex; flex-direction: column; }
.mf-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mf-txt { padding: 16px 18px 18px; }
.mf-txt h3 { margin: 0 0 12px; font-size: 21px; }
.mf-txt h3 a { color: inherit; text-decoration: none; }
.mf-txt .fila-btn { gap: 10px; }
.mf-txt .btn { flex: 1 1 auto; justify-content: center; }
.ideas-lista { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.ideas-item { display: block; background: #fff; border-radius: var(--radio); padding: 22px 24px; box-shadow: var(--sombra-s); color: var(--tinta); text-decoration: none; }
.ideas-item h2 { font-size: clamp(21px, 2.6vw, 27px); margin: 0 0 6px; }
.ideas-item p { margin: 0 0 10px; }
.ideas-item span { color: var(--verde); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ideas-txt h2 { margin-top: 1.6em; }
.ideas-frases { list-style: none; padding: 0; display: grid; gap: 10px; }
.ideas-frases li { background: var(--crema, #f7f3ec); border-left: 3px solid var(--verde); padding: 12px 16px; border-radius: 6px; font-style: italic; }
.ideas-txt .fila-btn { margin-top: 28px; }

/* README (ronda 45): tráiler propio, vertical */
.dialogo-video.dv-vertical .dv-marco { aspect-ratio: 9 / 16; width: min(92vw, calc(88vh * 9 / 16)); height: auto; max-height: 88vh; background: #000; }
.dialogo-video.dv-vertical video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.dialogo-video.dv-vertical video::cue { font-size: 15px; line-height: 1.35; background: rgba(0,0,0,.6); }
/* README (ronda 47): selector de idioma de las páginas legales (sin país ni moneda) */
.idioma-legal summary { list-style: none; }
.idioma-legal summary::-webkit-details-marker { display: none; }
.idioma-legal[open] .moneda-lista { display: block; }
.idioma-legal .moneda-lista a { display: block; font: 400 15px/1.2 var(--sans); padding: 9px 10px; border-radius: 8px; color: #1c1c1c; text-decoration: none; }
.idioma-legal .moneda-lista a:hover, .idioma-legal .moneda-lista a[aria-checked="true"] { background: var(--verde-claro); }
.idioma-legal .moneda-lista { width: 180px; }
/* README (ronda 47): Profesionales · «Cómo funciona» sin los números (en el celular quedaban flotando a la izquierda) */
#como-trabajan .paso-num { display: none; }
/* README (ronda 48): precio con promo legible sobre fondos oscuros o de color: en la portada sigue blanco; en «Comparen
   todos los planes», cinta roja con letra blanca como en los paquetes */
.portada .tachado, .portada .promo-precio { color: inherit; }
.portada .tachado { opacity: .8; font-size: .85em; }
.comparar .tachado { color: inherit; opacity: .75; font-size: .9em; }
.comparar .promo-precio { display: inline-block; background: #e8523f; color: #fff; padding: 3px 8px; border-radius: 99px; margin-top: 3px; letter-spacing: .04em; }
.promo-cinta-suelta { display: inline-block; background: #e8523f; color: #fff; font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; margin: 0 8px 8px 0; vertical-align: middle; }
.ci-precio .tachado { color: var(--suave); font-size: .9em; }
.ci-precio .promo-precio { color: #c2412f; font-weight: 600; }
.ci-promo { display: inline-block; background: #e8523f; color: #fff; font: 600 10.5px/1 var(--sans); letter-spacing: .06em; padding: 4px 7px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }
.precio-m .promo-cinta-suelta { display: table; margin: 0 0 10px; }
.precio-m .tachado { color: inherit; opacity: .6; }
.precio-m .promo-precio { color: inherit; white-space: nowrap; }