/* ============================================================
   ODONTOLOGÍA Y MEDiCiNA ESTÉTICA · DR. SERGiO RODRÍGUEZ i CHiSBERT
   Sistema visual basado en el Manual de Identidad Corporativa
   Dorado #e2c780 · Carbón #383b36 · Blanco #ffffff
   ============================================================ */

:root {
  /* Marca */
  --oro: #e2c780;
  --oro-hondo: #c9a851;
  --oro-luz: #f2e4bf;
  --oro-niebla: #faf3e2;
  --carbon: #383b36;
  --carbon-hondo: #24261f;
  --blanco: #ffffff;

  /* Neutros derivados */
  --hueso: #f7f4ed;
  --hueso-2: #efeae0;
  --tinta: #383b36;
  --tinta-70: rgba(56, 59, 54, 0.72);
  --tinta-45: rgba(56, 59, 54, 0.48);
  --linea: rgba(56, 59, 54, 0.12);
  --linea-oro: rgba(226, 199, 128, 0.38);

  /* Tipografía */
  --display: "Oswald", "DIN Condensed", "Haettenschweiler", Impact, sans-serif;
  --texto: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Profundidad */
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 34px;
  --r-xl: 46px;
  --sombra-1: 0 2px 6px rgba(56,59,54,.04), 0 10px 26px rgba(56,59,54,.06);
  --sombra-2: 0 4px 12px rgba(56,59,54,.05), 0 22px 50px rgba(56,59,54,.09);
  --sombra-3: 0 10px 24px rgba(56,59,54,.07), 0 44px 90px rgba(56,59,54,.14);
  --sombra-oro: 0 18px 46px rgba(201,168,81,.28);

  --e: cubic-bezier(.22,1,.36,1);
  --t: .6s var(--e);
  --ancho: 1320px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texto);
  background: var(--hueso);
  color: var(--tinta);
  font-size: 16.5px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.env { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 32px; }
.env-ancho { max-width: 1560px; }

/* ---------- TRAMA CORPORATIVA (elemento gráfico del manual) ---------- */
.trama {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--oro) 62%, transparent 62%),
    linear-gradient(to bottom, var(--oro) 62%, transparent 62%);
  background-size: 15px 15px;
  background-blend-mode: multiply;
  opacity: .2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 72%);
}
.trama--der {
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 75%);
  mask-image: linear-gradient(to left, #000 0%, transparent 75%);
}
.trama--izq {
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 70%);
  mask-image: linear-gradient(to right, #000 0%, transparent 70%);
}
.trama--sup {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.trama--blanca {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.9) 62%, transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,.9) 62%, transparent 62%);
  opacity: .12;
}

/* ---------- TIPOGRAFÍA ---------- */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -0.005em;
}
.d1 { font-size: clamp(3.2rem, 8.4vw, 8.2rem); }
.d2 { font-size: clamp(2.5rem, 5.6vw, 5.2rem); }
.d3 { font-size: clamp(1.9rem, 3.2vw, 3.1rem); }
.d4 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 500; }
.d1 .fina, .d2 .fina, .d3 .fina { font-weight: 300; }
.oro-txt { color: var(--oro-hondo); }
.hueco { color: transparent; -webkit-text-stroke: 1.4px currentColor; opacity: .45; }

.eyebrow {
  font-family: var(--texto);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--oro-hondo);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 5px;
  background-image: linear-gradient(to right, currentColor 60%, transparent 60%);
  background-size: 10px 5px;
  flex-shrink: 0;
}
.eyebrow--claro { color: var(--oro); }

.entrada { font-size: 1.08rem; color: var(--tinta-70); max-width: 56ch; }
.mini {
  font-size: .66rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-45);
}

/* ---------- BOTONES ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 100px;
  font-family: var(--texto);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  overflow: hidden;
  transition: var(--t);
  isolation: isolate;
}
.btn span {
  position: relative; z-index: 2;
  transition: letter-spacing .5s var(--e);
}
.btn svg { width: 15px; height: 15px; fill: currentColor; position: relative; z-index: 2; }

/* el relleno crece desde el centro en círculo */
.btn::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 132%; aspect-ratio: 1;
  background: var(--carbon);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .62s var(--e);
  z-index: 1;
  will-change: transform;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translate(-50%, -50%) scale(1); }

.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:hover span, .btn:focus-visible span { letter-spacing: .17em; }
.btn:active { transform: translateY(0) scale(.975); transition-duration: .12s; }

/* la flecha sale por la derecha y vuelve a entrar por la izquierda */
@keyframes btn-flecha {
  0%   { transform: translateX(0);     opacity: 1; }
  38%  { transform: translateX(170%);  opacity: 0; }
  39%  { transform: translateX(-170%); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}
.btn:hover svg, .btn:focus-visible svg { animation: btn-flecha .58s var(--e); }

.btn-oro { background: var(--oro); color: var(--carbon); box-shadow: var(--sombra-oro); }
.btn-oro:hover, .btn-oro:focus-visible { color: var(--oro); box-shadow: 0 24px 54px rgba(201,168,81,.36); }

.btn-carbon { background: var(--carbon); color: var(--blanco); }
.btn-carbon::before { background: var(--oro); }
.btn-carbon:hover, .btn-carbon:focus-visible { color: var(--carbon); box-shadow: 0 20px 44px rgba(201,168,81,.30); }

.btn-linea { border-color: var(--linea); color: var(--tinta); }
.btn-linea:hover, .btn-linea:focus-visible { color: var(--blanco); border-color: var(--carbon); box-shadow: 0 18px 40px rgba(56,59,54,.18); }

.btn-claro { border-color: rgba(255,255,255,.3); color: #fff; }
.btn-claro::before { background: var(--blanco); }
.btn-claro:hover, .btn-claro:focus-visible { color: var(--carbon); border-color: var(--blanco); box-shadow: 0 18px 40px rgba(0,0,0,.28); }

/* ---------- MARCA / LOGO ---------- */
.marca { display: inline-flex; align-items: center; gap: 12px; }
.marca-sello {
  width: 44px; height: 44px;
  flex-shrink: 0;
  transition: transform .6s var(--e);
}
.marca:hover .marca-sello { transform: rotate(-8deg) scale(1.06); }
.marca-txt { line-height: 1.02; font-family: var(--display); text-transform: uppercase; }
.marca-l1 { display: block; font-size: .96rem; font-weight: 600; letter-spacing: .01em; }
.marca-l2 { display: block; font-size: .58rem; font-weight: 400; letter-spacing: .06em; opacity: .62; }

/* ---------- NAVEGACIÓN ---------- */
.nav-cont {
  position: fixed;
  top: 18px; left: 0; right: 0;
  z-index: 900;
  padding-inline: 22px;
  transition: top .5s var(--e);
}
.nav {
  max-width: var(--ancho);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 11px 11px 22px;
  border-radius: 100px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--sombra-1);
  transition: var(--t);
}
.nav.oscura {
  background: rgba(36,38,31,.62);
  border-color: rgba(255,255,255,.12);
  color: var(--blanco);
}
.nav.oscura .nav-links a { color: rgba(255,255,255,.78); }
.nav.oscura .nav-links a:hover, .nav.oscura .nav-links a.on { color: var(--blanco); }
.nav.encogida { padding: 8px 8px 8px 18px; box-shadow: var(--sombra-2); }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  position: relative;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-70);
  transition: var(--t);
}
.nav-links a::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transform: scale(.85);
  transition: var(--t);
}
.nav-links a:hover { color: var(--tinta); }
.nav-links a:hover::before { opacity: .07; transform: scale(1); }
.nav-links a.on { color: var(--oro-hondo); }
.nav-links a.on::before { opacity: .13; transform: scale(1); }
.nav-acc { display: flex; align-items: center; gap: 10px; }
.nav .btn { padding: 13px 24px; font-size: .7rem; }

.tel-nav {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-size: 1.02rem;
  letter-spacing: .02em;
  padding-right: 6px;
}
.tel-nav svg { width: 15px; height: 15px; fill: var(--oro-hondo); }

.burger {
  display: none;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--carbon);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.burger i {
  display: block; width: 17px; height: 1.6px;
  background: var(--blanco); border-radius: 2px;
  transition: var(--t);
}
.burger.x i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.x i:nth-child(2) { opacity: 0; }
.burger.x i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0;
  z-index: 880;
  background: var(--carbon);
  color: var(--blanco);
  padding: 108px 28px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: clip-path .8s var(--e);
  /* si el contenido no cabe, se desplaza; centrar a la fuerza cortaba
     la parte de arriba y la dejaba inalcanzable */
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.menu > .menu-nav { margin-top: auto; }
.menu > .menu-pie { margin-bottom: auto; }
.menu.on { clip-path: circle(150% at calc(100% - 46px) 46px); }
.menu-nav a {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 11vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--e), transform .6s var(--e), color .3s;
}
.menu.on .menu-nav a { opacity: 1; transform: none; }
.menu.on .menu-nav a:nth-child(1) { transition-delay: .18s; }
.menu.on .menu-nav a:nth-child(2) { transition-delay: .25s; }
.menu.on .menu-nav a:nth-child(3) { transition-delay: .32s; }
.menu.on .menu-nav a:nth-child(4) { transition-delay: .39s; }
.menu-nav a:hover { color: var(--oro); }
.menu-nav a i { font-style: normal; font-size: .8rem; opacity: .4; margin-right: 12px; font-family: var(--texto); }
.menu-pie { margin-top: 38px; display: flex; flex-direction: column; gap: 14px; }
.menu-pie .tel-g { font-family: var(--display); font-size: 2rem; color: var(--oro); }
.menu-pie p { font-size: .88rem; color: rgba(255,255,255,.6); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 168px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 88% -8%, var(--oro-niebla) 0%, transparent 62%),
    var(--hueso);
}
.hero .trama { opacity: .5; }
.hero-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 54px;
  align-items: center;
}
.hero h1 { margin: 22px 0 26px; }
.hero h1 .lin { display: block; overflow: hidden; }
.hero h1 .lin > span { display: block; }
.hero-txt { max-width: 44ch; color: var(--tinta-70); font-size: 1.06rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-datos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px; padding-top: 30px;
  border-top: 1px solid var(--linea);
}
.hero-dato { position: relative; padding-right: 18px; }
.hero-dato + .hero-dato { padding-left: 26px; }
.hero-dato + .hero-dato::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 8px;
  width: 1px; background: var(--linea);
}
.hero-dato strong {
  display: flex; align-items: baseline; gap: 1px;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.3vw, 3rem);
  font-weight: 600; line-height: .95;
  letter-spacing: -0.01em;
  color: var(--carbon);
  margin-bottom: 10px;
}
/* el "+" va más pequeño y en dorado, alineado a la base del número */
.hero-dato strong em {
  font-style: normal;
  font-size: .5em;
  font-weight: 500;
  color: var(--oro-hondo);
  transform: translateY(-0.12em);
}
/* la etiqueta: solo esta, para que no encoja el número */
.hero-dato .et {
  display: block;
  font-size: .63rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta-45);
  line-height: 1.4;
}

