/* =====================================================================
   Tellmebye · PROPUESTA
   Capa que se apoya en la hoja actual (base.css, sin tocar): misma
   tipografía, mismos pesos, mismos colores y el mismo ritmo de bandas.
   Aquí solo va lo que cambia: la puesta en escena y el movimiento.
   Quitando este fichero la página vuelve a verse como hoy.
   ===================================================================== */
:root{
  --sal:cubic-bezier(.22,1,.36,1);          /* la curva que ya usa la web para casi todo */
  --oro:#E8C77A;                            /* el dorado del panel de ceremonias, solo allí */
  --cian-claro:#ACE4F4;                     /* el cian que la web ya usa sobre fondo oscuro */
}

/* ---------- desplazamiento ----------
   La hoja actual pone scroll-behavior:smooth en <html>. Con eso, ScrollTrigger no puede medir: para
   recalcular posiciones lleva la página a 0 y la devuelve, y con el desplazamiento suave ese salto no
   es instantáneo, así que mide con la página bajada. Resultado comprobado: tras bajar hasta el final y
   volver arriba, la portada se quedaba atenuada para siempre.
   No se pierde nada: los enlaces del menú ya piden el desplazamiento suave por código (base.js), y
   las correcciones y el «salto seco» al formulario, que piden behavior:'auto', pasan a ser de verdad
   instantáneos, que es lo que dicen sus comentarios. */
html{scroll-behavior:auto}

/* ---------- movimiento: un solo sistema ----------
   Las entradas al bajar las lleva ahora GSAP. Se apagan las de CSS para
   que no compitan dos animaciones por el mismo elemento. */
.ap,.cat .mod-f,.pais{animation:none!important}
.ap{opacity:1;transform:none;transition:none}
/* Portada: lo que va a entrar animado no debe verse un instante antes de animarse.
   La clase js-mov la pone el <head> y se retira sola si las librerías no cargan. */
.js-mov .port-in > *,.js-mov .port-aval ul{opacity:0}
.js-mov .port-v{transform:scale(1.07)}
/* Titulares que salen de su propia caja. La caja recorta con clip-path y no con overflow: así puede
   dejar sitio a las tildes de las mayúsculas y a los rabos de la g, la p y la y sin ocupar ni un píxel
   más, y el titular mide exactamente lo mismo partido en líneas que entero (nada salta al terminar). */
.ln-mask{overflow:visible!important;clip-path:inset(-.1em -.1em -.16em -.1em)}

/* =====================================================================
   CABECERA · transparente sobre el vídeo de portada, como hoy después
   ===================================================================== */
.cab{transition:border-color .3s,background-color .45s ease,color .3s}
.cab-avance{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--azul);
  transform:scaleX(0);transform-origin:left;pointer-events:none;transition:opacity .3s}
/* Arriba del todo, solo un velo para que el menú se lea sobre el vídeo.
   (no-repeat: sin él, el degradado se repite en el píxel del borde y deja una raya oscura bajo la cabecera.) */
