/* ============================================================================
   Secciones 3 a 10. El ritmo de fondos alterna como pide el brief:
   claro → cálido → NAVY → cálido → claro → NAVY → claro → degradado → pie.
   ========================================================================== */

.icono { width: 32px; height: 32px; display: block; flex: 0 0 auto; }
.cabecera-seccion { max-width: 44rem; margin-bottom: clamp(1.9rem, 5vw, 3.2rem); }

/* Borde en degradado reutilizable. Sólo si el navegador sabe recortar la
   máscara; si no, se queda el borde plano y nunca un rectángulo encima. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .borde-degradado { border-color: transparent; }
  .borde-degradado::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(155deg, var(--turquesa) 0%, rgba(86,184,171,.16) 45%, rgba(9,22,38,.3) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
}

/* ── 3. Áreas de especialización ─────────────────────────────────────────── */
.areas {
  position: relative; isolation: isolate;
  background: var(--papel);
  padding-block: clamp(3.4rem, 8vw, 6.5rem);
}
.areas-destacadas, .areas-secundarias {
  display: grid; gap: clamp(.9rem, 2.4vw, 1.4rem); grid-template-columns: 1fr;
}
.areas-secundarias { margin-top: clamp(.9rem, 2.4vw, 1.4rem); }
@media (min-width: 700px) {
  .areas-destacadas  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas-secundarias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .areas-destacadas  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ficha-area {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linea); border-radius: 22px;
  padding: clamp(1.35rem, 3vw, 1.8rem);
  box-shadow: var(--sombra-suave);
}
.ficha-area > * { position: relative; z-index: 1; }
.ficha-area-alto { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: clamp(1.5rem, 4vw, 2.3rem); }
.ficha-area-n {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; color: var(--tinta-suave);
}
.ficha-area-titulo { font-size: clamp(1.06rem, 2.9vw, 1.18rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.25; color: var(--navy); }
.ficha-area-bajada { margin-top: .6rem; color: var(--tinta-media); font-size: .93rem; line-height: 1.6; }
/* Una entrada del listado que se saca a su propia fila porque el cliente quiere
   que se vea antes que el resto, y que además lleva a su sección. */
.ficha-area-destacado {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  margin-top: clamp(.9rem, 2.2vw, 1.15rem);
  padding: .62rem .9rem; border-radius: 13px; text-decoration: none;
  background: linear-gradient(135deg, rgba(86,184,171,.18), rgba(35,127,124,.09));
  border: 1px solid rgba(86,184,171,.42);
  font-weight: 700; font-size: .94rem; letter-spacing: -.012em; color: var(--turquesa-texto);
  transition: border-color .22s ease, background-color .22s ease;
}
.ficha-area-destacado .flecha { transition: transform .22s var(--salto); }
@media (hover: hover) {
  .ficha-area-destacado:hover { border-color: var(--turquesa); }
  .ficha-area-destacado:hover .flecha { transform: translateX(3px); }
}

.ficha-area-lista {
  margin: clamp(1rem, 2.4vw, 1.3rem) 0 auto; padding: clamp(1rem, 2.4vw, 1.3rem) 0 0;
  border-top: 1px solid var(--linea-tenue); list-style: none; display: grid; gap: .45rem;
}
.ficha-area-lista li { position: relative; padding-left: 1rem; font-size: .91rem; color: var(--tinta-media); }
.ficha-area-lista li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px;
  border-radius: 999px; background: var(--turquesa);
}
.ficha-area-nota { margin-top: clamp(1.1rem, 2.6vw, 1.4rem); font-size: .79rem; color: var(--tinta-suave); line-height: 1.5; }

.ficha-mini {
  background: #fff; border: 1px solid var(--linea); border-radius: 20px;
  padding: clamp(1.15rem, 2.6vw, 1.45rem); box-shadow: var(--sombra-suave);
}
.ficha-mini-titulo { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; color: var(--navy); }
.ficha-mini-titulo .icono { width: 22px; height: 22px; }
.ficha-mini-bajada { margin-top: .7rem; color: var(--tinta-media); font-size: .91rem; line-height: 1.6; }
.ficha-mini-lista { margin-top: .85rem; font-size: .81rem; color: var(--tinta-suave); line-height: 1.6; }

