/* ─────────────────────────────────────────────────────────────────────────
   La paleta es la del catálogo de la casa, no una elegida aquí: negro cálido
   de toga y oro. El texto no es blanco puro sino marfil —el cartón del
   paspartú con el que se monta un retrato—; un blanco de folio corta sobre
   este negro.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* Tema único y oscuro, declarado: sin esto el navegador pinta las barras de
     desplazamiento y los controles nativos en claro sobre un fondo negro. */
  color-scheme:dark;

  --noche:#0e0c08;
  --carbon:#17130d;      /* paneles: un escalón de luz, no un color distinto */
  --carbon-alto:#211b12; /* la tarjeta que manda */
  --oro:#d4af37;
  --oro-claro:#f0da96;
  --marfil:#ede7da;
  --humo:#a79e8c;
  --filete:rgba(212,175,55,.26);
  /* Sora para titular y Plus Jakarta Sans para leer.
     Se cambió un serif de contraste alto por un geométrico: no es solo otra
     letra, es otro peso. Cormorant se usaba en 300 porque a tamaño grande un
     serif fino se sostiene; Sora en 300 al mismo cuerpo se ve desmayado y en
     700 al mismo cuerpo se come la pantalla. Por eso, junto con la familia,
     cambian el peso, el cuerpo y el interletraje de todos los titulares. */
  --display:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --texto:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ancho:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--texto);font-size:1.0125rem;line-height:1.62;color:var(--marfil);background:var(--noche);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* La tipografía de titulares es de contraste alto: cuanto más grande, más hay
   que cerrarle el espaciado, o se deshilacha. */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.14;letter-spacing:-.03em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.hoja{max-width:var(--ancho);margin:0 auto;padding-inline:max(26px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
[id]{scroll-margin-top:86px}
/* Sin retardo de doble toque, y el destello del toque en el oro de la casa en
   vez del azul del sistema. */
a,button,summary,label,input{touch-action:manipulation;-webkit-tap-highlight-color:rgba(212,175,55,.22)}
:where(a,button,summary):focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px;border-radius:2px}

/* Saltar al contenido: para quien navega con teclado o lector, la alternativa
   es recorrer la barra entera en cada carga. */
/* Se esconde con `transform`, no con `left:-9999px`.
   Sacarlo del lienzo ensanchaba el documento 47 px en móvil y aparecía
   desplazamiento horizontal en toda la página. Con `translateY` el elemento
   ocupa su sitio, simplemente está por encima del borde superior. */
.saltar{position:fixed;left:0;top:0;z-index:60;padding:12px 20px;background:var(--oro);color:#1a1408;font-weight:500;border-radius:0 0 3px 0;transform:translateY(-120%);transition:transform .18s ease}
.saltar:focus{transform:none}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 26px;font-size:.96rem;font-weight:500;color:#1a1408;background:var(--oro);border:0;border-radius:3px;text-decoration:none;transition:background .18s ease,transform .18s ease}
.boton:hover{background:var(--oro-claro)}
.boton:active{transform:translateY(1px)}
.boton--filo{color:var(--oro-claro);background:transparent;box-shadow:inset 0 0 0 1px var(--filete)}
.boton--filo:hover{background:rgba(212,175,55,.08)}
.boton--ancho{width:100%}

/* El filete con rombo sale del propio catálogo, donde separa cada título. No es
   adorno traído de fuera: es el signo de la casa. */
.marca-seccion{display:flex;align-items:center;gap:11px;margin-bottom:20px;color:var(--oro)}
.marca-seccion::before{content:"";width:44px;height:1px;background:currentColor}
/* El rombo se dibuja, no se escribe: el glifo ◆ trae sus propias métricas y se
   queda descolgado respecto al filete en cada tipografía. */
.marca-seccion::after{content:"";width:6px;height:6px;background:currentColor;transform:rotate(45deg)}
.titulo{font-size:clamp(1.65rem,3.3vw,2.35rem)}
.entrada{max-width:60ch;margin-top:16px;color:var(--humo)}
.seccion{padding-block:clamp(58px,8.5vw,104px)}
.filete{height:1px;background:linear-gradient(90deg,transparent,var(--filete) 12%,var(--filete) 88%,transparent);border:0;margin:0}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cab{position:sticky;top:0;z-index:20;background:rgba(14,12,8,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(212,175,55,.14)}
.cab__fila{display:flex;align-items:center;gap:24px;padding-block:13px}
.cab__marca{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.cab__marca img{height:32px;width:auto}
/* El interletraje abierto era del serif en versalita. En un geométrico el mismo
   valor separa tanto que la palabra deja de leerse como una. */
.cab__nombre{font-family:var(--display);font-size:1.06rem;font-weight:700;letter-spacing:.03em;color:var(--oro-claro)}
.cab__menu{display:flex;align-items:center;gap:24px;font-size:.92rem}
.cab__menu a{color:var(--humo);text-decoration:none}
.cab__menu a:hover{color:var(--marfil)}
/* El selector de arriba tiene más peso que .boton y le robaba el color a la
   llamada principal: quedaba oro sobre oro. */
.cab__menu a.boton{color:#1a1408}
.cab__menu a.boton:hover{color:#1a1408}
@media (max-width:900px){.cab__menu a:not(.boton){display:none}}
@media (max-width:720px){.cab__menu{display:none}}

/* ── Portada ──────────────────────────────────────────────────────────── */
/* El aire de arriba es la mitad que el de abajo, a propósito.
   Con 88 px la cabecera y el titular quedaban a 98 px y la portada empezaba
   tarde; el titular ya es grande y no necesita que lo presenten. Abajo se
   conserva: ahí separa de la sección siguiente, que es otro trabajo. */
.portada{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,64px);align-items:center;padding-block:clamp(20px,3vw,40px) clamp(40px,6vw,72px)}
@media (max-width:880px){.portada{grid-template-columns:1fr;padding-bottom:48px}}
/* Un cuerpo menor que con el serif: en Sora 700 estas mismas medidas ocupaban
   toda la pantalla y el titular dejaba de leerse de un vistazo. */
.portada__frase{font-size:clamp(1.95rem,4.6vw,3.3rem);line-height:1.1}
.portada__sub{max-width:48ch;margin-top:22px;font-size:1.06rem;color:var(--humo)}
.portada__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.portada__reales{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:.86rem;color:var(--humo)}
.portada__reales span::before{content:"★";color:var(--oro);margin-right:7px;font-size:.8em}
/* La fotografía va montada como un retablo: filete de oro y nada más. */
.portada__foto{border:1px solid var(--filete);padding:8px;border-radius:3px}
.portada__foto img{border-radius:2px}

/* ── Cifras ───────────────────────────────────────────────────────────── */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px 0;padding-block:clamp(34px,5vw,52px)}
.cifras>div{padding-inline:28px;border-left:1px solid rgba(212,175,55,.16)}
.cifras>div:first-child{padding-left:0;border-left:0}
@media (max-width:640px){.cifras>div{padding-inline:0;border-left:0}}
.cifra__n{font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);font-weight:700;color:var(--oro-claro);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cifra__q{margin-top:6px;font-size:.94rem;color:var(--humo)}

/* ── Bloques alternos ─────────────────────────────────────────────────── */
.bloque{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,64px);align-items:center;padding-block:clamp(38px,5.5vw,60px)}
@media (max-width:820px){.bloque{grid-template-columns:1fr}}
.bloque--girado .bloque__texto{order:2}
@media (max-width:820px){.bloque--girado .bloque__texto{order:0}}
.bloque__lista{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.bloque__lista li{position:relative;padding-left:24px;font-size:.96rem;color:var(--humo)}
.bloque__lista li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border:1px solid var(--oro);transform:rotate(45deg)}
.bloque__foto{border:1px solid var(--filete);padding:7px;border-radius:3px}

/* ── Servicios ────────────────────────────────────────────────────────── */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px 34px;margin-top:34px}
.servicio{display:flex;gap:13px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(212,175,55,.12);font-size:.97rem}
.servicio:hover{color:var(--oro-claro)}
.servicio::before{content:"★";color:var(--oro);font-size:.72rem;flex:none}

/* ── Proceso ──────────────────────────────────────────────────────────── */
.pasos{margin:34px 0 0;padding:0;list-style:none;counter-reset:paso}
.paso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;padding:25px 0;border-top:1px solid rgba(212,175,55,.14);counter-increment:paso}
.paso::before{content:counter(paso,decimal-leading-zero);font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--oro);line-height:1.3;font-variant-numeric:tabular-nums}
.paso__que{font-family:var(--display);font-size:1.16rem;font-weight:600;letter-spacing:-.02em;color:var(--marfil)}
.paso__como{margin-top:7px;font-size:.96rem;color:var(--humo);max-width:64ch}