/* Composición de imágenes en capas */
.hero-comp { position: relative; height: 640px; }
.capa {
  position: absolute; border-radius: var(--r-l); overflow: hidden;
  background: linear-gradient(150deg, var(--oro-luz) 0%, var(--hueso-2) 55%, var(--oro-niebla) 100%);
}
.capa img { width: 100%; height: 100%; object-fit: cover; }
.capa-a {
  top: 0; right: 0; width: 76%; height: 74%;
  box-shadow: var(--sombra-3);
  z-index: 2;
}
.capa-b {
  bottom: 0; left: 0; width: 54%; height: 46%;
  box-shadow: var(--sombra-3);
  border: 6px solid var(--hueso);
  z-index: 3;
}
/* Cada foto se encuadra por su zona buena, no por el centro */
.capa-a img { object-position: center 38%; }
.capa-b img { object-position: 64% center; }
/* el símbolo oficial ya trae su propio círculo dorado: aquí solo se enmarca */
.capa-oro {
  position: absolute;
  bottom: 6%; right: 2%; width: 30%; aspect-ratio: 1;
  border-radius: 50%;
  z-index: 6;
  display: grid; place-items: center;
  border: 7px solid var(--hueso);
  box-shadow: 0 18px 40px rgba(201,168,81,.42), 0 40px 80px rgba(56,59,54,.16);
  animation: flota 6s ease-in-out infinite;
  overflow: hidden;
}
.capa-oro .sello-svg { width: 100%; height: 100%; display: block; }
@keyframes flota {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-3deg); }
}

.chip {
  position: absolute;
  z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 19px;
  border-radius: 100px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--sombra-2);
  white-space: nowrap;
}
.chip-ico {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--oro); display: grid; place-items: center; flex-shrink: 0;
}
.chip-ico svg { width: 15px; height: 15px; fill: var(--carbon); }
.chip b { display: block; font-family: var(--display); font-size: .95rem; text-transform: uppercase; line-height: 1.15; }
.chip small { display: block; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-45); }
.chip-1 { top: 60%; left: -4%; }
.chip-2 { top: 8%; left: 2%; }

/* Sello giratorio: enlace a cita previa */
.sello-gira {
  position: absolute; z-index: 7;
  bottom: 4%; left: 44%;
  width: 108px; height: 108px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .6s var(--e);
}
.sello-gira .anillo {
  position: absolute; inset: 0;
  animation: gira 22s linear infinite;
  transition: animation-duration .4s;
}
.sello-gira .anillo text { font-family: var(--texto); font-size: 8.6px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; fill: var(--carbon); transition: fill .4s; }
.sello-gira .centro {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--carbon);
  display: grid; place-items: center;
  overflow: hidden;
  transition: background .45s var(--e), transform .5s var(--e);
}
.sello-gira .centro svg {
  width: 20px; height: 20px; fill: var(--oro);
  transition: transform .5s var(--e), fill .45s;
}

/* al pasar el ratón: crece, gira más rápido y la flecha sale disparada */
.sello-gira:hover { transform: scale(1.14); }
.sello-gira:hover .anillo { animation-duration: 5s; }
.sello-gira:hover .centro { background: var(--oro); transform: rotate(-45deg); }
.sello-gira:hover .centro svg { fill: var(--carbon); animation: dispara .55s var(--e); }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes dispara {
  0%   { transform: translate(0, 0); opacity: 1; }
  45%  { transform: translate(26px, -26px); opacity: 0; }
  55%  { transform: translate(-26px, 26px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* ---------- CINTA DE TRATAMIENTOS ---------- */
.marquee {
  background: var(--carbon);
  color: var(--blanco);
  padding: 26px 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* se desvanece en los extremos en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee .trama { opacity: .05; }

.marquee-pista {
  display: flex;
  width: max-content;
  animation: desliza 46s linear infinite;
  position: relative;
  z-index: 2;
}
/* la segunda fila va en sentido contrario */
.marquee-pista--rev { animation-direction: reverse; animation-duration: 54s; }

.marquee-pista span {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .045em;
  padding-inline: 22px;
  display: flex; align-items: center; gap: 22px;
  white-space: nowrap;
  transform-origin: center;
  transition: transform .55s var(--e), -webkit-text-stroke-color .45s, color .45s;
}
/* al pasar por encima no se para: las palabras se amplían y sigue corriendo */
.marquee:hover .marquee-pista span { transform: scale(1.14); }
/* separador: el símbolo de la marca, no un punto cualquiera */
.marquee-pista span::after {
  content: "";
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: .85;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23e2c780' d='M148.157 123.428C148.377 131.586 150.053 141.735 135.580 154.839C81.630 203.687 106.690 165.080 116.843 141.038C124.121 123.807 109.426 105.634 99.276 104.604C93.306 103.996 87.739 114.319 80.755 134.663C72.618 158.365 81.325 172.794 84.118 185.829C85.121 190.513 81.922 191.663 79.224 189.530C78.144 188.676 46.925 164.708 51.914 126.769C53.865 111.930 53.331 119.280 54.343 94.585C54.868 81.736 41.287 69.689 44.619 47.904C45.595 41.518 48.082 33.530 50.910 29.816C53.725 26.093 58.119 22.059 61.659 22.135C66.417 22.236 72.388 27.499 77.043 29.725C77.043 29.725 87.513 15.595 92.932 14.443C99.396 13.068 112.666 22.135 112.666 22.135C118.079 21.144 132.762 21.109 136.246 21.527C141.308 22.135 147.400 27.116 150.212 30.838C153.030 34.554 155.664 43.113 155.880 49.561C156.528 60.708 145.123 90.334 145.123 90.334C141.760 101.941 147.660 104.978 148.157 123.428Z'/%3E%3C/svg%3E");
}
/* fila inferior: texto en contorno dorado, para dar profundidad */
.marquee-pista--rev span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(226,199,128,.75);
  font-size: 1.18rem;
}
.marquee-pista--rev span::after { opacity: .45; }

@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- SECCIONES ---------- */
.sec { position: relative; padding: 124px 0; }
.sec-hueso { background: var(--hueso-2); }
.sec-oscura { background: var(--carbon); color: var(--blanco); }
.sec-oscura .entrada { color: rgba(255,255,255,.68); }
.sec-oscura .mini { color: rgba(255,255,255,.42); }
.sec-cabeza { max-width: 780px; margin-bottom: 62px; }
.sec-cabeza .d2 { margin: 20px 0 22px; }
.sec-cabeza--flex {
  max-width: none; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 40px; flex-wrap: wrap;
}
.sec-cabeza--flex > div:first-child { max-width: 720px; }

/* ---------- BENTO ESPECIALIDADES ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.bx {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra-1);
  transition: transform .7s var(--e), box-shadow .7s var(--e);
}
.bx:hover { transform: translateY(-6px); box-shadow: var(--sombra-3); }
.bx-foto {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #6d6f66 0%, var(--carbon) 70%);
}
.bx-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e); }
.bx:hover .bx-foto img { transform: scale(1.07); }
.bx-velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36,38,31,.94) 4%, rgba(36,38,31,.55) 42%, rgba(36,38,31,.12) 100%);
}
.bx-b .bx-velo {
  background: linear-gradient(to top, rgba(46,40,22,.94) 4%, rgba(58,50,26,.62) 44%, rgba(120,98,40,.22) 100%);
}
.bx-b .trama { z-index: 2; }
.bx-cont { position: relative; z-index: 3; padding: 38px; height: 100%; display: flex; flex-direction: column; }
.bx-cont--abajo { justify-content: flex-end; }

.bx-a { grid-column: span 7; min-height: 500px; color: var(--blanco); }
.bx-b { grid-column: span 5; min-height: 500px; background: var(--oro); color: var(--blanco); }
.bx-c { grid-column: span 6; min-height: 260px; background: var(--carbon); color: var(--blanco); }
.bx-e { grid-column: span 6; min-height: 260px; }

.bx h3 { margin-bottom: 12px; }
.bx p { font-size: .96rem; color: var(--tinta-70); }
.bx-a p, .bx-c p { color: rgba(255,255,255,.72); }
.bx-b p { color: rgba(255,255,255,.74); }

.bx-link {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.bx-link .fl {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid currentColor; display: grid; place-items: center;
  transition: var(--t);
}
.bx-link .fl svg { width: 13px; height: 13px; fill: currentColor; transition: transform .5s var(--e); }
.bx:hover .bx-link .fl { background: currentColor; }
.bx:hover .bx-link .fl svg { transform: translateX(3px); }
.bx-a:hover .bx-link .fl svg, .bx-c:hover .bx-link .fl svg { fill: var(--carbon); }
.bx-b:hover .bx-link .fl svg { fill: var(--carbon); }
.bx-e:hover .bx-link .fl svg { fill: var(--blanco); }

.bx-num {
  font-family: var(--display);
  font-size: 3.4rem; line-height: 1;
  color: var(--oro-hondo);
  margin-bottom: 10px;
}
.bx-c .bx-num { color: var(--oro); }

.bx-lista { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.bx-lista li {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: 7px 13px; border-radius: 100px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
}
.bx-b .bx-lista li { background: rgba(226,199,128,.16); border-color: rgba(226,199,128,.34); }

/* ---------- BLOQUE TECNOLOGÍA ---------- */
.tech { position: relative; overflow: hidden; }
.tech-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: center; }
.tech-media { position: relative; }
.tech-media .marco {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--sombra-3);
  position: relative;
  background: linear-gradient(150deg, var(--oro-luz), #8c8e83);
}
.tech-media .marco img { width: 100%; height: 100%; object-fit: cover; }
.tech-media .marco::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(226,199,128,.16), transparent 55%);
}
.tech-chip {
  position: absolute; z-index: 4;
  padding: 16px 22px; border-radius: var(--r-m);
  background: rgba(36,38,31,.58);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--blanco);
  box-shadow: var(--sombra-2);
}
.tech-chip b { display: block; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; color: var(--oro); }
.tech-chip small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .74; }
.tech-chip-1 { top: 7%; right: -7%; }
.tech-chip-2 { bottom: 9%; left: 6%; }

