/* ==========================================================================
   Tarjeta Viva · estilos del sitio (inicio + plantillas)
   Paleta de la marca: morado profundo, dorado y lila.
   La misma de las imágenes de precios que se envían por WhatsApp.
   ========================================================================== */

:root{
  /* color */
  --hondo:#1A0830; --morado:#2A0F45; --morado-2:#3A1763; --morado-3:#4A1F7A;
  --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.085);
  --borde:rgba(214,172,88,.28); --borde-fuerte:rgba(214,172,88,.62);
  --oro-1:#F6E3A1; --oro-2:#D6AC58; --oro-3:#A8791E;
  --texto:#F4EEFB; --lila:#E9DDF7; --suave:#B9A9CE;
  --wa:#0E7A3B; --wa-2:#0A5C2C;

  /* tipografía */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Great Vibes',cursive;

  --t-xs:clamp(11.5px,2.9vw,12.5px);
  --t-sm:clamp(13px,3.3vw,14px);
  --t-md:clamp(14.5px,3.6vw,16px);
  --t-lg:clamp(17px,4vw,19px);
  --t-xl:clamp(21px,4.6vw,26px);
  --t-2xl:clamp(26px,5.4vw,38px);
  --t-hero:clamp(34px,8.5vw,64px);

  /* medidas */
  --ancho:1140px;
  --radio:24px;
  --radio-sm:16px;
  --sombra:0 18px 50px rgba(10,2,25,.45);
  --transicion:.35s cubic-bezier(.22,.61,.36,1);
  --lado:20px;            /* padding lateral; en móvil sube a 35px */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  font-family:var(--sans);font-weight:400;color:var(--texto);background:var(--morado);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--oro-1);outline-offset:3px;border-radius:6px}