/* ── Paquetes ─────────────────────────────────────────────────────────── */
.fondo{background:var(--carbon)}
.paquetes{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px;margin-top:38px;align-items:start}
.paquete{display:flex;flex-direction:column;background:var(--noche);border:1px solid rgba(212,175,55,.16);border-radius:4px;overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.paquete:hover{border-color:rgba(212,175,55,.5);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.paquete:hover{transform:none}}
/* Solo uno lleva el filo de oro: el que más se contrata. Marcar tres es no
   marcar ninguno. */
.paquete--destacado{border-color:var(--oro);background:var(--carbon-alto)}
/* Cuadrada, y no 4/3 apaisada. Tres de las cuatro tomas son verticales de cuerpo
   entero: al recortarlas a 4/3 solo cabía una franja del torso. El cuadrado deja
   ver a la persona y, además, iguala las cuatro tarjetas —con 4/3 la foto de la
   ceremonia perdía el escenario y el pasillo, que es lo que la hace reconocible—. */
.paquete__foto{aspect-ratio:1/1;object-fit:cover;width:100%;object-position:center}
/* `cover` recorta desde el centro geométrico, que en un retrato de cuerpo entero
   cae a la altura del pecho: la cara se iba fuera. Cada foto ancla su recorte donde
   está el rostro. Si se reemplaza una imagen, hay que revisar su porcentaje. */
.paquete__foto--p1{object-position:72% 45%}
.paquete__foto--p2{object-position:50% 0}
.paquete__foto--p3{object-position:50% 0}
.paquete__foto--ceremonia{object-position:50% 38%}
.paquete__cuerpo{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.paquete__nombre{font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:-.02em;color:var(--oro-claro)}
.paquete__nota{margin-top:5px;font-size:.85rem;color:var(--humo);min-height:2.4em}
.paquete__lista{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:.9rem;color:var(--humo)}
.paquete__lista li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted rgba(212,175,55,.16);padding-bottom:7px}
.paquete__lista b{font-weight:400;color:var(--marfil);white-space:nowrap;font-variant-numeric:tabular-nums}
.paquete__pie{margin-top:auto;padding-top:20px}
.destacado__cinta{background:var(--oro);color:#1a1408;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-align:center;padding:5px}

/* ── Incluye ──────────────────────────────────────────────────────────── */
.incluye{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 34px;margin-top:30px}
.incluye div{padding:11px 0;border-bottom:1px solid rgba(212,175,55,.12);font-size:.95rem;color:var(--humo)}
.incluye div::before{content:"·";color:var(--oro);margin-right:10px;font-weight:700}

/* ── Togas ────────────────────────────────────────────────────────────── */
/* Cuatro por fila, exactos: con `auto-fit` salían siete y una sola en la
   segunda fila, que es lo que peor se ve en una cuadrícula. */
.togas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
@media (max-width:720px){.togas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.togas img{aspect-ratio:3/4;object-fit:cover;border:1px solid var(--filete);border-radius:3px;transition:border-color .2s ease,filter .2s ease;filter:saturate(.94)}
.togas img:hover{border-color:var(--oro);filter:saturate(1.06)}

/* ── Pago ─────────────────────────────────────────────────────────────── */
.pagos{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pago{padding:11px 20px;font-size:.94rem;color:var(--marfil);background:var(--noche);border:1px solid rgba(212,175,55,.18);border-radius:3px}

/* ── Detalles ─────────────────────────────────────────────────────────── */
.detalles{display:grid;gap:2px;margin-top:32px}
.detalle{border-top:1px solid rgba(212,175,55,.14)}
.detalle summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 0;cursor:pointer;font-family:var(--display);font-size:1.04rem;font-weight:600;letter-spacing:-.015em;color:var(--marfil);list-style:none}
.detalle summary::-webkit-details-marker{display:none}
.detalle summary::after{content:"+";color:var(--oro);font-family:var(--texto);font-size:1.3rem;flex:none}
.detalle[open] summary::after{content:"–"}
.detalle__cuerpo{padding:0 0 20px;font-size:.96rem;color:var(--humo);max-width:70ch}
.detalle__cuerpo p+p{margin-top:12px}

/* ── Cierre y pie ─────────────────────────────────────────────────────── */
.cierre{text-align:center;padding-block:clamp(56px,8vw,96px)}
.cierre .entrada{margin-left:auto;margin-right:auto}
.cierre__acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.pie{background:var(--carbon);padding:clamp(44px,6vw,64px) 0 34px}
.pie__caja{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}
.pie__rot{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--oro);margin-bottom:9px}
.pie a{color:var(--marfil);text-decoration:none;border-bottom:1px solid var(--filete)}
.pie a:hover{border-bottom-color:var(--oro)}
.pie__legal{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;margin-top:38px;padding-top:22px;border-top:1px solid rgba(212,175,55,.14);font-size:.83rem;color:var(--humo)}

/* ── Llamada fija en móvil ────────────────────────────────────────────
   En un teléfono la barra superior se pierde al bajar, y aquí la conversación
   ocurre por WhatsApp. La llamada se queda al alcance del pulgar y respeta la
   franja de gestos del iPhone. */
.movil-cta{display:none}
@media (max-width:720px){
  .movil-cta{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:10px max(14px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-right,0px));
    background:rgba(14,12,8,.94);backdrop-filter:blur(10px);
    border-top:1px solid rgba(212,175,55,.2);
  }
  .movil-cta .boton{flex:1;padding:0 14px;font-size:.9rem}
  /* Aire al final para que la barra no tape el pie. */
  body{padding-bottom:74px}
}

/* Un solo momento de movimiento en toda la página: la entrada de la portada. */
@media (prefers-reduced-motion:no-preference){
  .portada__texto,.portada__foto{animation:entra .75s cubic-bezier(.22,1,.36,1) both}
  .portada__foto{animation-delay:.12s}
  @keyframes entra{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
}

/* ═══════════════════════════════════════════════════════════════════════
   CAPA INTERACTIVA
   ═══════════════════════════════════════════════════════════════════════
   Todo lo de aquí abajo es movimiento y profundidad. Dos reglas lo gobiernan:

   1. Solo se anima `transform` y `opacity`. Son las dos propiedades que el
      navegador puede resolver en el compositor, sin recalcular la maqueta.
      Animar `top`, `height` o `box-shadow` obliga a rehacer el diseño en cada
      fotograma y se nota en un teléfono de gama media, que es donde se va a
      ver esta página.
   2. Nada de `transition: all`. Se enumera qué transita, o el día que alguien
      añada una propiedad cara empezará a animarse sola.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Resplandor de la portada ─────────────────────────────────────────
   El oro no llega como un degradado de fondo —eso lo hace todo el mundo—
   sino como LUZ: dos focos difusos detrás del contenido, uno cálido arriba
   a la izquierda y otro más apagado tras la fotografía. Es el destello del
   metal del logotipo extendido a la página.

   Va en un pseudoelemento con `filter: blur()` en vez de en el `background`
   del section: así se puede difuminar de verdad sin arrastrar el texto. */
.portada {
  position: relative;
  isolation: isolate;
  /* `clip` y no `hidden`: recorta el resplandor sin convertir la portada en un
     contenedor de desplazamiento. Medido: sin esto el documento salía 37 px más
     ancho que la ventana en escritorio y 47 en móvil, y la página entera se
     desplazaba de lado. */
  overflow: clip;
}

.portada::before {
  content: "";
  position: absolute;
  /* Sin sobresalir a los lados. El desbordamiento horizontal venía de aquí: un
     -12 % sobre 1088 px son 130 px fuera del lienzo a cada lado. La luz se
     mantiene ensanchando los focos, que es lo que se ve; lo que se recortaba
     era el borde ya casi transparente. */
  inset: -22% 0 -34%;
  z-index: -1;
  background:
    radial-gradient(46% 52% at 20% 28%, rgba(212, 175, 55, .18), transparent 72%),
    radial-gradient(40% 46% at 80% 64%, rgba(240, 218, 150, .10), transparent 74%);
  filter: blur(46px);
  pointer-events: none;
}

/* Un filete de luz bajo la portada: cierra el bloque sin dibujar una línea. */
.portada::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .3), transparent);
}