/* Reconstrucción 3D flotando sobre la foto del escáner (portada) */
.recon-flota {
  position: absolute; z-index: 5;
  left: -9%; right: 22%; bottom: 6%;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transition: transform .8s var(--e);
}
.recon-flota img { width: 100%; height: auto; display: block; }
.recon-flota figcaption {
  padding: 12px 16px;
  background: rgba(36,38,31,.94);
  font-size: .61rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.tech-media:hover .recon-flota.entra { transform: translateY(-8px) scale(1.03); }

.vent { margin: 34px 0 40px; }
.vent li {
  display: flex; gap: 17px; align-items: flex-start;
  padding: 19px 0;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.vent li:first-child { border-top: 1px solid rgba(255,255,255,.11); }
.vent .n {
  font-family: var(--display); font-size: .8rem; color: var(--oro);
  padding-top: 4px; min-width: 26px;
}
.vent b { display: block; font-family: var(--display); font-size: 1.16rem; text-transform: uppercase; font-weight: 500; letter-spacing: .01em; }
.vent p { font-size: .92rem; color: rgba(255,255,255,.6); margin-top: 3px; }

/* ---------- ÍNDICE DE TRATAMIENTOS ---------- */
.indice-zona {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 60px;
  align-items: start;
}
.indice { border-top: 1px solid var(--linea); }

.ix {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 56px;
  gap: 6px 22px;
  align-items: center;
  padding: 24px 18px;
  border-bottom: 1px solid var(--linea);
  transition: var(--t);
  cursor: pointer;
}
.ix::before {
  content: ""; position: absolute; inset: 0;
  background: var(--carbon);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--e);
  z-index: 0;
}
.ix:hover::before, .ix:focus-visible::before { transform: scaleY(1); }
.ix > * { position: relative; z-index: 2; transition: color .45s var(--e); }
.ix:hover, .ix:hover .ix-desc, .ix:hover .ix-n,
.ix:focus-visible, .ix:focus-visible .ix-desc, .ix:focus-visible .ix-n { color: var(--blanco); }

.ix-n {
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--display); font-size: .92rem;
  color: var(--tinta-45);
  display: flex; align-items: center; gap: 12px;
  align-self: center;
}
.ix-n::after {
  content: ""; height: 1px; flex: 1;
  background: var(--linea);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--e) .05s, background .45s var(--e);
}
.ix:hover .ix-n::after { transform: scaleX(1); background: var(--oro); }

.ix-cab { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ix-tit {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  text-transform: uppercase; font-weight: 500; line-height: 1.05;
}
.ix-tag {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-hondo); font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .45s var(--e);
}
.ix-tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 1px;
  background: var(--oro); flex: none;
}
.ix:hover .ix-tag { color: var(--oro); }

.ix-desc { grid-column: 2; grid-row: 2; font-size: .9rem; color: var(--tinta-70); }
.ix-fl {
  grid-column: 3; grid-row: 1 / span 2;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--linea);
  display: grid; place-items: center; justify-self: end; align-self: center;
  transition: var(--t);
}
.ix-fl svg { width: 14px; height: 14px; fill: currentColor; transition: transform .5s var(--e); }
.ix:hover .ix-fl, .ix:focus-visible .ix-fl { background: var(--oro); border-color: var(--oro); color: var(--carbon); }
.ix:hover .ix-fl svg, .ix:focus-visible .ix-fl svg { transform: rotate(-45deg); }

/* panel de la derecha: la foto del tratamiento sobre el que estás */
.ix-panel { position: sticky; top: 104px; }
.ix-panel-marco {
  position: relative;
  aspect-ratio: 4 / 3.25;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--linea-oro);
  box-shadow: var(--sombra-2);
  background: var(--carbon);
  /* invisible mientras nadie señala un tratamiento */
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .32s var(--e), transform .42s var(--e);
  will-change: opacity, transform;
}
.ix-panel.viva .ix-panel-marco {
  opacity: 1;
  transform: none;
}
.ix-panel.viva .ix-panel-pie { opacity: 1; transform: none; }
.ix-panel-marco img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .35s var(--e), transform .9s var(--e);
}
.ix-panel-marco img.on { opacity: 1; transform: scale(1); }
.ix-panel-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--e) .12s, transform .4s var(--e) .12s;
  padding: 46px 24px 20px;
  display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(to top, rgba(30,32,29,.86), rgba(30,32,29,.42) 55%, transparent);
  color: var(--blanco);
  pointer-events: none;
}
.ix-panel-tit {
  font-family: var(--display); font-size: 1.32rem;
  text-transform: uppercase; font-weight: 500; letter-spacing: .01em;
}
.ix-panel-tag {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro); font-weight: 600;
}

/* fila de cierre: el resto de tratamientos */
.ix-pie {
  margin-top: 26px;
  display: flex; align-items: center; gap: 22px;
  padding: 20px 24px;
  border: 1px dashed var(--linea-oro);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  transition: var(--t);
}
.ix-pie:hover { background: var(--blanco); border-color: var(--oro); box-shadow: var(--sombra-1); }
.ix-pie-n {
  font-family: var(--display); font-size: 1.3rem;
  color: var(--oro-hondo); flex: none;
}
.ix-pie-txt { font-size: .9rem; color: var(--tinta-70); flex: 1; }
.ix-pie .ix-fl { flex: none; grid-column: auto; grid-row: auto; }
.ix-pie:hover .ix-fl { background: var(--oro); border-color: var(--oro); color: var(--carbon); }
.ix-pie:hover .ix-fl svg { transform: rotate(-45deg); }

/* ---------- EQUIPO ---------- */
.equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 20px; }
.persona { position: relative; }
.persona-marco {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-l);
  overflow: hidden;
  background: linear-gradient(160deg, var(--oro-luz), var(--oro));
  display: grid; place-items: center;
  margin-bottom: 18px;
  box-shadow: var(--sombra-1);
  transition: var(--t);
}
.persona:hover .persona-marco { box-shadow: var(--sombra-3); transform: translateY(-5px); }
.persona-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.persona-marco .trama { opacity: .3; -webkit-mask-image: linear-gradient(to top, #000, transparent 75%); mask-image: linear-gradient(to top, #000, transparent 75%); }
/* si aún no hay foto, se ve el símbolo de la marca como filigrana */
.persona-marco::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: no-repeat center/44% url("../img/marca/simbolo-negativo.svg");
  opacity: .5;
}
.persona-marco img { z-index: 2; }   /* la foto, cuando exista, lo tapa */
.persona-tag {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 100px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--carbon);
}
.persona h3 { font-family: var(--display); font-size: 1.28rem; text-transform: uppercase; font-weight: 500; line-height: 1.12; }
.persona .rol { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-hondo); font-weight: 600; margin-top: 5px; }
.persona .bio { font-size: .89rem; color: var(--tinta-70); margin-top: 10px; }

/* ---------- OPINIONES ---------- */
.opis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.opi {
  position: relative;
  padding: 40px 34px 32px;
  border-radius: var(--r-l);
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  transition: var(--t);
  overflow: hidden;
}
.opi:hover { transform: translateY(-6px); box-shadow: var(--sombra-2); }
.opi .comilla {
  position: absolute; top: -18px; right: 18px;
  font-family: var(--display); font-size: 8rem; line-height: 1;
  color: var(--oro); opacity: .28;
}
.estrellas { display: flex; gap: 3px; margin-bottom: 18px; }
.estrellas svg { width: 15px; height: 15px; fill: var(--oro-hondo); }
.opi p { position: relative; font-size: 1.02rem; color: var(--tinta); margin-bottom: 22px; }
.opi-quien { display: flex; align-items: center; gap: 12px; }
.opi-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--oro); display: grid; place-items: center;
  font-family: var(--display); font-size: .9rem; color: var(--carbon);
}
.opi-quien b { display: block; font-size: .88rem; }
.opi-quien small { font-size: .7rem; color: var(--tinta-45); }

/* ---------- CTA FINAL ---------- */
.cta {
  position: relative;
  background: var(--oro);
  color: var(--carbon);
  padding: 110px 0;
  overflow: hidden;
  text-align: center;
}
.cta .trama { opacity: .3; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 20%, #000 85%); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 20%, #000 85%); }
.cta-in { position: relative; z-index: 3; }
.cta .d2 { margin: 22px 0 20px; }
.cta p { max-width: 55ch; margin-inline: auto; color: rgba(56,59,54,.78); }
.cta-btns { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ---------- CONTACTO ---------- */
.cont-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 60px; align-items: start; }
.datos li { display: flex; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--linea); }
.sec-oscura .datos li { border-color: rgba(255,255,255,.12); }
.datos .ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--oro); display: grid; place-items: center; flex-shrink: 0;
}
.datos .ico svg { width: 17px; height: 17px; fill: var(--carbon); }
.datos dt { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-45); margin-bottom: 4px; }
.sec-oscura .datos dt { color: rgba(255,255,255,.45); }
.datos dd { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; font-weight: 500; line-height: 1.2; }
.datos dd.normal { font-family: var(--texto); font-size: 1rem; text-transform: none; font-weight: 400; }

.form {
  position: relative;
  padding: 44px;
  border-radius: var(--r-xl);
  background: var(--blanco);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.form .trama { opacity: .2; height: 190px; inset: auto 0 auto 0; top: 0; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.form-in { position: relative; z-index: 2; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-45); font-weight: 600; margin-bottom: 8px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  background: var(--hueso);
  font-family: var(--texto);
  font-size: .96rem;
  color: var(--tinta);
  transition: var(--t);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-45); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--oro-hondo); background: var(--blanco);
  box-shadow: 0 0 0 4px rgba(226,199,128,.22);
}
.campo textarea { resize: vertical; min-height: 106px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.priv { display: flex; gap: 11px; align-items: flex-start; font-size: .8rem; color: var(--tinta-45); margin: 6px 0 22px; }
.priv input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--oro-hondo); flex-shrink: 0; }
.priv a { color: var(--oro-hondo); text-decoration: underline; }
.form .btn { width: 100%; justify-content: center; }

.mapa-marco { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra-2); }
.mapa-marco iframe { width: 100%; height: 440px; border: 0; display: block; filter: grayscale(1) contrast(1.06) brightness(1.04); transition: filter .7s var(--e); }
.mapa-marco:hover iframe { filter: none; }