.envoltorio{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
.centro{text-align:center}

/* --------------------------------------------------------- fondo de marca */
.fondo{position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(90% 55% at 50% -8%, var(--morado-3) 0%, var(--morado-2) 38%, var(--morado) 68%, var(--hondo) 100%);
}
.fondo::after{           /* polvo dorado, igual que en las imágenes de precios */
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(circle, rgba(246,227,161,.55) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(246,227,161,.28) 1px, transparent 1.6px);
  background-size:97px 113px, 61px 71px;
  background-position:13px 29px, 41px 7px;
}

/* ------------------------------------------------------------- cabecera */
/* alto de la barra: 65 px suelta · 68 px pegada (logo 37→32, padding 14→18) */
.barra{
  position:sticky;top:0;z-index:50;transition:background var(--transicion),box-shadow var(--transicion),padding var(--transicion);
  padding:14px 0;backdrop-filter:blur(0px);
}
.barra.pegada{
  background:rgba(26,8,48,.86);backdrop-filter:blur(14px);padding:18px 0;
  /* el filete va como sombra, no como borde: así no suma 1 px al alto */
  box-shadow:0 1px 0 rgba(214,172,88,.22), 0 10px 30px rgba(8,2,20,.45);
}
.barra__fila{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* el logo lleva medidas fijas: nunca se deforma ni mueve la barra al achicarse */
.barra__logo{display:block;flex:none;line-height:0}
.barra__logo img{width:190px;height:37px;object-fit:contain;object-position:left center;
  transition:width var(--transicion),height var(--transicion)}
.barra.pegada .barra__logo img{width:164px;height:32px}

.menu{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.menu__enlaces{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.menu__enlaces a{font-size:var(--t-sm);color:var(--lila);position:relative;padding:4px 0;white-space:nowrap;
  transition:color var(--transicion)}
.menu__enlaces a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:linear-gradient(90deg,var(--oro-1),var(--oro-2));transition:width var(--transicion)}
.menu__enlaces a:hover::after,.menu__enlaces a:focus-visible::after,
.menu__enlaces a[aria-current="page"]::after{width:100%}
.menu__enlaces a:hover{color:var(--oro-1)}
.menu__wa{display:none}

/* botón hamburguesa (solo móvil) */
.menu__boton{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--borde);
  background:var(--panel);position:relative;transition:border-color var(--transicion),background var(--transicion)}
.menu__boton:hover{border-color:var(--borde-fuerte)}
.menu__boton span{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:var(--oro-1);
  transition:transform var(--transicion),opacity var(--transicion),top var(--transicion)}
.menu__boton span:nth-child(1){top:15px}
.menu__boton span:nth-child(2){top:21px}
.menu__boton span:nth-child(3){top:27px}
.menu__boton[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu__boton[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu__boton[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

@media (max-width:760px){
  :root{--lado:35px}
  /* en celular manda el alto del botón (40 px): barra de 64 px, 68 al pegarse */
  .barra{padding:12px 0}
  .barra.pegada{padding:14px 0}
  .barra__logo img{width:150px;height:29px}
  .barra.pegada .barra__logo img{width:130px;height:25px}
  .menu__boton{display:block;z-index:2;width:40px;height:40px}
  .menu__boton span{left:10px}
  .menu__boton span:nth-child(1){top:13px}
  .menu__boton span:nth-child(2){top:19px}
  .menu__boton span:nth-child(3){top:25px}
  .menu__boton[aria-expanded="true"] span:nth-child(1),
  .menu__boton[aria-expanded="true"] span:nth-child(3){top:19px}
  .menu__enlaces{position:absolute;top:calc(100% + 10px);right:var(--lado);left:var(--lado);
    flex-direction:column;align-items:stretch;gap:0;padding:8px;border-radius:20px;
    background:rgba(26,8,48,.96);backdrop-filter:blur(16px);border:1px solid var(--borde-fuerte);
    box-shadow:0 20px 48px rgba(8,2,20,.6);
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;
    transition:opacity var(--transicion),transform var(--transicion),visibility var(--transicion)}
  .menu.abierto .menu__enlaces{opacity:1;visibility:visible;transform:none}
  .menu__enlaces a{padding:14px 16px;border-radius:12px;font-size:var(--t-md)}
  .menu__enlaces a::after{display:none}
  .menu__enlaces a:hover,.menu__enlaces a:focus-visible{background:rgba(214,172,88,.14)}
  .menu__enlaces a[aria-current="page"]{color:var(--oro-1)}
  .menu__wa{display:block;margin-top:4px;text-align:center;font-weight:600;color:#fff!important;
    background:linear-gradient(160deg,#17A34A,var(--wa) 60%,var(--wa-2));}
}

/* ---------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:var(--t-sm);
  letter-spacing:.01em;transition:transform var(--transicion),box-shadow var(--transicion),background var(--transicion);
  will-change:transform;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn--wa{background:linear-gradient(160deg,#17A34A 0%,var(--wa) 58%,var(--wa-2) 100%);color:#fff;
  box-shadow:0 10px 26px rgba(31,175,87,.32)}
.btn--wa:hover{box-shadow:0 14px 34px rgba(31,175,87,.42)}
.btn--oro{background:linear-gradient(135deg,#F8E7A8 0%,#D9B25E 45%,#F3D98A 70%,#B98A2C 100%);color:#2A0F45;
  box-shadow:0 10px 28px rgba(185,138,44,.32)}
.btn--oro:hover{box-shadow:0 14px 36px rgba(185,138,44,.45)}
.btn--linea{border:1.5px solid var(--borde-fuerte);color:var(--oro-1)}
.btn--linea:hover{background:rgba(214,172,88,.12)}

/* ------------------------------------------------------------------- hero */
/* ojo: aquí va padding-block, no el atajo `padding`.
   Con el atajo se pisaba el padding lateral de .envoltorio y en el celular
   el texto quedaba pegado a los bordes. */
.hero{padding-block:clamp(34px,7vh,64px) clamp(30px,6vh,54px);text-align:center;position:relative}
/* en escritorio: texto a la izquierda, invitaciones reales a la derecha */
.hero__rejilla{display:grid;gap:clamp(24px,4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);text-align:left}
.hero__texto-col{min-width:0}

.hero__muestra{position:relative;display:grid;place-items:center;min-height:430px}
.telefono{position:relative;width:clamp(190px,17vw,236px);aspect-ratio:9/19.5;border-radius:30px;
  background:#0E0420;border:2px solid rgba(214,172,88,.55);padding:6px;
  box-shadow:0 30px 70px rgba(8,2,22,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  overflow:hidden;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.telefono img{width:100%;height:100%;object-fit:cover;border-radius:24px}
.telefono::after{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:52px;height:5px;border-radius:99px;background:rgba(255,255,255,.22)}
.telefono--frente{z-index:2;transform:rotate(-3deg);animation:flota 7s ease-in-out infinite}
.telefono--atras{position:absolute;left:52%;top:52%;z-index:1;opacity:.85;
  transform:translate(-4%,-46%) rotate(9deg) scale(.86);animation:flota2 8.5s ease-in-out infinite}
.hero__muestra:hover .telefono--frente{transform:rotate(-4deg) translateY(-6px)}
@keyframes flota{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-12px)}}
@keyframes flota2{0%,100%{transform:translate(-4%,-46%) rotate(9deg) scale(.86)}
                  50%{transform:translate(-4%,-52%) rotate(10deg) scale(.86)}}

/* chips flotantes sobre la muestra */
.hero__chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;font-size:var(--t-xs);color:var(--oro-1);white-space:nowrap;
  background:rgba(26,8,48,.82);backdrop-filter:blur(8px);border:1px solid var(--borde-fuerte);
  box-shadow:0 12px 28px rgba(8,2,20,.45)}
.hero__chip svg{width:15px;height:15px;flex:none}
.hero__chip--1{top:6%;left:-2%;animation:flota 6.4s ease-in-out infinite}
.hero__chip--2{top:44%;right:-4%;animation:flota 7.6s ease-in-out .4s infinite}
.hero__chip--3{bottom:6%;left:4%;animation:flota 8.2s ease-in-out .8s infinite}
@media (prefers-reduced-motion:reduce){.telefono,.hero__chip{animation:none!important}}
.hero__marca{font-family:var(--serif);font-weight:700;font-size:clamp(30px,7.4vw,56px);line-height:1.12;
  background:linear-gradient(175deg,#FFF6DA 12%,var(--oro-1) 45%,var(--oro-2) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(12,2,28,.5));animation:brillo 9s ease-in-out infinite}
@keyframes brillo{0%,100%{filter:drop-shadow(0 6px 22px rgba(12,2,28,.5))}50%{filter:drop-shadow(0 6px 30px rgba(214,172,88,.34))}}
.hero__lema{font-family:var(--script);font-size:clamp(22px,5.6vw,34px);color:var(--lila);margin-top:10px;line-height:1.2}
.hero__texto{max-width:52ch;margin:18px 0 0;font-size:var(--t-md);color:var(--lila);opacity:.92}
.hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.solo-movil{display:none}

/* --------------------------------------------------------------- secciones */
.seccion{padding-block:clamp(44px,7.5vh,78px);position:relative}
.seccion__eyebrow{font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--oro-2);
  text-align:center;margin-bottom:8px}
.seccion__titulo{font-family:var(--serif);font-weight:700;font-size:var(--t-2xl);text-align:center;line-height:1.2}
.seccion__titulo em{font-style:italic;
  background:linear-gradient(180deg,var(--oro-1) 10%,var(--oro-2) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.seccion__bajada{max-width:60ch;margin:12px auto 0;text-align:center;font-size:var(--t-sm);color:var(--lila);opacity:.88}
.seccion__filete{width:94px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--oro-2),transparent)}

/* ------------------------------------------------------------------ pasos */
.pasos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));margin-top:34px}
.paso{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:26px 24px;
  position:relative;transition:transform var(--transicion),border-color var(--transicion),background var(--transicion)}
.paso:hover{transform:translateY(-5px);border-color:var(--borde-fuerte);background:var(--panel-2)}
.paso__num{font-family:var(--serif);font-size:44px;line-height:1;
  background:linear-gradient(180deg,var(--oro-1),var(--oro-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.paso h3{font-family:var(--serif);font-size:var(--t-lg);font-weight:700;margin:6px 0 6px}
.paso p{font-size:var(--t-sm);color:var(--lila);opacity:.88}

/* --------------------------------------------------------------- plantillas */
.filtros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px 0 6px}
.filtro{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;
  border:1px solid var(--borde);background:var(--panel);color:var(--lila);font-size:var(--t-sm);font-weight:500;
  transition:all var(--transicion)}
.filtro:hover{border-color:var(--borde-fuerte);color:var(--oro-1);transform:translateY(-2px)}
.filtro__n{font-size:var(--t-xs);opacity:.7}
.filtro[aria-pressed="true"]{
  background:linear-gradient(135deg,#F8E7A8 0%,#D9B25E 48%,#F3D98A 72%,#B98A2C 100%);
  color:#2A0F45;border-color:transparent;font-weight:700;box-shadow:0 8px 22px rgba(185,138,44,.3)}
.filtro[aria-pressed="true"] .filtro__n{opacity:.75}

.rejilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:26px}
/* en el inicio son 6 modelos: se ven mejor en filas de tres */
.rejilla--destacados{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.modelo{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--hondo),rgba(255,255,255,.055) 42%);
  border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;position:relative;box-shadow:var(--sombra);
  transition:transform var(--transicion),border-color var(--transicion),box-shadow var(--transicion)}
.modelo:hover,.modelo:focus-visible{transform:translateY(-6px);border-color:var(--borde-fuerte);
  box-shadow:0 24px 54px rgba(8,2,20,.55)}

/* borde de luz dorada girando alrededor de la tarjeta al pasar el mouse */
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}
.modelo::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--giro),
    transparent 0deg 42deg, rgba(246,227,161,.25) 62deg, var(--oro-1) 84deg,
    rgba(246,227,161,.25) 106deg, transparent 126deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity var(--transicion)}
.modelo:hover::after,.modelo:focus-visible::after{opacity:1;animation:giro-borde 2.8s linear infinite}
@keyframes giro-borde{to{--giro:360deg}}
/* La foto se sale 1 px del marco por los cuatro lados. Sin ese margen, al
   animar el hover el redondeo de subpíxeles dejaba ver una línea clara del
   fondo de la tarjeta justo debajo de la imagen. */
/* La foto crece con la tarjeta: en una misma fila unas fichas tienen título de
   una línea y otras de dos, y sin esto a las cortas les quedaba un hueco abajo. */
.modelo__marco{position:relative;overflow:hidden;aspect-ratio:3/4;flex:1 1 auto;
  background:var(--hondo);transform:translateZ(0)}
.modelo__arte{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  object-fit:cover;backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.modelo:hover .modelo__arte{transform:scale(1.06)}
.modelo__etiqueta{position:absolute;top:12px;left:12px;padding:5px 13px;border-radius:999px;
  background:rgba(26,8,48,.72);backdrop-filter:blur(6px);border:1px solid var(--borde);
  font-size:var(--t-xs);color:var(--oro-1);letter-spacing:.06em}
.modelo__velo{position:absolute;inset:auto -1px -1px -1px;height:58%;pointer-events:none;
  background:linear-gradient(to top,var(--hondo) 0,rgba(26,8,48,.92) 10%,transparent 100%)}
/* remate opaco al pie de la foto: las portadas claras (boda, bautizo, baby
   shower) terminan en crema y, al animarse el hover, esa fila se asomaba
   como una línea blanca entre la imagen y el texto. */
.modelo__marco::after{content:'';position:absolute;left:-1px;right:-1px;bottom:-1px;height:4px;
  background:var(--hondo);pointer-events:none}
/* El pie sube 1 px y va opaco: el recorte del marco cae en medio píxel y la
   última fila de la foto (crema en boda, bautizo y baby shower) se colaba como
   una línea blanca al animarse el hover. Así queda tapada siempre. */
.modelo__pie{position:relative;z-index:2;margin-top:-1px;padding:17px 18px 20px;
  background:linear-gradient(180deg,#241241,#1E0C34)}
.modelo__nombre{font-family:var(--serif);font-weight:700;font-size:var(--t-lg);line-height:1.25}
.modelo__que{font-size:var(--t-xs);color:var(--suave);margin-top:4px}
.modelo__abre{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:var(--t-xs);color:var(--oro-1)}
.modelo__abre svg{width:14px;height:14px;flex:none;transition:transform var(--transicion)}
.modelo:hover .modelo__abre svg{transform:translateX(4px)}
.modelo--oculto{display:none}
.modelo--entra{animation:entra .45s cubic-bezier(.22,.61,.36,1) both}
@keyframes entra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.vacio{text-align:center;color:var(--lila);opacity:.8;font-size:var(--t-sm);padding:40px 0}

/* ------------------------------------------------------------------ incluye */
.incluye{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));margin-top:32px}
.incluye__item{display:flex;gap:14px;background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio-sm);padding:18px 20px;transition:transform var(--transicion),border-color var(--transicion)}
.incluye__item:hover{transform:translateY(-4px);border-color:var(--borde-fuerte)}
.incluye__ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(214,172,88,.14);border:1px solid var(--borde)}
.incluye__ico svg{width:21px;height:21px;color:var(--oro-1)}
.incluye__item b{display:block;font-family:var(--serif);font-size:var(--t-md);font-weight:700;color:var(--oro-1)}
.incluye__item p{font-size:var(--t-sm);color:var(--lila);opacity:.86;margin-top:3px}

/* ------------------------------------------------------------------ precios */
.precios{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));margin-top:34px;align-items:stretch}
.plan{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:30px 26px;
  display:flex;flex-direction:column;transition:transform var(--transicion),border-color var(--transicion)}
