/* ===================================================================
   MONACO CLINICS · COMPONENTES POR SECCION
   5 header · 6 hero · 7 divisiones · 8 doctor · 9 pilares · 10 mapa
   11 tecnica · 12 casos · 13 testimonios · 14 formulario · 15 cierre
   =================================================================== */

/* ===================================================================
   5. HEADER + progreso de lectura
   =================================================================== */
.mc-header{
  position:sticky;top:0;z-index:80;color:var(--mc-ink-invert);
  background:rgba(9,12,12,.86);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--mc-line-invert);
  transition:padding .45s var(--mc-ease);
}
.mc-header__inner{display:flex;align-items:center;gap:1.5rem;min-height:84px;transition:min-height .45s var(--mc-ease)}
/* Red de seguridad. El logo, el selector y el CTA llevan flex:0 0 auto, asi que
   ninguno se encoge: si la suma no cabe, la pagina se va de lado (paso, a 390 px
   desbordaba 86 px). Los anchos ya estan medidos para que quepan, pero si algun
   dia una etiqueta mas larga rompiera la cuenta, el logo cede ancho antes que la
   pagina. Ceder un poco de logo es reversible; un scroll horizontal no se ve
   venir hasta que alguien abre el movil. */
/* flex-shrink:1 es imprescindible: .mc-logo lleva flex:0 0 auto y sin esto
   nunca cede ancho, por mucho min-width:0 que se le ponga. */
.mc-header .mc-logo{min-width:0;flex-shrink:1}
.mc-header .mc-logo__img{max-width:100%;object-fit:contain;object-position:left center}
.mc-header.is-stuck .mc-header__inner{min-height:64px}
.mc-bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--mc-arena);transition:width .1s linear}

.mc-logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;flex:0 0 auto}

/* ------------------------------------------------------------------------
   LOGO · el mismo lockup horizontal en cabecera y pie, al mismo alto.
   Se probo el vertical en el pie y quedaba mal: a 64 px los anillos se
   apelotonan. El archivo vertical existe en /_originales/logos por si algun
   dia hace falta (redes, papeleria), pero en la web no se usa.
   Viene recortado al contenido real: el original traia el logo en un lienzo de
   1220x666 ocupando solo el 31% del alto.
   ------------------------------------------------------------------------ */
/* Alturas elegidas mirandolas a tamano real, no por formula: a 30 px el
   "CLINICS" del lockup horizontal no se leia. A 40 px si, y quedan 22 px de
   aire en una cabecera de 84 px. El ancho va en auto para no deformar la marca. */
.mc-logo__img{display:block;width:auto;height:40px;transition:height .45s var(--mc-ease)}
.mc-header.is-stuck .mc-logo__img{height:32px}       /* acompana al header contraido */
@media (prefers-reduced-motion:reduce){.mc-logo__img{transition:none}}

.mc-divisions{display:flex;gap:.3rem;margin-inline:auto;list-style:none;padding:0;margin-block:0}
.mc-division{
  position:relative;display:inline-flex;align-items:baseline;gap:.5rem;padding:.55rem 1rem;
  font-size:var(--mc-step--1);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  color:rgba(243,241,237,.6);transition:color .35s var(--mc-ease);
}
.mc-division::after{
  content:"";position:absolute;left:1rem;right:1rem;bottom:.35rem;height:1px;
  background:var(--mc-arena);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--mc-ease-out);
}
.mc-division:hover{color:var(--mc-crema)}
.mc-division:hover::after{transform:scaleX(1)}
.mc-division[aria-current="true"]{color:var(--mc-arena)}
.mc-division[aria-current="true"]::after{transform:scaleX(1)}
.mc-division small{font-size:.55rem;letter-spacing:.1em;opacity:.8;text-transform:none}
.mc-division--soon{cursor:default;color:rgba(243,241,237,.36)}
.mc-division--soon:hover{color:rgba(243,241,237,.36)}
.mc-division--soon::after{display:none}
.mc-header .mc-btn{padding:.8rem 1.5rem;min-height:46px;flex:0 0 auto}

/* Selector de idioma. Dos enlaces a dos URLs reales (/ y /it/), no un
   conmutador por JS. El activo se marca con .is-on y aria-current, no solo
   con color: quien navega con lector de pantalla tambien tiene que saber
   en que idioma esta. */
