/* ==========================================================
   AMEI PRODUCCIONES — Hoja de estilos (diseño v2)
   Colores de Jessica: rosa #E75A9B y dorado #E0B04A
   Tipografía: Fraunces (títulos) + Inter (texto)
   ========================================================== */

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

:root{
  /* --- Colores de la marca --- */
  --rosa:#E75A9B;
  --rosa-fuerte:#C42D6E;
  --rosa-hondo:#8E1B4D;
  --rosa-suave:#FDF0F6;
  --rosa-bruma:#FBE3EF;
  --dorado:#E0B04A;
  --dorado-fuerte:#8A6416;
  --dorado-suave:#FCF5E8;

  /* --- Neutros cálidos --- */
  --tinta:#2A1622;
  --tinta-2:#4A3242;
  --neutro:#7A6875;
  --papel:#FFFDFB;
  --papel-2:#FAF4F8;
  --linea:#F0E2EB;
  --linea-2:#E5D2DE;

  --verde-wa:#22C55E;
  --verde-wa-hondo:#118A43;

  --sombra:0 1px 2px rgba(42,22,34,.05), 0 14px 34px -18px rgba(142,27,77,.28);
  --sombra-alta:0 2px 8px rgba(42,22,34,.07), 0 30px 60px -24px rgba(142,27,77,.42);
  --sombra-dorada:0 2px 8px rgba(42,22,34,.06), 0 24px 48px -20px rgba(224,176,74,.5);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ancho:1140px;
  --radio:18px;
  --curva:cubic-bezier(.22,1,.36,1);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--rosa);color:#fff}

h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-0.01em;font-weight:700}

:focus-visible{outline:3px solid var(--rosa);outline-offset:3px;border-radius:6px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding:72px 0}
@media (min-width:900px){.seccion{padding:92px 0}}

/* Fondos de sección con textura de confeti sutil */
.seccion-rosa{
  background:
    radial-gradient(rgba(231,90,155,.07) 1.5px, transparent 1.5px),
    radial-gradient(rgba(224,176,74,.09) 1.5px, transparent 1.5px),
    var(--rosa-suave);
  background-size:34px 34px,34px 34px,auto;
  background-position:0 0,17px 17px,0 0;
}
.seccion-crema{
  background:
    radial-gradient(rgba(224,176,74,.08) 1.5px, transparent 1.5px),
    var(--dorado-suave);
  background-size:30px 30px,auto;
}

/* ---------- Aparición al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--curva),transform .7s var(--curva)}
.rv-in{opacity:1;transform:none}

/* ---------- Encabezado de sección ---------- */
.titulo-seccion{text-align:center;max-width:640px;margin:0 auto 44px}
.titulo-seccion .sobre{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rosa-fuerte);margin-bottom:14px;
}
.titulo-seccion .sobre::before,.titulo-seccion .sobre::after{
  content:"✦";font-size:10px;color:var(--dorado);
}
.titulo-seccion h2{font-size:clamp(28px,4.8vw,42px);margin-bottom:12px}
.titulo-seccion h2 em{font-style:italic;color:var(--rosa-fuerte)}
.titulo-seccion p{color:var(--neutro);font-size:16.5px}

/* ---------- Botones ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--texto);font-weight:700;font-size:15.5px;letter-spacing:.01em;
  padding:15px 28px;border-radius:99px;border:2px solid transparent;
  cursor:pointer;min-height:54px;
  transition:transform .15s var(--curva), box-shadow .25s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;text-align:center;
}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .5s ease;pointer-events:none;
}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-rosa{
  background:linear-gradient(135deg,var(--rosa-fuerte),var(--rosa-hondo));color:#fff;
  box-shadow:0 12px 28px -10px rgba(196,45,110,.55);
}
.btn-rosa:hover{box-shadow:0 18px 38px -12px rgba(196,45,110,.65)}
.btn-wa{
  background:linear-gradient(135deg,var(--verde-wa),var(--verde-wa-hondo));color:#fff;
  box-shadow:0 12px 28px -10px rgba(17,138,67,.5);
}
.btn-wa:hover{box-shadow:0 18px 38px -12px rgba(17,138,67,.6)}
.btn-linea{background:var(--papel);color:var(--tinta);border-color:var(--linea-2)}
.btn-linea:hover{border-color:var(--rosa);color:var(--rosa-fuerte);box-shadow:var(--sombra)}
.btn-blanco{background:#fff;color:var(--rosa-fuerte);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.btn-blanco:hover{box-shadow:0 20px 42px -14px rgba(0,0,0,.4)}
.btn svg{width:19px;height:19px;flex:0 0 auto}

/* ---------- Barra superior ---------- */
.barra-top{
  background:linear-gradient(90deg,var(--rosa-hondo),var(--rosa-fuerte) 45%,var(--dorado-fuerte) 120%);
  color:#FDEFF6;font-size:13px;font-weight:500;letter-spacing:.02em;
  padding:9px 0;text-align:center;
}
.barra-top b{color:var(--dorado);font-weight:700}

/* ---------- Encabezado ---------- */
.encabezado{
  position:sticky;top:0;z-index:50;background:rgba(255,253,251,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.encabezado.scrolled{border-color:var(--linea);box-shadow:0 8px 30px -18px rgba(142,27,77,.3)}
.encabezado-in{display:flex;align-items:center;gap:14px;min-height:76px}

.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo .marca{
  width:44px;height:44px;border-radius:14px;flex:0 0 auto;position:relative;
  background:linear-gradient(135deg,var(--rosa) 10%,var(--rosa-fuerte) 55%,var(--dorado) 130%);
  display:grid;place-items:center;color:#fff;font-family:var(--display);
  font-weight:700;font-size:21px;font-style:italic;
  box-shadow:0 8px 18px -8px rgba(196,45,110,.55);
}
.logo .nom{line-height:1.05}
.logo .nom b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.logo .nom span{display:block;font-size:10px;color:var(--rosa-fuerte);letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-top:2px}

.menu{display:none;margin-left:auto;align-items:center;gap:2px}
.menu a{
  position:relative;padding:10px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--tinta-2);
  transition:color .15s ease;
}
.menu a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--rosa),var(--dorado));
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--curva);
}
.menu a:hover{color:var(--rosa-fuerte)}
.menu a:hover::after,.menu a.activo::after{transform:scaleX(1)}
.menu a.activo{color:var(--rosa-fuerte)}
.encabezado .btn{margin-left:auto;padding:11px 19px;min-height:46px;font-size:14px}