.plan:hover{transform:translateY(-6px);border-color:var(--borde-fuerte)}
.plan__nombre{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--oro-2)}
.plan__precio{font-family:var(--serif);font-weight:700;font-size:clamp(40px,9vw,56px);line-height:1.05;margin-top:6px;
  background:linear-gradient(180deg,var(--oro-1),var(--oro-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.plan__precio small{font-size:.5em}
.plan__texto{font-size:var(--t-sm);color:var(--lila);opacity:.9;margin-top:10px}
.plan__lista{list-style:none;margin-top:16px;display:grid;gap:9px}
.plan__lista li{display:flex;gap:9px;font-size:var(--t-sm);color:var(--lila)}
.plan__lista svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--oro-2)}
.plan__nota{margin-top:auto;padding-top:16px;font-size:var(--t-xs);color:var(--suave)}
.plan--destacado{background:linear-gradient(160deg,rgba(214,172,88,.16),rgba(255,255,255,.05));
  border-color:var(--borde-fuerte);position:relative}
.plan--destacado::before{content:'El más pedido';position:absolute;top:-13px;left:26px;
  background:linear-gradient(135deg,#F8E7A8,#D9B25E);color:#2A0F45;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:999px}

/* -------------------------------------------------------------- confianza */
.confianza{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:32px}
.confianza__item{text-align:center;padding:26px 22px;border-radius:var(--radio);
  background:var(--panel);border:1px solid var(--borde);transition:transform var(--transicion),border-color var(--transicion)}
.confianza__item:hover{transform:translateY(-4px);border-color:var(--borde-fuerte)}
.confianza__ico{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:rgba(214,172,88,.14);border:1px solid var(--borde)}
.confianza__ico svg{width:25px;height:25px;color:var(--oro-1)}
.confianza__item b{display:block;font-family:var(--serif);font-size:var(--t-md);font-weight:700;color:var(--texto)}
.confianza__item p{font-size:var(--t-sm);color:var(--lila);opacity:.86;margin-top:5px}

/* -------------------------------------------------------------------- faq */
.faq{max-width:780px;margin:32px auto 0;display:grid;gap:12px}
.faq__item{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio-sm);overflow:hidden;
  transition:border-color var(--transicion),background var(--transicion)}
.faq__item:hover{border-color:var(--borde-fuerte)}
.faq__item.abierto{background:var(--panel-2);border-color:var(--borde-fuerte)}
.faq__h{margin:0}
.faq__p{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  font-family:var(--serif);font-weight:600;font-size:var(--t-md);text-align:left;cursor:pointer}
.faq__p svg{width:20px;height:20px;flex:none;color:var(--oro-2);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),color var(--transicion)}
.faq__item.abierto .faq__p svg{transform:rotate(135deg);color:var(--oro-1)}
/* apertura y cierre suaves: la fila del grid crece de 0fr a 1fr */
.faq__cuerpo{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1)}
.faq__item.abierto .faq__cuerpo{grid-template-rows:1fr}
.faq__cuerpo>div{overflow:hidden}
.faq__r{padding:0 22px 20px;font-size:var(--t-sm);color:var(--lila);opacity:0;transform:translateY(-6px);
  transition:opacity .35s ease .08s,transform .35s ease .08s}
