/* ==========================================================
   Ángela Miralles — hoja de estilos
   Paleta gris plata, rosa palo y oro en filete · mobile first
   ========================================================== */

:root{
  /* Bases: gris plata neutro-frío, como el fondo de la story de Vitalé.
     NO cálido: el melocotón anterior tiraba a corporativo. */
  --crema:#F3F1F0;
  --crema-2:#EBE8E7;
  --papel:#FBFAF9;
  --tinta:#2E2B2A;
  --tinta-2:#6E6A68;
  --linea:#DFDAD8;

  /* Rosa palo. Cuatro pasos porque el rosa bonito (--rosa) es demasiado claro
     para llevar texto blanco encima o leerse sobre el gris: los botones y todo
     el texto usan --rosa-d. El claro se queda para fondos y brillos. */
  --rosa-l:#F3E3E4;
  --rosa:#D9A3AA;
  --rosa-d:#9E5762;
  --rosa-x:#82454F;

  /* Oro: SOLO filetes finos y el patrón de arcos, como las tiras de LED de
     Nala. Nunca como relleno ni como color de texto: no contrasta.
     Va en componentes RGB porque los filetes siempre llevan alfa (#BFA06A).
     OJO: el patrón de arcos lleva el oro escrito a mano (%23BFA06A) dentro
     del data-URI —ahí no se pueden usar variables—, así que si cambias el
     oro, cámbialo también en --arcos y --arcos-suave. */
  --oro-rgb:191,160,106;

  /* Oro oscuro. Es el ÚNICO oro que vale como texto, y solo sobre fondos
     claros: se usa para el titular del banner final. El oro normal en texto
     no contrasta con nada. */
  --oro-d:#6F5623;

  /* Azul empolvado, en dos valores que se usan como pareja:
     --azul-d es fondo OSCURO con texto claro (bloque "Y además")
     --azul-l es fondo CLARO con texto oscuro (banner final)
     Riman entre sí sin repetirse, y cierran la página con el mismo color
     con el que se abre el bloque de extras. */
  --azul-l:#DCE6ED;
  --azul-d:#5F7385;
  --azul-x:#4A5B6B;

  --oscuro:#2B2D2E;
  /* Barra de navegación: el mismo azul pastel que --azul-l, en RGB porque va
     translúcida sobre el contenido. Si cambias --azul-l, cambia esto también. */
  --barra-rgb:220,230,237;

  --r-s:14px;
  --r-m:24px;
  --r-l:36px;
  --r-xl:56px;

  /* Sombras neutras frías y muy difusas: dan volumen sin el aspecto de
     "tarjeta de aplicación" que tenían las grises. */
  --sombra:0 2px 6px rgba(120,110,115,.05), 0 14px 40px rgba(120,110,115,.07);
  --sombra-h:0 3px 10px rgba(120,110,115,.07), 0 26px 64px rgba(120,110,115,.13);

  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pad:clamp(20px, 5vw, 40px);
  --sec:clamp(64px, 10vw, 132px);

  /* ---- Texturas de fondo ----
     Van incrustadas en el CSS (no son archivos), así que no añaden ni una
     petición más. La opacidad va dentro del propio dibujo: para subirlas o
     bajarlas, cambia el valor de opacity dentro de cada una. */

  /* Grano de papel: quita el aspecto de plano digital */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");

  /* Arcos: el mismo trazo curvo del travesaño de la A del logo */
  --arcos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23BFA06A' stroke-width='1.1' stroke-linecap='round' opacity='0.20'%3E%3Cpath d='M15 108 Q75 48 135 108'/%3E%3Cpath d='M-60 33 Q0 -27 60 33'/%3E%3Cpath d='M90 33 Q150 -27 210 33'/%3E%3C/g%3E%3C/svg%3E");
  /* Versión muy tenue, para fondos claros donde el patrón solo debe intuirse */
  --arcos-suave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23BFA06A' stroke-width='1.1' stroke-linecap='round' opacity='0.11'%3E%3Cpath d='M15 108 Q75 48 135 108'/%3E%3Cpath d='M-60 33 Q0 -27 60 33'/%3E%3Cpath d='M90 33 Q150 -27 210 33'/%3E%3C/g%3E%3C/svg%3E");
  --arcos-claros:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.1' stroke-linecap='round' opacity='0.09'%3E%3Cpath d='M15 108 Q75 48 135 108'/%3E%3Cpath d='M-60 33 Q0 -27 60 33'/%3E%3Cpath d='M90 33 Q150 -27 210 33'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:clamp(16px,1.02vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.7rem,7.6vw,5.1rem)}
h2{font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.1}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.2}
h4{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rosa-d)}
p{margin:0 0 1em}
em{font-style:italic;color:var(--rosa)}

.wrap{width:min(1220px,100% - var(--pad)*2);margin-inline:auto}
.wrap--narrow{width:min(820px,100% - var(--pad)*2)}
.sec{padding-block:var(--sec)}

/* Los bloques de color no van a sangre: llevan esquinas muy redondeadas y se
   apoyan sobre la crema del body. Es lo que quita el aire de "bandas de
   landing corporativa" y da el punto amable que pedía Ángela. */