.hamburguesa{
  margin-left:auto;width:48px;height:48px;border-radius:13px;border:1.5px solid var(--linea-2);
  background:var(--papel);display:grid;place-items:center;gap:4.5px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;flex:0 0 auto;transition:border-color .2s ease;
}
.hamburguesa span{display:block;width:21px;height:2px;background:var(--tinta);border-radius:2px;transition:.25s var(--curva)}
.hamburguesa[aria-expanded="true"]{border-color:var(--rosa)}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu-movil{
  display:none;flex-direction:column;gap:2px;padding:12px 20px 20px;
  border-top:1px solid var(--linea);background:var(--papel);
}
.menu-movil.abierto{display:flex;animation:menu-cae .28s var(--curva)}
@keyframes menu-cae{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu-movil a{padding:14px 13px;border-radius:11px;font-weight:600;font-size:16px}
.menu-movil a:active{background:var(--rosa-suave)}
.menu-movil a.activo{color:var(--rosa-fuerte);background:var(--rosa-suave)}
.menu-movil .btn{margin-top:10px}

@media (max-width:559px){ .encabezado .btn-wa{display:none} }
@media (min-width:960px){
  .menu{display:flex}
  .hamburguesa{display:none}
  .menu-movil{display:none !important}
  .encabezado .btn{margin-left:12px}
}

/* ---------- Portada (hero) ---------- */
.portada{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(224,176,74,.22), transparent 60%),
    radial-gradient(700px 420px at -5% 105%, rgba(231,90,155,.18), transparent 58%),
    linear-gradient(180deg,#FEF6FA 0%, var(--papel) 100%);
  padding:64px 0 84px;
}
/* confeti flotante del hero */
.portada::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 4px at 12% 18%, rgba(231,90,155,.35) 45%, transparent 50%),
    radial-gradient(circle 3px at 78% 12%, rgba(224,176,74,.5) 45%, transparent 50%),
    radial-gradient(circle 5px at 92% 42%, rgba(231,90,155,.25) 45%, transparent 50%),
    radial-gradient(circle 3px at 5% 60%, rgba(224,176,74,.4) 45%, transparent 50%),
    radial-gradient(circle 4px at 62% 6%, rgba(196,45,110,.3) 45%, transparent 50%);
}
.portada-grid{display:grid;gap:44px;align-items:center;position:relative}
.portada .insignia{
  display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1.5px solid var(--dorado);color:var(--dorado-fuerte);
  padding:8px 17px;border-radius:99px;font-size:13px;font-weight:700;
  box-shadow:var(--sombra-dorada);margin-bottom:22px;
}
.portada h1{font-size:clamp(34px,7.4vw,60px);letter-spacing:-.02em;margin-bottom:18px}
.portada h1 .destacado{
  font-style:italic;
  background:linear-gradient(100deg,var(--rosa-fuerte) 20%,var(--dorado-fuerte) 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.12em;
  background-repeat:no-repeat;
}
.portada h1 .destacado::after{content:none}
.portada .entrada{font-size:17.5px;color:var(--neutro);margin-bottom:30px;max-width:520px;line-height:1.75}
.portada .botones{display:flex;flex-wrap:wrap;gap:12px}

/* Collage de fotos del hero (rejilla tipo revista, sin encimar texto) */
.portada-collage{
  position:relative;display:grid;gap:14px;
  grid-template-columns:1.12fr .88fr;grid-template-rows:1fr 1fr;
  aspect-ratio:1/1;
}
.marco-foto{
  position:relative;border-radius:22px;overflow:hidden;background:#fff;
  padding:8px;box-shadow:var(--sombra-alta);
  animation:flota-card 7s ease-in-out infinite;
}
.marco-foto>*{border-radius:15px;overflow:hidden;width:100%;height:100%}
.marco-foto.principal{grid-column:1;grid-row:1 / span 2;animation-delay:0s}
.marco-foto.flotante-a{grid-column:2;grid-row:1;animation-delay:.9s}
.marco-foto.flotante-b{grid-column:2;grid-row:2;animation-delay:1.7s}
.marco-foto.principal .hueco-foto b{font-size:18px}
.marco-foto.flotante-a .hueco-foto,.marco-foto.flotante-b .hueco-foto{padding:14px}
.marco-foto.flotante-a .hueco-foto .icono,.marco-foto.flotante-b .hueco-foto .icono{font-size:30px;margin-bottom:5px}
.marco-foto.flotante-a .hueco-foto b,.marco-foto.flotante-b .hueco-foto b{font-size:12.5px;line-height:1.25}
@keyframes flota-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.chip-flotante{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:7px;
  background:#fff;border-radius:99px;padding:9px 15px;font-size:13px;font-weight:700;
  box-shadow:var(--sombra-alta);white-space:nowrap;
}
.chip-flotante.a{left:-6px;top:-16px;animation:flota-card 6s ease-in-out .4s infinite}
.chip-flotante.b{left:2%;bottom:-14px;animation:flota-card 7.5s ease-in-out 1.4s infinite}
@media (max-width:560px){
  .portada-collage{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;aspect-ratio:auto}
  .marco-foto.principal{grid-column:1 / span 2;grid-row:1;aspect-ratio:16/10}
  .marco-foto.flotante-a{grid-column:1;grid-row:2;aspect-ratio:1}
  .marco-foto.flotante-b{grid-column:2;grid-row:2;aspect-ratio:1}
  .chip-flotante.a{top:-13px;left:-2px;font-size:12px;padding:8px 13px}
  .chip-flotante.b{display:none}
}
@media (min-width:900px){
  .portada{padding:84px 0 104px}
  .portada-grid{grid-template-columns:1.02fr .98fr;gap:60px}
}

/* Marco donde van las fotos reales de Jessica */
.hueco-foto{
  width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:24px;
  background:
    radial-gradient(circle 3px at 20% 25%, rgba(255,255,255,.4) 45%, transparent 50%),
    radial-gradient(circle 2.5px at 75% 15%, rgba(255,255,255,.45) 45%, transparent 50%),
    radial-gradient(circle 3px at 85% 70%, rgba(255,255,255,.35) 45%, transparent 50%),
    radial-gradient(circle 2px at 35% 80%, rgba(255,255,255,.4) 45%, transparent 50%),
    linear-gradient(140deg, var(--rosa) 0%, var(--rosa-fuerte) 52%, var(--dorado) 125%);
  color:#fff;
}
.hueco-foto .dentro{max-width:290px}
.hueco-foto .icono{font-size:42px;margin-bottom:10px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.hueco-foto b{display:block;font-family:var(--display);font-size:17px;margin-bottom:5px}
.hueco-foto small{font-size:12.5px;opacity:.92;line-height:1.55;display:block}

/* ---------- Cinta corrediza de servicios ---------- */
.cinta-marquee{
  background:var(--tinta);color:#F6E8F0;overflow:hidden;padding:15px 0;
  border-top:3px solid var(--dorado);
}
.cinta-marquee .pista{
  display:flex;flex-wrap:nowrap;gap:0;width:max-content;
  animation:marquee 30s linear infinite;
}
.cinta-marquee span{
  display:inline-flex;align-items:center;gap:18px;padding:0 18px;
  font-family:var(--display);font-style:italic;font-size:16px;white-space:nowrap;letter-spacing:.02em;
}
.cinta-marquee span::after{content:"✦";font-style:normal;font-size:11px;color:var(--dorado)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Barra de confianza ---------- */
.confianza{
  background:
    radial-gradient(600px 200px at 50% -60%, rgba(231,90,155,.28), transparent 70%),
    var(--tinta);
  color:#fff;padding:40px 0;
}
.confianza-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px}
.confianza .item{text-align:center;position:relative}
.confianza .item b{
  display:block;font-family:var(--display);font-size:clamp(26px,4.6vw,38px);font-style:italic;
  background:linear-gradient(120deg,var(--dorado) 30%,#F6D48A 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.15;margin-bottom:4px;
}
.confianza .item span{font-size:13px;color:#D9C3D1;line-height:1.45;display:block}
@media (min-width:760px){
  .confianza-grid{grid-template-columns:repeat(4,1fr)}
  .confianza .item+.item::before{
    content:"";position:absolute;left:-8px;top:12%;bottom:12%;width:1px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
  }
}

/* ---------- Tarjetas de servicio ---------- */
.rejilla{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.rejilla-3{grid-template-columns:repeat(3,1fr)}}

.tarjeta-serv{
  position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:22px;
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;
  transition:transform .3s var(--curva), box-shadow .35s ease;
}
.tarjeta-serv:hover{transform:translateY(-7px);box-shadow:var(--sombra-alta)}
.tarjeta-serv .imagen{aspect-ratio:16/10;position:relative;overflow:hidden}
.tarjeta-serv .imagen .hueco-foto{transition:transform .5s var(--curva)}
.tarjeta-serv:hover .imagen .hueco-foto{transform:scale(1.045)}
.tarjeta-serv .texto{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:10px}
.tarjeta-serv h3{font-size:22px}
.tarjeta-serv p{font-size:14.5px;color:var(--neutro);flex:1;line-height:1.65}
.tarjeta-serv .lleva{display:flex;flex-wrap:wrap;gap:6px}
.tarjeta-serv .ver{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;
  color:var(--rosa-fuerte);margin-top:5px;transition:gap .2s var(--curva);
}
.tarjeta-serv:hover .ver{gap:12px}
.pildora{
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:99px;
  background:var(--rosa-suave);color:var(--rosa-fuerte);border:1px solid var(--rosa-bruma);
}

/* ---------- Paquetes: boletos de feria ---------- */
.paquetes{display:grid;gap:26px;grid-template-columns:1fr;max-width:900px;margin:0 auto}
@media (min-width:820px){.paquetes{grid-template-columns:repeat(2,1fr)}}

.paquete{
  background:var(--papel);border:1px solid var(--linea);border-radius:24px;
  overflow:visible;display:flex;flex-direction:column;box-shadow:var(--sombra);position:relative;
  transition:transform .3s var(--curva), box-shadow .35s ease;
}
.paquete:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.paquete.destacado{
  border:2px solid var(--rosa);box-shadow:0 24px 56px -20px rgba(196,45,110,.45);
}
.paquete .etiqueta{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:2;
  background:linear-gradient(120deg,var(--dorado),#C89530);color:#fff;
  font-size:12px;font-weight:700;padding:7px 18px;border-radius:99px;letter-spacing:.06em;
  text-transform:uppercase;box-shadow:0 8px 20px -8px rgba(138,100,22,.6);white-space:nowrap;
}
.paquete .cabeza{
  position:relative;padding:30px 26px 22px;text-align:center;
  border-bottom:2px dashed var(--linea-2);
}
/* muescas de boleto */
.paquete .cabeza::before,.paquete .cabeza::after{
  content:"";position:absolute;bottom:-13px;width:26px;height:26px;border-radius:99px;
  background:var(--rosa-suave);z-index:1;
}
.paquete .cabeza::before{left:-14px;box-shadow:inset -3px 0 5px -3px rgba(142,27,77,.18)}
.paquete .cabeza::after{right:-14px;box-shadow:inset 3px 0 5px -3px rgba(142,27,77,.18)}
.paquete .cabeza h3{font-size:24px;margin-bottom:2px}
.paquete .cabeza .desde{font-size:12px;color:var(--neutro);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.paquete .precio{
  font-family:var(--display);font-style:italic;font-size:46px;color:var(--rosa-fuerte);
  line-height:1.05;letter-spacing:-.02em;margin-top:8px;
}
.paquete .precio small{font-size:15px;color:var(--neutro);font-weight:500;font-style:normal;letter-spacing:0}
.paquete ul{list-style:none;padding:24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.paquete li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px}
.paquete li .check{
  width:21px;height:21px;flex:0 0 auto;border-radius:99px;background:var(--rosa-suave);
  color:var(--rosa-fuerte);display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:2px;
}
.paquete li.plus .check{background:linear-gradient(120deg,var(--dorado),#C89530);color:#fff}
.paquete li.plus{font-weight:600}
.paquete .pie{padding:0 26px 26px}
.paquete .pie .btn{width:100%}

/* ---------- Por qué elegirnos ---------- */
.razones{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.razones{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.razones{grid-template-columns:repeat(3,1fr)}}
.razon{
  display:flex;gap:15px;align-items:flex-start;padding:22px;
  background:var(--papel);border:1px solid var(--linea);border-radius:18px;
  transition:transform .25s var(--curva), box-shadow .3s ease, border-color .3s ease;
}
.razon:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--rosa-bruma)}
.razon .ico{
  width:48px;height:48px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--dorado-suave),#F8E8C4);font-size:22px;
  border:1px solid #F0DFB4;box-shadow:0 6px 14px -8px rgba(138,100,22,.4);
}
.razon b{display:block;font-family:var(--display);font-size:17.5px;margin-bottom:3px}
.razon p{font-size:13.5px;color:var(--neutro);line-height:1.6}

/* ---------- Franja de llamada ---------- */
.franja-cta{
  position:relative;
  background:
    radial-gradient(circle 3px at 15% 30%, rgba(255,255,255,.25) 45%, transparent 50%),
    radial-gradient(circle 4px at 85% 20%, rgba(255,255,255,.2) 45%, transparent 50%),
    radial-gradient(circle 3px at 70% 80%, rgba(255,255,255,.22) 45%, transparent 50%),
    linear-gradient(130deg,var(--rosa-hondo) 0%,var(--rosa-fuerte) 45%, #B8722E 130%);
  color:#fff;padding:72px 0;text-align:center;overflow:hidden;
}
/* festón de banderitas arriba */
.franja-cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:14px;
  background:radial-gradient(circle 14px at 50% 0, var(--papel) 98%, transparent 100%);
  background-size:34px 14px;background-position:0 0;background-repeat:repeat-x;
}
.franja-cta h2{font-size:clamp(27px,5vw,40px);margin-bottom:12px}
.franja-cta h2 em{font-style:italic;color:var(--dorado)}
.franja-cta p{font-size:16.5px;opacity:.95;max-width:540px;margin:0 auto 28px}
.franja-cta .botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- Pie ---------- */
.pie-sitio{
  position:relative;
  background:
    radial-gradient(700px 240px at 80% -30%, rgba(231,90,155,.2), transparent 70%),
    var(--tinta);
  color:#D9C3D1;padding:60px 0 30px;font-size:14px;
}
.pie-sitio::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--rosa),var(--dorado),var(--rosa));
}
.pie-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:760px){.pie-grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie-sitio h4{color:#fff;font-size:15.5px;margin-bottom:14px;font-family:var(--display);font-style:italic}
.pie-sitio .logo .nom b{color:#fff}
.pie-sitio .logo .nom span{color:var(--dorado)}
.pie-sitio .desc{margin-top:16px;line-height:1.7;max-width:330px;color:#BCA2B3}
.pie-lista{list-style:none;display:flex;flex-direction:column;gap:10px}
.pie-lista a{transition:color .15s ease}
.pie-lista a:hover{color:var(--dorado)}
.pie-contacto{display:flex;flex-direction:column;gap:11px}
.pie-contacto a,.pie-contacto span{display:flex;gap:9px;align-items:flex-start;line-height:1.55}
.pie-contacto a:hover{color:var(--dorado)}
.pie-abajo{
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12.5px;color:#9D8194;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flota{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:60px;height:60px;border-radius:99px;
  background:linear-gradient(135deg,var(--verde-wa),var(--verde-wa-hondo));
  display:grid;place-items:center;box-shadow:0 10px 28px -6px rgba(17,138,67,.65);
  transition:transform .2s var(--curva);-webkit-tap-highlight-color:transparent;
}
.wa-flota:hover{transform:scale(1.08) rotate(4deg)}
.wa-flota:active{transform:scale(.94)}
.wa-flota svg{width:32px;height:32px;fill:#fff}
.wa-flota::after{
  content:"";position:absolute;inset:0;border-radius:99px;
  border:2px solid var(--verde-wa);animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.55);opacity:0}
}
@media (min-width:960px){.wa-flota{right:26px;bottom:26px}}

/* ---------- Aviso para Dylan (se quita al final) ---------- */
.aviso-obra{
  background:#2A1622;color:#F6D48A;font-size:12.5px;text-align:center;
  padding:9px 16px;line-height:1.5;
}
.aviso-obra b{color:#fff}


/* ==========================================================
   MEJORAS v3
   ========================================================== */

/* ---------- Entrada animada de la portada ---------- */
@keyframes entra-arriba{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes entra-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.portada .insignia{animation:entra-arriba .7s var(--curva) both}
.portada h1{animation:entra-arriba .7s var(--curva) .12s both}
.portada .entrada{animation:entra-arriba .7s var(--curva) .24s both}
.portada .botones{animation:entra-arriba .7s var(--curva) .36s both}
.portada-collage{animation:entra-zoom .9s var(--curva) .2s both}

/* Anclas internas: que no queden bajo el encabezado pegajoso */
section[id]{scroll-margin-top:96px}

/* Botones del hero a lo ancho en celulares chicos */
@media (max-width:430px){
  .portada .botones .btn{flex:1 1 100%}
}
@media (max-width:360px){
  .portada-collage{min-height:300px}
  .chip-flotante{font-size:12px;padding:8px 13px}
}

/* ---------- Barra de acciones tipo app (solo celular) ---------- */
.barra-app{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:stretch;
  background:rgba(255,253,251,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  box-shadow:0 -8px 30px -16px rgba(142,27,77,.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-app a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px 10px;font-size:11px;font-weight:700;color:var(--tinta-2);
  -webkit-tap-highlight-color:transparent;position:relative;
}
.barra-app a .ic{font-size:20px;line-height:1}
.barra-app a:active{background:var(--rosa-suave)}
.barra-app a.activo{color:var(--rosa-fuerte)}
.barra-app a.activo::before{
  content:"";position:absolute;top:0;left:26%;right:26%;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--rosa),var(--dorado));
}
.barra-app a.wa{color:var(--verde-wa-hondo)}
@media (min-width:760px){.barra-app{display:none}}
@media (max-width:759px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .wa-flota{display:none}
}


/* ==========================================================
   MEJORAS v4 — Globos y títulos animados
   ========================================================== */

/* ---------- Globos que flotan al hacer scroll ---------- */
.globo{
  position:fixed;left:var(--g-x,50%);bottom:-150px;z-index:80;pointer-events:none;
  width:var(--g-w,56px);aspect-ratio:54/66;
  border-radius:50%/54% 54% 46% 46%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.85) 0 13%, transparent 15%),
    linear-gradient(160deg,var(--g-c1,#F9A8C9),var(--g-c2,#E75A9B));
  filter:drop-shadow(0 8px 14px rgba(142,27,77,.22));
  opacity:.96;will-change:transform;
  animation:globo-sube var(--g-dur,10s) linear var(--g-delay,0s) forwards;
}
.globo i{
  position:absolute;inset:0;display:block;
  animation:globo-vaiven 2.8s ease-in-out var(--g-delay,0s) infinite alternate;
}
.globo::before{
  content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  border:6px solid transparent;border-top:9px solid var(--g-c2,#E75A9B);
}
.globo::after{
  content:"";position:absolute;left:50%;top:100%;width:2px;height:70px;margin-top:6px;
  background:linear-gradient(180deg,rgba(142,27,77,.35),transparent);border-radius:2px;
}
@keyframes globo-sube{to{transform:translateY(calc(-100vh - 280px))}}
@keyframes globo-vaiven{from{translate:-12px 0;rotate:-5deg}to{translate:12px 0;rotate:5deg}}

/* ---------- Títulos que cargan palabra por palabra ---------- */
.titulo-partido{animation:none !important;opacity:1 !important}
.palabra{
  display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(7px);
  animation:palabra-entra .65s var(--curva) var(--p-delay,0s) forwards;
}
@keyframes palabra-entra{to{opacity:1;transform:none;filter:blur(0)}}


/* ==========================================================
   MEJORAS v5 — calidad, movimiento y móvil
   ========================================================== */

/* Títulos con mejor corte de línea */
h1,h2,h3{text-wrap:balance}

/* ---------- Resplandor que deriva en la portada ---------- */
.portada .contenedor{position:relative;z-index:1}
.portada::after{
  content:"";position:absolute;top:-25%;left:50%;width:85%;height:120%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 45%, rgba(224,176,74,.18), transparent 62%);
  animation:glow-deriva 13s ease-in-out infinite;
}
@keyframes glow-deriva{
  0%,100%{transform:translate(-60%,-4%)}
  50%{transform:translate(-40%,5%)}
}

/* ---------- Números de confianza que se escriben ---------- */
.confianza .item b{min-height:1.15em}
.confianza .item b.escribiendo::after{
  content:"";display:inline-block;width:3px;height:.78em;margin-left:3px;border-radius:2px;
  background:var(--dorado);vertical-align:middle;animation:caret-parpadeo .7s steps(1) infinite;
}
@keyframes caret-parpadeo{50%{opacity:0}}
/* la confianza respira un poco más y luce mejor */
.confianza{padding:46px 0}
.confianza .item b{font-size:clamp(30px,5.4vw,42px)}
@media (max-width:759px){
  .confianza-grid{gap:30px 14px}
  .confianza .item b{font-size:clamp(30px,9vw,40px)}
}

/* ---------- Pulido móvil general ---------- */
@media (max-width:560px){
  .seccion{padding:56px 0}
  .titulo-seccion{margin-bottom:34px}
  .portada{padding:44px 0 60px}
  .portada h1{margin-bottom:14px}
  .portada .entrada{font-size:16px;margin-bottom:24px}
  .barra-top{font-size:12px}
  .franja-cta{padding:56px 0}
}

/* Tarjetas: micro-reacción al tocar en celular */
@media (hover:none){
  .tarjeta-serv:active,.item-cat:active,.paquete:active,.razon:active{
    transform:scale(.985);transition:transform .1s ease;
  }
}

/* Botones un poco más “vivos” al presionar */
.btn:active{transform:scale(.96)}

/* Enlaces del menú-móvil con leve deslizamiento al abrir */
.menu-movil.abierto a{animation:mm-item .32s var(--curva) both}
.menu-movil.abierto a:nth-child(1){animation-delay:.02s}
.menu-movil.abierto a:nth-child(2){animation-delay:.05s}
.menu-movil.abierto a:nth-child(3){animation-delay:.08s}
.menu-movil.abierto a:nth-child(4){animation-delay:.11s}
.menu-movil.abierto a:nth-child(5){animation-delay:.14s}
.menu-movil.abierto a:nth-child(6){animation-delay:.17s}
.menu-movil.abierto a:nth-child(n+7){animation-delay:.2s}
@keyframes mm-item{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}


/* Ajuste fino: en móvil, la foto principal del hero no muestra el texto largo */
@media (max-width:560px){
  .marco-foto.principal .hueco-foto{padding:16px}
  .marco-foto.principal .hueco-foto small{display:none}
  .marco-foto.principal .hueco-foto .icono{font-size:34px;margin-bottom:6px}
}


/* ==========================================================
   MEJORAS v6 — cinta y pulido móvil
   ========================================================== */
.cinta-marquee .pista{flex-wrap:nowrap !important}   /* nunca se amontona */
@media (max-width:560px){
  .cinta-marquee{padding:12px 0;border-top-width:2px}
  .cinta-marquee span{font-size:14px;gap:12px;padding:0 12px}
  .cinta-marquee span::after{font-size:9px}
  .confianza{padding:40px 0}
  .confianza-grid{gap:26px 12px}
}


/* ==========================================================
   MEJORAS v7
   ========================================================== */

/* ---------- Hero más compacto en celular ---------- */
@media (max-width:560px){
  .portada{padding:32px 0 40px}
  .portada .insignia{margin-bottom:13px}
  .portada h1{margin-bottom:10px}
  .portada .entrada{margin-bottom:18px;font-size:15.5px}
  .portada-collage{gap:10px;max-width:340px;margin:0 auto}
  .marco-foto{padding:6px;border-radius:18px}
  .marco-foto.principal{aspect-ratio:16/9}
  .marco-foto.flotante-a,.marco-foto.flotante-b{aspect-ratio:4/3}
  .cinta-marquee{padding:10px 0}
}

/* ---------- "20 años no se improvisan" al siguiente nivel ---------- */
.seccion-porque{
  background:
    radial-gradient(720px 320px at 100% 0, rgba(224,176,74,.10), transparent 60%),
    radial-gradient(640px 300px at 0 100%, rgba(231,90,155,.09), transparent 60%),
    var(--papel);
}
.seccion-porque .razones{gap:18px}
.seccion-porque .razon{
  flex-direction:column;gap:14px;padding:26px 24px;border-radius:20px;overflow:hidden;position:relative;
}
.seccion-porque .razon::before{
  content:"";position:absolute;inset:0 0 auto 0;height:96px;pointer-events:none;
  background:radial-gradient(150px 74px at 36px 6px, rgba(231,90,155,.14), transparent 72%);
}
.seccion-porque .razon .ico{
  width:58px;height:58px;border-radius:17px;font-size:27px;position:relative;z-index:1;
  background:linear-gradient(140deg,var(--rosa-suave),var(--dorado-suave));
  border:1px solid var(--rosa-bruma);box-shadow:0 10px 22px -10px rgba(196,45,110,.35);
  transition:transform .3s var(--curva);
}
.seccion-porque .razon:hover .ico{transform:rotate(-7deg) scale(1.07)}
.seccion-porque .razon b{font-size:19.5px}
.seccion-porque .razon p{font-size:14px}

/* ---------- Confeti al pulsar botones ---------- */
.confeti{
  position:fixed;z-index:85;width:9px;height:13px;border-radius:2px;pointer-events:none;
  will-change:transform,opacity;animation:confeti-vuela var(--cd,1.1s) cubic-bezier(.15,.7,.4,1) forwards;
}
@keyframes confeti-vuela{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--cx,0),var(--cy,120px)) rotate(var(--cr,360deg));opacity:0}
}

/* ---------- Estela de brillos del cursor ---------- */
.chispa{
  position:fixed;z-index:84;width:11px;height:11px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 8%, var(--sc,#E75A9B) 52%, transparent 72%);
  will-change:transform,opacity;animation:chispa-fade .7s ease-out forwards;
}
@keyframes chispa-fade{
  0%{transform:scale(1) translate(0,0);opacity:.9}
  100%{transform:scale(.15) translate(var(--sx,0),9px);opacity:0}
}

/* ---------- Navbar al siguiente nivel ---------- */
.encabezado-in{transition:min-height .3s var(--curva)}
.encabezado.scrolled .encabezado-in{min-height:62px}
.encabezado .logo .marca{transition:transform .3s var(--curva)}
.encabezado.scrolled .logo .marca{transform:scale(.9)}
.logo:hover .marca{transform:rotate(-7deg) scale(1.06)}
.scroll-progreso{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background:transparent}
.scroll-progreso i{
  display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--rosa),var(--dorado),var(--rosa));
  transition:transform .08s linear;
}


/* ==========================================================
   MEJORAS v8
   ========================================================== */

/* ---------- Navbar: ocultar al bajar / mostrar al subir ---------- */
.encabezado{transition:transform .35s var(--curva), box-shadow .3s ease, border-color .3s ease}
.encabezado.oculto{transform:translateY(-100%)}
.menu a:hover{background:var(--rosa-suave)}

/* ---------- Menú móvil con íconos y mejor panel ---------- */
.menu-movil{padding:14px 16px 22px;box-shadow:0 24px 46px -22px rgba(142,27,77,.5)}
.menu-movil a{display:flex;align-items:center;padding:12px;border-radius:13px;font-size:15.5px}
.menu-movil a .mm-ic{
  display:inline-flex;width:36px;height:36px;flex:0 0 auto;border-radius:11px;
  align-items:center;justify-content:center;margin-right:12px;font-size:18px;
  background:var(--rosa-suave);border:1px solid var(--rosa-bruma);
  transition:transform .2s var(--curva);
}
.menu-movil a:active .mm-ic{transform:scale(.9)}
.menu-movil a.activo .mm-ic{
  background:linear-gradient(140deg,var(--rosa),var(--dorado));border-color:transparent;
}

/* ---------- Glow que sigue al cursor ---------- */
.cursor-glow{
  position:fixed;top:0;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  pointer-events:none;z-index:83;opacity:0;
  background:radial-gradient(circle, rgba(231,90,155,.42), rgba(224,176,74,.22) 46%, transparent 72%);
  transform:translate(-100px,-100px);transition:transform .12s ease-out, opacity .3s ease;
}
.cursor-glow.visible{opacity:1}

/* ---------- Chispas estrella ---------- */
.chispa.estrella{
  border-radius:0;background:var(--sc,#E75A9B);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ---------- Botón "volver arriba" (escritorio) ---------- */
.subir{
  position:fixed;right:26px;bottom:98px;z-index:59;width:48px;height:48px;border-radius:50%;
  background:var(--papel);border:1.5px solid var(--linea-2);color:var(--rosa-fuerte);
  place-items:center;font-size:22px;font-weight:700;cursor:pointer;box-shadow:var(--sombra);
  display:none;opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity .3s, transform .3s var(--curva), border-color .2s;-webkit-tap-highlight-color:transparent;
}
.subir:hover{border-color:var(--rosa);color:var(--rosa-hondo)}
.subir.visible{opacity:1;transform:none}
@media (min-width:760px){.subir{display:grid}}

/* ---------- Botón compartir en el pie ---------- */
.btn-compartir{
  margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:99px;padding:10px 17px;font-family:var(--texto);font-weight:600;font-size:13.5px;
  cursor:pointer;transition:background .2s, transform .15s var(--curva);-webkit-tap-highlight-color:transparent;
}
.btn-compartir:hover{background:rgba(255,255,255,.18)}
.btn-compartir:active{transform:scale(.96)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:92px;z-index:95;
  background:var(--tinta);color:#fff;padding:12px 22px;border-radius:99px;
  font-size:14px;font-weight:600;box-shadow:var(--sombra-alta);
  opacity:0;transform:translateX(-50%) translateY(20px);pointer-events:none;
  transition:opacity .3s, transform .3s var(--curva);
}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}


/* ==========================================================
   MEJORAS v9 — paquetes y "20 años" al máximo
   ========================================================== */

/* ---------- Paquetes: jerarquía y gancho ---------- */
.paquete.destacado{
  background:linear-gradient(180deg,#fff 58%, var(--rosa-suave));
  border:2px solid var(--rosa);box-shadow:0 32px 66px -22px rgba(196,45,110,.5);
}
.paquete .gancho{
  margin-top:10px;font-size:13.5px;font-weight:600;color:var(--neutro);
}
.paquete.destacado .gancho{color:var(--rosa-fuerte)}

/* etiqueta "EL MÁS PEDIDO" con brillo que cruza */
.paquete .etiqueta{overflow:hidden}
.paquete .etiqueta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-130%);animation:brillo-badge 3.2s ease-in-out infinite;
}
@keyframes brillo-badge{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* el "extra" del Paquete 2, resaltado como cupón */
.paquete li.plus{
  background:linear-gradient(100deg,var(--dorado-suave),#fff);
  border:1px solid #F0DFB4;border-radius:13px;padding:12px 13px;margin-top:6px;
  align-items:flex-start;position:relative;
}
.paquete li.plus::after{
  content:"Extra";position:absolute;top:-9px;right:11px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;
  background:linear-gradient(120deg,var(--dorado),#C89530);padding:3px 10px;border-radius:99px;
  box-shadow:0 4px 10px -4px rgba(138,100,22,.6);
}

/* nota "por solo $2,500 más" */
.paquete .nota-ahorro{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  font-size:13px;font-weight:700;color:var(--rosa-hondo);line-height:1.35;
  background:var(--rosa-suave);border:1px dashed var(--rosa);border-radius:13px;
  padding:10px 12px;margin-bottom:13px;
}

/* tira de garantías bajo los paquetes */
.garantias{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;
  max-width:900px;margin:30px auto 0;padding:18px 22px;
  background:var(--papel);border:1px solid var(--linea);border-radius:18px;box-shadow:var(--sombra);
}
.garantias span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--tinta-2)}
.garantias span::before{
  content:"✓";width:22px;height:22px;flex:0 0 auto;border-radius:99px;
  background:var(--rosa-suave);color:var(--rosa-fuerte);display:grid;place-items:center;font-size:12px;font-weight:700;
}

/* ---------- "20 años no se improvisan": banda destacada ---------- */
.porque-destacado{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:
    radial-gradient(circle 3px at 12% 30%, rgba(255,255,255,.25) 45%, transparent 50%),
    radial-gradient(circle 4px at 88% 24%, rgba(255,255,255,.2) 45%, transparent 50%),
    radial-gradient(circle 3px at 70% 80%, rgba(255,255,255,.22) 45%, transparent 50%),
    linear-gradient(120deg,var(--rosa-hondo) 0%,var(--rosa-fuerte) 52%, #B8722E 128%);
  color:#fff;border-radius:24px;padding:28px 30px;margin-bottom:26px;box-shadow:var(--sombra-alta);
}
.porque-destacado .pd-num{
  font-family:var(--display);font-style:italic;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(48px,9vw,74px);
  background:linear-gradient(120deg,var(--dorado) 25%,#F8DFA0 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;flex:0 0 auto;
}
.porque-destacado .pd-txt{flex:1;min-width:220px}
.porque-destacado .pd-txt b{font-family:var(--display);font-size:21px;display:block;margin-bottom:5px;line-height:1.2}
.porque-destacado .pd-txt p{font-size:14.5px;opacity:.94;line-height:1.6}
.porque-destacado .pd-sello{font-size:44px;flex:0 0 auto;filter:drop-shadow(0 5px 10px rgba(0,0,0,.3))}
@media (max-width:560px){
  .porque-destacado{padding:22px;gap:14px}
  .porque-destacado .pd-sello{display:none}
}


/* ==========================================================
   MEJORAS v10 — pulido general de CSS
   ========================================================== */

/* Tipografía un poco más nítida */
body{text-rendering:optimizeLegibility}

/* Controles de formulario con el color de la marca */
input,select,textarea,button{accent-color:var(--rosa-fuerte)}

/* Barra de desplazamiento a juego con la marca */
*{scrollbar-color:var(--rosa) var(--rosa-suave);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--rosa-suave)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--rosa),var(--rosa-fuerte));
  border-radius:99px;border:3px solid var(--rosa-suave);
}
::-webkit-scrollbar-thumb:hover{background:var(--rosa-fuerte)}

/* La cinta corrediza se desvanece suave en los bordes (se ve premium) */
.cinta-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

/* Enlaces del pie con subrayado que crece */
.pie-lista a{position:relative}
.pie-lista a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;
  background:var(--dorado);transition:width .25s var(--curva);
}
.pie-lista a:hover::after{width:100%}

/* Testimonios con leve elevación al pasar el mouse */
.testimonio{transition:transform .3s var(--curva), box-shadow .35s ease}
.testimonio:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}

/* Datos de contacto que se deslizan un poco al pasar el mouse */
.dato-c{transition:transform .2s var(--curva)}
.dato-c:hover{transform:translateX(3px)}

/* Las píldoras de la tarjeta se tiñen cuando pasas por la tarjeta */
.pildora{transition:background .2s ease, color .2s ease, border-color .2s ease}
.tarjeta-serv:hover .pildora{background:var(--rosa-bruma);border-color:#F2C6DD}

/* Foco visible más claro en botones y campos */
.btn:focus-visible,.base:focus-visible,.filtro:focus-visible{outline:3px solid var(--rosa);outline-offset:3px}

/* Detalle: el precio del paquete con un guiño de subrayado dorado */
.paquete .precio{position:relative;display:inline-block}
.paquete .precio::after{
  content:"";position:absolute;left:8%;right:8%;bottom:2px;height:7px;border-radius:5px;
  background:var(--dorado);opacity:.28;z-index:-1;
}

/* Imágenes de servicio: acercamiento más suave y con brillo al pasar */
.tarjeta-serv .imagen::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  transition:opacity .4s ease;
}
.tarjeta-serv:hover .imagen::after{opacity:1}

/* Insignia del hero: leve reacción al pasar el mouse */
.portada .insignia{transition:transform .2s var(--curva), box-shadow .25s ease}
.portada .insignia:hover{transform:translateY(-2px)}

/* Botón flotante de WhatsApp: sombra un poco más rica */
.wa-flota{box-shadow:0 12px 30px -8px rgba(17,138,67,.7)}

/* Cursores coherentes en elementos interactivos */
.chip,.pildora,.filtro,.base,.extra,.faq summary,.cal-dia{cursor:pointer}


/* ==========================================================
   MEJORAS v11 — logo real y colores de la marca ampliados
   ========================================================== */
:root{
  --turquesa:#1BBFB2;
  --morado:#A78BFA;
}
.logo .marca.con-imagen{
  background:#fff;padding:3px;
  box-shadow:0 8px 18px -8px rgba(142,27,77,.35);
}
.logo .marca.con-imagen img{
  width:100%;height:100%;object-fit:contain;border-radius:10px;display:block;
}
.pie-sitio .logo .marca.con-imagen{background:#fff}


/* ==========================================================
   MEJORAS v14 — Globito, el asistente 🎈 + logo
   ========================================================== */

/* ---------- Presentación del logo real ---------- */
.logo .marca{width:48px;height:48px;transition:transform .3s var(--curva), box-shadow .3s ease}
@media (min-width:960px){.logo .marca{width:52px;height:52px}}
.logo .marca.con-imagen{
  background:#fff;padding:4px;border-radius:15px;
  border:1.5px solid var(--rosa-bruma);
  box-shadow:0 8px 20px -8px rgba(142,27,77,.4);
}
.logo:hover .marca.con-imagen{
  transform:rotate(-5deg) scale(1.07);
  box-shadow:0 12px 28px -10px rgba(196,45,110,.55);
}
.pie-sitio .logo .marca.con-imagen{border-color:rgba(255,255,255,.3)}

/* ---------- Botón de Globito ---------- */
.globito-btn{
  position:fixed;left:20px;bottom:20px;z-index:66;
  width:60px;height:72px;border:none;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 10px 18px rgba(196,45,110,.45));
  animation:globito-flota 4.5s ease-in-out infinite;
  transition:transform .2s var(--curva);
}
.globito-btn:hover{transform:scale(1.08)}
.globito-btn:active{transform:scale(.92)}
@keyframes globito-flota{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -7px;rotate:2deg}}