.mc-lang{display:flex;gap:.15rem;flex:0 0 auto;align-items:center}
.mc-lang__opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:38px;padding:0 .5rem;border-radius:60px;
  font-size:var(--mc-step--2);letter-spacing:.14em;text-decoration:none;
  color:rgba(243,241,237,.5);
  transition:color .35s var(--mc-ease),background .35s var(--mc-ease);
}
.mc-lang__opt:hover{color:var(--mc-ink-invert)}
.mc-lang__opt.is-on{color:var(--mc-black);background:var(--mc-arena)}

@media (max-width:1020px){
  .mc-divisions{display:none}
  /* Sin las divisiones, el idioma empuja y el boton queda pegado a el */
  .mc-lang{margin-inline-start:auto}
  .mc-header .mc-btn{margin-inline-start:0}
}
@media (max-width:520px){
  /* La cabecera es position:sticky. A 84 px se come el 10% de la pantalla de un
     movil de forma permanente; 60 px es lo habitual en una cabecera fija. */
  .mc-header__inner{gap:.7rem;min-height:60px}
  .mc-header.is-stuck .mc-header__inner{min-height:52px}

  /* El logo baja solo en la cabecera. En el pie se queda a 40 px: ahi sobra sitio. */
  .mc-header .mc-logo__img{height:26px}
  .mc-header.is-stuck .mc-logo__img{height:24px}

  /* Solo se ofrece EL OTRO idioma. El activo no es un boton, es un estado, y a
     320 px no hay sitio para estados: se gana ~26 px de aire. El chip que queda
     va sin relleno para que se lea como enlace, no como "estas aqui".
     Conserva 44 px de alto: es el objetivo tactil minimo. */
  .mc-lang{gap:0}
  .mc-lang__opt{min-width:34px;min-height:44px;padding:0 .3rem;letter-spacing:.08em}
  .mc-lang__opt.is-on{display:none}

  /* El CTA cambia de etiqueta, no de tamano de letra */
  .mc-header .mc-btn{padding:.65rem .9rem;min-height:44px;letter-spacing:.06em}
  .mc-header .mc-btn__long{display:none}
  .mc-header .mc-btn__short{display:inline}
}
@media (max-width:360px){
  /* Android pequeno y iPhone SE: se aprieta un poco mas, sin bajar de 44 px de alto */
  .mc-header__inner{gap:.45rem}
  .mc-header .mc-logo__img{height:24px}
  .mc-header .mc-btn{padding:.6rem .75rem}
  .mc-lang__opt{min-width:30px;padding:0 .25rem}
}

/* ===================================================================
   6. HERO — a sangre, con profundidad
   =================================================================== */
.mc-hero{background:var(--mc-black);color:var(--mc-ink-invert);position:relative;overflow:hidden}
/* Arco de arena detrás del titular: da capas sin cargar una imagen */
.mc-hero::before{
  content:"";position:absolute;z-index:0;width:min(70vw,720px);aspect-ratio:1;
  left:-14vw;top:-16vw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(183,160,139,.22),rgba(183,160,139,0) 62%);
  pointer-events:none;
}
.mc-hero__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);
  align-items:end;padding-block:clamp(4rem,10vw,8rem) clamp(3rem,6vw,5rem);
  min-height:min(88vh,900px);
}
.mc-hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;margin-bottom:2rem;
  font-size:var(--mc-step--2);letter-spacing:.24em;text-transform:uppercase;color:var(--mc-arena);
}
.mc-hero__eyebrow::before{content:"";width:34px;height:1px;background:var(--mc-arena)}
.mc-hero h1{font-size:var(--mc-step-5);max-width:11ch;letter-spacing:-.045em}
.mc-hero h1 .thin{color:rgba(243,241,237,.42)}
.mc-hero h1 em{font-style:normal;color:var(--mc-arena)}
.mc-hero__sub{
  margin-top:2.2rem;max-width:44ch;color:rgba(243,241,237,.68);
  font-size:var(--mc-step-1);line-height:1.45;letter-spacing:-.01em;
}
.mc-hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.8rem}
.mc-hero__media{position:relative;align-self:stretch;min-height:clamp(320px,44vw,560px)}
.mc-hero__media .slot{position:absolute;inset:0;height:100%}
@media (max-width:900px){
  .mc-hero__grid{grid-template-columns:1fr;align-items:start;min-height:0;padding-block:3.5rem}
  .mc-hero__media{min-height:360px}
}