.sec--alt,.sec--azul,.sec--dark{
  border-radius:var(--r-xl);
  margin-inline:clamp(0px,1.6vw,22px);
  /* Filete de oro: la "línea dorada" de las referencias. Va como inset para
     que no desplace nada. En los bloques oscuros se sube la opacidad. */
  box-shadow:inset 0 0 0 1px rgba(var(--oro-rgb),.30);
}
.sec--azul,.sec--dark{box-shadow:inset 0 0 0 1px rgba(var(--oro-rgb),.42)}

/* Secciones claras alternas: arcos del logo + grano de papel */
.sec--alt{
  background-color:var(--crema-2);
  background-image:var(--arcos), var(--grano);
}
/* Bloque azul empolvado: los mismos arcos, en blanco */
.sec--azul{
  background-color:var(--azul-d);color:#F2F5F7;
  background-image:var(--arcos-claros), var(--grano);
}
/* Zona de reserva: solo grano, para no restar foco al formulario */
.sec--dark{
  background-color:var(--oscuro);color:#F1F2F3;
  background-image:var(--grano);
}

.skip{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

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

/* ---------- Tipografía auxiliar ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--rosa-d);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.5}
.eyebrow--light{color:#EAC7CC}
.sec--azul .eyebrow--light{color:#D6E1EA}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--tinta-2);max-width:46ch}
.sec__head{max-width:60ch;margin-bottom:clamp(38px,5vw,64px)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .eyebrow{justify-content:center}
.sec__sub{margin-top:1.1rem;color:var(--tinta-2);font-size:1.04rem;max-width:52ch}
.sec--dark .sec__sub,.sec--azul .sec__sub{color:rgba(255,255,255,.75)}
.sec__head--center .sec__sub{margin-inline:auto}
.note{font-size:.96rem;color:var(--tinta-2);margin-top:2.4rem}
.note--light{color:rgba(255,255,255,.65);text-align:center}
.link{color:var(--rosa-d);text-decoration:none;box-shadow:inset 0 -1px currentColor;padding-bottom:1px}
.note--light .link{color:#EAC7CC}
.link:hover{box-shadow:inset 0 -2px currentColor}
.ul,.ol{margin:0 0 1.2em;padding-left:1.15em}
.ul li,.ol li{margin-bottom:.6em}
.ul{list-style:none;padding-left:0}
.ul li{position:relative;padding-left:1.3em}
.ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--rosa);opacity:.55}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--rosa-d); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--bg);color:var(--fg);
  padding:1.02em 1.9em;border:0;border-radius:999px;
  font-weight:700;font-size:.94rem;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s;
  box-shadow:0 6px 18px rgba(158,87,98,.18);
}
.btn:hover{transform:translateY(-2px);background:var(--rosa-x);box-shadow:0 10px 26px rgba(158,87,98,.26)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.78em 1.35em;font-size:.86rem;box-shadow:none}
.btn--lg{padding:1.2em 2.4em;font-size:1.02rem}
.btn--ghost{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn--ghost:hover{background:transparent;color:var(--rosa-d);box-shadow:inset 0 0 0 1.5px var(--rosa-d)}
.btn--light{background:#fff;color:var(--tinta);box-shadow:none}
.btn--light:hover{background:#fff;color:var(--rosa-d)}
.btn--ghost.btn--light{background:transparent;color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn--ghost.btn--light:hover{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn--wa{background:#25A566;box-shadow:0 6px 18px rgba(37,165,102,.28)}
.btn--wa:hover{background:#1e8b55}
.btn[disabled],.btn.is-off{opacity:.35;pointer-events:none}
.lnk{background:none;border:0;padding:6px 2px;cursor:pointer;font-size:.9rem;color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:4px}
.lnk:hover{color:#fff}

/* ---------- NAV ----------
   La barra va en el MISMO azul pastel que el banner final: el azul abre y
   cierra la página, y el cuerpo gris queda enmarcado entre los dos.
   Por eso el logotipo pasa de negro a oro oscuro: sobre el azul, el negro
   se ve duro y el oro cose la barra con el filete y el titular del banner. */
.nav{
  position:sticky;top:0;z-index:90;
  background:rgba(var(--barra-rgb),.92);
  backdrop-filter:saturate(1.5) blur(16px);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid rgba(var(--oro-rgb),.5);
  transition:box-shadow .35s, background .35s;
}
.nav.is-stuck{
  background:rgba(var(--barra-rgb),.97);
  box-shadow:0 4px 22px rgba(43,38,34,.09);
}
.nav__in{
  width:min(1220px,100% - var(--pad)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:72px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
/* El logotipo entero (símbolo + "Ángela" + "MIRALLES") va en oro oscuro.
   En una pieza tan pequeña, mezclar oro y rosa sobre azul son tres colores
   peleándose: el rosa se reserva para el botón, que es lo que hay que pulsar. */
.brand__mark{
  width:42px;height:42px;flex:none;color:var(--oro-d);
  transition:transform .55s cubic-bezier(.2,.8,.3,1);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.04)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{
  font-family:var(--serif);font-weight:500;font-size:1.32rem;
  letter-spacing:-.022em;color:var(--oro-d);
}
.brand__txt i{
  font-style:normal;font-family:var(--sans);font-weight:700;font-size:.575rem;
  letter-spacing:.335em;text-transform:uppercase;color:var(--oro-d);margin-top:.45em;
  opacity:.75;
}
.nav__links{display:none;gap:26px}
/* Los enlaces en azul profundo, no en el gris cálido de antes: sobre el azul
   pastel el gris se enturbia. */
.nav__links a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--azul-x);position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--oro-d);transition:width .3s}
.nav__links a:hover{color:var(--oro-d)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__cta .btn{display:none}

.burger{width:44px;height:44px;border:0;background:transparent;display:grid;place-content:center;gap:5px;cursor:pointer;border-radius:12px}
.burger span{display:block;width:22px;height:1.8px;background:var(--oro-d);border-radius:2px;transition:transform .3s, opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* El menú desplegado en móvil es la barra a pantalla completa: mismo azul */
.menu{
  position:fixed;inset:72px 0 0;z-index:88;background:var(--azul-l);
  padding:var(--pad);overflow-y:auto;
  animation:menuIn .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu nav{display:flex;flex-direction:column}
.menu a{
  display:flex;align-items:baseline;gap:16px;
  padding:20px 0;border-bottom:1px solid rgba(var(--oro-rgb),.4);
  text-decoration:none;font-family:var(--serif);font-size:1.6rem;
}
.menu a span{font-family:var(--sans);font-size:.68rem;color:var(--oro-d);letter-spacing:.14em;font-weight:700}
.menu__cta{border-bottom:0!important;margin-top:22px;color:var(--rosa-d)}

/* ---------- HERO ---------- */
.hero{
  padding-block:clamp(44px,7vw,86px) clamp(48px,7vw,90px);position:relative;overflow:hidden;
  background-image:var(--arcos-suave), var(--grano);
}
.hero::before{
  content:"";position:absolute;top:-24%;right:-18%;width:min(660px,78vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(217,163,170,.22), transparent 62%);
  border-radius:50%;pointer-events:none;
}
.hero__in{
  width:min(1220px,100% - var(--pad)*2);margin-inline:auto;
  display:grid;gap:clamp(34px,5vw,64px);position:relative;
}
.hero__copy{max-width:44ch}
h1 em{display:block;font-style:italic}
.hero .lead{margin-top:1.5rem}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1rem}
.hero__facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,46px);
  margin:2.8rem 0 0;padding:1.7rem 0 0;border-top:1px solid var(--linea);
}
.hero__facts li{display:flex;flex-direction:column}
.hero__facts b{font-family:var(--serif);font-size:1.65rem;font-weight:500;line-height:1}
.hero__facts span{font-size:.78rem;color:var(--tinta-2);margin-top:.35rem;max-width:14ch}