.globito-btn .g-cara{
  position:relative;display:block;width:56px;height:64px;margin:0 auto;
  border-radius:50%/54% 54% 46% 46%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.85) 0 12%, transparent 14%),
    linear-gradient(160deg,#F9A8C9,#E75A9B 60%,#C42D6E);
}
.globito-btn .g-cara::after{           /* nudo */
  content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:6px solid transparent;border-top:9px solid #C42D6E;
}
.g-ojos{position:absolute;left:0;right:0;top:38%;display:flex;justify-content:center;gap:11px}
.g-ojos i{
  width:9px;height:13px;border-radius:50%;background:#3B1226;display:block;position:relative;
  animation:g-parpadeo 4.6s infinite;
}
.g-ojos i::after{                       /* brillo del ojo */
  content:"";position:absolute;top:2px;left:2px;width:3.5px;height:3.5px;border-radius:99px;background:#fff;
}
@keyframes g-parpadeo{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.g-boca{
  position:absolute;left:50%;top:62%;transform:translateX(-50%);
  width:14px;height:8px;border:2.5px solid #3B1226;border-top:none;
  border-radius:0 0 14px 14px;
}
.globito-btn.abierto .g-boca{height:10px;width:12px;border-radius:99px;border-top:2.5px solid #3B1226;background:#7A2748}

/* burbujita de saludo */
.globito-saludo{
  position:fixed;left:88px;bottom:44px;z-index:66;cursor:pointer;
  background:#fff;border:1.5px solid var(--rosa-bruma);border-radius:16px 16px 16px 4px;
  padding:10px 16px;font-size:13.5px;font-weight:700;color:var(--tinta);
  box-shadow:var(--sombra-alta);animation:entra-arriba .4s var(--curva) both;
  white-space:nowrap;
}

/* ---------- Panel de chat ---------- */
.globito-panel{
  position:fixed;left:16px;bottom:104px;z-index:87;
  width:min(370px, calc(100vw - 32px));height:min(520px,68vh);
  background:var(--papel);border:1px solid var(--linea);border-radius:22px;
  box-shadow:0 30px 70px -22px rgba(42,22,34,.55);
  display:flex;flex-direction:column;overflow:hidden;
  animation:panel-sube .3s var(--curva) both;
}
@keyframes panel-sube{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.globito-panel[hidden]{display:none}

.g-cab{
  display:flex;align-items:center;gap:11px;padding:14px 16px;
  background:linear-gradient(120deg,var(--rosa-hondo),var(--rosa-fuerte) 60%,#B8722E 140%);
  color:#fff;flex:0 0 auto;
}
.g-avatar{
  position:relative;width:38px;height:44px;flex:0 0 auto;
  border-radius:50%/54% 54% 46% 46%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.85) 0 12%, transparent 14%),
    linear-gradient(160deg,#F9A8C9,#E75A9B 60%,#C42D6E);
  box-shadow:0 4px 10px -3px rgba(0,0,0,.35);
}
.g-avatar .g-ojos{top:36%}
.g-avatar .g-ojos i{width:7px;height:10px}
.g-quien{flex:1;line-height:1.15}
.g-quien b{font-family:var(--display);font-size:17px;display:block}
.g-quien small{font-size:11.5px;opacity:.85}
.g-cerrar{
  width:34px;height:34px;flex:0 0 auto;border:none;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:15px;display:grid;place-items:center;
  transition:background .2s ease;-webkit-tap-highlight-color:transparent;
}
.g-cerrar:hover{background:rgba(255,255,255,.3)}

.g-chat{
  flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;
  background:
    radial-gradient(rgba(231,90,155,.05) 1.5px, transparent 1.5px),
    var(--rosa-suave);
  background-size:26px 26px,auto;
  scroll-behavior:smooth;
}
.g-msg{
  max-width:86%;padding:11px 14px;font-size:14px;line-height:1.55;
  animation:entra-arriba .25s var(--curva) both;
}
.g-msg.bot{
  align-self:flex-start;background:#fff;color:var(--tinta);
  border-radius:16px 16px 16px 5px;box-shadow:var(--sombra);
}
.g-msg.yo{
  align-self:flex-end;background:linear-gradient(135deg,var(--rosa-fuerte),var(--rosa-hondo));
  color:#fff;border-radius:16px 16px 5px 16px;font-weight:600;
}
.g-msg.escribiendo{display:flex;gap:5px;align-items:center;padding:14px 16px}
.g-msg.escribiendo i{
  width:7px;height:7px;border-radius:99px;background:var(--rosa);display:block;
  animation:g-punto 1s ease-in-out infinite;
}
.g-msg.escribiendo i:nth-child(2){animation-delay:.15s}
.g-msg.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes g-punto{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

.g-acciones{display:flex;flex-direction:column;gap:7px;align-self:flex-start;max-width:86%}
.g-accion{
  display:block;text-align:center;background:#fff;border:1.5px solid var(--rosa);
  color:var(--rosa-fuerte);font-size:13.5px;font-weight:700;border-radius:12px;
  padding:11px 16px;transition:background .2s ease, color .2s ease;
}
.g-accion:hover{background:var(--rosa-fuerte);color:#fff}

.g-chips{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px}
.g-chip{
  border:1.5px solid var(--rosa-bruma);background:#fff;color:var(--tinta-2);
  font-family:var(--texto);font-size:12.5px;font-weight:600;border-radius:99px;
  padding:9px 13px;cursor:pointer;transition:border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;text-align:left;
}
.g-chip:hover{border-color:var(--rosa);background:var(--rosa-suave)}
.g-chip:active{transform:scale(.96)}

/* ---------- Posiciones en celular ---------- */
@media (max-width:759px){
  .globito-btn{left:auto;right:14px;bottom:calc(80px + env(safe-area-inset-bottom))}
  .globito-btn.alto{bottom:calc(150px + env(safe-area-inset-bottom))}
  .globito-saludo{left:auto;right:84px;bottom:calc(102px + env(safe-area-inset-bottom))}
  .globito-saludo.alto{bottom:calc(172px + env(safe-area-inset-bottom))}
  .globito-panel{
    left:10px;right:10px;width:auto;
    bottom:calc(78px + env(safe-area-inset-bottom));height:min(520px,64vh);
  }
}


/* ==========================================================
   MEJORAS v15 — Globito 2.0
   ========================================================== */
.g-badge{
  position:absolute;top:-2px;right:2px;min-width:20px;height:20px;border-radius:99px;
  background:linear-gradient(120deg,var(--dorado),#C89530);color:#fff;
  font-size:11.5px;font-weight:800;display:grid;place-items:center;padding:0 5px;
  box-shadow:0 4px 10px -3px rgba(138,100,22,.7);
  animation:g-badge-late 2s ease-in-out infinite;
}
@keyframes g-badge-late{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.g-envio{
  display:flex;gap:8px;padding:10px 12px;flex:0 0 auto;
  background:var(--papel);border-top:1px solid var(--linea);
}
.g-envio input{
  flex:1;font-family:var(--texto);font-size:14.5px;color:var(--tinta);
  background:var(--papel-2);border:1.5px solid var(--linea);border-radius:99px;
  padding:11px 16px;min-height:44px;outline:none;
  transition:border-color .2s ease;
}
.g-envio input:focus{border-color:var(--rosa)}
.g-envio button{
  width:44px;height:44px;flex:0 0 auto;border:none;border-radius:99px;cursor:pointer;
  background:linear-gradient(135deg,var(--rosa-fuerte),var(--rosa-hondo));color:#fff;
  font-size:15px;display:grid;place-items:center;
  box-shadow:0 8px 16px -6px rgba(196,45,110,.5);
  transition:transform .15s var(--curva);-webkit-tap-highlight-color:transparent;
}
.g-envio button:hover{transform:scale(1.06)}
.g-envio button:active{transform:scale(.92)}


/* ==========================================================
   FOTOS DEL CATÁLOGO — marcos y colores por categoría
   ----------------------------------------------------------
   Los colores salen de datos.js (DATOS.albumes). El JavaScript
   los mete en --cat-color y --cat-suave, y de ahí los toma todo:
   marcos, etiquetas, filtros, tarjetas y el visor.
   ========================================================== */

/* valor de respaldo: si una foto no trae categoría, se usa el rosa de la marca */
.marco-cat,.celda,.filtro,.lb,.tarjeta-cat,.bloque-cat,.hueco-foto{
  --cat-color:#E75A9B;--cat-suave:#FCE4EF;
}

/* ---------- pastilla con el ícono y el nombre de la categoría ---------- */
.etiqueta-cat{
  position:absolute;left:12px;bottom:12px;z-index:4;
  display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 24px);
  padding:6px 13px 6px 10px;border-radius:99px;
  background:var(--cat-color);color:#fff;
  font-size:12px;font-weight:700;line-height:1;letter-spacing:.2px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.65);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.etiqueta-cat i{font-style:normal;font-size:14px;line-height:1}
.etiqueta-cat.chica{left:8px;bottom:8px;padding:5px 10px 5px 8px;font-size:11px;gap:5px}

/* ---------- recuadros que ya tienen su foto real ---------- */
.hueco-foto.con-foto{
  position:relative;display:block;padding:0;text-align:left;color:inherit;
  background:var(--cat-suave);
}
.foto-real{width:100%;height:100%;object-fit:cover;display:block}

/* portada: el marco blanco se tiñe del color de la categoría */
.marco-foto.marco-cat{
  background:linear-gradient(150deg,#fff 0%,var(--cat-suave) 100%);
  box-shadow:0 34px 64px -34px var(--cat-color), var(--sombra-alta);
}

/* bloques alternos de las páginas de servicio */
.bloque-alterno .foto.marco-cat{
  background:linear-gradient(150deg,var(--cat-suave) 0%,#fff 72%);
  box-shadow:0 32px 62px -34px var(--cat-color), var(--sombra);
}

/* tarjetas de servicio del inicio: filete de color bajo la foto */
.tarjeta-serv .imagen.marco-cat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:linear-gradient(90deg,var(--cat-color),var(--cat-suave));
}
.tarjeta-serv .imagen .foto-real{transition:transform .5s var(--curva)}
.tarjeta-serv:hover .imagen .foto-real{transform:scale(1.05)}


/* ==========================================================
   CELDAS DE FOTO (el mosaico de la galería y las tiras)
   ========================================================== */
.celda{
  position:relative;border-radius:18px;overflow:hidden;cursor:zoom-in;
  background:var(--cat-suave);box-shadow:var(--sombra);
  transition:transform .3s var(--curva), box-shadow .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.celda::after{                    /* filete de color de su categoría */
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;
  background:var(--cat-color);
}
.celda img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--curva);
}
.celda:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 50px -26px var(--cat-color);
}
.celda:hover img{transform:scale(1.07)}
.celda:active{transform:scale(.985)}
.celda.oculta{display:none}

/* el nombre de la foto */
.pie-celda{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 12px 11px;
  font-size:12.5px;font-weight:600;line-height:1.35;color:#fff;
  background:linear-gradient(to top,rgba(42,22,34,.9),rgba(42,22,34,0));
  opacity:0;transform:translateY(6px);
  transition:opacity .28s ease, transform .28s var(--curva);
  pointer-events:none;
}
.celda:hover .pie-celda,.celda:focus-within .pie-celda{opacity:1;transform:none}
@media (hover:none){
  .pie-celda{opacity:1;transform:none}
  .celda .etiqueta-cat{bottom:auto;top:12px}
}

/* marca de "esto es un video" */
.celda.es-video{cursor:pointer}
.marca-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;border-radius:99px;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--cat-color);
  font-size:19px;padding-left:3px;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.6);
  transition:transform .25s var(--curva);pointer-events:none;
}
.celda.es-video:hover .marca-video{transform:translate(-50%,-50%) scale(1.14)}
@media (max-width:560px){.marca-video{width:42px;height:42px;font-size:16px}}

/* --- el mosaico grande (galeria.html) --- */
.muro .celda{aspect-ratio:1}

/* --- las tiras que se deslizan --- */
.muro-tira{
  display:flex;gap:14px;overflow-x:auto;padding:6px 4px 18px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.muro-tira::-webkit-scrollbar{height:8px}
.muro-tira::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:99px}
.muro-tira::-webkit-scrollbar-track{background:transparent}
.muro-tira .celda{
  flex:0 0 auto;width:min(224px,56vw);aspect-ratio:3/4;scroll-snap-align:start;
}
.tira-cta{text-align:center;margin-top:10px}

/* botones de filtro: cada uno con el color de su categoría */
.filtro .cuenta{
  font-style:normal;font-size:11.5px;font-weight:700;
  margin-left:2px;padding:1px 7px;border-radius:99px;background:rgba(0,0,0,.07);
}
.filtro:hover{border-color:var(--cat-color)}
.filtro.activo{
  background-color:var(--cat-color);background-image:none;
  border-color:transparent;color:#fff;
  box-shadow:0 12px 24px -12px var(--cat-color);
}
.filtro.activo .cuenta{background:rgba(255,255,255,.3)}


/* ==========================================================
   TARJETAS DE CATEGORÍA (inicio)
   ========================================================== */
.rejilla-cat{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.rejilla-cat{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rejilla-cat{grid-template-columns:repeat(3,1fr)}}

.tarjeta-cat{
  position:relative;display:block;overflow:hidden;border-radius:22px;
  min-height:250px;color:#fff;box-shadow:var(--sombra);
  transition:transform .3s var(--curva), box-shadow .35s ease;
}
.tarjeta-cat:hover{transform:translateY(-7px);box-shadow:0 34px 62px -28px var(--cat-color)}
.tc-fondo{position:absolute;inset:0;display:block}
.tc-fondo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--curva)}
.tarjeta-cat:hover .tc-fondo img{transform:scale(1.08)}
.tc-fondo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,14,24,.93) 8%,rgba(28,14,24,.42) 52%,rgba(28,14,24,.06) 100%);
}
.tarjeta-cat::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--cat-color);opacity:.26;mix-blend-mode:multiply;
}
.tc-cuerpo{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  gap:5px;padding:22px 20px 20px;min-height:250px;
}
.tc-icono{font-size:30px;line-height:1;margin-bottom:2px}
.tc-cuerpo b{font-family:var(--display);font-size:21px;line-height:1.2}
.tc-cuerpo small{font-size:13px;line-height:1.5;opacity:.93}
.tc-ver{
  display:inline-block;margin-top:9px;font-weight:700;font-size:13.5px;
  padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.16);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  align-self:flex-start;transition:background .2s ease, transform .2s var(--curva);
}
.tarjeta-cat:hover .tc-ver{background:var(--cat-color);transform:translateX(3px)}


