/* =====================================================================
   REDISEÑO "Editorial Noir" — capa sobre styles.css
   Se carga DESPUÉS de styles.css. Para volver al diseño anterior basta con
   quitar el <link> a este archivo (o usar la copia RESPALDO-pagina-actual-*).
   ===================================================================== */

:root {
  /* Superficies: un solo matiz (azul tinta), nunca negro puro */
  --black: #060910;
  --ink: #080c16;
  --navy-900: #0b1222;
  --navy-800: #111c33;
  --navy-700: #1a2b4d;
  /* Un único acento: azul acero desaturado */
  --blue-600: #2b4f8e;
  --blue-500: #3f68b0;
  --blue-300: #a3bde3;
  --text: #e9eef6;
  --text-muted: #9ba8bd;
  --line: rgba(163, 189, 227, .12);
  --hair: rgba(255, 255, 255, .07);

  --font-body: "Geist", "Segoe UI", system-ui, sans-serif;

  --radius: 18px;
  --radius-lg: 28px;
  --bezel: 6px;
  /* Sombras teñidas del mismo azul del fondo (no negro genérico) */
  --shadow: 0 30px 80px -24px rgba(2, 8, 24, .85), 0 2px 0 rgba(255,255,255,.02) inset;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

body { letter-spacing: -.003em; }
p, li, blockquote { text-wrap: pretty; }
h1, h2, h3, .h2 { text-wrap: balance; }

/* ---------- Textura: grano de película fijo (no se mueve con el scroll) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía ---------- */
.h2 {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem);
  line-height: 1.02; letter-spacing: -.015em; font-weight: 600;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(163,189,227,.05);
  font-size: .68rem; font-weight: 500; letter-spacing: .2em; color: var(--blue-300);
}
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-300); box-shadow: 0 0 10px var(--blue-300); }
.muted, .about__text p, .faq details p { color: var(--text-muted); }