/* ---------- HERO INTERIOR ---------- */
.hero-int {
  position: relative;
  padding: 178px 0 84px;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 82% 0%, var(--oro-niebla) 0%, transparent 62%),
    var(--hueso);
}
.hero-int .trama { opacity: .3; }
.hero-int-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: end; }
.hero-int h1 { margin: 20px 0 0; }
.hero-int .entrada { margin-top: 8px; }
.hero-int-media {
  border-radius: var(--r-l); overflow: hidden;
  aspect-ratio: 5/4; box-shadow: var(--sombra-3);
  position: relative;
}
.hero-int-media img { width: 100%; height: 100%; object-fit: cover; }

/* migas */
.migas { display: flex; align-items: center; gap: 10px; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-45); margin-bottom: 18px; }
.migas a:hover { color: var(--oro-hondo); }
.migas i { font-style: normal; opacity: .5; }

/* ---------- TARJETAS DE SERVICIO ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.serv {
  position: relative;
  padding: 36px 32px 32px;
  border-radius: var(--r-l);
  background: var(--blanco);
  border: 1px solid var(--linea);
  overflow: hidden;
  transition: var(--t);
}
.serv::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--e);
}
.serv:hover { transform: translateY(-6px); box-shadow: var(--sombra-2); border-color: transparent; }
.serv:hover::after { transform: scaleX(1); }
.serv-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.serv-n {
  font-family: var(--display); font-size: .78rem; letter-spacing: .1em;
  color: var(--oro-hondo); display: block;
}
.serv-ico {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--oro-niebla);
  border: 1px solid var(--linea-oro);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: var(--t);
}
.serv-ico svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: var(--oro-hondo);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: var(--t);
}
.serv:hover .serv-ico { background: var(--oro); border-color: var(--oro); transform: rotate(-6deg) scale(1.06); }
.serv:hover .serv-ico svg { stroke: var(--carbon); }
.serv--oro .serv-ico { background: rgba(255,255,255,.5); border-color: rgba(56,59,54,.16); }
.serv--oro .serv-ico svg { stroke: var(--carbon); }
.serv--oro:hover .serv-ico { background: var(--carbon); border-color: var(--carbon); }
.serv--oro:hover .serv-ico svg { stroke: var(--oro); }
.serv--carbon .serv-ico { background: rgba(255,255,255,.07); border-color: rgba(226,199,128,.3); }
.serv--carbon .serv-ico svg { stroke: var(--oro); }
.serv--carbon:hover .serv-ico { background: var(--oro); border-color: var(--oro); }
.serv--carbon:hover .serv-ico svg { stroke: var(--carbon); }

/* ---------- BLOQUE DESTACADO CBCT ---------- */
.cbct {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--carbon);
  color: var(--blanco);
  box-shadow: var(--sombra-3);
}
.cbct .trama { opacity: .07; }
.cbct-grid { position: relative; z-index: 3; display: grid; grid-template-columns: .82fr 1.18fr; }
.cbct-foto {
  position: relative; z-index: 1;
  overflow: hidden; min-height: 100%;
  background: linear-gradient(150deg, var(--oro-luz), #8c8e83);
}
.cbct-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cbct-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, rgba(56,59,54,.85) 100%);
}
/* el panel de texto va por encima: es lo que esconde la imagen antes de salir */
.cbct-cont { position: relative; z-index: 3; background: var(--carbon); }

/* Reconstrucción 3D: sale de detrás del panel y se queda sobre la foto */
.cbct-recon {
  position: absolute; z-index: 2;
  left: 5%; width: 37%; bottom: 7%;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 54px rgba(0,0,0,.5);
  /* posición de partida: escondida bajo el panel de la derecha */
  transform: translateX(128%);
}
.cbct-recon.entra {
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(.22,1,.36,1);
}
.cbct-recon img { position: static; width: 100%; height: auto; object-fit: contain; }
.cbct-recon figcaption {
  padding: 11px 15px;
  background: rgba(36,38,31,.92);
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
/* una vez colocada, sigue reaccionando al ratón */
.cbct:hover .cbct-recon.entra { transform: translateY(-6px) scale(1.02); }
.cbct-cont { padding: 54px 52px; }
.cbct-cont .d3 { margin: 18px 0 16px; }
.cbct-cont > p { color: rgba(255,255,255,.72); max-width: 62ch; }

.cbct-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px;
  margin-top: 36px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.cbct-cols h4 {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro); margin-bottom: 18px; font-weight: 600;
}
.cbct-cols li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: .93rem;
  color: rgba(255,255,255,.74);
}
.cbct-cols li b { color: var(--blanco); font-weight: 600; }
.cbct-cols li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 4px;
  background-image: linear-gradient(to right, var(--oro) 50%, transparent 50%);
  background-size: 4px 4px;
}

.cbct-datos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cbct-dato {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px 13px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
}
.cbct-dato svg { width: 20px; height: 20px; fill: none; stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cbct-dato b { display: block; font-family: var(--display); font-size: 1rem; text-transform: uppercase; line-height: 1.1; }
.cbct-dato small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* ---------- ESTERILIZACIÓN ---------- */
.ester { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ecard {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  transition: var(--t);
}
.ecard:hover { transform: translateY(-6px); box-shadow: var(--sombra-2); }
.ecard-foto { position: relative; height: 290px; overflow: hidden; background: var(--hueso-2); }
.ecard-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--e); }
.ecard:hover .ecard-foto img { transform: scale(1.06); }
.ecard-tag {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 100px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--carbon);
}
.ecard-cont { padding: 32px 30px 30px; }
.ecard-cont h3 { font-family: var(--display); font-size: 1.42rem; text-transform: uppercase; font-weight: 500; line-height: 1.1; margin-bottom: 12px; }
.ecard-cont p { font-size: .94rem; color: var(--tinta-70); }
.ecard-cont ul { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
.ecard-cont ul li {
  font-size: .87rem; color: var(--tinta-70);
  padding-left: 20px; position: relative; margin-bottom: 8px;
}
.ecard-cont ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 4px;
  background-image: linear-gradient(to right, var(--oro-hondo) 50%, transparent 50%);
  background-size: 4px 4px;
}

/* ---------- CABINA DE MEDICINA ESTÉTICA ---------- */
.cabina {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 46px;
}
/* versión espejo: la foto a la derecha, para alternar entre secciones */
.cabina--inv { grid-template-columns: 1.22fr .78fr; }
.cabina--inv .cabina-foto { order: 2; }
.cabina--inv .cabina-txt { order: 1; }

.cabina-foto {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  /* proporción vertical: respeta la forma real de la foto */
  aspect-ratio: 3 / 4;
  background: var(--hueso-2);
  box-shadow: var(--sombra-2);
}
.cabina-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: transform 1.3s var(--e);
}
.cabina-foto:hover img { transform: scale(1.05); }
.cabina-foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36,38,31,.72) 0%, transparent 42%);
}
.cabina-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 24px;
  color: #fff;
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.15;
}
.cabina-lista { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--linea); }
.cabina-lista li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: .95rem;
  color: var(--tinta-70);
}
.cabina-lista li b { color: var(--tinta); font-weight: 600; }
.cabina-lista li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 13px; height: 4px;
  background-image: linear-gradient(to right, var(--oro-hondo) 50%, transparent 50%);
  background-size: 4px 4px;
}

/* ---------- GALERÍA DE INSTALACIONES ---------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 240px);
  gap: 16px;
}
.gitem {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--hueso-2);
  box-shadow: var(--sombra-1);
}
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--e); }
.gitem:hover img { transform: scale(1.07); }
.gitem::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36,38,31,.8) 0%, transparent 55%);
  opacity: .85;
}
.gitem figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 24px 26px 22px;
  color: #fff;
}
.gitem figcaption b {
  display: block;
  font-family: var(--display); font-size: 1.2rem;
  text-transform: uppercase; font-weight: 500; line-height: 1.1;
}
.gitem figcaption span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.g-a { grid-column: span 2; grid-row: span 2; }
.g-b { grid-column: span 2; }
.g-c, .g-d { grid-column: span 1; }
.g-e, .g-f { grid-column: span 2; }
.serv h3 { font-family: var(--display); font-size: 1.42rem; text-transform: uppercase; font-weight: 500; line-height: 1.08; margin-bottom: 12px; }
.serv p { font-size: .94rem; color: var(--tinta-70); }
.serv ul { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); }
.serv ul li {
  font-size: .87rem; color: var(--tinta-70);
  padding-left: 20px; position: relative; margin-bottom: 7px;
}
.serv ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 4px;
  background-image: linear-gradient(to right, var(--oro-hondo) 50%, transparent 50%);
  background-size: 4px 4px;
}
.serv--oro { background: var(--oro); border-color: transparent; }
.serv--oro .serv-n { color: rgba(56,59,54,.6); }
.serv--oro p, .serv--oro ul li { color: rgba(56,59,54,.8); }
.serv--oro ul { border-color: rgba(56,59,54,.16); }
.serv--oro ul li::before { background-image: linear-gradient(to right, var(--carbon) 50%, transparent 50%); }
.serv--carbon { background: var(--carbon); border-color: transparent; color: var(--blanco); }
.serv--carbon .serv-n { color: var(--oro); }
.serv--carbon p, .serv--carbon ul li { color: rgba(255,255,255,.68); }
.serv--carbon ul { border-color: rgba(255,255,255,.14); }
.serv--carbon ul li::before { background-image: linear-gradient(to right, var(--oro) 50%, transparent 50%); }

/* ---------- PIE ---------- */
.pie { position: relative; background: var(--carbon-hondo); color: rgba(255,255,255,.6); padding: 92px 0 30px; overflow: hidden; }
.pie .trama { opacity: .07; }
.pie-in { position: relative; z-index: 3; }
.pie-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 46px; padding-bottom: 56px; }
.pie h4 { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blanco); margin-bottom: 22px; font-weight: 600; }
.pie .marca-l1, .pie .marca-l2 { color: var(--blanco); }
.pie-desc { margin-top: 22px; max-width: 34ch; font-size: .92rem; }
.pie ul li { margin-bottom: 11px; font-size: .93rem; }
.pie a { transition: color .35s; }
.pie a:hover { color: var(--oro); }
.pie-tel { font-family: var(--display); font-size: 1.9rem; color: var(--oro); display: block; margin-bottom: 6px; }
.redes { display: flex; gap: 10px; margin-top: 24px; }
.redes a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center; transition: var(--t);
}
.redes a svg { width: 16px; height: 16px; fill: rgba(255,255,255,.7); transition: var(--t); }
.redes a:hover { background: var(--oro); border-color: var(--oro); transform: translateY(-3px); }
.redes a:hover svg { fill: var(--carbon); }
.pie-bajo {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: .78rem;
}
.pie-bajo nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- WHATSAPP ---------- */
.wa {
  position: fixed; right: 24px; bottom: 24px; z-index: 800;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366;
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(37,211,102,.42);
  transition: var(--t);
}
.wa svg { width: 29px; height: 29px; fill: #fff; }
.wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.65); opacity: 0; }
}
.wa:hover { transform: scale(1.08); }