/* ==========================================================
   BLOQUE DE FOTOS POR CATEGORÍA (páginas de servicio)
   ========================================================== */
.bloque-cat{
  margin-top:46px;padding:22px 18px 6px;border-radius:24px;
  background:linear-gradient(155deg,var(--cat-suave) 0%,var(--papel) 68%);
  border:1px solid var(--linea);
  box-shadow:inset 0 4px 0 0 var(--cat-color), var(--sombra);
}
.bc-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:15px}
.bc-cabeza h3{font-size:21px;display:flex;align-items:center;gap:9px;margin:0}
.bc-icono{font-size:23px;line-height:1}
.bc-cabeza p{flex:1 1 240px;font-size:13.5px;color:var(--neutro);margin:0;line-height:1.6}
.bc-ver{font-weight:700;font-size:13.5px;color:var(--cat-color);white-space:nowrap}
.bc-ver:hover{text-decoration:underline}
@media (min-width:760px){.bloque-cat{padding:26px 24px 8px}}


/* ==========================================================
   VARIOS
   ========================================================== */
/* el menú de escritorio ahora trae Galería: se aprieta un poco
   en pantallas medianas para que quepan los ocho enlaces */
@media (min-width:960px) and (max-width:1140px){
  .menu a{padding:10px 9px;font-size:13.6px}
}