.descargo { margin-top: clamp(1.9rem, 4vw, 2.6rem); font-size: .84rem; color: var(--tinta-suave); max-width: 46rem; line-height: 1.6; }

/* ── Piezas compartidas de las secciones oscuras ─────────────────────────── */
.titulo-claro { color: #fff; }
.parrafo-claro { margin-top: clamp(.9rem, 2.4vw, 1.1rem); color: rgba(255,255,255,.74); line-height: 1.65; font-size: clamp(.98rem, 2.6vw, 1.02rem); }
.parrafo-claro strong { color: #fff; font-weight: 600; }
.pildora-oscura { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); color: var(--turquesa-claro); }
.rotulo-claro { color: var(--turquesa-claro); }
.boton-claro { background: #fff; color: var(--navy); box-shadow: 0 12px 28px -14px rgba(0,0,0,.75); }
.enlace-claro {
  color: rgba(255,255,255,.82); font-weight: 500; font-size: .95rem; text-decoration: none;
  border-bottom: 1.5px solid transparent; padding-bottom: 2px;
}
.enlace-claro:hover { border-bottom-color: rgba(255,255,255,.6); }

/* ── 3 bis. Cirugía robótica ─────────────────────────────────────────────── */
/* Una sola imagen a sangre dentro de un panel redondeado, con el texto encima.
   Fondo de papel cálido para no encadenar dos secciones oscuras. */
.robotica { position: relative; background: var(--papel-calido); padding-block: clamp(3rem, 7vw, 5.5rem); }
.robotica-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px; color: #fff;
  background: var(--navy);
  min-height: clamp(30rem, 108vw, 34rem);
  display: flex; align-items: flex-end;
  box-shadow: 0 26px 60px -34px rgba(9,22,38,.7);
}
.robotica-fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%;
}
/* En móvil el velo cae de arriba abajo y el texto se apoya en el pie; en
   escritorio cruza de izquierda a derecha y deja los brazos a la vista. */
.robotica-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9,22,38,.35) 0%, rgba(9,22,38,.72) 42%, rgba(9,22,38,.95) 100%);
}
.robotica-texto { position: relative; padding: clamp(1.5rem, 5vw, 2.6rem); max-width: 34rem; }
.robotica-texto .pildora { margin-bottom: clamp(.9rem, 2.4vw, 1.2rem); }
.robotica-texto .parrafo-claro { color: rgba(255,255,255,.88); }
.robotica-texto .boton { margin-top: clamp(1.3rem, 3.2vw, 1.8rem); }

@media (min-width: 900px) {
  .robotica-panel { align-items: center; min-height: clamp(26rem, 40vw, 31rem); }
  .robotica-fondo { object-position: 72% 50%; }
  .robotica-panel::before {
    background: linear-gradient(100deg, rgba(9,22,38,.96) 0%, rgba(9,22,38,.88) 34%, rgba(9,22,38,.42) 66%, rgba(9,22,38,.12) 100%);
  }
  .robotica-texto { padding: clamp(2rem, 4vw, 3rem); }
}