.js .cab.en-portada{background-color:rgb(18 14 10 / 0%);
  background-image:linear-gradient(to bottom, rgb(18 14 10 / 62%) 0%, rgb(18 14 10 / 36%) 52%, rgb(18 14 10 / 0%) 100%);background-repeat:no-repeat;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
/* En cuanto se empieza a bajar, cristal oscuro: el texto de la portada pasa por debajo y no se mezcla con el menú. */
.js .cab.en-portada.fija{background-color:rgb(18 14 10 / 64%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.js .cab.en-portada .cab-avance{opacity:0}
.js .cab.en-portada .logo img{filter:brightness(0) invert(1)}
.logo img{transition:filter .45s ease}
.js .cab.en-portada .nav a.nv-t{color:rgb(255 255 255 / 88%)}
.js .cab.en-portada .nav a.nv-t:hover{color:#fff;background:rgb(255 255 255 / 14%)}
.js .cab.en-portada .acc-btn{color:#fff}
.js .cab.en-portada .acc-btn:hover{background:rgb(255 255 255 / 14%)}
.js .cab.en-portada .idi-t{color:rgb(255 255 255 / 82%)}
.js .cab.en-portada .idi:hover .idi-t,.js .cab.en-portada .idi:focus-within .idi-t{color:#fff;background:rgb(255 255 255 / 14%)}
.js .cab.en-portada .menu-btn{color:#fff}
.js .cab.en-portada .menu-btn:hover{background:rgb(255 255 255 / 14%)}
.js .cab.en-portada .cab-in > .btn{background:#fff;color:var(--tinta)}
.js .cab.en-portada .cab-in > .btn:hover{background:#fff;color:var(--azul)}
/* Entre 600 y 1320 px el menú ya está recogido en la hamburguesa y sobra sitio: el botón de
   "Solicitar demo" no tiene por qué desaparecer justo en portátiles y tabletas. */
@media(min-width:600px) and (max-width:1319px){
  .cab .cab-in > .btn{display:inline-flex;min-height:44px;padding:var(--s8) var(--s16);font-size:15px}
}
/* (La clase en-portada viene ya puesta en el HTML para que la cabecera no parpadee en claro al cargar;
   va detrás de .js para que, sin JavaScript, la cabecera se quede en su fondo de siempre.) */
/* la sección que se está leyendo queda marcada en el menú */
@media(min-width:1320px){
  .nav a.nv-t{position:relative}
  .nav a.nv-t::after{content:"";position:absolute;left:var(--s12);right:var(--s12);bottom:6px;height:2px;border-radius:2px;
    background:var(--azul);transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--sal)}
  .nav a.nv-t.aqui{color:var(--tinta)}
  .nav a.nv-t.aqui::after{transform:scaleX(1)}
  .js .cab.en-portada .nav a.nv-t::after{display:none}
}

/* =====================================================================
   PORTADA · pantalla completa y, al pie, las cifras que avalan
   ===================================================================== */
/* La cabecera mide un píxel más (su borde inferior) que el hueco que la portada le reserva. Bajo una
   cabecera opaca no se nota; bajo una transparente asoma una raya clara arriba del todo. */
.port-x{margin-top:-69px;padding-top:69px}
@media(min-width:1024px){.port-x{margin-top:-81px;padding-top:81px}}
@media(max-width:700px){.port-x{padding-top:0}}
.port-aval{position:relative;z-index:2}
.port-aval ul{list-style:none;margin-block:0;padding:var(--s20) 0 var(--s24);display:flex;flex-wrap:wrap;
  gap:var(--s8) var(--s48);border-top:1px solid rgb(255 255 255 / 20%)}
.port-aval li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.3;color:rgb(255 255 255 / 82%)}
.port-aval b{font-family:var(--ft);font-weight:800;font-size:25px;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}
.port-aval .aval-ph b{font-size:17px;letter-spacing:-.015em}
@media(min-width:701px){
  /* A pantalla completa, con un tope: el vídeo es de 1920x1080 y la web cuida que no se amplíe. La portada
     puede crecer hasta donde el propio ancho ya obliga a ampliarlo (56,25vw), nunca más por culpa del alto. */
  .port-x{min-height:clamp(620px,100vh,max(1080px,56.25vw));min-height:clamp(620px,100svh,max(1080px,56.25vw));
    flex-direction:column;justify-content:flex-end;align-items:stretch}
  .port-x .port-in{padding-block:var(--s72) var(--s40)}
  .port-x .port-ctrl{bottom:calc(var(--s24) + 78px)}
}
@media(min-width:1024px){
  .port-aval .aval-ph{margin-left:auto}
  .port-x .port-in{padding-block:var(--s80) var(--s48)}
}
@media(max-width:700px){
  .port-x .port-in{padding-bottom:var(--s32)}
  .port-aval ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s16) var(--s24);padding:var(--s24) 0 var(--s40)}
  .port-aval li{flex-direction:column;gap:2px;font-size:14px}
}

/* =====================================================================
   SOLUCIONES · tres tarjetas con imagen; la de funerarias, la mayor
   ===================================================================== */
.sol{display:grid;gap:var(--s20)}
.sol-c{position:relative;display:flex;align-items:flex-end;min-height:300px;border-radius:var(--r);overflow:hidden;
  isolation:isolate;color:#fff;text-decoration:none;box-shadow:var(--sombra-posada);
  transition:translate 480ms var(--sal),box-shadow 480ms var(--sal)}
/* El oscuro de reserva (lo que se ve mientras llega la imagen) va 1 px más adentro que la imagen. Con la
   pantalla al 125 % o al 150 %, lo normal en un portátil con Windows, el canto de la imagen y el de la
   tarjeta no caen en el mismo píxel, y un fondo oscuro debajo dibujaba un pelo sucio en bordes y esquinas. */
.sol-c::before{content:"";position:absolute;inset:1px;z-index:-3;border-radius:inherit;background:var(--tinta)}
.sol-m{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit}
.sol-m img,.sol-m video{width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--sal)}
.sol-fun .sol-m video{object-position:center 30%}
.sol-mas .sol-m img{object-position:70% 30%}
/* el mismo velo de las bandas de vídeo: negro cálido que muere hacia arriba */
.sol-c::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(to top, rgb(18 14 10 / 94%) 0%, rgb(18 14 10 / 66%) 36%, rgb(18 14 10 / 10%) 70%, rgb(18 14 10 / 0%) 100%)}
.sol-t{display:block;padding:var(--s24);max-width:48ch}
.sol-t h3{color:#fff;margin-bottom:var(--s8)}
.sol-t p{font-size:16px;line-height:1.6;color:rgb(255 255 255 / 86%)}
.sol-t .lnk{color:#fff;margin-top:var(--s8)}
.sol-fun{min-height:440px}

/* Legados: un fotograma del vídeo de la propia sección, con los recuerdos entrando en la caja de Tellmebye.
   Por defecto (tarjeta estrecha o en columna): el fotograma arriba, entero y centrado, y el texto debajo. La
   altura la pone la propia imagen, así que la caja se ve completa a cualquier ancho y el texto nunca la pisa.
   Detrás va el azul de los dos cantos del fotograma (el izquierdo es más claro que el derecho): cuando la
   tarjeta es más ancha que la imagen, a los lados no se ve dónde acaba. */
.sol-leg{flex-direction:column;align-items:stretch;
  background:linear-gradient(to bottom, rgb(16 50 134) 0%, rgb(16 50 134) 52%, rgb(9 24 86) 100%)}
.sol-leg::before{display:none}
.sol-leg .sol-m{position:relative;inset:auto;flex:none;margin-bottom:-56px;border-radius:0;
  transform-origin:50% 0;transition:transform 1100ms var(--sal);
  background:linear-gradient(to bottom, rgb(16 49 132) 0%, rgb(17 52 139) 8%, rgb(18 58 146) 17%, rgb(18 59 151) 27%, rgb(20 59 150) 40%, rgb(23 62 154) 50%, rgb(21 63 158) 62%, rgb(21 67 163) 65%, rgb(22 71 173) 68%, rgb(23 72 174) 71%, rgb(21 68 165) 73.5%, rgb(19 61 151) 76%, rgb(16 55 141) 79%, rgb(16 51 133) 83%, rgb(17 49 132) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
.sol-leg .sol-m::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, rgb(12 27 92) 0%, rgb(14 32 99) 10%, rgb(13 37 107) 20%, rgb(14 40 115) 30%, rgb(15 42 120) 45%, rgb(16 47 128) 55%, rgb(17 47 130) 63%, rgb(18 51 137) 65%, rgb(18 56 145) 67%, rgb(18 59 149) 70%, rgb(17 58 148) 75%, rgb(17 55 144) 79%, rgb(17 50 135) 83%, rgb(16 47 129) 90%, rgb(15 43 124) 100%);
  -webkit-mask-image:linear-gradient(to right,transparent calc(50% - 168px),#000 calc(50% + 168px));mask-image:linear-gradient(to right,transparent calc(50% - 168px),#000 calc(50% + 168px))}
.sol-leg .sol-m img{display:block;width:min(100%,336px);height:auto;aspect-ratio:760/720;margin:0 auto}
.sol-leg .sol-t{margin-top:auto}
.sol-leg::after{background:linear-gradient(to top, rgb(8 20 78 / 70%) 0%, rgb(8 20 78 / 0%) 55%)}
/* Con sitio a lo ancho: el texto a la izquierda y el fotograma a la derecha, a toda la altura. El fondo repite
   el degradado exacto de la columna por la que está cortado el fotograma: la unión no se ve. */
@media(min-width:640px) and (max-width:899px), (min-width:1200px){
  .sol-leg{flex-direction:row;align-items:flex-end;min-height:300px;
    background:linear-gradient(to bottom, rgb(17 47 132) 0%, rgb(18 55 141) 12%, rgb(16 59 152) 28%, rgb(20 62 156) 60%, rgb(21 72 173) 70%, rgb(19 57 149) 76%, rgb(16 50 135) 84%, rgb(16 48 133) 100%)}
  .sol-leg .sol-m{position:absolute;inset:0 0 0 auto;margin:0;aspect-ratio:760/720;transform-origin:100% 50%;background:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 1%);mask-image:linear-gradient(to right,transparent 0,#000 1%)}
  .sol-leg .sol-m::before{display:none}
  .sol-leg .sol-m img{width:100%;height:100%;margin:0;aspect-ratio:auto}
  .sol-leg::after{background:linear-gradient(to right, rgb(8 20 78 / 78%) 0%, rgb(8 20 78 / 40%) 34%, rgb(8 20 78 / 0%) 56%)}
  .sol-leg .sol-t{margin-top:0;max-width:min(24rem,calc(100% - 320px))}
}
/* En columna, con la tarjeta ancha (tableta en vertical, móvil apaisado): el texto de la de funerarias se
   queda a la izquierda de la pantalla del vídeo, que si no pasaba por encima del nombre del difunto, y la de
   mascotas gana altura para que el título caiga debajo del televisor de la foto. */
@media(min-width:640px) and (max-width:899px){
  .sol-fun .sol-t{max-width:54%}
  .sol-mas{min-height:360px}
}
/* Mascotas con la tarjeta estrecha (móvil y tres columnas): la foto arriba, a su proporción, y el texto arranca
   justo bajo el televisor de la foto, tenga las líneas que tenga; antes el título caía encima de la barra del
   televisor. El borde inferior del televisor está al 43,2 % del alto de la foto, y el margen negativo va en %
   del ancho de la tarjeta, que es de lo que depende ese alto: 56,8 % ÷ proporción de la caja. */
@media(max-width:639px), (min-width:900px) and (max-width:1199px){
  .sol-mas{flex-direction:column;align-items:stretch}
  .sol-mas::before{background:rgb(18 14 10)}
  .sol-mas .sol-m{position:relative;inset:auto;flex:none;aspect-ratio:1.15;border-radius:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
  .sol-mas .sol-m img{object-position:85% 30%}
  .sol-mas .sol-t{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
    margin-top:calc(-49.4% + 10px)}
}
@media(min-width:900px) and (max-width:1199px){
  .sol-mas .sol-m{aspect-ratio:.75}
  .sol-mas .sol-m img{object-position:52% 30%}
  .sol-mas .sol-t{margin-top:calc(-75.7% + 10px)}
}

@media(hover:hover) and (pointer:fine){
  .sol-c:hover{translate:0 -6px;box-shadow:var(--sombra-alzada)}
  .sol-c:hover .sol-m > *{transform:scale(1.045)}
  .sol-c:hover .lnk svg{transform:translateX(3px)}
  /* en legados crece el fotograma con su fondo, los dos a la vez: la unión sigue sin verse */
  .sol-leg:hover .sol-m > *{transform:none}
  .sol-leg:hover .sol-m{transform:scale(1.045)}
}
/* A media anchura, tres tarjetas en vertical: la imagen arriba y el texto abajo. */
@media(min-width:900px) and (max-width:1199px){
  .sol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sol-c,.sol-fun,.sol-leg{min-height:480px}
  /* el vídeo se enseña por su parte baja: la pantalla del obituario queda por encima del título */
  .sol-fun .sol-m video{object-position:center 100%}
}
/* En escritorio: la de funerarias, alta y estrecha como su vídeo, y las otras dos apiladas a la derecha. */
@media(min-width:1200px){
  .sol{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);grid-template-rows:repeat(2,minmax(0,1fr));
    gap:var(--s24);height:clamp(580px,72vh,700px)}
  .sol-c,.sol-leg{min-height:0}
  .sol-fun{grid-row:1 / span 2}
  .sol-t{padding:var(--s32)}
  /* en la tarjeta ancha el texto va a la izquierda y la foto respira a la derecha */
  .sol-mas::after{background:
    linear-gradient(to right, rgb(18 14 10 / 90%) 0%, rgb(18 14 10 / 62%) 40%, rgb(18 14 10 / 0%) 74%),
    linear-gradient(to top, rgb(18 14 10 / 50%) 0%, rgb(18 14 10 / 0%) 55%)}
}
@media(prefers-reduced-motion:reduce){.sol-c:hover{translate:none}}

/* =====================================================================
   LA PRUEBA DE DOS MESES · las cuatro garantías, en fichas
   ===================================================================== */
.prueba{position:relative;isolation:isolate;overflow:hidden}
.prueba::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 70% at 96% 6%, rgb(0 172 228 / 15%) 0%, rgb(0 172 228 / 0%) 70%)}
@media(min-width:600px){
  .prueba-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s16)}
  .prueba-l li{grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--s20);padding:var(--s24);
    border-radius:var(--r);background:rgb(255 255 255 / 5%);border:1px solid rgb(255 255 255 / 12%);
    line-height:1.4;transition:background-color 320ms ease,border-color 320ms ease}
}
/* al pasar el ratón, el icono se enciende en el cian de marca y la ficha se marca */
.pl-i{transition:background-color 320ms ease,border-color 320ms ease,color 320ms ease,scale 420ms var(--sal),box-shadow 420ms var(--sal)}
@media(hover:hover) and (pointer:fine){
  .prueba-l li:hover{background:rgb(255 255 255 / 9%);border-color:rgb(0 172 228 / 55%)}
  .prueba-l li:hover .pl-i{background:var(--cian);border-color:var(--cian);color:var(--tinta);scale:1.12;
    box-shadow:0 0 0 6px rgb(0 172 228 / 16%), 0 10px 24px -8px rgb(0 172 228 / 60%)}
}
@media(prefers-reduced-motion:reduce){.prueba-l li:hover .pl-i{scale:none}}

/* =====================================================================
   BANDA «La distancia no debería impedir decir adiós»
   El velo de hoy oscurece toda la mitad de abajo, de lado a lado. Aquí va recogido a la izquierda, bajo el
   texto, y muere antes del centro: el texto gana contraste y la parte del vídeo donde pasa todo queda limpia.
   Las paradas van en píxeles desde el borde de la retícula, para que valga igual a 1280 que a 2560.
   ===================================================================== */
@media(min-width:701px){
  #banda1{--izq:max(var(--margen), calc((100vw - 1280px) / 2))}
  #banda1::after{background:
    linear-gradient(to right, rgb(18 14 10 / 88%) 0, rgb(18 14 10 / 80%) calc(var(--izq) + 300px),
      rgb(18 14 10 / 44%) calc(var(--izq) + 560px), rgb(18 14 10 / 0%) calc(var(--izq) + 840px)),
    linear-gradient(to top, rgb(18 14 10 / 58%) 0%, rgb(18 14 10 / 0%) 30%)}
  #banda1 h2,#banda1 .p-g{text-shadow:0 1px 20px rgb(12 9 6 / 55%)}
}

/* =====================================================================
   CIFRAS Y PAÍSES · las cuatro cifras de siempre y el mapa, en globo
   Tres piezas: (a) titular y cifras, (b) el globo, (c) «Dieciséis países desde 2012» y su texto.
   En móvil van en ese orden; en escritorio, a y c a la izquierda y el globo a la derecha.
   ===================================================================== */
.cx-g{display:grid;gap:var(--s48)}
.cx .enc{margin-bottom:var(--s40)}
.cx-n{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-n .card{padding:var(--s24)}
.cx-n .num b{font-size:clamp(1.7rem,6vw,2.5rem)}
@media(min-width:768px) and (max-width:1099px){.cx-n{grid-template-columns:repeat(4,minmax(0,1fr))}.cx-n .num b{font-size:clamp(1.6rem,3.1vw,2.1rem)}}
@media(min-width:1100px){
  .cx-g{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);grid-template-areas:"a b" "c b";
    column-gap:var(--s64);row-gap:var(--s48);align-items:start}
  .cx-a{grid-area:a}
  .cx-b{grid-area:b;align-self:center}
  .cx-c{grid-area:c}
  /* en la rejilla de dos por dos la caja es más estrecha: el número llega a su tamaño de siempre (3,2rem) en cuanto cabe */
  .cx-n .num b{font-size:clamp(2rem,3.4vw,3.2rem)}
}
@media(min-width:1280px){.cx-g{column-gap:var(--s80)}}
.cx-b{min-width:0}
.cx-c .h-bloque{margin-bottom:var(--s12)}
.globo{position:relative;width:min(100%,620px,66vh);aspect-ratio:1;margin-inline:auto;cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.globo.asido{cursor:grabbing}
.globo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* la sombra en el suelo: sin ella el globo flota como un adhesivo */
.globo{isolation:isolate}
.globo::after{content:"";position:absolute;left:12%;right:12%;bottom:-4.5%;height:11%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side, rgb(22 33 59 / 58%) 0%, rgb(22 33 59 / 34%) 42%, rgb(22 33 59 / 0%) 100%);filter:blur(9px)}
.globo-pin{position:absolute;left:0;top:0;z-index:2;pointer-events:none;white-space:nowrap;
  font-family:var(--ft);font-size:12px;font-weight:800;letter-spacing:.01em;line-height:1;color:var(--tinta);
  background:rgb(255 255 255 / 94%);border:1px solid var(--linea);border-radius:999px;padding:5px 10px;
  box-shadow:0 2px 6px rgb(22 33 59 / 10%), 0 10px 22px -10px rgb(22 33 59 / 30%);
  opacity:0;transition:opacity 300ms ease;will-change:transform}
.globo-nombre{margin:var(--s24) 0 0;min-height:1.15em;text-align:center;font-family:var(--ft);
  font-size:clamp(1.6rem,4.6vw,2.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--azul);
  transition:opacity 320ms ease,transform 320ms ease}
.globo-nombre.cambia{opacity:0;transform:translateY(6px)}
/* El mapa de hoy queda de respaldo: es lo que se ve sin JavaScript o si el navegador no puede con el globo. */
.globo,.globo-nombre{display:none}
.js .globo,.js .globo-nombre{display:block}
.js .globo-respaldo{display:none}
.js .sin-globo .globo,.js .sin-globo .globo-nombre{display:none}
.js .sin-globo .globo-respaldo{display:block}

/* =====================================================================
   CÓMO FUNCIONA · los cuatro pasos se van encendiendo al bajar
   ===================================================================== */
.pasos-x{position:relative}
.pasos-x::before,.pasos-x::after{content:"";position:absolute;left:14.25px;top:15px;width:1.5px;height:calc(var(--fin,100%) - 15px)}
.pasos-x::before{background:var(--linea-fuerte)}
.pasos-x::after{background:var(--azul);transform-origin:top;transform:scaleY(var(--avance,0))}
.pasos-x .n{position:relative;z-index:1;background:var(--crema);color:var(--suave);box-shadow:inset 0 0 0 1.5px var(--linea-fuerte);
  transition:background 420ms ease,color 420ms ease,box-shadow 420ms ease,transform 520ms var(--sal)}
.pasos-x li > div{transition:opacity 520ms ease}
.pasos-x li:not(.hecho) > div{opacity:.62}
.pasos-x li.hecho .n{background:var(--azul);color:#fff;box-shadow:none}
.pasos-x li.ahora .n{transform:scale(1.16)}

/* =====================================================================
   CEREMONIAS · a oscuras, como la sala, y con el mando en la mano
   ===================================================================== */
.cer-x{position:relative;isolation:isolate;overflow:hidden;background:var(--noche);color:#fff}
.cer-x::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 38% at 34% 30%, rgb(150 104 52 / 22%) 0%, rgb(150 104 52 / 0%) 70%),
  radial-gradient(40% 30% at 92% 86%, rgb(0 172 228 / 7%) 0%, rgb(0 172 228 / 0%) 70%)}
.cer-x > .cont{position:relative;z-index:1}
#ceremonias.cer-x h2{color:#fff;-webkit-text-stroke:0}
/* sobre oscuro, el acento es el cian de marca, como en el manifiesto y en la banda de prueba */
#ceremonias.cer-x .res,.cer-x .eyebrow{color:var(--cian)}
.cer-x .p{color:rgb(255 255 255 / 80%)}
.cer-x .cer-h3,.cer-x .cer-l strong{color:#fff}
.cer-x .cer-l span{color:rgb(255 255 255 / 70%)}
.cer-x .nota{background:rgb(255 255 255 / 7%);border-left-color:rgb(255 255 255 / 34%);color:rgb(255 255 255 / 76%)}
.cer-x .nota span,.cer-x .nota-ref{color:var(--cian)}
/* el botón de presupuesto, en el azul claro del botón de la portada (blanco sobre el cian puro no llega a contraste) */
.cer-x .cer-btn{background:#0068A8;color:#fff}
.cer-x .cer-btn:hover{background:#00568C;color:#fff}
.cer-x .enc{max-width:54ch}

.cer-directo{display:grid;gap:var(--s16);margin-bottom:var(--s64)}
.cer-x .cer-sala{position:relative;margin:0;background:#0d0b08}
.cer-x .cer-sala:hover{scale:none;box-shadow:var(--sombra-posada)}
.cer-esc{position:relative;display:block;transform-origin:51.03% 31.25%;transition:transform 1200ms var(--sal)}
/* En el móvil la pantalla de la foto mide 36 px: al lanzar una escena, la cámara se acerca un momento y vuelve. */
.cer-sala.cerca .cer-esc{transform:scale(2.5)}
@media(prefers-reduced-motion:reduce){.cer-esc{transition:none}.cer-sala.cerca .cer-esc{transform:none}}
/* La pantalla central de la foto. Medida sobre la imagen (1600x1067): el cristal va
   del 735,5 al 897,5 en horizontal y del 210 al 457 en vertical. */
.cer-pant{position:absolute;left:45.97%;top:19.68%;width:10.125%;height:23.15%;overflow:hidden;pointer-events:none;
  /* el ramo de la caja tapa el canto de abajo de la pantalla: ahí la escena no se pinta */
  -webkit-mask-image:radial-gradient(ellipse 30% 7.5% at 62% 101.5%, transparent 58%, #000 100%);
          mask-image:radial-gradient(ellipse 30% 7.5% at 62% 101.5%, transparent 58%, #000 100%)}
.cer-x .cer-pant img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:brightness(.94) saturate(.95);transition:opacity 620ms ease}
/* el cristal: un punto de sombra por dentro y el reflejo de los focos */
.cer-pant::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 10px rgb(0 0 0 / 50%);
  background:linear-gradient(118deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 0%) 32%)}
.cer-pant::before{content:"";position:absolute;inset:0;z-index:1;background:#fff;opacity:0;pointer-events:none}
.cer-pant.destello::before{animation:cer-destello 620ms ease-out}
@keyframes cer-destello{0%{opacity:.5}100%{opacity:0}}

.cer-mando{display:flex;flex-direction:column;gap:var(--s12);min-width:0;padding:var(--s16);border-radius:var(--r);
  background:#17120b;border:1px solid rgb(232 199 122 / 24%);box-shadow:var(--sombra-posada)}
.cer-mando-c{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--s12)}
.cer-mando-t{font-family:var(--ft);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.cer-mando-e{font-size:12.5px;line-height:1.3;color:rgb(255 255 255 / 66%)}
.cer-mando-e strong{color:#fff;font-weight:700}
.cer-mando-e i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#58D08B;
  box-shadow:0 0 0 3px rgb(88 208 139 / 22%);vertical-align:1px}
.cer-mando-a{display:none;font-size:12.5px;line-height:1.45;color:rgb(255 255 255 / 60%)}
.js .cer-mando-a{display:block}
.cer-tira{list-style:none;margin:0;padding:2px;display:flex;gap:var(--s8);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none}
.cer-tira::-webkit-scrollbar{display:none}
.cer-tira li{flex:0 0 96px;scroll-snap-align:start}
.cer-tira button{position:relative;display:block;width:100%;aspect-ratio:96/136;padding:0;border:0;border-radius:7px;
  overflow:hidden;background:#000;cursor:pointer;font:inherit}
.cer-x .cer-tira img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;opacity:.7;
  transition:opacity 260ms ease,transform 700ms var(--sal)}
.cer-tira button::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / 14%);transition:box-shadow 260ms ease}
.cer-tira button span{position:absolute;left:0;right:0;bottom:0;padding:18px 4px 7px;font-family:var(--ft);font-size:11.5px;
  font-weight:700;line-height:1.1;color:#fff;text-align:center;background:linear-gradient(to top, rgb(10 8 5 / 94%), rgb(10 8 5 / 0%))}
.cer-tira button:hover img,.cer-tira button:focus-visible img{opacity:1}
.cer-tira button[aria-pressed="true"] img{opacity:1;transform:scale(1.05)}
.cer-tira button[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px var(--oro)}
.cer-tira button:focus-visible{outline:2px solid var(--cian);outline-offset:2px}
.cer-medida{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;border-radius:7px;
  border:1px dashed rgb(232 199 122 / 55%);text-align:center}
.cer-medida b{font-family:var(--ft);font-size:22px;font-weight:800;line-height:1;color:var(--oro)}
.cer-medida span{font-size:11px;line-height:1.25;color:rgb(255 255 255 / 76%)}
/* con sitio, el mando se pone al lado de la foto, como la tableta junto a la sala */
@media(min-width:1200px){
  .cer-directo{grid-template-columns:minmax(0,1fr) 252px;gap:var(--s20);align-items:stretch}
  .cer-tira{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);overflow:visible;padding:0}
  .cer-tira li{min-height:0}
  .cer-tira button{height:100%;aspect-ratio:auto}
}
.cer-fin{display:grid;gap:var(--s32);margin-top:var(--s56);padding-top:var(--s56);border-top:1px solid rgb(255 255 255 / 16%)}
.cer-x .cer-pie{margin-top:0}
@media(min-width:900px){.cer-fin{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s72);align-items:center}}

/* =====================================================================
   QUÉ INCLUYE · en escritorio, una vitrina: la lista a un lado y la
   pieza elegida al otro. En móvil sigue como hoy, fila a fila.
   ===================================================================== */
.mod-b{display:inline;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:default}
@media(min-width:1024px){
  .cat.vitrina{display:block;position:relative;padding-right:calc(50% + var(--s32));min-height:620px}
  .vitrina .mod{display:block;border-top:1px solid var(--linea-fuerte)}
  .vitrina .mod:last-child{border-bottom:1px solid var(--linea-fuerte)}
  .vitrina .mod-t{position:relative;max-width:none;padding:0}
  /* la raya de arriba se llena mientras la pieza está en pantalla */
  .vitrina .mod-t::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--azul);
    transform:scaleX(0);transform-origin:left}
  .vitrina.auto .mod.activa .mod-t::before{animation:vit-avance 7s linear forwards}
  .vitrina.auto.pausa .mod.activa .mod-t::before{animation-play-state:paused}
  .vitrina:not(.auto) .mod.activa .mod-t::before{transform:scaleX(1)}
  .vitrina .mod-t h3{margin:0;font-size:clamp(1.35rem,1.85vw,1.7rem);line-height:1.15}
  .vitrina .mod-b{display:flex;align-items:baseline;gap:var(--s20);width:100%;padding:19px 0;cursor:pointer;
    color:var(--suave);transition:color 320ms ease}
  .vitrina .mod-b .mod-n{flex:none;width:28px;margin:0;font-family:var(--f);transition:color 320ms ease}
  .vitrina .mod:not(.activa) .mod-b .mod-n{color:var(--suave)}
  .vitrina .mod.activa .mod-b,.vitrina .mod-b:hover,.vitrina .mod-b:focus-visible{color:var(--tinta)}
  .vitrina .mod-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows 560ms var(--sal)}
  .vitrina .mod-d > div{overflow:hidden;min-height:0}
  .vitrina .mod.activa .mod-d{grid-template-rows:1fr}
  .vitrina .mod-d p{margin-left:calc(28px + var(--s20));max-width:46ch}
  .vitrina .mod-d p:last-child{padding-bottom:var(--s24)}
  /* la pieza: una sola caja blanca a la derecha, y dentro se relevan las imágenes */
  .vitrina .mod .mod-f{position:absolute;top:0;right:0;width:calc(50% - var(--s8));height:100%;min-height:0;order:0;
    opacity:0;visibility:hidden;translate:none;scale:none;box-shadow:var(--sombra-posada);
    transition:opacity 520ms ease,visibility 0s linear 520ms}
  .vitrina .mod.activa .mod-f{opacity:1;visibility:visible;transition:opacity 520ms ease}
  .vitrina .mod:hover .mod-f{translate:none;scale:none;z-index:auto;box-shadow:var(--sombra-posada)}
  .vitrina .mod-f img,.vitrina .mod-f video{max-height:min(480px,100%);
    transform:scale(.96);transition:transform 900ms var(--sal)}
  .vitrina .mod.activa .mod-f img,.vitrina .mod.activa .mod-f video{transform:none}
}
@keyframes vit-avance{to{transform:scaleX(1)}}

/* =====================================================================
   TESTIMONIOS · la tarjeta de siempre, con el vídeo a la vista. Se reproduce en su sitio,
   con el mismo mecanismo que ya usan los vídeos de Philips: no saca al visitante de la web.
   ===================================================================== */
.testi-x .t-card{display:block;padding:0;overflow:hidden}
.t-video{position:relative;aspect-ratio:16/9;background:#0C0E13}
.t-video .ph-a{position:absolute;inset:0;border-radius:0;box-shadow:none}
.t-video .ph-a:hover{scale:none;box-shadow:none}
.t-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.t-pie{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s16);align-items:center;padding:var(--s20) var(--s24)}
.testi-x .t-foto{width:60px;height:60px}
@media(min-width:1024px){.testi-x .t-foto{width:68px;height:68px}.t-pie{padding:var(--s24) var(--s28,28px)}}

/* =====================================================================
   MÓVIL · la demostración, siempre a mano
   En el teléfono la cabecera no lleva botón: una barra al pie lo trae de vuelta
   en cuanto la portada queda atrás, y se retira al llegar al formulario.
   ===================================================================== */
.barra-m{display:none}
@media(max-width:599px){
  .barra-m{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:var(--s8);
    padding:var(--s12) var(--margen) calc(var(--s12) + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb, var(--luz) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--linea);transform:translateY(110%);transition:transform 420ms var(--sal)}
  .barra-m.on{transform:none}
  .barra-m .btn{flex:1;min-height:50px}
  .barra-m .btn-wa{flex:none;width:50px;min-height:50px;padding:0}
  .barra-m .btn-wa svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){.barra-m{transition:none}}

/* =====================================================================
   PRENSA · cada medio se adelanta y queda marcado al pasar el ratón
   ===================================================================== */
.medios span{position:relative;
  transition:opacity 220ms ease-out,border-color 220ms ease-out,scale 420ms var(--sal),box-shadow 420ms var(--sal)}
@media(hover:hover) and (pointer:fine){
  .medios span:hover{z-index:2;scale:1.08;border-color:var(--azul);
    box-shadow:0 2px 6px rgb(22 33 59 / 8%), 0 22px 44px -18px rgb(22 33 59 / 42%)}
}
@media(prefers-reduced-motion:reduce){.medios span:hover{scale:none}}

/* =====================================================================
   PRESUPUESTO · aviso de que esto es una maqueta
   ===================================================================== */
.formu-aviso.maqueta{border-color:var(--cian-claro)}