/* Cinta de técnicas: movimiento sutil, no decorativo porque nombra el servicio */
.mc-ticker{background:var(--mc-arena);color:var(--mc-black);overflow:hidden;padding-block:.85rem;border-block:1px solid var(--mc-black)}
.mc-ticker__row{display:flex;width:max-content;animation:mc-slide 38s linear infinite}
.mc-ticker span{
  padding-inline:2.2rem;font-size:var(--mc-step--1);letter-spacing:.24em;text-transform:uppercase;
  white-space:nowrap;display:inline-flex;align-items:center;gap:2.2rem;
}
.mc-ticker span::after{content:"";width:5px;height:5px;background:var(--mc-black);border-radius:50%}
@keyframes mc-slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mc-ticker__row{animation:none}
  .mc-ticker{overflow-x:auto}
}

/* ===================================================================
   7. DIVISIONES
   =================================================================== */
.mc-divgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--mc-line);border-block:1px solid var(--mc-line)}
.mc-divcard{
  background:var(--mc-bg);padding:clamp(2rem,4vw,3.2rem);display:flex;flex-direction:column;gap:1rem;
  position:relative;overflow:hidden;transition:background .5s var(--mc-ease);
}
.mc-divcard::before{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--mc-arena);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--mc-ease-out);
}
.mc-divcard:hover::before{transform:scaleX(1)}
.mc-divcard--soon:hover::before{transform:scaleX(0)}
.mc-divcard h3{font-size:var(--mc-step-2)}
.mc-divcard p{color:var(--mc-ink-soft);font-size:var(--mc-step--1);line-height:1.6}
.mc-divcard__tag{
  align-self:flex-start;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.35rem .75rem;border:1px solid var(--mc-line);color:var(--mc-ink-soft);border-radius:60px;
}
.mc-divcard--active .mc-divcard__tag{background:var(--mc-arena);border-color:var(--mc-arena);color:var(--mc-black)}
.mc-divcard--soon{opacity:.55}
@media (max-width:880px){.mc-divgrid{grid-template-columns:1fr}}

/* ===================================================================
   8. DOCTOR — asimétrico, con cita destacada
   =================================================================== */
.mc-doctor{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5.5rem);align-items:start}
.mc-doctor__media{position:sticky;top:120px}
.mc-doctor h2{font-size:var(--mc-step-4);margin-bottom:.8rem;letter-spacing:-.04em}
.mc-doctor__role{font-size:var(--mc-step--1);letter-spacing:.13em;text-transform:uppercase;color:var(--mc-arena-deep);margin-bottom:2.6rem}
.mc-doctor__body p+p{margin-top:1.2rem}
.mc-doctor__body p{color:var(--mc-ink-soft);max-width:60ch}
.mc-quote{
  margin:3rem 0;padding-left:clamp(1.2rem,3vw,2.2rem);border-left:2px solid var(--mc-arena);
  font-family:var(--mc-font-display);font-size:var(--mc-step-2);line-height:1.2;
  letter-spacing:-.03em;color:var(--mc-ink);max-width:22ch;
}
.mc-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--mc-line);margin-top:3rem;border-block:1px solid var(--mc-line)}
.mc-value{background:var(--mc-bg);padding:1.5rem 1.2rem;display:flex;gap:.8rem;align-items:flex-start;transition:background .4s var(--mc-ease)}
.mc-value:hover{background:var(--mc-bg-soft)}
.mc-value b{font-family:var(--mc-font-display);font-size:var(--mc-step--2);color:var(--mc-arena-deep);letter-spacing:.14em;flex:0 0 auto}
.mc-value span{font-size:var(--mc-step--1);line-height:1.4}
@media (max-width:880px){.mc-doctor{grid-template-columns:1fr}.mc-doctor__media{position:static}}

/* ===================================================================
   9. PILARES
   =================================================================== */