/* ---------- ANIMACIÓN ---------- */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--e), transform .9s var(--e); }
.rv.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-comp { height: 520px; max-width: 620px; }
  .tech-grid, .cont-grid, .hero-int-grid { grid-template-columns: 1fr; gap: 44px; }
  .tech-chip-1 { right: 4%; }
  .tech-chip-2 { left: 4%; }
  .bx-a, .bx-b { grid-column: span 12; min-height: 430px; }
  .bx-c, .bx-e { grid-column: span 12; min-height: 220px; }
  .pie-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .indice-zona { grid-template-columns: 1fr; gap: 0; }
  .ix-panel { display: none; }
  .ix { grid-template-columns: 60px minmax(0, 1fr) 46px; gap: 6px 18px; }
  .ix-desc { font-size: .86rem; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .env { padding-inline: 20px; }
  .sec { padding: 84px 0; }
  .hero { padding: 138px 0 70px; }
  .hero-int { padding: 140px 0 60px; }
  .hero .trama { opacity: .26; }
  .hero-int .trama { opacity: .16; }
  /* El manual permite usar el símbolo solo, sin el logotipo */
  .nav .marca-txt { display: none; }
  .nav-links, .nav .btn { display: none; }
  .tel-nav { font-size: 1.14rem; padding-right: 0; }
  .burger { display: flex; }
  .nav { padding: 9px 9px 9px 18px; }
  .hero-comp { height: 430px; }
  .capa-a { width: 80%; height: 72%; }
  .capa-b { width: 52%; height: 44%; }
  .capa-oro { bottom: 4%; right: 0; width: 30%; }
  .chip { padding: 10px 15px; }
  .chip-1 { left: 0; top: 63%; }
  .chip-2 { left: 4%; top: 5%; }
  .sello-gira { width: 86px; height: 86px; left: 50%; bottom: 2%; }
  .hero-datos { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .hero-dato strong { font-size: 2.1rem; }
  /* en dos columnas, la línea divisoria solo va entre pares */
  .hero-dato + .hero-dato::before { display: none; }
  .hero-dato:nth-child(even) { padding-left: 24px; }
  .hero-dato:nth-child(even)::before {
    content: ""; display: block;
    position: absolute; left: 0; top: 2px; bottom: 8px;
    width: 1px; background: var(--linea);
  }
  .bento { gap: 14px; }
  .bx-cont { padding: 28px 24px; }
  .form { padding: 30px 24px; }
  .fila { grid-template-columns: 1fr; }
  .pie-top { grid-template-columns: 1fr; gap: 34px; }
  .pie-bajo { flex-direction: column; }
  .ix { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 14px; padding: 20px 12px; }
  .ix-n::after { display: none; }
  .ix-fl { width: 38px; height: 38px; }
  .ix-pie { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 22px; }
  .tech-media .marco { aspect-ratio: 1/1; }
  .tech-chip-1, .tech-chip-2 { position: static; margin-top: 12px; display: inline-block; }
  .recon-flota { position: static; margin-top: 14px; }
  .recon-flota figcaption { font-size: .58rem; padding: 10px 13px; }
  .mapa-marco iframe { height: 320px; }
  .sec-cabeza { margin-bottom: 42px; }
  .marquee { padding: 20px 0; gap: 8px; }
  .marquee-pista span { font-size: 1.05rem; padding-inline: 16px; gap: 16px; }
  .marquee-pista--rev span { font-size: .98rem; }
  .marquee-pista span::after { width: 12px; height: 12px; }
  .galeria { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .g-a { grid-column: span 2; grid-row: span 1; height: 260px; }
  .g-b { grid-column: span 2; height: 200px; }
  .g-c, .g-d, .g-e, .g-f { grid-column: span 1; height: 180px; }
  .cbct-grid { grid-template-columns: 1fr; }
  .cbct-foto { height: 300px; }
  /* en móvil el panel va debajo, así que la imagen entra desde el lateral */
  .cbct-recon { left: 6%; width: 88%; bottom: 6%; transform: translateX(115%); }
  .cbct-recon figcaption { display: none; }
  .cbct-cont { padding: 34px 26px; }
  .cbct-cols { grid-template-columns: 1fr; gap: 26px; }
  .cabina, .cabina--inv { grid-template-columns: 1fr; gap: 28px; margin-bottom: 34px; }
  .cabina-foto { aspect-ratio: 4 / 3; }
  /* en móvil la foto siempre va primero */
  .cabina--inv .cabina-foto { order: 1; }
  .cabina--inv .cabina-txt { order: 2; }
  .ester { grid-template-columns: 1fr; }
  .ecard-foto { height: 230px; }
  .ecard-cont { padding: 26px 24px 24px; }
  .serv-ico { width: 50px; height: 50px; }
  .serv-ico svg { width: 26px; height: 26px; }
}

@media (max-width: 520px) {
  .hero-comp { height: 360px; }
  .sello-gira { display: none; }
  .capa-oro { width: 34%; }
  .opi { padding: 32px 26px 26px; }
}

/* ============================================================
   FICHAS DE TRATAMIENTO
   ============================================================ */
.trat-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 60px;
  align-items: start;
}

/* --- Bloque de contenido --- */
.trat-cuerpo > * + * { margin-top: 22px; }
.trat-cuerpo h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  text-transform: uppercase; font-weight: 500; line-height: 1.05;
  margin-top: 54px !important;
  margin-bottom: 18px !important;
}
.trat-cuerpo h2:first-child { margin-top: 0 !important; }
.trat-cuerpo p { color: var(--tinta-70); font-size: 1.02rem; }
.trat-cuerpo strong { color: var(--tinta); font-weight: 600; }

.lista-check { margin-top: 6px !important; }
.lista-check li {
  position: relative; padding-left: 30px; margin-bottom: 13px;
  color: var(--tinta-70); font-size: 1rem;
}
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--oro-niebla); border: 1px solid var(--linea-oro);
}
.lista-check li::after {
  content: ""; position: absolute; left: 5px; top: 11px;
  width: 6px; height: 3px;
  border-left: 1.6px solid var(--oro-hondo);
  border-bottom: 1.6px solid var(--oro-hondo);
  transform: rotate(-45deg);
}

/* --- Pasos del tratamiento --- */
.pasos { counter-reset: paso; margin-top: 8px !important; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 24px 0 24px 68px;
  border-bottom: 1px solid var(--linea);
}
.pasos li:first-child { border-top: 1px solid var(--linea); }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font-family: var(--display); font-size: 1.15rem;
  color: var(--oro-hondo);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--linea-oro);
  display: grid; place-items: center;
}
.pasos b {
  display: block;
  font-family: var(--display); font-size: 1.22rem;
  text-transform: uppercase; font-weight: 500; line-height: 1.15;
  margin-bottom: 6px;
}
.pasos p { font-size: .96rem; color: var(--tinta-70); }

/* --- Barra lateral --- */
.trat-lado { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
.ficha {
  border-radius: var(--r-l);
  border: 1px solid var(--linea);
  background: var(--blanco);
  padding: 30px 28px;
  box-shadow: var(--sombra-1);
}
.ficha h3 {
  font-size: .63rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-45); font-weight: 600; margin-bottom: 20px;
}
.ficha dl { display: flex; flex-direction: column; gap: 16px; }
.ficha .fila-d { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.ficha dt { font-size: .87rem; color: var(--tinta-45); }
.ficha dd {
  font-family: var(--display); font-size: 1.02rem;
  text-transform: uppercase; font-weight: 500; text-align: right;
  line-height: 1.2;
}
.ficha--oro { background: var(--oro); border-color: transparent; position: relative; overflow: hidden; }
.ficha--oro .trama { opacity: .3; }
.ficha--oro > * { position: relative; z-index: 2; }
.ficha--oro h3 { color: rgba(56,59,54,.62); }
.ficha--oro p { font-size: .94rem; color: rgba(56,59,54,.82); margin-bottom: 20px; }
.ficha--oro .d4 { margin-bottom: 12px; }
.ficha--oro .btn { width: 100%; justify-content: center; }

/* --- Preguntas frecuentes --- */
.faq { margin-top: 8px !important; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--display); font-size: 1.12rem;
  text-transform: uppercase; font-weight: 500; line-height: 1.25;
  transition: color .35s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro-hondo); }
.faq summary::after, .faq summary::before {
  content: ""; position: absolute; right: 8px; top: 50%;
  background: var(--oro-hondo); transition: transform .4s var(--e);
}
.faq summary::after { width: 15px; height: 1.6px; margin-top: -.8px; }
.faq summary::before { width: 1.6px; height: 15px; margin-top: -7.5px; margin-right: 6.7px; }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq details[open] summary { color: var(--oro-hondo); }
.faq .resp { padding: 0 44px 24px 0; }
.faq .resp p { font-size: .98rem; color: var(--tinta-70); }
.faq .resp p + p { margin-top: 12px; }

/* --- Ir al anterior / siguiente tratamiento --- */
.trat-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 30px;
}
.trat-nav a {
  display: block;
  padding: 26px 28px;
  border-radius: var(--r-l);
  border: 1px solid var(--linea);
  background: var(--blanco);
  transition: var(--t);
}
.trat-nav a:hover { border-color: transparent; box-shadow: var(--sombra-2); transform: translateY(-4px); }
.trat-nav .dir { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-45); display: block; margin-bottom: 8px; }
.trat-nav .tit { font-family: var(--display); font-size: 1.22rem; text-transform: uppercase; font-weight: 500; line-height: 1.15; }
.trat-nav .sig { text-align: right; }

/* --- Aviso de revisión clínica --- */
.aviso-med {
  margin-top: 40px;
  padding: 20px 24px;
  border-radius: var(--r-m);
  background: var(--hueso-2);
  border-left: 3px solid var(--oro);
  font-size: .87rem;
  color: var(--tinta-45);
}