/* ── 4. Conoce al doctor (navy) ──────────────────────────────────────────── */
.doctor {
  position: relative; isolation: isolate; color: #fff;
  background: var(--navy);
  padding-block: clamp(3.6rem, 8vw, 6.5rem);
}
.doctor-fondo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 42% at 80% 6%, rgba(86,184,171,.20) 0%, rgba(86,184,171,0) 70%),
    radial-gradient(52% 40% at 6% 88%, rgba(35,127,124,.24) 0%, rgba(35,127,124,0) 72%);
}
.doctor-rejilla { display: grid; gap: clamp(1.9rem, 5vw, 3.5rem); }
@media (min-width: 1000px) {
  .doctor-rejilla { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; }
}
.doctor-foto { position: relative; margin: 0; max-width: 30rem; width: 100%; }
.doctor-foto img { width: 100%; border-radius: 22px; }
.doctor-tarjeta {
  position: absolute; left: clamp(.8rem, 3vw, 1.5rem); right: clamp(.8rem, 3vw, 1.5rem);
  bottom: clamp(.8rem, 3vw, 1.3rem);
  display: grid; gap: .15rem;
  background: rgba(9,22,38,.82); border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px; padding: .7rem .95rem;
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .doctor-tarjeta { background: rgba(9,22,38,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.doctor-tarjeta-titulo { font-weight: 700; font-size: .9rem; letter-spacing: -.01em; }
.doctor-tarjeta-pie { font-size: .8rem; color: rgba(255,255,255,.66); line-height: 1.35; }
.cita { margin: clamp(1.4rem, 3.4vw, 2rem) 0 0; padding-left: clamp(.9rem, 2.4vw, 1.4rem); border-left: 2px solid var(--turquesa); }
.cita p { font-size: clamp(1.05rem, 3.1vw, 1.3rem); line-height: 1.5; color: rgba(255,255,255,.93); }
.cita cite {
  display: block; margin-top: .85rem; font-style: normal;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--turquesa-claro);
}
.doctor-texto .boton { margin-top: clamp(1.5rem, 3.4vw, 2rem); }

/* ── 5. Cómo trabajo (papel cálido) ──────────────────────────────────────── */
.trabajo { position: relative; isolation: isolate; background: var(--papel-calido); padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.trabajo-rejilla { display: grid; gap: clamp(1.9rem, 4.5vw, 3rem); }
@media (min-width: 1000px) {
  .trabajo-rejilla { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
}
.pasos {
  list-style: none; margin: 0; padding: 0; display: grid;
  background: #fff; border: 1px solid var(--linea); border-radius: 22px; overflow: hidden;
  box-shadow: var(--sombra-suave);
}
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paso { padding: clamp(1.3rem, 3vw, 1.9rem); border-top: 1px solid var(--linea-tenue); }
.paso:first-child { border-top: 0; }
@media (min-width: 760px) {
  .paso { border-top: 0; border-left: 1px solid var(--linea-tenue); }
  .paso:first-child { border-left: 0; }
}
.paso-n { display: block; font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #B4DED6; }
.paso-titulo { margin-top: clamp(.7rem, 2vw, 1rem); font-size: 1rem; font-weight: 700; letter-spacing: -.018em; color: var(--navy); }
.paso-texto { margin-top: .5rem; color: var(--tinta-media); font-size: .91rem; line-height: 1.6; }

/* ── 6. Tecnología y procedimientos ──────────────────────────────────────── */
.tecno { position: relative; isolation: isolate; background: var(--papel); padding-block: clamp(3.4rem, 8vw, 6rem); }
.tecno-rejilla { display: grid; gap: clamp(2.2rem, 5vw, 3.5rem); }
@media (min-width: 1000px) {
  .tecno-rejilla { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
}
.tecno-medios { position: relative; width: 100%; max-width: 24rem; margin-inline: auto; padding: 0 clamp(1.2rem, 4vw, 2.2rem) clamp(1.6rem, 5vw, 2.6rem) 0; }
.tecno-video {
  position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  aspect-ratio: 9 / 16; background: #0E1D26; box-shadow: var(--sombra-media);
}
.tecno-video video { width: 100%; height: 100%; object-fit: cover; }
.tecno-rotulo {
  position: absolute; top: .95rem; left: 1.05rem; right: 1.05rem;
  font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
/* Control discreto abajo a la izquierda: el vídeo se reproduce solo, así que
   esto es para poder pararlo, no para arrancarlo. */
.tecno-control {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(9,22,38,.5); border: 1px solid rgba(255,255,255,.22); color: #fff;
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .tecno-control { background: rgba(9,22,38,.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.tecno-control:hover { background: rgba(9,22,38,.7); }
.tecno-control .icono-play { margin-left: 2px; }
/* Qué icono se ve lo decide una clase, no el atributo `hidden`: `hidden` no
   existe como propiedad en un <svg>, así que asignarlo desde JavaScript no
   ocultaba nada y se veían los dos iconos superpuestos. */
.tecno-control { grid-template-areas: 'icono'; }
.tecno-control svg { grid-area: icono; }
.tecno-control .icono-pausa { display: none; }
.tecno-control.sonando .icono-play { display: none; }
.tecno-control.sonando .icono-pausa { display: block; }
.tecno-eco {
  position: absolute; right: 0; bottom: 0;
  width: clamp(7.5rem, 26vw, 11rem); height: auto;
  border-radius: 18px; border: 5px solid var(--papel); box-shadow: var(--sombra-media);
}
.definiciones {
  margin-top: clamp(1.4rem, 3vw, 1.9rem); background: #fff;
  border: 1px solid var(--linea); border-radius: 22px; overflow: hidden; box-shadow: var(--sombra-suave);
}
.definicion { padding: clamp(1.05rem, 2.6vw, 1.45rem); border-top: 1px solid var(--linea-tenue); }
.definicion:first-child { border-top: 0; }
.definicion dt { font-weight: 700; font-size: 1rem; letter-spacing: -.018em; color: var(--navy); }
.definicion dd { margin: .45rem 0 0; color: var(--tinta-media); font-size: .91rem; line-height: 1.6; }

/* ── 7. El Centro (navy, centrado) ───────────────────────────────────────── */
.centro { position: relative; isolation: isolate; background: var(--navy); color: #fff; padding-block: clamp(3.6rem, 8vw, 6.5rem); }
.centro-fondo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 36% at 50% 2%, rgba(86,184,171,.24) 0%, rgba(86,184,171,0) 68%);
}
.centro-caja { display: flex; flex-direction: column; align-items: center; text-align: center; }
.centro-logo { width: clamp(6rem, 17vw, 8rem); height: auto; margin: clamp(1.3rem, 3.4vw, 2rem) 0 clamp(1.1rem, 3vw, 1.6rem); }
.centro-caja .titulo-seccion { max-width: 20em; }
.centro-parrafo { max-width: 38em; }
.etiquetas { list-style: none; padding: 0; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.etiquetas li {
  padding: .5rem .95rem; border-radius: 999px; font-size: .84rem; line-height: 1.3;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.84);
}
.centro-datos {
  margin: clamp(2rem, 5vw, 3rem) 0 0; width: 100%; max-width: 44rem; text-align: left;
  display: grid; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; overflow: hidden;
}
@media (min-width: 720px) { .centro-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.centro-datos > div { padding: clamp(1.05rem, 2.6vw, 1.4rem); border-top: 1px solid rgba(255,255,255,.1); }
.centro-datos > div:first-child { border-top: 0; }
@media (min-width: 720px) {
  .centro-datos > div { border-top: 0; border-left: 1px solid rgba(255,255,255,.1); }
  .centro-datos > div:first-child { border-left: 0; }
}
.centro-datos dd { margin: .5rem 0 0; color: rgba(255,255,255,.86); font-size: .93rem; line-height: 1.5; }
.dato-enlace {
  display: inline-flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 2px;
}
.dato-enlace svg { align-self: center; color: var(--turquesa-claro); flex: 0 0 auto; }
.dato-enlace:hover { border-bottom-color: var(--turquesa-claro); }
.centro-datos a { text-decoration: none; }
.centro-datos a:hover { text-decoration: underline; }

/* ── 8. Preguntas frecuentes ─────────────────────────────────────────────── */
.preguntas { position: relative; isolation: isolate; background: var(--papel); padding-block: clamp(3.4rem, 8vw, 6rem); }
.preguntas-rejilla { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 1000px) {
  .preguntas-rejilla { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; }
}
.pregunta { border-top: 1px solid var(--linea); }
.pregunta:last-child { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(.95rem, 2.4vw, 1.25rem) 0;
  font-size: clamp(.99rem, 2.7vw, 1.05rem); font-weight: 500; letter-spacing: -.018em; color: var(--navy);
}
.pregunta summary:hover { color: var(--turquesa-hondo); }
.pregunta-signo {
  position: relative; display: block; flex: 0 0 auto; width: 26px; height: 26px;
  border-radius: 999px; border: 1px solid var(--linea);
  transition: transform .25s var(--salto), background-color .25s ease, border-color .25s ease;
}
.pregunta-signo::before, .pregunta-signo::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--turquesa-hondo);
  border-radius: 2px; transform: translate(-50%, -50%);
}
.pregunta-signo::before { width: 11px; height: 1.6px; }
.pregunta-signo::after  { width: 1.6px; height: 11px; }
.pregunta[open] .pregunta-signo { transform: rotate(45deg); background: var(--turquesa); border-color: transparent; }
.pregunta[open] .pregunta-signo::before, .pregunta[open] .pregunta-signo::after { background: #fff; }
.pregunta-cuerpo { padding-bottom: clamp(.95rem, 2.4vw, 1.3rem); max-width: 46em; }
.pregunta-cuerpo p { color: var(--tinta-media); font-size: .94rem; line-height: 1.62; }

/* ── 9. Cierre — agendar (degradado turquesa → navy) ─────────────────────── */
.cierre {
  position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(118deg, #1B706C 0%, #134744 34%, #0C2130 68%, var(--navy) 100%);
  padding-block: clamp(3.4rem, 8vw, 5.5rem);
}
.cierre-rejilla { display: grid; gap: clamp(2.2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .cierre-rejilla { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); } }
.cierre-acciones { margin-top: clamp(1.4rem, 3.2vw, 1.9rem); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.9rem, 2.4vw, 1.4rem); }
.cierre-pie { margin-top: clamp(1.5rem, 3.6vw, 2.2rem); font-size: .81rem; color: rgba(255,255,255,.62); line-height: 1.6; max-width: 40em; }
.cierre-retrato { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.arco-oscuro {
  --arco-forma: 274 / 340; --figura-alto: 97%; --figura-pie: 0%;
  width: min(17rem, 70vw);
  background: radial-gradient(78% 62% at 50% 24%, #3A4E56 0%, #1A2833 60%, #0B141F 100%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}
.cierre-nombre { display: block; font-weight: 600; font-size: .97rem; text-align: center; }
.cierre-esp {
  display: block; margin-top: .4rem; padding-top: .35rem; text-align: center;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--turquesa-claro);
}

/* ── 10. Pie de página ───────────────────────────────────────────────────── */
.pie { background: var(--papel); padding-block: clamp(2.6rem, 6vw, 4rem) clamp(1.6rem, 4vw, 2.2rem); }
.pie-rejilla { display: grid; gap: clamp(1.7rem, 4vw, 3rem); }
@media (min-width: 820px) { .pie-rejilla { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.pie-marca img { width: clamp(5.5rem, 15vw, 8.5rem); height: auto; }
.pie-marca p { margin-top: 1.05rem; color: var(--tinta-media); font-size: .91rem; line-height: 1.65; max-width: 32em; }
.pie-columna ul { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .6rem; }
.pie-columna a { text-decoration: none; color: var(--tinta-media); font-size: .92rem; }
.pie-columna a:hover { color: var(--navy); }
.pie-columna strong { color: var(--navy); font-weight: 600; }
.pie-legal {
  margin-top: clamp(1.9rem, 4vw, 2.8rem); padding-top: clamp(1.15rem, 2.6vw, 1.6rem);
  border-top: 1px solid var(--linea); display: grid; gap: .55rem;
  font-size: .79rem; color: var(--tinta-suave); line-height: 1.6;
}
@media (min-width: 820px) {
  .pie-legal { grid-template-columns: 1fr auto; align-items: center; }
  .pie-legal p:last-child { text-align: right; }
}