/* ── Barra de progreso de lectura ─────────────────────────────────────
   `scaleX` sobre un elemento de ancho fijo, no `width`: cambiar el ancho
   rehace la maqueta en cada píxel de scroll. */
.progreso-lectura {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ── Revelado al desplazar ────────────────────────────────────────────
   El estado oculto lo pone JAVASCRIPT en `<html>`, no esta hoja.

   Si el `opacity: 0` viviera aquí sin condición, un navegador con el script
   bloqueado —o un fallo de red a mitad de carga— dejaría la página en
   blanco con todo el contenido presente pero invisible. Con la clase en la
   raíz, sin JS no hay nada que ocultar y la página se lee entera. */
.js .revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22, 1, .36, 1), transform .62s cubic-bezier(.22, 1, .36, 1);
}

.js .revela--visible { opacity: 1; transform: none; }

/* Cascada dentro de una cuadrícula: el retardo lo pone JS en `--turno`, así
   la hoja no tiene que enumerar `:nth-child` hasta el infinito. */
.js .revela { transition-delay: calc(var(--turno, 0) * 70ms); }

/* ── Micro-elevación de las piezas ────────────────────────────────────
   Tres cosas a la vez y las tres dicen lo mismo: sube, se le enciende el
   filo y proyecta sombra. Una sola de ellas se lee como un fallo de
   dibujado; las tres juntas se leen como que la pieza se levanta. */