.hero__img{margin:0;position:relative}
.hero__img > img{
  width:100%;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 120px;
  aspect-ratio:4/5;object-fit:cover;box-shadow:var(--sombra-h);
}
.hero__img figcaption{
  position:absolute;left:16px;bottom:16px;right:16px;
  background:rgba(251,250,249,.9);backdrop-filter:blur(8px);
  border-radius:999px;padding:.7em 1.2em;font-size:.76rem;color:var(--tinta-2);
  text-align:center;
}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--linea);
  background:var(--papel);padding:16px 0;
}
.marquee__track{
  display:flex;gap:30px;align-items:center;width:max-content;
  animation:slide 46s linear infinite;
}
.marquee span{
  font-family:var(--serif);font-size:1.15rem;color:var(--tinta);white-space:nowrap;opacity:.75
}
.marquee i{color:var(--rosa);font-style:normal;font-size:.7rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- STEPS ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,20px)}
.step{
  background:var(--papel);border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,40px);transition:box-shadow .3s, transform .3s;
}
.step:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.step__n{
  font-family:var(--serif);font-size:2.4rem;color:var(--rosa);opacity:.35;
  display:block;line-height:1;margin-bottom:.5rem;
}
.step h3{margin-bottom:.6rem;font-size:1.28rem}
.step p{color:var(--tinta-2);font-size:.96rem;margin:0}

/* ---------- CARDS ---------- */
.cards{display:grid;gap:clamp(22px,3vw,32px)}
.card{
  background:var(--papel);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sombra);border:0;
  display:flex;flex-direction:column;
  transition:box-shadow .35s, transform .35s;
}
.card:hover{box-shadow:var(--sombra-h);transform:translateY(-3px)}
.card__link{text-decoration:none;transition:color .25s}
.card:hover .card__link{color:var(--rosa-d)}
.card__more{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.1rem;
  font-weight:700;font-size:.92rem;color:var(--rosa-d);text-decoration:none;
}
.card__more span{transition:transform .3s}
.card:hover .card__more span{transform:translateX(4px)}
.tag{
  position:absolute;top:14px;left:14px;background:var(--rosa-d);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.55em 1em;border-radius:999px;
}
.tag--azul{background:var(--azul-d)}
.card__body{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;flex:1}
.card__claim{color:var(--tinta-2);margin-top:.8rem;font-size:.98rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:.4rem 0 1.4rem;padding:0}
.chips li{
  font-size:.76rem;padding:.45em .9em;border-radius:999px;
  background:var(--rosa-l);color:var(--rosa-x);font-weight:600;
}