.mc-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--mc-line-invert);margin-top:3.5rem;border-block:1px solid var(--mc-line-invert)}
.mc-pillar{background:var(--mc-verde);padding:clamp(1.8rem,3.2vw,2.6rem);display:flex;flex-direction:column;gap:1rem;transition:background .5s var(--mc-ease)}
.mc-pillar:hover{background:#243031}
.mc-pillar__num{font-family:var(--mc-font-display);font-size:var(--mc-step-2);color:var(--mc-arena);letter-spacing:-.03em;line-height:1}
.mc-pillar h3{font-size:var(--mc-step-1);line-height:1.2}
.mc-pillar p{font-size:var(--mc-step--1);line-height:1.6;color:rgba(243,241,237,.7)}

/* ===================================================================
   10. MAPA DEL CUERO CABELLUDO  (sustituye a la "cabeza 3D")
   =================================================================== */
.mc-scalp{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:3rem}
.mc-scalp__fig{margin:0;display:grid;place-items:center;padding:clamp(1rem,3vw,2rem);perspective:1400px}
.mc-scalp svg{
  width:min(100%,420px);height:auto;overflow:visible;
  transform:rotateX(var(--rx,14deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;will-change:transform;
  transition:transform .9s var(--mc-ease-out);
}
.mc-scalp__fig.is-live svg{transition:transform .18s linear}
@media (prefers-reduced-motion:reduce){.mc-scalp svg{transform:none;transition:none}}

.mc-zone{cursor:pointer}
.mc-zone__fill{fill:#3F4E4F;opacity:.5;transition:fill .5s var(--mc-ease),opacity .5s var(--mc-ease)}
.mc-zone:hover .mc-zone__fill,
.mc-zone[aria-checked="true"] .mc-zone__fill{fill:var(--mc-arena);opacity:.9}
/* Foco propio: el outline del navegador dibujaría la caja del grupo, no la forma */
.mc-zone:focus{outline:none}
.mc-zone:focus-visible{outline:none}
.mc-zone:focus-visible .mc-zone__fill{stroke:var(--mc-crema);stroke-width:2.5;stroke-dasharray:6 5}
.mc-zone__lbl{
  font-family:var(--mc-font-body);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  fill:rgba(243,241,237,.82);transition:fill .4s var(--mc-ease);pointer-events:none;
}
.mc-zone:hover .mc-zone__lbl,
.mc-zone[aria-checked="true"] .mc-zone__lbl{fill:var(--mc-black)}

.mc-scalp__donor{fill:rgba(183,160,139,.15);pointer-events:none}
.mc-scalp__out{fill:none;stroke:rgba(243,241,237,.4);stroke-width:1.6;stroke-linejoin:round}
.mc-scalp__hair{stroke:rgba(243,241,237,.13);stroke-width:.9;fill:none;pointer-events:none;stroke-linecap:round}
.mc-scalp__shade{pointer-events:none;mix-blend-mode:multiply}
.mc-scalp__spec{pointer-events:none;mix-blend-mode:screen}

.mc-scalp__panel h3{font-size:var(--mc-step-2);margin-bottom:1rem;min-height:1.1em}
.mc-scalp__panel p{color:rgba(243,241,237,.74);max-width:46ch;min-height:5.6em}
.mc-scalp__hint{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;
  font-size:var(--mc-step--2);letter-spacing:.2em;text-transform:uppercase;color:var(--mc-arena);
}
.mc-scalp__legend{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--mc-line-invert);font-size:var(--mc-step--2);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,237,.5)}
.mc-scalp__legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.5rem;vertical-align:-1px}
.mc-scalp__legend i.is-zone{background:var(--mc-arena)}
.mc-scalp__legend i.is-donor{background:rgba(183,160,139,.3)}
@media (max-width:880px){.mc-scalp{grid-template-columns:1fr}.mc-scalp__panel p{min-height:0}}

/* ===================================================================
   11. TÉCNICA (pestañas)
   =================================================================== */
.mc-tabs{margin-top:3.5rem;display:grid;grid-template-columns:minmax(210px,290px) 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.mc-tablist{display:flex;flex-direction:column;border-top:1px solid var(--mc-line)}
.mc-tab{
  position:relative;appearance:none;background:none;border:0;border-bottom:1px solid var(--mc-line);
  text-align:left;padding:1.3rem .2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:var(--mc-step-0);color:var(--mc-ink-soft);min-height:60px;
  transition:color .35s var(--mc-ease),padding .45s var(--mc-ease-out);
}
.mc-tab::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:1.6rem;background:var(--mc-arena);transition:transform .4s var(--mc-ease-out);
}
.mc-tab:hover{color:var(--mc-ink);padding-inline-start:.7rem}
.mc-tab[aria-selected="true"]{color:var(--mc-ink);font-weight:500;padding-inline-start:.7rem}
.mc-tab[aria-selected="true"]::before{transform:translateY(-50%) scaleY(1)}
.mc-tab em{font-style:normal;font-size:var(--mc-step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--mc-arena-deep)}
.mc-panel{display:grid;grid-template-columns:1fr .95fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start;animation:mc-fade .6s var(--mc-ease-out)}
.mc-panel[hidden]{display:none}
@keyframes mc-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mc-panel{animation:none}}
.mc-panel h3{font-size:var(--mc-step-2);margin-bottom:1.1rem}
.mc-panel p{color:var(--mc-ink-soft);margin-bottom:1.3rem;max-width:48ch}
.mc-panel ul{margin:0;padding-left:0;list-style:none;color:var(--mc-ink-soft);font-size:var(--mc-step--1)}
.mc-panel li{padding:.7rem 0;border-top:1px solid var(--mc-line);display:flex;gap:.8rem;align-items:baseline}
.mc-panel li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--mc-arena);flex:0 0 auto}
/* La columna de medios del panel: antes era un .slot suelto, ahora es una <figure>
   con video y pie. El video lleva su proporcion en .mc-video. */