.paquete { will-change: transform; }

.paquete:hover,
.paquete:focus-within {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, .55);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(212, 175, 55, .12);
}

.togas img {
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, filter .25s ease;
  will-change: transform;
}

.togas a:hover img,
.togas img:hover {
  transform: translateY(-6px);
  border-color: var(--oro);
  filter: saturate(1.08);
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .9);
}

/* Los cuatro oficios y las cifras también responden, con menos recorrido:
   no son piezas que se puedan pulsar, así que no deben parecerlo. */
.oficio__filete { transition: background-color .25s ease, transform .25s ease; transform-origin: 0 50%; }
.oficios > div:hover .oficio__filete { background: var(--oro); transform: scaleX(1.06); }

/* ── Botón de volver arriba, con anillo de progreso ───────────────────
   El anillo no es adorno: dice cuánto queda. Un botón de subir que además
   informa de dónde estás vale por dos. */
.subir {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  /* Encima del disparador del asistente: lo que se quiere que se pulse va en la
     esquina, y subir es un accesorio. Mismo orden que en el móvil, que si no la
     página coloca sus flotantes de dos formas según el ancho de la ventana. */
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 64px);
  z-index: 45;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  color: var(--oro-claro);
  background: rgba(23, 19, 13, .88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, .28);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}