/* ---------- ACORDEONES ---------- */
.acc{border-top:1px solid var(--linea);margin-top:auto}
.acc summary{
  list-style:none;cursor:pointer;padding:1.15em 0 ;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-weight:700;font-size:.94rem;color:var(--rosa-d);
}
.acc summary::-webkit-details-marker{display:none}
.acc__i{
  width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid currentColor;
  position:relative;opacity:.55;transition:transform .3s, opacity .3s;
}
.acc__i::before,.acc__i::after{
  content:"";position:absolute;inset:0;margin:auto;background:currentColor;
}
.acc__i::before{width:10px;height:1.5px}
.acc__i::after{width:1.5px;height:10px;transition:transform .3s}
.acc[open] .acc__i{opacity:1;transform:rotate(180deg)}
.acc[open] .acc__i::after{transform:scaleY(0)}
.acc__body{padding-bottom:1.4em;animation:accIn .35s ease}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc__body h4{margin:1.5em 0 .7em}
.acc__body h4:first-child{margin-top:.2em}
.acc__body p,.acc__body li{font-size:.95rem;color:var(--tinta-2)}
.acc__body b{color:var(--tinta)}
.acc__note{
  background:var(--crema-2);border-left:3px solid var(--rosa);
  padding:1em 1.2em;border-radius:0 var(--r-s) var(--r-s) 0;font-size:.9rem!important;
}
.acc__body .btn{margin-top:.6em}

.acc--faq{
  border:0;border-radius:var(--r-m);
  background:var(--papel);margin-bottom:10px;padding-inline:clamp(20px,2.4vw,28px);
}
.acc--faq summary{color:var(--tinta);font-family:var(--serif);font-weight:400;font-size:1.14rem;padding:1.25em 0}
.acc--faq[open]{background:var(--papel);box-shadow:var(--sombra)}
.acc--faq .acc__i{color:var(--rosa)}

/* ---------- EXTRAS ---------- */
.extras{display:grid;gap:clamp(34px,5vw,60px)}
.extras__copy h2{color:#fff}
.extras__copy .btn{margin-top:1rem}
.extras__list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.22);border-radius:var(--r-m);overflow:hidden}
.extras__list li{background:var(--azul-d);padding:1.35em 1.5em;display:flex;flex-direction:column;gap:.25rem;transition:background .3s}
.extras__list li:hover{background:var(--azul-x)}
.extras__list b{font-family:var(--serif);font-weight:500;font-size:1.16rem}
.extras__list span{font-size:.92rem;color:rgba(255,255,255,.75)}

/* ---------- SOBRE MÍ ---------- */
.about{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.about__img{margin:0}
.about__img img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:200px 200px var(--r-l) var(--r-l);box-shadow:var(--sombra-h);
}
.about__copy p{color:var(--tinta-2);max-width:52ch}
.firma{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--rosa-d)!important;margin:0 0 1.4rem;padding-left:1em;
  border-left:2px solid var(--rosa);
}
.about__copy h2{margin-bottom:1.1rem}
.about__copy b{color:var(--tinta)}
.about__pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:2rem 0 0}
.about__pills li{
  font-size:.8rem;padding:.55em 1.05em;border-radius:999px;
  border:1px solid var(--linea);background:var(--papel);color:var(--tinta-2);
}

/* ---------- OPINIONES ---------- */
.quotes{display:grid;gap:20px}
.quote{
  margin:0;background:var(--papel);border:0;box-shadow:var(--sombra);
  border-radius:var(--r-m);padding:clamp(26px,3vw,36px);position:relative;
}
.quote::before{
  content:"“";position:absolute;top:2px;left:18px;font-family:var(--serif);
  font-size:4.5rem;color:var(--rosa);opacity:.18;line-height:1;
}
.quote p{font-family:var(--serif);font-size:1.14rem;line-height:1.45;position:relative}
.quote footer{font-size:.82rem;color:var(--tinta-2);font-weight:600}
.quote.is-placeholder p{color:var(--tinta-2);opacity:.55;font-style:italic}
.quote__est{color:var(--rosa-d);letter-spacing:.14em;font-size:.95rem;margin-bottom:.5rem!important;font-family:var(--sans)!important}

/* Cita destacada: ocupa el ancho completo de la rejilla y va en grande.
   Es lo primero que se lee de la sección. */
.quote--big{grid-column:1/-1;background:var(--rosa-l);box-shadow:none;text-align:center}
.quote--big::before{left:50%;transform:translateX(-50%);opacity:.22}
.quote--big p{font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.32;max-width:30ch;margin-inline:auto}
.quote--big .quote__est{font-size:1.1rem}

/* Ficha de Google. Va ANTES de las citas y con peso propio: es la prueba
   verificable, y Ángela avisó de que antes no se encontraba. */
.gcard{
  margin:0 0 clamp(26px,3.4vw,40px);background:var(--papel);
  border:0;box-shadow:var(--sombra);border-radius:var(--r-l);
  padding:clamp(22px,3vw,34px);
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
}
.gcard__nota{display:flex;align-items:center;gap:18px}
.gcard__g{
  width:58px;height:58px;flex:none;border-radius:50%;
  background:var(--rosa-l);color:var(--rosa-d);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:1.75rem;font-weight:600;
}
.gcard__nota > div{display:flex;flex-direction:column;line-height:1.3}
.gcard__nota b{font-family:var(--serif);font-weight:500;font-size:1.6rem}
.gcard__est{color:var(--rosa-d);letter-spacing:.1em;font-size:.9rem}
.gcard__nota span:last-child{font-size:.84rem;color:var(--tinta-2)}
.gcard__btns{display:flex;flex-wrap:wrap;gap:9px}