.mc-panel__figure{margin:0}
.mc-panel__figure figcaption{font-size:var(--mc-step--1);color:var(--mc-ink-soft);margin-top:.8rem;line-height:1.55}
@media (max-width:880px){.mc-tabs{grid-template-columns:1fr}.mc-panel{grid-template-columns:1fr}}

/* ===================================================================
   12. CASOS
   =================================================================== */
.mc-ba{margin-top:3rem;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.mc-compare{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mc-black);border-radius:var(--mc-radius);touch-action:none;user-select:none;cursor:ew-resize}
.mc-compare__layer{position:absolute;inset:0}
.mc-compare__layer .slot{width:100%;height:100%}
.mc-compare__layer .mc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mc-compare__layer--after{clip-path:inset(0 0 0 var(--pos,50%))}
.mc-compare__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--mc-crema);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(9,12,12,.3)}
.mc-compare__grip{
  position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:var(--mc-crema);color:var(--mc-black);
  display:grid;place-items:center;border:0;box-shadow:0 8px 26px rgba(9,12,12,.35);
}
.mc-compare__tag{position:absolute;top:1rem;padding:.35rem .75rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(9,12,12,.78);color:var(--mc-crema);border-radius:60px;pointer-events:none}
.mc-compare__tag--l{left:1rem}
.mc-compare__tag--r{right:1rem}
.mc-ba__note{font-size:var(--mc-step--1);color:var(--mc-ink-soft);line-height:1.7}
.mc-ba__note strong{display:block;font-family:var(--mc-font-display);font-size:var(--mc-step-2);color:var(--mc-ink);margin-bottom:1rem;font-weight:400;letter-spacing:-.03em}
.mc-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:2.5rem}
.mc-gallery figure{margin:0}
.mc-gallery figcaption{font-size:var(--mc-step--1);color:var(--mc-ink-soft);margin-top:.8rem}

/* Videos de caso. Mismo tratamiento que las <img>: el navegador tiene que saber el
   alto antes de descargar nada, o la pagina pega un salto cuando llega el video. */
.mc-video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--mc-black);border-radius:var(--mc-radius)}
/* El video de caso es 9:16 pero se muestra a 4:5 para igualar la altura de los
   collages y que la fila no quede dentada. El anclaje ARRIBA no es decorativo: los
   rotulos del video ("Zona marcada para el injerto", "3.200 unidades foliculares"...)
   van pegados al borde superior; centrado, el recorte se los comeria. */
.mc-video--case{aspect-ratio:4/5;object-position:center top}
@media (max-width:880px){.mc-ba{grid-template-columns:1fr}}

/* ===================================================================
   13. TESTIMONIOS
   =================================================================== */