.subir--visible { opacity: 1; transform: none; pointer-events: auto; }
.subir:hover { background: rgba(33, 27, 18, .95); }
.subir:active { transform: translateY(1px); }

.subir__anillo { position: absolute; inset: -1px; width: 54px; height: 54px; transform: rotate(-90deg); }
.subir__pista { stroke: rgba(212, 175, 55, .16); }
.subir__avance { stroke: var(--oro); transition: stroke-dashoffset .1s linear; }
.subir__flecha { position: relative; display: block; }

/* En el móvil la barra fija de contacto ocupa la parte baja: el botón sube
   por encima de ella en vez de taparla. */
@media (max-width: 720px) {
  .subir { bottom: calc(74px + max(10px, env(safe-area-inset-bottom))); width: 46px; height: 46px; }
  .subir__anillo { width: 48px; height: 48px; }
}

/* ── Asistente ────────────────────────────────────────────────────────
   Cristal esmerilado: el panel deja ver el oro de la página por detrás.
   Con `backdrop-filter` no soportado queda un panel sólido, que también
   sirve; por eso el color de fondo ya es opaco de partida. */
.asistente__abrir {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 46;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px 0 16px;
  font-family: var(--texto);
  font-size: .92rem;
  font-weight: 500;
  color: #1a1408;
  background: var(--oro);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}