/* ---------- BOOKER ---------- */
.booker{
  background:#232527;border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-l);padding:clamp(22px,3.4vw,42px);
  max-width:900px;margin-inline:auto;
}
.booker__bar{
  list-style:none;display:flex;gap:6px;margin:0 0 clamp(26px,3vw,36px);padding:0;
  counter-reset:s;overflow-x:auto;scrollbar-width:none;
}
.booker__bar::-webkit-scrollbar{display:none}
.booker__bar li{
  flex:1;min-width:74px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.35);padding-top:12px;
  border-top:2px solid rgba(255,255,255,.12);transition:color .3s, border-color .3s;
}
.booker__bar li.on{color:#EAC7CC;border-top-color:var(--rosa)}
.booker__bar li.done{color:rgba(255,255,255,.6);border-top-color:rgba(217,163,170,.6)}

.booker__q{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:1.4rem}
.booker__hint{font-size:.84rem;color:rgba(255,255,255,.45);margin:1.2rem 0 0}
.booker__step{animation:accIn .35s ease}

.opts{display:grid;gap:12px}
.opt{
  text-align:left;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);color:inherit;
  border-radius:var(--r-m);padding:1.1em 1.3em;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  transition:border-color .25s, background .25s, transform .25s;
}
.opt:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.opt.is-sel{border-color:var(--rosa);background:rgba(217,163,170,.20)}
.opt__ic{font-size:1.5rem;line-height:1;flex:none}
.opt__t{display:flex;flex-direction:column;gap:.15rem}
.opt__t b{font-family:var(--serif);font-weight:500;font-size:1.14rem}
.opt__t span{font-size:.85rem;color:rgba(255,255,255,.55)}
.opts--time{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px}
.opts--time .opt{justify-content:center;padding:.9em .5em;font-weight:600;font-size:.98rem}