@media (max-width: 1180px) {
  .trat-grid { grid-template-columns: 1fr; gap: 44px; }
  .trat-lado { position: static; }
}
@media (max-width: 860px) {
  .pasos li { padding-left: 56px; }
  .pasos li::before { width: 38px; height: 38px; font-size: 1rem; }
  .trat-nav { grid-template-columns: 1fr; }
  .trat-nav .sig { text-align: left; }
  .faq summary { font-size: 1rem; padding-right: 38px; }
}

/* enlace de la tarjeta a su ficha (toda la tarjeta es clicable) */
.serv-link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-hondo);
  transition: gap .4s var(--e);
}
.serv-link svg { width: 13px; height: 13px; fill: currentColor; }
.serv:hover .serv-link { gap: 15px; }
.serv-link::after { content: ""; position: absolute; inset: 0; }
.serv--oro .serv-link { color: var(--carbon); }
.serv--carbon .serv-link { color: var(--oro); }

/* ============================================================
   VENTANA EMERGENTE (captación)
   ============================================================ */
.pop-fondo {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(36,38,31,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--e), visibility .45s;
}
.pop-fondo.abierto { opacity: 1; visibility: visible; }

.pop {
  position: relative;
  width: 100%; max-width: 880px;
  max-height: 92vh; overflow-y: auto;
  background: var(--hueso);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
  display: grid; grid-template-columns: .85fr 1.15fr;
  transform: translateY(26px) scale(.97);
  transition: transform .55s var(--e);
}
.pop-fondo.abierto .pop { transform: none; }

.pop-foto { position: relative; overflow: hidden; background: var(--carbon); }
.pop-foto img { width: 100%; height: 100%; object-fit: cover; }
.pop-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36,38,31,.9) 0%, rgba(36,38,31,.15) 60%);
}
.pop-sello {
  position: absolute; left: 22px; bottom: 20px; z-index: 2;
  color: #fff;
}
.pop-sello b {
  display: block; font-family: var(--display);
  font-size: 1.5rem; text-transform: uppercase; line-height: 1; color: var(--oro);
}
.pop-sello span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }

.pop-cont { position: relative; padding: 42px 40px; }
.pop-cont .trama { opacity: .22; }
.pop-in { position: relative; z-index: 2; }
.pop-cont h2 { margin: 16px 0 14px; }
.pop-cont > .pop-in > p { color: var(--tinta-70); font-size: .98rem; }

.pop-puntos { margin: 20px 0 24px; }
.pop-puntos li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: .92rem; color: var(--tinta-70);
}
.pop-puntos li b { color: var(--tinta); font-weight: 600; }
.pop-puntos li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 4px;
  background-image: linear-gradient(to right, var(--oro-hondo) 50%, transparent 50%);
  background-size: 4px 4px;
}

.pop-form .fila { gap: 10px; margin-bottom: 12px; }
.pop-form input[type="text"], .pop-form input[type="tel"] {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: var(--r-s);
  background: var(--blanco); font-family: var(--texto); font-size: .95rem; color: var(--tinta);
  transition: var(--t);
}
.pop-form input:focus {
  outline: none; border-color: var(--oro-hondo);
  box-shadow: 0 0 0 4px rgba(226,199,128,.22);
}
.pop-form .priv { margin: 4px 0 16px; font-size: .74rem; }
.pop-form .btn { width: 100%; justify-content: center; }
.pop-o {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 14px;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-45);
}
.pop-o::before, .pop-o::after { content: ""; height: 1px; background: var(--linea); flex: 1; }
.pop-wa {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px;
  border-radius: 100px; border: 1px solid var(--linea);
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: var(--t);
}
.pop-wa svg { width: 17px; height: 17px; fill: #25d366; }
.pop-wa:hover { background: var(--carbon); color: #fff; border-color: var(--carbon); }

.pop-x {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  box-shadow: var(--sombra-1);
  transition: var(--t);
}
.pop-x svg { width: 15px; height: 15px; fill: var(--carbon); }
.pop-x:hover { background: var(--carbon); transform: rotate(90deg); }
.pop-x:hover svg { fill: #fff; }

@media (max-width: 780px) {
  .pop { grid-template-columns: 1fr; max-height: 88vh; }
  .pop-foto { height: 150px; }
  .pop-cont { padding: 28px 24px 30px; }
  .pop-puntos { margin: 16px 0 20px; }
  .pop-form .fila { grid-template-columns: 1fr; }
}

/* ---------- CÓMO LLEGAR ---------- */
.ir-bloque { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.ir-bloque .btn svg { width: 17px; height: 17px; }

.ir-modos {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 5px 5px 14px;
  border-radius: 100px;
  border: 1px solid var(--linea);
  background: var(--blanco);
}
.ir-modos .mini { margin-right: 6px; }
.ir-modos a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border-radius: 100px;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-70);
  transition: var(--t);
}
.ir-modos a svg { width: 16px; height: 16px; fill: var(--oro-hondo); transition: fill .35s; }
.ir-modos a:hover { background: var(--carbon); color: #fff; }
.ir-modos a:hover svg { fill: var(--oro); }

/* enlace pequeño junto a la dirección */
.ir-mini {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro-hondo);
  transition: gap .4s var(--e);
}
.ir-mini svg { width: 15px; height: 15px; fill: currentColor; }
.ir-mini:hover { gap: 13px; }

@media (max-width: 860px) {
  .ir-bloque { align-items: stretch; width: 100%; }
  .ir-bloque .btn { justify-content: center; }
  .ir-modos { justify-content: center; padding: 5px; flex-wrap: wrap; }
  .ir-modos .mini { display: none; }
  .ir-modos a { padding: 9px 12px; font-size: .64rem; }
}

/* ============================================================
   ANIMACIÓN DE ENTRADA
   ============================================================ */
/* mientras carga, el contenido espera oculto: evita el parpadeo */
html.cargando body > *:not(.intro) { visibility: hidden; }

.intro {
  position: fixed; inset: 0; z-index: 4000;
  background: var(--carbon);
  display: grid; place-items: center;
  overflow: hidden;
  transition: transform 1s cubic-bezier(.76,0,.24,1);
}
.intro .trama { opacity: .07; }
.intro.fuera { transform: translateY(-101%); }

.intro-in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .5s ease, transform .8s var(--e);
}
.intro.fuera .intro-in { opacity: 0; transform: translateY(-22px); }

/* --- sello --- */
.intro-sello {
  position: relative;
  width: clamp(180px, 38vw, 240px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}

.intro-anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.intro-anillo circle { animation: dibuja 1.15s cubic-bezier(.65,0,.35,1) .15s forwards; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }

.intro-diente {
  /* posicionado dentro del anillo: el porcentaje sobre un elemento de
     rejilla no resolvía bien y el logo se quedaba pequeño */
  position: absolute; inset: 15%;
  width: auto; height: auto;
  opacity: 0;
  transform: scale(.4) rotate(-25deg);
  animation: sello .9s cubic-bezier(.34,1.56,.64,1) .1s forwards;
}
@keyframes sello {
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes sube { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.cargando body > *:not(.intro) { visibility: visible; }
}

/* ============================================================
   MENÚ DESPLEGABLE DE TRATAMIENTOS
   ============================================================ */
.nav-desp { position: relative; }

.mega {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 640px;
  display: grid; grid-template-columns: .8fr 1.2fr;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--e), transform .45s var(--e), visibility .35s;
}
/* Puente invisible sobre el hueco: pertenece al contenedor, así que
   mientras el ratón lo cruza el menú sigue considerándose "encima". */
.nav-desp::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 660px; height: 26px;
  display: none;
}
.nav-desp:hover::after, .nav-desp.abierto::after { display: block; }

/* .abierto lo pone el JS con un margen de gracia al salir;
   :hover queda como respaldo por si el JS no llega a cargar. */
.nav-desp.abierto .mega,
.nav-desp:hover .mega,
.nav-desp:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* --- columna izquierda: las dos especialidades --- */
.mega-esp {
  padding: 14px;
  background: rgba(247,244,237,.7);
  border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 4px;
}
.mega-esp > a {
  display: block;
  padding: 16px 16px;
  border-radius: var(--r-m);
  transition: var(--t);
  text-transform: none; letter-spacing: 0;
}
.mega-esp > a b {
  display: block;
  font-family: var(--display); font-size: 1.06rem;
  text-transform: uppercase; font-weight: 500; line-height: 1.15;
  color: var(--tinta);
}
.mega-esp > a small {
  display: block; margin-top: 3px;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-45);
}
.mega-esp > a.on, .mega-esp > a:hover { background: var(--blanco); box-shadow: var(--sombra-1); }
.mega-esp > a.on b, .mega-esp > a:hover b { color: var(--oro-hondo); }

/* --- columna derecha: los tratamientos --- */
.mega-panel { position: relative; padding: 16px 14px; }
.mega-lista { display: none; }
.mega-lista.on { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
.mega-lista a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-s);
  font-size: .8rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--tinta-70);
  transition: var(--t);
}
.mega-lista a:hover { background: var(--carbon); color: #fff; }

.mega-pie {
  grid-column: 1 / -1;
  margin-top: 8px; padding: 12px 12px 4px;
  border-top: 1px solid var(--linea);
}
.mega-pie a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro-hondo);
  padding: 0; transition: gap .35s var(--e);
}
.mega-pie a:hover { background: none; color: var(--oro-hondo); gap: 14px; }
.mega-pie svg { width: 12px; height: 12px; fill: currentColor; }

/* --- dentro del menú móvil --- */
.menu-sub { margin: 2px 0 10px; padding-left: 4px; }
.menu-sub > div { margin-bottom: 12px; }
.menu-sub h5 {
  font-family: var(--display); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--oro); margin-bottom: 6px; font-weight: 500;
}
.menu-sub a {
  display: inline-block;
  font-family: var(--texto) !important;
  font-size: .82rem !important;
  text-transform: none !important;
  padding: 5px 0 !important;
  margin-right: 16px;
  border: 0 !important;
  color: rgba(255,255,255,.62);
  opacity: 1 !important; transform: none !important;
}
.menu-sub a:hover { color: var(--oro); }

@media (max-width: 1080px) { .mega { width: 560px; } }
@media (max-width: 860px)  { .mega { display: none; } }

/* los enlaces del panel no deben heredar el estilo de píldora de la barra */
.mega a::before { display: none !important; }
.mega a { text-transform: none; letter-spacing: 0; }
.nav-desp > a { position: relative; }