.asistente__abrir:hover { background: var(--oro-claro); transform: translateY(-2px); }

.asistente__icono { position: relative; display: grid; place-items: center; line-height: 0; }

/* El punto de «en línea» va montado sobre el icono, con un anillo del color del
   botón para que se recorte contra el oro y no parezca suciedad. */
.asistente__icono .asistente__punto {
  position: absolute;
  right: -2px;
  top: -1px;
  border: 2px solid var(--oro);
}

.asistente__abrir:hover .asistente__icono .asistente__punto { border-color: var(--oro-claro); }
.asistente__abrir[aria-expanded="true"] { transform: scale(.96); }

/* El punto de «en línea». Late despacio: un parpadeo rápido dice alarma. */
.asistente__punto {
  width: 9px; height: 9px;
  background: #29a35a;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(41, 163, 90, .55);
  animation: latido 2.4s ease-out infinite;
}

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(41, 163, 90, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(41, 163, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(41, 163, 90, 0); }
}

.asistente__panel {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  /* Se abre justo encima de su disparador. */
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 64px);
  z-index: 47;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 160px));
  background: rgba(23, 19, 13, .82);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(212, 175, 55, .26);
  border-radius: 16px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
}

.asistente__panel--abierto { opacity: 1; transform: none; pointer-events: auto; }

.asistente__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(212, 175, 55, .18);
}

.asistente__quien { flex: 1; min-width: 0; }
.asistente__nombre { font-family: var(--display); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; color: var(--oro-claro); line-height: 1.25; }
.asistente__estado { display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--humo); }

.asistente__cerrar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  color: var(--humo);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.asistente__cerrar:hover { color: var(--marfil); background: rgba(212, 175, 55, .12); }