.faq__item.abierto .faq__r{opacity:.92;transform:none}

/* ------------------------------------------------------------------ cierre */
.cierre{text-align:center;border-radius:var(--radio);padding:clamp(34px,6vh,58px) 24px;
  background:linear-gradient(160deg,rgba(214,172,88,.15),rgba(255,255,255,.04));
  border:1px solid var(--borde-fuerte);box-shadow:var(--sombra)}
.cierre__correo{margin-top:14px;font-size:var(--t-sm);color:var(--lila);opacity:.88}
.cierre__correo a{color:var(--oro-1)}

.pie{text-align:center;padding-block:34px 40px;font-size:var(--t-xs);color:var(--suave);opacity:.75}
.pie a{color:var(--lila)}

/* ------------------------------------------------------- revelado al scroll */
.revela{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.revela.visible{opacity:1;transform:none}

/* ------------------------------------------- cielo animado y luz del cursor */
.lienzo-fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9}
.luz-cursor{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle closer-side,
    rgba(246,227,161,.16) 0%, rgba(214,172,88,.10) 34%, rgba(122,60,190,.08) 60%, transparent 72%);
  filter:blur(6px)}
.luz-cursor.encendida{opacity:1}
/* con el cielo en canvas, el polvo estático del CSS sobra */
.lienzo-fondo ~ .fondo::after,body:has(.lienzo-fondo) .fondo::after{opacity:0}