/* Rejilla, no carrusel. Los 4 testimonios se ven a la vez: nada de scroll horizontal,
   que en escritorio obliga a descubrir que hay mas contenido escondido y en tactil
   compite con el scroll de la pagina. 4 -> 2 -> 1 columnas. */
.mc-testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem}
.mc-testi{display:flex;flex-direction:column;gap:1rem;margin:0;min-width:0}
@media (max-width:1000px){.mc-testi-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
@media (max-width:520px){.mc-testi-grid{grid-template-columns:1fr;gap:1.8rem}}
.mc-testi .mc-reel{aspect-ratio:9/16}

/* Fachada del reel: lo que se ve ANTES de pulsar. No carga nada de Instagram. */
.mc-reel{
  position:relative;overflow:hidden;border-radius:var(--mc-radius);
  background:
    repeating-linear-gradient(135deg,rgba(183,160,139,.16) 0 14px,transparent 14px 28px),
    rgba(243,241,237,.05);
  border:1px solid rgba(243,241,237,.26);
}
.mc-reel__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El boton ocupa toda la tarjeta y lleva un velo degradado encima de la portada: sin
   el, el texto crema y el circulo color arena se pierden sobre los fotogramas claros.
   El velo va siempre, no solo cuando hay portada, para no depender de :has() ni de que
   la imagen llegue a cargar. */
.mc-reel__btn{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:linear-gradient(180deg,rgba(9,12,12,.12),rgba(9,12,12,.66));
  color:var(--mc-crema);cursor:pointer;
  transition:background .4s var(--mc-ease);
}
.mc-reel__btn:hover,.mc-reel__btn:focus-visible{background:rgba(9,12,12,.62)}
.mc-reel__play{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--mc-arena);color:var(--mc-black);padding-left:4px;
  box-shadow:0 10px 30px rgba(9,12,12,.4);
  transition:transform .4s var(--mc-ease-out);
}
.mc-reel__btn:hover .mc-reel__play{transform:scale(1.08)}
.mc-reel__label{
  display:grid;gap:.35rem;font-size:var(--mc-step--1);letter-spacing:.14em;text-transform:uppercase;
}
.mc-reel__label small{font-size:.62rem;letter-spacing:.08em;text-transform:none;color:rgba(243,241,237,.6)}
/* Ya pulsado: manda el iframe de Instagram */
.mc-reel.is-playing{background:var(--mc-black);border-color:rgba(243,241,237,.14)}
.mc-reel__frame{width:100%;height:100%;border:0;display:block}
@media (prefers-reduced-motion:reduce){
  .mc-reel__play,.mc-reel__btn{transition:none}
  .mc-reel__btn:hover .mc-reel__play{transform:none}
}
.mc-testi figcaption{font-size:var(--mc-step--1);color:rgba(243,241,237,.62);line-height:1.55}

/* ===================================================================
   14. FORMULARIO
   =================================================================== */