/* ==========================================================
   MOSAICO DE MENÚ (puestos de snacks y tiros de feria)
   ========================================================== */
.menu-cat{margin-top:10px}
.menu-grupo{margin-bottom:38px}
.menu-grupo:last-of-type{margin-bottom:26px}

.mg-cabeza{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:2px solid var(--cat-color);
}
.mg-cabeza h3{font-size:20px;display:flex;align-items:center;gap:9px;margin:0}
.mg-icono{font-size:23px;line-height:1}
.mg-cabeza p{flex:1 1 230px;font-size:13.5px;color:var(--neutro);margin:0;line-height:1.6}
.mg-cuenta{
  flex:none;font-size:11.5px;font-weight:700;color:#fff;
  background:var(--cat-color);border-radius:99px;padding:4px 12px;
}

.muro-menu{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.muro-menu{grid-template-columns:repeat(3,1fr)}}
@media (min-width:860px){.muro-menu{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1120px){.muro-menu{grid-template-columns:repeat(5,1fr)}}

/* lo que ya tiene foto real */
.muro-menu .celda{aspect-ratio:1}
.muro-menu .pie-celda{
  opacity:1;transform:none;padding:24px 10px 10px;font-size:12px;text-align:center;
}
.muro-menu .celda::after{height:5px}

.menu-pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;
  margin-top:8px;text-align:center;font-size:14px;color:var(--neutro);
}
.menu-pie b{color:var(--cat-color);font-size:15px}
.menu-pie .btn{margin-left:4px}