/* ---------- Botones: píldora con flecha dentro de su propio círculo ---------- */
.btn {
  min-height: 52px; padding: 0 26px; gap: 12px;
  font-weight: 500; letter-spacing: .005em;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--primary {
  background: linear-gradient(180deg, #2f5596, #24467f);
  border-color: rgba(163,189,227,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 30px -12px rgba(43,79,142,.7);
}
.btn--primary:hover { background: linear-gradient(180deg, #3762aa, #2b4f8e); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 18px 38px -12px rgba(63,104,176,.75); }
.btn--ghost { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.03); }
.btn--ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.07); }
.btn:has(svg) { padding-right: 7px; }
.btn svg {
  flex: none; box-sizing: content-box; width: 15px; height: 15px; padding: 10px;
  border-radius: 50%; background: rgba(255,255,255,.12);
  transition: transform .5s var(--spring), background-color .4s var(--ease);
}
.btn:hover svg { transform: translate(2px, -1px) scale(1.06); background: rgba(255,255,255,.2); }
.btn--lg { min-height: 58px; padding: 0 30px; }
.btn--lg:has(svg) { padding-right: 8px; }

/* ---------- Menú: barra de vidrio flotante (escritorio) ---------- */
@media (min-width: 1024px) {
  .header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; pointer-events: none; }
  .header.is-scrolled { background: transparent; border: 0; }
  .header__inner {
    pointer-events: auto;
    width: min(1240px, 100% - 48px); height: 66px; margin: 14px auto 0; padding: 0 10px 0 22px;
    border-radius: 999px; border: 1px solid var(--hair);
    background: rgba(8, 12, 22, .55);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 50px -20px rgba(0,0,0,.7);
    transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
  }
  .header.is-scrolled .header__inner { background: rgba(8, 12, 22, .82); }
  .nav__cta { min-height: 46px; }
  .nav__link { font-size: .95rem; color: #c3cddd; }
  .dropdown { border-radius: 20px; padding: 8px; background: rgba(11,18,34,.96); border-color: var(--hair); }
  .dropdown a { border-radius: 12px; }
}

/* ---------- Portada ---------- */
.hero { background: radial-gradient(120% 90% at 0% 100%, #0d1830 0%, var(--black) 55%); }
.hero::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  width: 60vw; height: 60vw; left: -20vw; top: 10%;
  background: radial-gradient(closest-side, rgba(63,104,176,.18), transparent);
}
.hero__content { z-index: 2; }
.hero__title { font-size: clamp(3.4rem, 2rem + 6.2vw, 7rem); letter-spacing: -.025em; line-height: .95; }
.hero__fullname { margin-top: 18px; font-weight: 400; font-size: clamp(.78rem, .7rem + .4vw, .95rem); letter-spacing: .32em; }
.hero__lead { font-size: 1.1rem; line-height: 1.7; color: #c9d2e0; max-width: 54ch; }
.hero__media img { filter: saturate(.85) contrast(1.04); }

/* ---------- Franja de credenciales: vidrio con divisiones finas ---------- */
.band {
  padding: 8px; gap: 0;
  background: rgba(17, 28, 51, .55);
  border: 1px solid var(--hair);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, var(--shadow);
}
.band li { padding: 22px 24px; border-radius: 20px; transition: background-color .5s var(--ease); }
.band li + li { box-shadow: -1px 0 0 var(--hair); }
.band li:hover { background: rgba(255,255,255,.035); }
.band svg { background: rgba(163,189,227,.1); stroke: var(--blue-300); border-radius: 50%; }
.band__k { color: var(--text-muted); font-size: .68rem; letter-spacing: .18em; }
.band__v { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.005em; }
@media (max-width: 1023px) { .band li + li { box-shadow: none; } }

/* ---------- Ritmo: más aire entre secciones ---------- */
.section { padding: clamp(96px, 12vw, 168px) 0 clamp(104px, 13vw, 184px); }

/* ---------- "Doble bisel": marco exterior fino + núcleo interior ---------- */
.mosaic figure, .about__photo, .contact__photo, .pqr__video {
  padding: var(--bezel); background: rgba(255,255,255,.035);
  border: 1px solid var(--hair); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.mosaic figure { border-radius: var(--radius); }
.mosaic figure img, .about__photo img, .contact__photo img, .pqr__video video {
  border-radius: calc(var(--radius-lg) - var(--bezel));
}
.mosaic figure img { border-radius: calc(var(--radius) - var(--bezel)); }
.mosaic { gap: 14px; }

/* ---------- Quién soy ---------- */
.exp-badge {
  border-radius: 22px; border: 1px solid rgba(163,189,227,.22);
  background: rgba(17,28,51,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow);
}
.timeline__dot { background: var(--blue-300); box-shadow: 0 0 0 5px rgba(163,189,227,.12), 0 0 16px rgba(163,189,227,.5); }
.founder {
  border-radius: var(--radius-lg); border: 1px solid var(--hair);
  background: linear-gradient(160deg, rgba(26,43,77,.6), rgba(11,18,34,.6));
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.members {
  border-radius: 34px; border: 1px solid var(--hair); padding: clamp(28px, 4vw, 56px);
  background: radial-gradient(80% 120% at 100% 0%, rgba(43,79,142,.18), transparent 60%), rgba(11,18,34,.5);
}
.members__list li {
  padding: var(--bezel); gap: 0; border-radius: 24px;
  background: rgba(255,255,255,.03); border: 1px solid var(--hair);
}
.members__list li > span:last-child { padding: 18px 16px 14px; }
.members__list .members__logo { border-radius: 18px; }
.members__quote { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.01em; }

/* ---------- Bloque "Procedimientos" del inicio ---------- */
.proc-teaser {
  padding: var(--bezel); gap: var(--bezel); border-radius: 34px; border: 1px solid var(--hair);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.proc-teaser__text { border-radius: 28px; background: radial-gradient(90% 120% at 0% 100%, rgba(43,79,142,.28), transparent 60%), var(--navy-900); }
.proc-teaser__img { border-radius: 28px; }
.proc-teaser__title { font-size: clamp(3.2rem, 1.6rem + 5.4vw, 6.2rem); letter-spacing: -.025em; }

/* ---------- Tarjetas de procedimientos (doble bisel + luz que sigue al cursor) ---------- */
.feat {
  position: relative; isolation: isolate;
  padding: var(--bezel); border-radius: 30px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  transition: transform .7s var(--ease), border-color .5s var(--ease);
}
.feat::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(163,189,227,.16), transparent 45%);
}
.feat:hover::before { opacity: 1; }
.feat:hover { transform: translateY(-6px); border-color: rgba(163,189,227,.22); }
.feat__img { border-radius: 24px; }
.feat__body { padding: 22px 20px 20px; }
.feat__body > h3, .feat h4 { font-size: 1.95rem; letter-spacing: -.012em; }
.feat__tech { font-size: .68rem; letter-spacing: .16em; font-weight: 500; }
.feat__icon { box-shadow: 0 10px 24px -8px rgba(2,8,24,.6); }
.featured { gap: 22px; }

/* ---------- Frase ---------- */
.quote blockquote { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); letter-spacing: -.015em; line-height: 1.12; }

/* ---------- Preguntas frecuentes ---------- */
.faq details { border-bottom: 1px solid var(--hair); transition: background-color .5s var(--ease); }
.faq summary { padding-top: 24px; padding-bottom: 24px; font-size: 1.08rem; font-weight: 500; }
.faq summary::after {
  content: ""; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); right: 0;
  background:
    linear-gradient(var(--blue-300), var(--blue-300)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--blue-300), var(--blue-300)) center / 1.5px 11px no-repeat;
  transition: transform .6s var(--spring), background-color .4s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); background-color: rgba(163,189,227,.08); }
.faq summary { padding-right: 48px; }

/* ---------- Contacto y pie ---------- */
.contact { background: radial-gradient(90% 80% at 100% 0%, rgba(43,79,142,.16), transparent 60%), var(--black); }
.contact__list svg, .founder__icon { border-radius: 50%; background: rgba(163,189,227,.08); }
.footer { border-top: 1px solid var(--hair); background: var(--black); }
.footer__social a { border-color: var(--hair); transition: transform .5s var(--spring), border-color .4s var(--ease), background-color .4s var(--ease); }
.footer__social a:hover { transform: translateY(-3px); }

/* ---------- WhatsApp ---------- */
.wa-float { background: linear-gradient(180deg, #2f5596, #24467f); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 40px -10px rgba(2,8,24,.9); }

/* ---------- Ventana de procedimiento ---------- */
.proc-dialog__inner { border-radius: 30px; }

/* ---------- Entradas al hacer scroll: subida + desenfoque que se resuelve ---------- */
.reveal { transform: translateY(40px); filter: blur(8px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-visible { filter: none; }

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  .section { padding: 84px 0 92px; }
  .band { padding: 6px; }
  .band li { padding: 16px 14px; }
  .proc-teaser { border-radius: 26px; }
  .proc-teaser__text, .proc-teaser__img { border-radius: 20px; }
  .feat { border-radius: 24px; }
  .feat__img { border-radius: 18px; }
  .members { border-radius: 26px; }
  .feat:hover { transform: none; }
}

/* =====================================================================
   v2 · taste-skill + web-design-guidelines + referencia Bugatti (design-md-library)
   ===================================================================== */
:root { color-scheme: dark; --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace; }
html { -webkit-tap-highlight-color: rgba(163,189,227,.15); }
@media (pointer: fine) { html { overscroll-behavior: none; } }
.proc-dialog, .proc-dialog__inner { overscroll-behavior: contain; }

/* Etiquetas: mono espaciada (lenguaje Bugatti), sin punto decorativo (taste 9.F) */
.eyebrow::before { content: none; }
.eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; padding: 7px 14px; }
/* Máximo 1 etiqueta cada 3 secciones: portada, Quién soy y Preguntas la conservan */
.proc-teaser .eyebrow, .contact .eyebrow { display: none; }
.nav__link { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav__link { font-size: .72rem; letter-spacing: .1em; } }
.btn { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.band__k, .feat__tech, .timeline__year, .members__title, .about__text .founder__k, .exp-badge__txt {
  font-family: var(--font-mono); font-weight: 400;
}
.band__k { font-size: .64rem; letter-spacing: .1em; white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .band__k { white-space: normal; } }
.hero__fullname { font-family: var(--font-mono); font-size: clamp(.72rem, .66rem + .3vw, .86rem); }

/* "Antes y después": ya no se superpone a la foto (taste 9.F); va como texto junto a la tarjeta */
.feat__badge {
  position: static; align-self: flex-start; margin: 16px 0 0; padding: 0; border: 0; background: none;
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 .7rem var(--font-mono); letter-spacing: .16em; color: var(--blue-300);
}
.feat__badge::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.feat__badge + .feat__more-btn { margin-top: 10px; }

/* Cuadrícula uniforme (pedido explícito del cliente: todas las tarjetas del mismo tamaño).
   Mismo ancho (columnas minmax), mismo alto (filas 1fr), misma proporción de foto,
   y la etiqueta + el enlace siempre pegados al pie para que queden alineados entre tarjetas. */
.procedures--page .featured { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; }
.procedures--page .feat { height: 100%; min-width: 0; }
.procedures--page .feat__img { aspect-ratio: 4 / 3; }
.procedures--page .feat__body { flex: 1; }
.procedures--page .feat__badge { margin-top: auto; padding-top: 16px; }
@media (min-width: 1024px) {
  /* 10 tarjetas en 3 columnas: la última queda sola, centrada y del mismo ancho */
  .procedures--page .feat:last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .procedures--page .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* Celular: una columna; todas con el mismo alto para que se vean idénticas */
  .procedures--page .featured { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  .procedures--page .feat__img { aspect-ratio: 16 / 10; }
}

/* Bloque "Socio fundador": logo oficial de IQ InterQuirófanos (con su sello) sobre placa blanca,
   como los logos de las membresías, para respetar sus colores */
.founder { grid-template-columns: minmax(0, 1fr) auto; row-gap: 16px; }
.founder__logo {
  grid-column: 1 / -1; justify-self: start; display: block;
  padding: 10px 16px; border-radius: 14px; background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.founder__logo img { display: block; width: 220px; max-width: 100%; height: auto; }
@media (max-width: 1279px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder__btn { grid-column: 1; }
}

/* Parallax con animaciones ligadas al scroll (sin listeners de scroll en JS) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media { animation: heroDrift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes heroDrift { to { transform: translate3d(0, 18%, 0); } }
    .quote > picture > img { animation: quoteDrift linear both; animation-timeline: view(); }
    @keyframes quoteDrift { from { transform: translate3d(0, 50px, 0); } to { transform: translate3d(0, -50px, 0); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; }
  .feat, .btn svg, .faq summary::after { transition: none; }
}