/* ---------------------------------------------------- ritmo en pantallas chicas */
@media (max-width:980px){
  /* en tableta y celular el hero vuelve a una sola columna y centrado */
  .hero__rejilla{grid-template-columns:1fr;text-align:center}
  .hero__texto{margin-inline:auto}
  .hero__acciones{justify-content:center}
}

@media (max-width:760px){
  .seccion{padding-block:50px}
  .hero{padding-block:34px 44px}
  /* menos texto y sin muestra: se llega antes a "cómo funciona" */
  .hero__muestra,.hero__lema{display:none}
  .solo-escritorio{display:none}
  .solo-movil{display:inline}
  .hero__marca{font-size:clamp(29px,7.6vw,38px)}
  /* los dos botones del hero entran en una sola fila */
  .hero__acciones{flex-wrap:nowrap;gap:10px}
  .hero__acciones .btn{flex:1 1 0;padding:13px 12px;white-space:nowrap;gap:8px}
  /* en el inicio solo se muestran dos modelos; el resto está en /plantillas/ */
  .rejilla--destacados .modelo:nth-child(n+3){display:none}
  .rejilla{gap:16px}
  .cierre{padding:38px 22px}
  .pasos,.incluye,.precios,.confianza{margin-top:26px}
  .faq{margin-top:26px}
  html{scroll-padding-top:78px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .revela{opacity:1;transform:none}
  .luz-cursor,.lienzo-fondo{display:none}
  .faq__cuerpo{transition:none}
}