/* ---------- MAPA EN LA HOME (dentro de opiniones) ---------- */
.mapa-home {
  margin-top: 72px;
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: 44px;
  align-items: center;
}
.mapa-home-txt .d3 { margin: 18px 0 16px; }
.mapa-home .mapa-marco iframe { height: 380px; }
.ir-bloque--izq { align-items: flex-start; margin-top: 26px; }

@media (max-width: 980px) {
  .mapa-home { grid-template-columns: 1fr; gap: 30px; margin-top: 56px; }
  .mapa-home .mapa-marco iframe { height: 300px; }
}

/* ============================================================
   FONDO DE VÍDEO — sólo en la sección de tratamientos del inicio
   La sección se vuelve oscura: así el vídeo se ve de verdad y el
   texto se lee sin necesidad de taparlo con un velo claro.
   ============================================================ */
.sec-cine { overflow: hidden; isolation: isolate; background: var(--carbon); color: var(--blanco); }
.sec-cine::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4;
  background: linear-gradient(to right, transparent, rgba(226,199,128,.55) 22%, rgba(226,199,128,.55) 78%, transparent);
}
.sec-cine > .env { position: relative; z-index: 3; }

.cine { position: absolute; inset: 0; z-index: 0; background: var(--carbon); }
.cine video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s var(--e);
}
.cine video.on { opacity: 1; }

/* velo oscuro: deja ver el vídeo y protege la lectura */
.cine-velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(24,26,23,.66) 0%,
      rgba(24,26,23,.58) 30%,
      rgba(24,26,23,.54) 62%,
      rgba(24,26,23,.74) 100%);
}
.cine-velo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(20,22,19,.42) 100%);
}

/* sin vídeo (móvil, datos limitados): se queda el carbón liso */
.sec-cine.sin-cine .cine,
.sec-cine.sin-cine .cine-velo { display: none; }

/* ---------- textos de la sección en claro ---------- */
.sec-cine .eyebrow, .sec-cine .ix-tag { color: var(--oro); }
.sec-cine .entrada { color: rgba(255,255,255,.72); }
.sec-cine .ix-desc { color: rgba(255,255,255,.62); }
.sec-cine .ix-n { color: rgba(255,255,255,.42); }
.sec-cine .ix-n::after { background: rgba(255,255,255,.18); }
.sec-cine .indice { border-top-color: rgba(255,255,255,.16); }
.sec-cine .ix { border-bottom-color: rgba(255,255,255,.13); border-radius: 22px; }
.sec-cine .ix-fl { border-color: rgba(255,255,255,.24); }

/* ---------- al señalar una fila, el vídeo se aclara ahí dentro ---------- */
.sec-cine .ix::before {
  background: rgba(226,199,128,.10);
  border-radius: 22px;
  backdrop-filter: brightness(1.75) saturate(1.35) contrast(1.03);
  -webkit-backdrop-filter: brightness(1.75) saturate(1.35) contrast(1.03);
}
.sec-cine .ix:hover .ix-tit,
.sec-cine .ix:focus-visible .ix-tit { text-shadow: 0 2px 16px rgba(16,18,15,.75); }
.sec-cine .ix:hover .ix-desc,
.sec-cine .ix:focus-visible .ix-desc { color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(16,18,15,.7); }
.sec-cine .ix:hover .ix-n,
.sec-cine .ix:focus-visible .ix-n { color: rgba(255,255,255,.85); }

/* ---------- bordes ondulados y sombra bajo la foto ---------- */
.ix-panel-marco {
  border-radius: 44px 26px 44px 26px;
  box-shadow:
    0 18px 40px rgba(10,11,9,.45),
    0 46px 90px rgba(10,11,9,.5);
}
.ix-panel::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; top: 6%; bottom: -30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(226,199,128,.30), transparent 68%);
  filter: blur(34px);
  opacity: 0;
  transform: translateY(14px) scale(.9);
  transition: opacity .38s var(--e), transform .5s var(--e);
  z-index: -1;
}
.ix-panel.viva::before { opacity: 1; transform: none; }

/* ---------- fila de cierre sobre fondo oscuro ---------- */
.sec-cine .ix-pie {
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border-color: rgba(226,199,128,.34);
}
.sec-cine .ix-pie:hover { background: rgba(255,255,255,.12); border-color: var(--oro); box-shadow: none; }
.sec-cine .ix-pie-txt { color: rgba(255,255,255,.66); }
.sec-cine .ix-pie-n { color: var(--oro); }

@media (max-width: 860px) {
  .ix-panel-marco { border-radius: 34px 20px 34px 20px; }
  .sec-cine .ix, .sec-cine .ix::before { border-radius: 16px; }
}

/* ============================================================
   AJUSTES DE MÓVIL Y TABLETA
   Tamaños mínimos legibles y zonas de toque de 44 px
   ============================================================ */
@media (max-width: 860px) {

  /* --- que iOS no haga zoom al tocar un campo (necesita 16px) --- */
  input, textarea, select { font-size: 16px !important; }
  .campo input, .campo textarea, .campo select { min-height: 52px; }
  .campo textarea { min-height: 120px; }

  /* --- textos que se quedaban por debajo de lo legible --- */
  .marca-l2 { font-size: .76rem; opacity: .72; letter-spacing: .02em; }
  .eyebrow { font-size: .76rem; letter-spacing: .22em; }
  .mini, .bx-lista li { font-size: .78rem; }
  .migas, .migas a, .migas span { font-size: .8rem; }
  .datos dt { font-size: .78rem; }
  .campo label { font-size: .78rem; }
  .chip small, .tech-chip small, .ecard-tag, figcaption,
  .cbct-dato small, .cbct-recon figcaption,
  .persona-tag, .persona .rol, .trat-nav .dir,
  .ix-tag, .recon-flota figcaption,
  .gitem figcaption span, .opi-quien small { font-size: .75rem; }
  .pop-sello span { font-size: .74rem; }
  .priv, .priv span, .priv span a { font-size: .84rem; line-height: 1.5; }
  .pie ul li { font-size: 1rem; }

  /* --- zonas de toque: nada por debajo de 44 px --- */
  .tel-nav { padding-block: 10px; }
  .migas a { display: inline-block; padding-block: 11px; }
  .menu-sub a { display: inline-block; padding-block: 10px !important; }
  .pie ul li a,
  .pie-bajo nav a { display: inline-block; padding-block: 12px; }
  .datos dd a, .datos dd.normal a { display: inline-block; padding-block: 11px; }
  .ir-mini { display: inline-flex; align-items: center; min-height: 44px; }
  .ir-modos a { min-height: 44px; }
  .priv input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
  .pop-x { width: 46px; height: 46px; }
  .serv-link, .bx-link,
  .cabina-lista li a, .lista-check li a { display: inline-flex; align-items: center; min-height: 44px; }

  /* --- nada se sale de la pantalla --- */
  img, video, iframe, figure, canvas, svg:not(.marca-sello) { max-width: 100%; }
  .cbct-recon, .cbct-recon img { max-width: 100%; height: auto; }
  .trat-cuerpo pre, .trat-cuerpo table { overflow-x: auto; display: block; }
}

@media (max-width: 520px) {
  /* rejillas con ancho mínimo: en pantallas muy estrechas, a una columna */
  .opis, .serv-grid, .equipo, .mapa-home { grid-template-columns: 1fr; }

  /* respiración: en pantallas estrechas el aire de escritorio ahoga */
  .sec { padding: 78px 0; }
  .env { padding-inline: 22px; }
  .sec-cabeza { margin-bottom: 40px; }
  .btn { padding: 15px 24px; font-size: .78rem; letter-spacing: .12em; }
  .cta-btns, .hero-cta { gap: 12px; }
  .cta-btns .btn, .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   La píldora "+12" en móvil
   Va al final a propósito: la regla de .sec-cine que fija el
   radio en 999px aparece más arriba y, a igual especificidad,
   gana la última. Con tres líneas de texto, 999px daba un óvalo.
   ------------------------------------------------------------ */
@media (max-width: 520px) {
  .ix-pie,
  .sec-cine .ix-pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 22px;
    border-radius: 24px;
  }
  .ix-pie .ix-fl,
  .sec-cine .ix-pie .ix-fl { align-self: flex-start; }
}

/* ------------------------------------------------------------
   Menú móvil: que quepa
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .menu { padding: 96px 24px 40px; }
  .menu-nav a { font-size: clamp(1.9rem, 8.4vw, 2.7rem); padding: 7px 0; }
  .menu-sub { margin: 4px 0 8px; }
  .menu-sub > div { margin-bottom: 6px; }
  .menu-pie { margin-top: 26px; }
  .menu-pie .tel-g { font-size: 1.7rem; }
}

/* ------------------------------------------------------------
   Menú móvil · especialidades desplegables
   Dos botones y, al tocar uno, se abre su lista de tratamientos.
   Va al final para no pelearse con las reglas de .menu-sub.
   ------------------------------------------------------------ */
.menu-sub { margin: 10px 0 14px; padding-left: 0; }

.menu-esp { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-esp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid rgba(226, 199, 128, .38);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .8);
  font-family: var(--texto);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .4s var(--e), color .4s var(--e), border-color .4s var(--e);
}
.menu-esp-btn small {
  display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 100px;
  background: rgba(226, 199, 128, .18);
  color: var(--oro);
  font-size: .68rem; letter-spacing: 0;
  transition: background .4s var(--e), color .4s var(--e);
}
.menu-esp-btn.on {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carbon);
}
.menu-esp-btn.on small { background: rgba(56, 59, 54, .18); color: var(--carbon); }