.mc-form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.mc-form-card{background:var(--mc-bg);color:var(--mc-ink);padding:clamp(1.6rem,3.5vw,2.8rem);border-radius:var(--mc-radius);box-shadow:0 30px 70px rgba(9,12,12,.22)}
.mc-progress{display:flex;gap:.45rem;margin-bottom:2rem}
.mc-progress span{flex:1;height:2px;background:var(--mc-line);overflow:hidden}
.mc-progress span::after{content:"";display:block;height:100%;width:0;background:var(--mc-arena);transition:width .5s var(--mc-ease-out)}
.mc-progress span.is-done::after{width:100%}
.mc-step[hidden]{display:none}
.mc-step{animation:mc-fade .5s var(--mc-ease-out)}
@media (prefers-reduced-motion:reduce){.mc-step{animation:none}}
.mc-step__count{font-size:var(--mc-step--2);letter-spacing:.2em;text-transform:uppercase;color:var(--mc-arena-deep);margin-bottom:.8rem}
.mc-step h3{font-size:var(--mc-step-2);margin-bottom:1.6rem}
.mc-opts{display:grid;gap:.55rem;margin-bottom:1.6rem}
.mc-opt{
  display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.15rem;border:1px solid var(--mc-line);
  border-radius:var(--mc-radius);cursor:pointer;font-size:var(--mc-step-0);min-height:58px;
  transition:border-color .3s var(--mc-ease),background .3s var(--mc-ease),transform .3s var(--mc-ease-out);
}
.mc-opt:hover{border-color:var(--mc-arena);transform:translateX(3px)}
.mc-opt input{accent-color:var(--mc-arena-deep);width:18px;height:18px;flex:0 0 auto}
.mc-opt:has(input:checked){border-color:var(--mc-arena);background:rgba(183,160,139,.12)}
.mc-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.15rem}
.mc-field label{font-size:var(--mc-step--1);letter-spacing:.05em;color:var(--mc-ink-soft)}
.mc-field input,.mc-field select,.mc-field textarea{
  font:inherit;padding:.95rem 1rem;border:1px solid var(--mc-line);border-radius:var(--mc-radius);
  background:#fff;color:var(--mc-ink);min-height:54px;transition:border-color .3s var(--mc-ease),box-shadow .3s var(--mc-ease);
}
.mc-field input:focus,.mc-field select:focus,.mc-field textarea:focus{border-color:var(--mc-arena);outline:none;box-shadow:0 0 0 3px rgba(183,160,139,.28)}
.mc-field--error input,.mc-field--error select{border-color:#9B3B2E}
.mc-error{font-size:.79rem;color:#9B3B2E;display:none}
.mc-error[data-error="consent"]{margin:-1rem 0 1.2rem}
.mc-field--error .mc-error{display:block}
.mc-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mc-consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.82rem;line-height:1.55;color:var(--mc-ink-soft);margin-bottom:1.5rem}
.mc-consent input{margin-top:.25rem;accent-color:var(--mc-arena-deep);width:18px;height:18px;flex:0 0 auto}
.mc-nav{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.mc-back{background:none;border:0;color:var(--mc-ink-soft);font-size:var(--mc-step--1);letter-spacing:.08em;text-transform:uppercase;padding:1rem .4rem}
.mc-back:hover{color:var(--mc-ink)}
.mc-done{text-align:center;padding:2.5rem 0}
.mc-done h3{margin-bottom:1rem;font-size:var(--mc-step-2)}
.mc-done p{color:var(--mc-ink-soft);max-width:40ch;margin-inline:auto}
.mc-done .mc-done__note{margin-top:1.6rem;font-size:.78rem;color:var(--mc-arena-deep)}
/* WhatsApp del formulario. Era un enlace de texto tenue y se leia como una nota
   al pie. Ahora es un boton: en los mercados italianos es el canal principal,
   porque el unico telefono es un movil espanol y llamar sale internacional.
   Se deja como boton de contorno, no relleno: el CTA primario sigue siendo
   enviar el formulario y no debe competir con el. */
.mc-whats{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:2rem;
  padding:.85rem 1.4rem;min-height:48px;
  border:1px solid rgba(243,241,237,.42);border-radius:60px;
  font-size:var(--mc-step--1);letter-spacing:.06em;
  color:var(--mc-ink-invert);text-decoration:none;
  transition:background .35s var(--mc-ease),border-color .35s var(--mc-ease),color .35s var(--mc-ease);
}
.mc-whats:hover,.mc-whats:focus-visible{
  background:var(--mc-crema);border-color:var(--mc-crema);color:var(--mc-black);
}
.mc-whats svg{flex:0 0 auto}
.mc-form-aside h2{font-size:var(--mc-step-3);max-width:13ch}
.mc-form-aside ul{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:1.4rem}
.mc-form-aside li{display:flex;gap:.9rem;align-items:flex-start;font-size:var(--mc-step--1);line-height:1.55;color:rgba(243,241,237,.72)}
.mc-form-aside li svg{flex:0 0 auto;margin-top:.2rem}
@media (max-width:880px){.mc-form-grid{grid-template-columns:1fr}.mc-row{grid-template-columns:1fr}}

/* ===================================================================
   15. CIERRE + FOOTER
   =================================================================== */
.mc-close{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mc-line);border-block:1px solid var(--mc-line)}
.mc-close>div{background:var(--mc-bg);padding:clamp(2rem,4.5vw,3.5rem)}
.mc-close h3{font-size:var(--mc-step-2);margin-bottom:1.2rem}
.mc-close p{color:var(--mc-ink-soft);max-width:46ch}
.mc-close .mc-gallery{margin-top:2.2rem}
.mc-cta-band{display:grid;gap:1.6rem;align-content:center;justify-items:start}
.mc-cta-band h2{font-size:var(--mc-step-3);max-width:14ch}
.mc-cta-band p{max-width:36ch}
.mc-footer{background:var(--mc-black);color:rgba(243,241,237,.55);padding-block:4rem 2.5rem;font-size:var(--mc-step--1)}
.mc-footer__inner{display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:flex-start;justify-content:space-between;padding-block-end:2.5rem;border-block-end:1px solid rgba(243,241,237,.12)}
.mc-footer a{color:rgba(243,241,237,.55);text-decoration:none;transition:color .3s var(--mc-ease)}
.mc-footer a:hover{color:var(--mc-arena)}

/* Redes. El SVG y el texto van juntos: un icono solo obliga a adivinar, y en el
   footer hay sitio para la palabra. */
.mc-social{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.mc-social a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px}
.mc-social svg{flex:0 0 auto}

/* Sedes. Tres columnas en escritorio, una debajo de otra en movil. */
.mc-sedes{padding-block:2.5rem;border-block-end:1px solid rgba(243,241,237,.12)}
.mc-sedes__title{
  font-family:var(--mc-font-body);font-size:var(--mc-step--2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mc-arena);margin-bottom:1.6rem;font-weight:400;
}
.mc-sedes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 2.5rem}
.mc-sedes address{font-style:normal;line-height:1.7}
.mc-sedes strong{
  display:block;font-family:var(--mc-font-display);font-size:var(--mc-step-0);
  font-weight:400;letter-spacing:-.02em;color:var(--mc-ink-invert);margin-bottom:.4rem;
}
/* El centro anfitrion va en menor jerarquia pero visible: no es un detalle
   decorativo, es la puerta a la que llama el paciente que viaja. */