/* ---------- recuadro decorado, para lo que aún no tiene foto ---------- */
.hueco-foto.sin-foto-aun{padding:22px}
.hueco-foto.sin-foto-aun .icono{font-size:46px;margin-bottom:12px}
.hueco-foto.sin-foto-aun b{
  font-size:19px;line-height:1.25;letter-spacing:.2px;
  text-shadow:0 3px 12px rgba(0,0,0,.25);
}
.marco-foto .hueco-foto.sin-foto-aun b{font-size:15px}
.muro-menu .hueco-foto.sin-foto-aun b{font-size:13px}

/* ==========================================================
   VELOCIDAD
   El navegador no gasta tiempo dibujando los bloques largos
   que todavía están fuera de la pantalla. Al llegar a ellos
   con el scroll, aparecen normal.
   ========================================================== */
.bloque-cat, .menu-grupo{
  content-visibility:auto;
  contain-intrinsic-size:auto 420px;
}
/* OJO: a las tiras NO se les pone content-visibility. Si se les pone,
   el navegador no sabe cuánto miden por dentro y las flechas de
   'ver más fotos' creen que no hay nada que deslizar. */

/* las fotos reservan su espacio desde el principio: la página no
   "brinca" mientras cargan */
.celda, .tarjeta-cat, .hueco-foto{contain:layout paint}
.celda img, .foto-real, .tc-fondo img{background:var(--cat-suave)}