/* la lista que se despliega */
.menu-lista {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--e);
}
.menu-lista-in {
  display: flex; flex-wrap: wrap;
  column-gap: 18px;
  padding-top: 12px;
}
.menu-lista a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--e), transform .4s var(--e), color .3s;
}
.menu-lista.abierta a { opacity: 1; transform: none; }
.menu-lista.abierta a:nth-child(1) { transition-delay: .06s; }
.menu-lista.abierta a:nth-child(2) { transition-delay: .10s; }
.menu-lista.abierta a:nth-child(3) { transition-delay: .14s; }
.menu-lista.abierta a:nth-child(4) { transition-delay: .18s; }
.menu-lista.abierta a:nth-child(5) { transition-delay: .22s; }
.menu-lista.abierta a:nth-child(6) { transition-delay: .26s; }
.menu-lista.abierta a:nth-child(7) { transition-delay: .30s; }
.menu-lista.abierta a:nth-child(8) { transition-delay: .34s; }
.menu-lista.abierta a:nth-child(9) { transition-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
  .menu-lista { transition: none; }
  .menu-lista a { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 560px) {
  /* en pantalla estrecha "Medicina estética" no cabe al lado de la otra:
     mejor dos barras iguales que dos pastillas descuadradas */
  .menu-esp { flex-direction: column; gap: 8px; }
  .menu-esp-btn { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------
   Fotos de producto (el escáner CBCT)
   La imagen venía con su propio cuadrado blanco pegado y se le
   veía el canto contra el panel. Ahora está recortada con fondo
   transparente, así que la máquina se apoya directamente sobre
   el panel claro y no hay ningún borde.
   ------------------------------------------------------------ */
.tech-media .marco--producto,
.hero-int-media--producto {
  background:
    radial-gradient(ellipse 62% 52% at 50% 42%, #ffffff, transparent 72%),
    linear-gradient(165deg, #fbfaf7 0%, #f3efe6 60%, #e9e3d6 100%);
}
.tech-media .marco--producto img,
.hero-int-media--producto img {
  object-fit: contain;
  padding: 26px 22px 34px;
  /* la sombra sigue la silueta de la máquina, no la del recuadro */
  filter: drop-shadow(0 16px 20px rgba(56,59,54,.22));
}
/* el velo dorado del marco normal caería encima de la máquina */
.tech-media .marco--producto::after { background: none; }

/* suelo bajo la máquina, para que no flote en el vacío */
.tech-media .marco--producto,
.hero-int-media--producto { position: relative; }
.tech-media .marco--producto::before,
.hero-int-media--producto::before {
  content: "";
  position: absolute; z-index: 1;
  left: 24%; right: 24%; bottom: 9%; height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(56,59,54,.20), transparent 72%);
  filter: blur(9px);
}
.tech-media .marco--producto img,
.hero-int-media--producto img { position: relative; z-index: 2; }

.hero-int-media--producto {
  /* el marco normal es apaisado y la máquina es vertical */
  aspect-ratio: 1 / 1;
}

@media (max-width: 860px) {
  .tech-media .marco--producto img,
  .hero-int-media--producto img { padding: 20px 16px 28px; }
}

/* ------------------------------------------------------------
   Menú móvil · especialidades desplegables
   Dos botones y, al tocar uno, se abre su lista de tratamientos.
   Va al final para no pelearse con las reglas de .menu-sub.
   ------------------------------------------------------------ */
.menu-sub { margin: 10px 0 14px; padding-left: 0; }

.menu-esp { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-esp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid rgba(226, 199, 128, .38);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .8);
  font-family: var(--texto);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .4s var(--e), color .4s var(--e), border-color .4s var(--e);
}
.menu-esp-btn small {
  display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 100px;
  background: rgba(226, 199, 128, .18);
  color: var(--oro);
  font-size: .68rem; letter-spacing: 0;
  transition: background .4s var(--e), color .4s var(--e);
}
.menu-esp-btn.on {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carbon);
}
.menu-esp-btn.on small { background: rgba(56, 59, 54, .18); color: var(--carbon); }

/* la lista que se despliega */
.menu-lista {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--e);
}
.menu-lista-in {
  display: flex; flex-wrap: wrap;
  column-gap: 18px;
  padding-top: 12px;
}
.menu-lista a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--e), transform .4s var(--e), color .3s;
}
.menu-lista.abierta a { opacity: 1; transform: none; }
.menu-lista.abierta a:nth-child(1) { transition-delay: .06s; }
.menu-lista.abierta a:nth-child(2) { transition-delay: .10s; }
.menu-lista.abierta a:nth-child(3) { transition-delay: .14s; }
.menu-lista.abierta a:nth-child(4) { transition-delay: .18s; }
.menu-lista.abierta a:nth-child(5) { transition-delay: .22s; }
.menu-lista.abierta a:nth-child(6) { transition-delay: .26s; }
.menu-lista.abierta a:nth-child(7) { transition-delay: .30s; }
.menu-lista.abierta a:nth-child(8) { transition-delay: .34s; }
.menu-lista.abierta a:nth-child(9) { transition-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
  .menu-lista { transition: none; }
  .menu-lista a { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 560px) {
  /* en pantalla estrecha "Medicina estética" no cabe al lado de la otra:
     mejor dos barras iguales que dos pastillas descuadradas */
  .menu-esp { flex-direction: column; gap: 8px; }
  .menu-esp-btn { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------
   Menú móvil · especialidades desplegables
   Dos botones y, al tocar uno, se abre su lista de tratamientos.
   Va al final para no pelearse con las reglas de .menu-sub.
   ------------------------------------------------------------ */
.menu-sub { margin: 10px 0 14px; padding-left: 0; }

.menu-esp { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-esp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid rgba(226, 199, 128, .38);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .8);
  font-family: var(--texto);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .4s var(--e), color .4s var(--e), border-color .4s var(--e);
}
.menu-esp-btn small {
  display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 100px;
  background: rgba(226, 199, 128, .18);
  color: var(--oro);
  font-size: .68rem; letter-spacing: 0;
  transition: background .4s var(--e), color .4s var(--e);
}
.menu-esp-btn.on {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--carbon);
}
.menu-esp-btn.on small { background: rgba(56, 59, 54, .18); color: var(--carbon); }

/* la lista que se despliega */
.menu-lista {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--e);
}
.menu-lista-in {
  display: flex; flex-wrap: wrap;
  column-gap: 18px;
  padding-top: 12px;
}
.menu-lista a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--e), transform .4s var(--e), color .3s;
}
.menu-lista.abierta a { opacity: 1; transform: none; }
.menu-lista.abierta a:nth-child(1) { transition-delay: .06s; }
.menu-lista.abierta a:nth-child(2) { transition-delay: .10s; }
.menu-lista.abierta a:nth-child(3) { transition-delay: .14s; }
.menu-lista.abierta a:nth-child(4) { transition-delay: .18s; }
.menu-lista.abierta a:nth-child(5) { transition-delay: .22s; }
.menu-lista.abierta a:nth-child(6) { transition-delay: .26s; }
.menu-lista.abierta a:nth-child(7) { transition-delay: .30s; }
.menu-lista.abierta a:nth-child(8) { transition-delay: .34s; }
.menu-lista.abierta a:nth-child(9) { transition-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
  .menu-lista { transition: none; }
  .menu-lista a { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 560px) {
  /* en pantalla estrecha "Medicina estética" no cabe al lado de la otra:
     mejor dos barras iguales que dos pastillas descuadradas */
  .menu-esp { flex-direction: column; gap: 8px; }
  .menu-esp-btn { width: 100%; justify-content: space-between; }
}


/* ------------------------------------------------------------
   La reconstrucción 3D del Inicio entra sola
   Primero se ve la foto del escáner; a los 4,5 segundos la
   reconstrucción se descubre de izquierda a derecha encima.
   ------------------------------------------------------------ */
.recon-flota {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-26px);
  opacity: 0;
}
.recon-flota.entra {
  clip-path: inset(0 0 0 0);
  transform: none;
  opacity: 1;
  transition:
    clip-path 1.15s cubic-bezier(.22,1,.36,1),
    transform 1.15s cubic-bezier(.22,1,.36,1),
    opacity .5s var(--e);
}

@media (prefers-reduced-motion: reduce) {
  .recon-flota { clip-path: none; transform: none; opacity: 1; }
}

@media (max-width: 520px) {
  /* en móvil la reconstrucción va apilada, no flotando: sin el
     desplazamiento lateral de la entrada, que la sacaba del borde */
  .recon-flota, .recon-flota.entra { transform: none; }
}

@media (max-width: 860px) {
  /* apilada: la entrada tiene que ser corta, no una espera */
  .recon-flota.entra {
    transition:
      clip-path .65s cubic-bezier(.22,1,.36,1),
      opacity .35s var(--e);
  }
}

/* ------------------------------------------------------------
   "Lo que hacemos" en móvil
   Sin vídeo ni panel lateral, la sección se quedaba en un bloque
   de color plano. Las mismas seis fotos del panel — que ya se
   descargaban aunque no se vieran — pasan a ser miniaturas.
   ------------------------------------------------------------ */
.ix-foto { display: none; }

@media (max-width: 860px) {
  .ix {
    grid-template-columns: 64px minmax(0, 1fr) 40px;
    gap: 5px 14px;
    padding: 16px 10px;
  }
  .ix-foto {
    display: block;
    grid-column: 1; grid-row: 1 / span 2;
    align-self: center;
    width: 64px; height: 64px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
  }
  .ix-foto img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  /* el número deja su sitio a la foto */
  .ix-n { display: none; }
  .ix-cab { grid-column: 2; grid-row: 1; align-items: baseline; }
  .ix-tit { font-size: clamp(1.05rem, 4.6vw, 1.4rem); }
  .ix-desc { grid-column: 2; grid-row: 2; }
  .ix-fl { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

  /* la trama del manual devuelve algo de textura al fondo liso */
  .sec-cine.sin-cine::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background-image:
      linear-gradient(to right, var(--oro) 62%, transparent 62%),
      linear-gradient(to bottom, var(--oro) 62%, transparent 62%);
    background-size: 15px 15px;
    background-blend-mode: multiply;
    opacity: .07;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 58%);
    mask-image: linear-gradient(to bottom, #000, transparent 58%);
  }
}

@media (max-width: 860px) {
  /* La sección mide más de 1.600 px de alto y solo 375 de ancho: si el
     vídeo la cubriera entera habría que ampliarlo x1,94 y se vería
     borroso. Ocupa solo la franja del titular, a tamaño real, y se
     desvanece hacia el fondo oscuro donde empieza la lista. */
  .cine {
    bottom: auto;
    height: 560px;
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
  }
  .cine-velo {
    background:
      linear-gradient(to bottom,
        rgba(24,26,23,.62) 0%,
        rgba(24,26,23,.52) 26%,
        rgba(40,43,38,.86) 52%,
        rgba(56,59,54,1) 72%);
  }
  .cine-velo::after { background: none; }
}

/* aviso bajo el formulario tras enviar por WhatsApp */
.form-aviso {
  margin-top: 16px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--tinta-70);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--oro-niebla);
  border: 1px solid var(--linea-oro);
}
.form-aviso a { color: var(--oro-hondo); font-weight: 600; text-decoration: underline; }
.pop-form .form-aviso { background: rgba(226,199,128,.16); border-color: rgba(226,199,128,.4); color: inherit; }