.asistente__hilo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.burbuja {
  max-width: 86%;
  padding: 10px 13px;
  font-size: .9rem;
  line-height: 1.55;
  border-radius: 13px;
  animation: entra-burbuja .28s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes entra-burbuja { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.burbuja--bot { align-self: flex-start; color: var(--marfil); background: rgba(255, 255, 255, .055); border-bottom-left-radius: 4px; }
.burbuja--yo  { align-self: flex-end; color: #1a1408; background: var(--oro); border-bottom-right-radius: 4px; }
.burbuja strong { color: var(--oro-claro); font-weight: 600; }
.burbuja--yo strong { color: #1a1408; }
.burbuja ul { margin: 8px 0 0; padding-left: 18px; }
.burbuja li { margin-bottom: 4px; }

/* Los tres puntos de «escribiendo». Es una espera fingida, sí: sin ella la
   respuesta aparece antes de que dé tiempo a leer la pregunta y no se
   entiende de dónde salió. */
.escribiendo { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.escribiendo span {
  width: 6px; height: 6px;
  background: var(--humo);
  border-radius: 50%;
  animation: puntear 1.25s ease-in-out infinite;
}
.escribiendo span:nth-child(2) { animation-delay: .16s; }
.escribiendo span:nth-child(3) { animation-delay: .32s; }

@keyframes puntear {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.asistente__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 14px;
}

.chip {
  padding: 8px 13px;
  font-family: var(--texto);
  font-size: .82rem;
  color: var(--oro-claro);
  background: transparent;
  border: 1px solid rgba(212, 175, 55, .3);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.chip:hover { background: rgba(212, 175, 55, .14); border-color: var(--oro); }
.chip:active { transform: translateY(1px); }

.chip--whatsapp {
  color: #1a1408;
  background: var(--oro);
  border-color: var(--oro);
  font-weight: 500;
}

.chip--whatsapp:hover { background: var(--oro-claro); }

.asistente__pie {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(212, 175, 55, .18);
}

.asistente__campo {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  font-family: var(--texto);
  font-size: .9rem;
  color: var(--marfil);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(212, 175, 55, .2);
  border-radius: 999px;
}

.asistente__campo::placeholder { color: var(--humo); }
.asistente__campo:focus { outline: none; border-color: var(--oro); }

.asistente__enviar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  color: #1a1408;
  background: var(--oro);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease;
}

.asistente__enviar:hover { background: var(--oro-claro); }

/* ── Los flotantes en el móvil ────────────────────────────────────────
   Se apilan en una sola columna a la derecha, y el orden no es casual:

     ┌──────────┐
     │  subir   │  ← lo secundario, arriba
     ├──────────┤
     │  chat    │  ← lo que queremos que se pulse, al alcance del pulgar
     ├──────────┤
     │ WhatsApp │  ← la barra fija de contacto
     └──────────┘

   Antes iban en fila y el chat quedaba a la izquierda del de subir, con el
   pulgar tapándolo. El sitio bueno de una pantalla de teléfono es la esquina
   inferior derecha, y ahí va el chat; subir es un accesorio y se aparta arriba.

   Las tres alturas se calculan sobre la misma base —la barra de WhatsApp más el
   área segura— para que no se solapen en ningún dispositivo. */
@media (max-width: 720px) {
  /* Alto de la barra fija de contacto más su aire. */
  :root { --pila: calc(74px + max(10px, env(safe-area-inset-bottom))); }

  .asistente__abrir {
    right: max(16px, env(safe-area-inset-right));
    bottom: var(--pila);
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .asistente__texto { display: none; }

  /* Justo encima del chat, y más pequeño: pesa menos en la jerarquía. */
  .subir {
    right: max(19px, calc(env(safe-area-inset-right) + 3px));
    bottom: calc(var(--pila) + 62px);
    width: 46px;
    height: 46px;
  }

  .subir__anillo { width: 48px; height: 48px; }

  .asistente__panel {
    right: max(12px, env(safe-area-inset-right));
    bottom: var(--pila);
    height: min(70vh, 520px);
  }
}

/* ── Sin movimiento ───────────────────────────────────────────────────
   Quien pide menos animación no pide una página rota: pide la misma página
   quieta. Todo llega a su estado final de golpe. */
@media (prefers-reduced-motion: reduce) {
  .js .revela,
  .js .revela--visible { opacity: 1; transform: none; transition: none; }
  .paquete:hover, .paquete:focus-within, .togas img:hover { transform: none; }
  .asistente__punto { animation: none; }
  .escribiendo span { animation: none; opacity: .6; }
  .burbuja { animation: none; }
  .subir, .asistente__panel, .asistente__abrir { transition: opacity .01s linear; }
}

/* Texto solo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}