/* menos trabajo de animación en equipos lentos o con el ahorro puesto */
@media (prefers-reduced-motion:reduce){
  .marco-foto{animation:none}
  .celda, .tarjeta-cat, .celda img, .tc-fondo img{transition:none}
}

/* ---------- lo que aún no tiene foto: lista de texto, no recuadros ---------- */
.lista-menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;
}
.lista-menu.con-mosaico{margin-top:14px}
.lista-menu li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 12px;border-radius:99px;
  background:var(--papel);border:1.5px solid var(--linea-2);
  font-size:13.8px;font-weight:600;color:var(--tinta-2);line-height:1;
  transition:border-color .18s ease, transform .18s var(--curva), box-shadow .25s ease;
}
.lista-menu li:hover{
  border-color:var(--cat-color);transform:translateY(-2px);
  box-shadow:0 10px 22px -14px var(--cat-color);
}
.lista-menu li i{font-style:normal;font-size:16px;line-height:1}
/* la palomita de "incluido": deja claro que es una LISTA, no un hueco de imagen */
.lista-menu li i.chk{
  width:19px;height:19px;flex:0 0 auto;border-radius:50%;
  background:var(--cat-color,#E75A9B);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800;
}
@media (max-width:420px){
  .lista-menu{gap:7px}
  .lista-menu li{padding:8px 12px 8px 10px;font-size:13px}
}

/* Banner de grupo (cuando el grupo no tiene fotos propias) */
.menu-banner{
  border-radius:16px; overflow:hidden; aspect-ratio:16/6; margin:2px 0 14px;
  box-shadow:var(--sombra); border:1px solid var(--linea);
}
.menu-banner img{width:100%;height:100%;object-fit:cover;display:block; animation:aparecer-img .55s var(--curva) both}
@media (max-width:560px){ .menu-banner{aspect-ratio:16/7} }

/* ---------- saltar al contenido (teclado y lectores de pantalla) ---------- */
.salta-al-contenido{
  position:absolute;left:12px;top:-70px;z-index:200;
  background:var(--rosa-fuerte);color:#fff;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:0 0 14px 14px;
  transition:top .2s var(--curva);
}
.salta-al-contenido:focus{top:0}
/* que se vea bien por dónde va el teclado */
.celda:focus-visible,.tarjeta-cat:focus-visible{
  outline:3px solid var(--cat-color);outline-offset:3px;
}

/* ==========================================================
   AJUSTES DE PANTALLA — de celular chico a monitor grande
   ========================================================== */


/* --- las tiras avisan que se pueden deslizar --- */
.marco-tira{position:relative}
.marco-tira::after{
  content:"";position:absolute;top:0;bottom:18px;right:0;width:44px;
  pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(to left,var(--papel),rgba(255,253,251,0));
}
.marco-tira.hay-mas::after{opacity:1}
.bloque-cat .marco-tira::after{background:linear-gradient(to left,var(--papel),rgba(255,253,251,0))}
.flecha-tira{
  position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border-radius:99px;border:none;cursor:pointer;
  background:#fff;color:var(--tinta);font-size:20px;line-height:1;
  display:none;place-items:center;
  box-shadow:0 10px 26px -10px rgba(42,22,34,.55);
  transition:transform .16s var(--curva), opacity .2s ease;
}
.flecha-tira:hover{transform:translateY(-50%) scale(1.09)}
.flecha-tira[disabled]{opacity:.35;cursor:default}
.flecha-tira.izq{left:-6px}
.flecha-tira.der{right:-6px}
@media (hover:hover) and (min-width:900px){
  .marco-tira .flecha-tira{display:grid}
}

/* --- botón para volver arriba en las páginas largas --- */
.subir{
  position:fixed;right:16px;bottom:88px;z-index:59;
  width:46px;height:46px;border-radius:99px;border:none;cursor:pointer;
  background:#fff;color:var(--rosa-fuerte);font-size:20px;line-height:1;
  display:grid;place-items:center;
  box-shadow:0 10px 26px -8px rgba(42,22,34,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s var(--curva), visibility .25s;
  -webkit-tap-highlight-color:transparent;
}
.subir.se-ve{opacity:1;visibility:visible;transform:none}
.subir.mas-arriba{bottom:150px}
@media (min-width:960px){.subir.mas-arriba{bottom:110px}}
.subir:hover{transform:translateY(-2px)}
@media (min-width:960px){.subir{right:26px;bottom:100px}}
@media print{.subir{display:none}}

/* --- pie de página: los datos de contacto se pueden tocar bien --- */
@media (max-width:759px){
  .pie-contacto a,.pie-contacto span{min-height:44px;align-items:center}
}
/* texto solo para lectores de pantalla */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================
   REEL DE EVENTOS — video destacado tipo "cine" en el inicio
   Banda oscura festiva para que el video resalte. Todo el
   comportamiento (autoplay al ver, play/pausa) está en comun.js
   ========================================================== */
.seccion-reel{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(120% 85% at 12% -10%, #7a2a86 0%, transparent 55%),
    radial-gradient(120% 90% at 105% 110%, #c31f62 0%, transparent 52%),
    linear-gradient(150deg,#2b1350 0%,#4a1657 46%,#7c1a54 100%);
}
.seccion-reel::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(rgba(255,255,255,.13) 1.5px, transparent 1.7px),
    radial-gradient(rgba(245,166,35,.18) 1.5px, transparent 1.7px);
  background-size:32px 32px,32px 32px; background-position:0 0,16px 16px;
}
.seccion-reel .contenedor{position:relative; z-index:1}
.seccion-reel .titulo-seccion .sobre,
.seccion-reel .titulo-seccion .sobre::before,
.seccion-reel .titulo-seccion .sobre::after{color:#ffd27a}
.seccion-reel .titulo-seccion h2{color:#fff}
.seccion-reel .titulo-seccion h2 em{color:#ffd27a;font-style:italic}
.seccion-reel .titulo-seccion p{color:rgba(255,255,255,.84)}

.reel{
  position:relative; max-width:940px; margin:0 auto;
  aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#160a20;
  box-shadow:0 34px 90px -34px rgba(0,0,0,.75),
             0 0 0 1px rgba(255,255,255,.09), 0 0 0 8px rgba(255,255,255,.045);
}
.reel-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#160a20}
.reel-btn{position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; padding:0}
.reel-ico{
  position:relative; width:86px; height:86px; border-radius:50%;
  background:rgba(255,255,255,.95); transition:opacity .3s var(--curva),transform .25s var(--curva);
  box-shadow:0 14px 34px -8px rgba(0,0,0,.55);
}
.reel-ico::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0; border-left:26px solid var(--rosa-hondo);
  border-top:16px solid transparent; border-bottom:16px solid transparent; transform:translateX(4px);
}
.reel-btn:hover .reel-ico{transform:scale(1.07)}
/* mientras se reproduce, el control se esconde y aparece al pasar el mouse como pausa */
.reel-playing .reel-ico{opacity:0}
.reel-playing:hover .reel-ico{opacity:1}
.reel-playing .reel-ico::before{
  border:0; width:11px; height:32px; background:var(--rosa-hondo); transform:translateX(-9px);
}
.reel-playing .reel-ico::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:11px; height:32px; background:var(--rosa-hondo); transform:translateX(9px);
}
.reel-badge{
  position:absolute; left:16px; top:16px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(22,10,32,.58); color:#fff; font-size:12.5px; font-weight:700;
  letter-spacing:.02em; padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:opacity .3s var(--curva);
}
.reel-playing .reel-badge{opacity:0}
.reel-playing:hover .reel-badge{opacity:1}
.reel-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px auto 2px; max-width:820px}
.reel-chips span{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff;
  font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:999px; white-space:nowrap;
}
.reel-stat{
  text-align:center; margin:16px auto 0; color:rgba(255,255,255,.78);
  font-size:14.5px; font-weight:600; letter-spacing:.01em;
}
.reel-stat b{color:#ffd27a; font-weight:800}
.seccion-reel .tira-cta{margin-top:22px}
@media (max-width:560px){
  .reel{border-radius:16px}
  .reel-ico{width:70px;height:70px}
  .reel-ico::before{border-left-width:22px;border-top-width:13px;border-bottom-width:13px}
  .reel-chips span{font-size:12.5px;padding:7px 12px}
}
@media (prefers-reduced-motion:reduce){
  .reel-ico,.reel-badge{transition:none}
}

/* ==========================================================
   CÓMO TRABAJAMOS (proceso en 4 pasos)
   ========================================================== */
.seccion-proceso{
  background:
    radial-gradient(rgba(224,176,74,.08) 1.5px, transparent 1.5px),
    var(--dorado-suave);
  background-size:30px 30px,auto;
}
/* OJO: se acotan bajo .seccion-proceso porque el cotizador también usa .paso */
.seccion-proceso .pasos{
  list-style:none; margin:0; padding:18px 0 0;
  display:grid; gap:30px 22px; grid-template-columns:repeat(4,1fr);
}
.seccion-proceso .paso{
  position:relative; overflow:visible; background:#fff; border:1px solid var(--linea);
  border-radius:var(--radio); padding:34px 20px 24px; text-align:center;
  box-shadow:var(--sombra); transition:transform .3s var(--curva),box-shadow .3s var(--curva);
}
.seccion-proceso .paso:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta)}
.seccion-proceso .paso-num{
  position:absolute; top:-19px; left:50%; transform:translateX(-50%);
  width:42px; height:42px; border-radius:50%; font-family:var(--display); font-weight:700; font-size:18px;
  background:linear-gradient(135deg,var(--rosa),var(--rosa-fuerte)); color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 20px -6px rgba(196,45,110,.65);
  border:3px solid #fff;
}
.seccion-proceso .paso-ico{font-size:42px; display:block; margin:8px 0 12px; line-height:1}
.seccion-proceso .paso h3{font-size:19px; margin-bottom:8px}
.seccion-proceso .paso p{color:var(--neutro); font-size:14.5px; line-height:1.55}
.seccion-proceso .tira-cta{margin-top:36px}
@media (max-width:900px){ .seccion-proceso .pasos{grid-template-columns:repeat(2,1fr); gap:34px 18px} }
@media (max-width:520px){ .seccion-proceso .pasos{grid-template-columns:1fr; max-width:340px; margin:0 auto} }

/* ==========================================================
   PREGUNTAS FRECUENTES (acordeón)
   ========================================================== */
.seccion-faq{
  background:
    radial-gradient(rgba(231,90,155,.07) 1.5px, transparent 1.5px),
    var(--rosa-suave);
  background-size:34px 34px,auto;
}
.faq{max-width:780px; margin:0 auto}
.faq-item{
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  margin-bottom:12px; overflow:hidden; box-shadow:var(--sombra);
}
.faq-preg{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  text-align:left; background:none; border:0; cursor:pointer; padding:18px 20px;
  font-family:var(--display); font-weight:700; font-size:17px; color:var(--tinta);
}
.faq-preg span{flex:1}
.faq-mas{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--rosa-suave); color:var(--rosa-fuerte);
  display:grid; place-items:center; font-size:20px; font-weight:700; font-style:normal;
  transition:transform .3s var(--curva),background .3s,color .3s;
}
.faq-item.abierto .faq-mas{transform:rotate(45deg); background:var(--rosa); color:#fff}
.faq-resp{max-height:0; overflow:hidden; transition:max-height .38s var(--curva)}
.faq-item.abierto .faq-resp{max-height:360px}
.faq-resp p{margin:0; padding:0 20px 20px; color:var(--neutro); font-size:15px; line-height:1.6}
.seccion-faq .tira-cta{margin-top:26px}

/* ==========================================================
   PRUEBA REAL (reemplaza los testimonios inventados)
   ========================================================== */
.prueba-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  max-width:860px; margin:0 auto;
}
.prueba-card{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 14px; text-align:center; box-shadow:var(--sombra);
  transition:transform .3s var(--curva),box-shadow .3s var(--curva);
}
.prueba-card:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.pc-ico{font-size:34px; display:block; margin-bottom:8px; line-height:1}
.prueba-card b{display:block; font-family:var(--display); font-size:36px; color:var(--rosa-fuerte); line-height:1}
.prueba-card span{display:block; color:var(--neutro); font-size:13.5px; margin-top:8px; font-weight:600}
.prueba-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:32px auto 0}
@media (max-width:620px){ .prueba-cards{grid-template-columns:repeat(2,1fr)} }

/* ==========================================================
   MÓVIL — nivel siguiente: reel vertical + scroll nativo + tacto
   ========================================================== */
@media (max-width:640px){
  /* En celular el reel es VERTICAL, casi a pantalla completa (tipo "story") */
  .reel.reel-vertical{
    aspect-ratio:9/16; max-width:430px; max-height:78vh; margin:0 auto; border-radius:22px;
  }
  .reel.reel-vertical .reel-badge{left:12px; top:12px}

  /* Tiras de fotos y filtros: deslizar con inercia y "engancharse" al soltar */
  .muro-tira{scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scroll-padding-left:16px}
  .muro-tira>*{scroll-snap-align:start}
  .filtros{scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .filtros .filtro{scroll-snap-align:center}

  /* Un pelín más de aire y tipografía cómoda para el pulgar */
  .reel-chips{gap:8px}
}

/* Respuesta táctil: al tocar, el elemento se hunde un poquito (se siente vivo) */
@media (hover:none){
  .btn{transition:transform .12s var(--curva), box-shadow .35s ease}
  .btn:active{transform:scale(.97)}
  .tarjeta-serv,.item-cat,.celda,.paquete,.razon,.prueba-card,.paso,.faq-item,.testimonio,.tarjeta-cat{transition:transform .14s var(--curva), box-shadow .3s ease}
  .tarjeta-serv:active,.item-cat:active,.celda:active,.paquete:active,.razon:active,.prueba-card:active,.paso:active,.faq-item:active,.tarjeta-cat:active{transform:scale(.985)}
  .filtro:active,.reel-chips span:active,.pildora:active{transform:scale(.95)}
}

/* ==========================================================
   ANIMACIONES SUTILES (aptas para móvil; se apagan con reduce-motion)
   ========================================================== */
/* Brillo lento en el resaltado del título de portada */
.portada h1 .destacado{ background-size:220% 100%; animation:brillo-hero 7s ease-in-out infinite; }
@keyframes brillo-hero{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Aparición suave de cada foto al cargar (se siente más fluido) */
.celda img,.foto-real,.item-cat .imagen img{ animation:aparecer-img .55s var(--curva) both; }
@keyframes aparecer-img{ from{opacity:0} to{opacity:1} }

/* Pulso de atención en el botón flotante de WhatsApp (escritorio/tablet) */
.wa-flota{ animation:wa-late 2.6s ease-in-out infinite; }
@keyframes wa-late{
  0%,100%{ box-shadow:0 12px 30px -8px rgba(17,138,67,.7), 0 0 0 0 rgba(34,197,94,.5); }
  50%    { box-shadow:0 12px 30px -8px rgba(17,138,67,.7), 0 0 0 13px rgba(34,197,94,0); }
}

@media (prefers-reduced-motion:reduce){
  .portada h1 .destacado, .celda img, .foto-real, .item-cat .imagen img, .wa-flota{ animation:none; }
}

/* ==========================================================
   REEL — servicios como miniaturas con FOTO real (no emojis)
   ========================================================== */
.reel-servicios{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px 20px;
  margin:30px auto 4px; max-width:720px;
}
.reel-serv{ display:flex; flex-direction:column; align-items:center; gap:9px; width:96px; text-decoration:none; color:#fff; }
.reel-serv img{
  width:78px; height:78px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid rgba(255,255,255,.85); box-shadow:0 10px 22px -8px rgba(0,0,0,.55);
  transition:transform .3s var(--curva), border-color .3s;
}
.reel-serv b{ font-size:12.5px; font-weight:700; text-align:center; line-height:1.25; }
.reel-serv:hover img,.reel-serv:focus-visible img{ transform:scale(1.09); border-color:#ffd27a; }
.reel-serv:active img{ transform:scale(.97); }
@media (max-width:560px){
  .reel-servicios{ gap:14px 14px; }
  .reel-serv{ width:88px; }
  .reel-serv img{ width:72px; height:72px; }
}