.mc-sedes small{display:block;margin-top:.5rem;font-size:.7rem;letter-spacing:.06em;color:var(--mc-arena)}

/* Cada direccion es un enlace al mapa. El bloque entero es clicable, no solo
   una palabra: en el pie el espacio es estrecho y un objetivo de una linea es
   incomodo en tactil. El alfiler es la senal de que se puede pulsar; sin el,
   una direccion en un pie parece texto muerto. */
.mc-sedes a{display:block;text-decoration:none}
.mc-sedes__pin{display:inline-block;vertical-align:baseline;margin-left:.3rem;color:var(--mc-arena);transition:transform .35s var(--mc-ease-out)}
.mc-sedes a:hover strong,.mc-sedes a:focus-visible strong{color:var(--mc-arena)}
.mc-sedes a:hover .mc-sedes__pin,.mc-sedes a:focus-visible .mc-sedes__pin{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.mc-sedes__pin{transition:none}.mc-sedes a:hover .mc-sedes__pin{transform:none}}

.mc-footer__legal{display:flex;gap:1.6rem;flex-wrap:wrap;padding-block-start:2.5rem}

@media (max-width:760px){
  .mc-sedes__grid{grid-template-columns:1fr}
}
@media (max-width:720px){.mc-close{grid-template-columns:1fr}}

/* Boton flotante de WhatsApp. Va en ARENA, no en verde: --mc-verde es exactamente
   el fondo de las secciones .mc-deep (pilares y #valoracion), asi que el boton
   desaparecia justo encima del formulario, que es donde mas falta hace. El arena
   contrasta contra los tres fondos de la pagina: claro, verde y negro.
   48px de lado minimo: es el objetivo tactil recomendado. */
.mc-float{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:70;display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.3rem;min-height:48px;background:var(--mc-arena);color:var(--mc-black);text-decoration:none;
  border-radius:60px;font-size:var(--mc-step--1);letter-spacing:.05em;box-shadow:0 12px 34px rgba(9,12,12,.34);
  transition:transform .4s var(--mc-ease-out),background .4s var(--mc-ease),color .4s var(--mc-ease);
}
.mc-float:hover,.mc-float:focus-visible{transform:translateY(-3px);background:var(--mc-black);color:var(--mc-crema)}
@media (prefers-reduced-motion:reduce){.mc-float:hover{transform:none}}
@media (max-width:520px){.mc-float span{display:none}.mc-float{padding:1rem;min-width:48px;border-radius:50%;justify-content:center}}