/* Calendario */
.cal{background:rgba(255,255,255,.04);border-radius:var(--r-m);padding:16px;border:1px solid rgba(255,255,255,.1)}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal__head strong{font-family:var(--serif);font-weight:500;font-size:1.2rem;text-transform:capitalize}
.cal__nav{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:transparent;cursor:pointer;transition:background .25s, opacity .25s;
}
.cal__nav:hover{background:rgba(255,255,255,.1)}
.cal__nav[disabled]{opacity:.25;cursor:default}
.cal__dow,.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow span{text-align:center;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.35);padding-bottom:6px}
.cal__d{
  aspect-ratio:1;border:0;background:rgba(255,255,255,.05);color:inherit;
  border-radius:10px;cursor:pointer;font-size:.92rem;font-weight:600;
  display:grid;place-items:center;transition:background .2s, transform .2s;
}
.cal__d:hover:not([disabled]){background:rgba(255,255,255,.16);transform:scale(1.06)}
.cal__d[disabled]{opacity:.18;cursor:default;background:transparent}
.cal__d.is-sel{background:var(--rosa-d);color:#fff}
.cal__d.is-today{box-shadow:inset 0 0 0 1.5px rgba(233,195,172,.7)}
.cal__d.is-empty{background:transparent;pointer-events:none}

/* Formulario */
.form{display:grid;gap:14px}
.fld{display:flex;flex-direction:column;gap:.45rem}
.fld span{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.65)}
.fld i{font-style:normal;font-weight:400;color:rgba(255,255,255,.35)}
.fld input,.fld textarea{
  font:inherit;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
  border-radius:var(--r-s);padding:.85em 1em;width:100%;
  transition:border-color .25s, background .25s;
}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.28)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--rosa);background:rgba(255,255,255,.1)}
.fld input.is-bad{border-color:#D9694F}
.fld textarea{resize:vertical}

.resumen{
  margin-top:22px;background:rgba(217,163,170,.16);border:1px solid rgba(217,163,170,.42);
  border-radius:var(--r-m);padding:1.1em 1.3em;font-size:.94rem;
}
.resumen dl{display:grid;grid-template-columns:auto 1fr;gap:.4em 1.2em;margin:0}
.resumen dt{color:rgba(255,255,255,.5);font-size:.82rem}
.resumen dd{margin:0;font-weight:600}
.booker__send{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.booker__foot{display:flex;justify-content:space-between;margin-top:22px;min-height:20px}
.booker__aviso{font-size:.82rem;color:rgba(255,255,255,.42);margin:18px 0 0;max-width:60ch}
.booker__aviso a{color:rgba(255,255,255,.62)}
.foot__links{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- ZONAS ---------- */
.zonas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.zonas li{
  font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.35rem);
  padding:.5em 1.05em;border-radius:999px;
  background:var(--papel);border:1px solid var(--linea);color:var(--tinta);
  transition:background .3s, border-color .3s, transform .3s;
}
.zonas li:hover{background:var(--rosa-l);border-color:var(--rosa);transform:translateY(-2px)}

/* ---------- CTA ---------- */
/* Franja final: foto de fondo bajo un velo AZUL PASTEL claro.
   Cierra el ciclo con el bloque "Y además", que lleva el mismo azul pero
   oscuro: riman sin repetirse porque uno es fondo claro con texto oscuro y
   el otro fondo oscuro con texto claro.
   El titular va en oro oscuro. Es el único sitio de la web donde el oro hace
   de texto y no de línea, y solo funciona porque el fondo es muy claro.
   Para poner una foto real, cambia fondo-clase.svg por fondo-clase.jpg. */
.cta{
  color:var(--oro-d);text-align:center;
  border-radius:var(--r-xl);margin-inline:clamp(0px,1.6vw,22px);
  padding-block:clamp(84px,11vw,138px);position:relative;overflow:hidden;
  background-color:var(--azul-l);
  background-image:
    linear-gradient(rgba(226,235,241,.84), rgba(203,219,230,.90)),
    url("../img/fondo-clase.svg");
  background-size:auto, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  box-shadow:inset 0 0 0 1px rgba(var(--oro-rgb),.5);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 118%, rgba(255,255,255,.45), transparent 64%), var(--grano);
}
.cta h2{position:relative;margin-bottom:2.2rem;color:var(--oro-d)}
/* Filete de oro centrado sobre el titular: el mismo gesto que la rayita del
   .eyebrow, que es lo que cose el detalle dorado de arriba abajo. */
.cta h2::before{
  content:"";display:block;width:56px;height:1px;
  margin:0 auto 1.7rem;background:rgba(var(--oro-rgb),.9);
}
/* El botón se queda en rosa a propósito: en toda la web el botón principal
   es rosa, y el último de la página no es sitio para romper esa regla. */
.cta .btn{background:var(--rosa-d);color:#fff;position:relative}
.cta .btn:hover{background:var(--rosa-x);color:#fff}

/* ---------- FOOTER ---------- */
.foot{background:var(--oscuro);color:rgba(255,255,255,.7);padding-top:clamp(48px,6vw,76px)}
.foot__in{display:grid;gap:36px;padding-bottom:44px}
.foot__brand{display:flex;gap:14px;align-items:flex-start}
.foot__brand .brand__mark{color:#EAC7CC;width:44px;height:44px}
.foot__brand b{font-family:var(--serif);font-weight:500;font-size:1.16rem;color:#fff}
.foot__brand p{font-size:.88rem;margin:.3rem 0 0}
.foot__nav{display:flex;flex-direction:column;gap:.7rem}
.foot__nav a,.foot__c{text-decoration:none;font-size:.9rem;transition:color .25s}
.foot__nav a:hover,.foot__c:hover{color:#EAC7CC}
.foot__contact{display:flex;flex-direction:column;gap:.7rem}
.foot__c{display:inline-flex;align-items:center;gap:.5em}
.foot__c::before{content:"→";color:var(--rosa);font-size:.8em}
.foot__legal{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);padding-block:20px 26px;
  font-size:.78rem;color:rgba(255,255,255,.4);
}

/* ---------- PÁGINAS LEGALES ---------- */
.legal h1{margin-bottom:1.2rem}
.legal h2{
  font-size:clamp(1.25rem,2.2vw,1.55rem);
  margin:2.6rem 0 .9rem;padding-top:1.6rem;border-top:1px solid var(--linea);
}
.legal p,.legal li{color:var(--tinta-2)}
.legal b{color:var(--tinta)}
.legal .lead{margin-bottom:1rem}
.legal .miga{margin-bottom:2rem}
.todo{
  background:#FBE9C8;color:#7A5A18;font-weight:700;
  padding:.1em .5em;border-radius:5px;font-size:.9em;
}
.foot__legal a{color:rgba(255,255,255,.55);text-decoration:none}
.foot__legal a:hover{color:#EAC7CC}

/* ---------- FAB ---------- */
.fab{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:56px;height:56px;border-radius:50%;
  background:#25A566;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.24);text-decoration:none;
  transform:translateY(120px);transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.fab.is-on{transform:none}
.fab:hover{background:#1e8b55}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================
   FOTOS: pase automático, carrete, galería y visor
   ========================================================== */

/* ---------- VELO UNIFORME SOBRE LAS FOTOS ("gray wash") ----------
   Ángela tiene material muy dispar: un retrato bueno, algunas fotos en
   reformer que no quiere destacar y las que haga con el móvil en septiembre.
   Un velo gris-rosa idéntico en todas hace que parezcan la misma sesión.

   PARA QUITARLO cuando tenga fotos buenas y homogéneas: borra este bloque
   entero. No hay que tocar ningún archivo de imagen, solo estas reglas. */
.slides img,
.shot img,
.card__img > img,
.about__img img,
.hero__img > img{
  filter:grayscale(.38) contrast(.96);
}
/* La capa de color va sobre el contenedor, no sobre la imagen, para que el
   multiply funcione. `:not(:has(.slides))` evita teñir dos veces las tarjetas
   que llevan pase automático dentro. */
.slides::after,
.shot::before,
.card__img:not(:has(.slides))::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(217,163,170,.16);
  mix-blend-mode:multiply;
}

/* --- Pase automático --- */
.slides{position:relative;overflow:hidden;background:var(--crema-2)}
.slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;
}
.slides img.is-on{opacity:1}
.slides--card{aspect-ratio:3/2}
.slides--hero{aspect-ratio:4/5;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 120px;box-shadow:var(--sombra-h)}
.slides__dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:2;
  display:flex;justify-content:center;gap:6px;
}
.slides__dots span{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  transition:background .4s, transform .4s;
}
.slides__dots span.on{background:#fff;transform:scale(1.35)}

/* --- Carrete horizontal --- */
.carrete{position:relative}
.carrete__track{
  list-style:none;margin:0;padding:0 var(--pad) 10px;
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carrete__track::-webkit-scrollbar{display:none}
.carrete__track > li{flex:0 0 clamp(230px,66vw,380px);scroll-snap-align:center}
.carrete__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);
  background:rgba(251,250,249,.94);cursor:pointer;font-size:1.1rem;
  box-shadow:var(--sombra);transition:opacity .3s, background .25s;
  display:none;
}
.carrete__nav:hover{background:#fff;color:var(--rosa-d)}
.carrete__nav[disabled]{opacity:.25;cursor:default}
.carrete__nav[data-dir="-1"]{left:8px}
.carrete__nav[data-dir="1"]{right:8px}

/* --- Rejilla de galería (mosaico por columnas, sin huecos) --- */
.galeria{columns:2;column-gap:10px}
.galeria .shot{break-inside:avoid;margin-bottom:10px}

/* --- Miniatura pulsable --- */
.shot{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;
  background:var(--crema-2);border-radius:var(--r-m);overflow:hidden;
  box-shadow:var(--sombra);
}
.shot img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.shot--tall img{aspect-ratio:3/4}
.shot--wide img{aspect-ratio:16/9}
.shot--cine img{aspect-ratio:16/9}
.galeria--uno{columns:1}
.shot:hover img{transform:scale(1.05)}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;padding:2.2em .9em .8em;
  background:linear-gradient(to top, rgba(36,31,27,.72), transparent);
  color:#fff;font-size:.8rem;text-align:left;
  opacity:0;transition:opacity .3s;
}
.shot:hover .shot__cap,.shot:focus-visible .shot__cap{opacity:1}

/* --- Miniatura de vídeo --- */
.shot.is-video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(36,31,27,.45),rgba(36,31,27,.12));
}
.shot__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;z-index:2;
  background:rgba(251,250,249,.95);box-shadow:0 8px 26px rgba(0,0,0,.28);
  display:grid;place-items:center;transition:transform .3s, background .3s;
}
.shot__play::before{
  content:"";width:0;height:0;margin-left:4px;
  border-left:17px solid var(--rosa-d);
  border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.shot.is-video:hover .shot__play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
.shot.is-video .shot__cap{opacity:1}

/* --- Visor ampliado --- */
.visor{
  position:fixed;inset:0;z-index:120;
  background:rgba(24,20,17,.94);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  animation:accIn .3s ease;
}
.visor__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.visor__media{max-width:100%;max-height:78vh;width:auto;border:0;border-radius:var(--r-m);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.visor__media--marco{width:min(1040px,88vw);aspect-ratio:16/9;height:auto;background:#000}
.visor__fig figcaption{color:rgba(255,255,255,.7);font-size:.9rem;text-align:center}
.visor__x,.visor__nav{
  position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;cursor:pointer;
  border-radius:50%;width:48px;height:48px;font-size:1.4rem;line-height:1;
  transition:background .25s;
}
.visor__x:hover,.visor__nav:hover{background:rgba(255,255,255,.25)}
.visor__x{top:14px;right:14px}
.visor__nav{top:50%;transform:translateY(-50%)}
.visor__nav--prev{left:10px}
.visor__nav--next{right:10px}

/* ==========================================================
   NAVEGACIÓN CON SUBMENÚ DE SERVICIOS
   ========================================================== */
.nav__links li{list-style:none;position:relative}
.nav__links{margin:0;padding:0;align-items:center}
.nav__links a.is-here{color:var(--tinta)}
.nav__links a.is-here::after{width:100%}
.sub__btn{
  background:none;border:0;cursor:pointer;font-size:.9rem;font-weight:500;
  color:var(--tinta-2);display:inline-flex;align-items:center;gap:.4em;padding:4px 0;
}
.sub__btn::after{content:"";width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.sub__btn[aria-expanded="true"]{color:var(--tinta)}
.sub__btn[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
.sub{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:var(--sombra-h);padding:8px;min-width:270px;
  display:flex;flex-direction:column;gap:2px;
  animation:accIn .25s ease;
}
/* Puente invisible sobre el hueco: sin esto el menú se cierra al bajar el ratón */
.sub::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
}
.sub a{
  display:flex;flex-direction:column;gap:.1rem;padding:.75em .9em;
  border-radius:var(--r-s);text-decoration:none;transition:background .2s;
}
.sub a:hover{background:var(--crema-2)}
.sub a b{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--tinta)}
.sub a span{font-size:.78rem;color:var(--tinta-2)}
.sub__all{border-top:1px solid var(--linea);margin-top:4px;padding-top:4px!important;font-size:.82rem;color:var(--rosa-d)!important;font-weight:700}

.menu__t{display:flex;flex-direction:column}
.menu a small{
  display:block;font-family:var(--sans);font-size:.78rem;color:var(--tinta-2);
  margin-top:.2rem;font-weight:400;
}
.menu__grp{
  font-family:var(--sans)!important;font-size:.68rem!important;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-2);padding:22px 0 6px!important;border-bottom:0!important;
}

/* ==========================================================
   PÁGINAS DE SERVICIO
   ========================================================== */
.ph{padding-block:clamp(28px,4vw,54px) clamp(44px,6vw,80px);position:relative;overflow:hidden}
.ph::before{
  content:"";position:absolute;top:-30%;left:-15%;width:min(620px,80vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(217,163,170,.20),transparent 62%);border-radius:50%;
}
.ph__in{
  width:min(1220px,100% - var(--pad)*2);margin-inline:auto;position:relative;
  display:grid;gap:clamp(30px,4vw,58px);align-items:center;
}
.miga{display:flex;gap:.5em;font-size:.8rem;color:var(--tinta-2);margin-bottom:1.6rem;flex-wrap:wrap}
.miga a{text-decoration:none;color:var(--rosa-d)}
.miga a:hover{text-decoration:underline}
.ph h1{font-size:clamp(2.35rem,5.6vw,4.1rem)}
.ph .lead{margin-top:1.4rem;max-width:48ch}
.ph__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.ph__in--centro{text-align:center}
.ph__in--centro .miga{justify-content:center}
.ph__in--centro .lead{margin-inline:auto}
.ph__in--centro .ph__btns{justify-content:center}

.datos{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;
}
.datos li{background:var(--papel);padding:1.15em 1.3em;display:flex;flex-direction:column;gap:.2rem}
.datos dt,.datos b{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-d);font-weight:700}
.datos span{font-size:.98rem;color:var(--tinta)}

.paraquien{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.paraquien li{
  background:var(--papel);border:0;border-radius:var(--r-m);
  padding:clamp(22px,2.6vw,30px);transition:box-shadow .3s, transform .3s;
}
.paraquien li:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.paraquien h3{font-size:1.18rem;margin-bottom:.5rem}
.paraquien p{color:var(--tinta-2);font-size:.94rem;margin:0}
.paraquien .ic{font-size:1.6rem;display:block;margin-bottom:.7rem}

.proceso{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,16px)}
.proceso li{
  background:var(--papel);border:0;border-radius:var(--r-m);
  padding:clamp(22px,2.6vw,32px);
  display:grid;gap:.5rem;counter-increment:p;
}
.proceso li::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--serif);font-size:1.9rem;color:var(--rosa);opacity:.4;line-height:1;
}
.proceso h3{font-size:1.18rem}
.proceso p{color:var(--tinta-2);font-size:.95rem;margin:0}

.video{
  position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--oscuro);
  aspect-ratio:16/9;display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.7);
  border:1px solid var(--linea);
}
.video video,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video__nota{padding:2em;font-size:.92rem;max-width:44ch}
.video__nota b{color:#fff;display:block;font-family:var(--serif);font-size:1.4rem;margin-bottom:.5rem;font-weight:400}

/* ==========================================================
   BREAKPOINTS
   ========================================================== */
@media (min-width:640px){
  .quotes{grid-template-columns:repeat(2,1fr)}
  .form{grid-template-columns:1fr 1fr}
  .fld--full{grid-column:1/-1}
  .steps{grid-template-columns:1fr 1fr}
  .extras__list{grid-template-columns:1fr 1fr}
  .galeria{columns:3}
  .paraquien{grid-template-columns:repeat(2,1fr)}
  .datos{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .nav__links{display:flex}
  .nav__cta .btn{display:inline-flex}
  .burger{display:none}
  .menu{display:none!important}

  .hero__in{grid-template-columns:1.05fr .95fr;align-items:center}
  .steps{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:.85fr 1.15fr}
  .extras{grid-template-columns:1fr 1.15fr;align-items:center}
  .extras__list{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1.4fr 1fr 1fr}
  .opts--svc{grid-template-columns:repeat(3,1fr)}
  .opts--svc .opt{flex-direction:column;align-items:flex-start;gap:10px}

  .carrete__nav{display:block}
  .carrete__track{padding-inline:calc((100% - min(1220px,100% - var(--pad)*2))/2)}
  .carrete__nav[data-dir="-1"]{left:calc((100% - min(1220px,100% - var(--pad)*2))/2 - 24px)}
  .carrete__nav[data-dir="1"]{right:calc((100% - min(1220px,100% - var(--pad)*2))/2 - 24px)}
  .paraquien{grid-template-columns:repeat(3,1fr)}
  .datos{grid-template-columns:repeat(4,1fr)}
  .ph__in{grid-template-columns:1.05fr .95fr}
  .ph__in--centro{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
  .galeria{columns:4;column-gap:14px}
  .galeria .shot{margin-bottom:14px}
}

@media (min-width:1100px){
  .marquee span{font-size:1.3rem}
}

/* Preferencias del sistema */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .nav,.menu,.fab,.booker,.cta{display:none}
  body{background:#fff}
}