/* ==========================================================================
   mineurocirujano.com — Dr. Jorge Yáñez Castro
   Sistema de diseño: editorial, clínico, sobrio.
   Un solo archivo. Sin dependencias, sin frameworks, sin build step.
   --------------------------------------------------------------------------
   ÍNDICE
   01. Tokens          06. Hero                11. FAQ (<details>)
   02. Reset           07. Bloque de respuesta 12. Formulario
   03. Utilidades      08. Dossier / listas    13. Mapa (facade)
   04. Botones         09. Stats               14. Footer
   05. Header + nav    10. Bandas CTA          15. Barra móvil / motion
   ========================================================================== */

/* ---------- 01. Tokens ---------- */
:root{
  /* Color — muestreado del logotipo oficial */
  --white:      #FFFFFF;
  --paper:      #FAFBFC;   /* fondo predominante, no blanco puro */
  --mist:       #EDF6FA;   /* tinte azul médico, fondo de sección */
  --blue-tint:  #EAF4F9;
  --line:       #DCE6EC;   /* filete */
  --ink:        #14181C;   /* casi negro, títulos */
  --slate:      #49535E;   /* cuerpo de texto */
  --slate-soft: #6F7C88;   /* pies, metadatos */
  --blue:       #186E9E;   /* azul de marca (AA sobre blanco) */
  --blue-deep:  #10527A;   /* hover */
  --cyan:       #009FCD;   /* cian exacto del logotipo */
  --alert:      #A1331F;   /* errores y urgencia */

  /* Tipografía */
  --font-display: 'Manrope', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:    'Inter', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  /* El wordmark es el archivo real del logotipo (imagen), no una fuente. */

  /* Escala fluida */
  --step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.45rem + 1.5vw, 2.4rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.4vw, 3.25rem);
  --step-5:  clamp(2.35rem, 1.7rem + 3.4vw, 4.25rem);

  /* Layout */
  --maxw: 1160px;
  --measure: 38em;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
  --speed: 200ms;
  --header-h: 66px;
}

/* Métricas de respaldo: evitan salto de layout (CLS) mientras
   cargan las webfonts, que se piden de forma asíncrona. */
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  ascent-override:90%; descent-override:22.4%; line-gap-override:0%; size-adjust:107%;
}
@font-face{
  font-family:'Manrope Fallback';
  src:local('Arial');
  ascent-override:104%; descent-override:29%; line-gap-override:0%; size-adjust:100%;
}

/* ---------- 02. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem);}
body{
  margin:0;background:var(--paper);color:var(--slate);
  font-family:var(--font-body),'Inter Fallback',Arial,sans-serif;
  font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
figure{margin:0;}
img,svg{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;}
button{font-family:inherit;}
h1,h2,h3,h4,h5{
  font-family:var(--font-display),'Manrope Fallback',Arial,sans-serif;
  color:var(--ink);font-weight:700;line-height:1.15;margin:0 0 .6em;letter-spacing:-.012em;
  text-wrap:balance;
}
h1{font-size:var(--step-5);font-weight:800;letter-spacing:-.022em;}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}
p{margin:0 0 1.1em;max-width:var(--measure);text-wrap:pretty;}
p:last-child{margin-bottom:0;}
strong{color:var(--ink);font-weight:600;}
::selection{background:var(--blue);color:#fff;}

/* ---------- 03. Utilidades ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.narrow{max-width:46rem;}
.section{padding-block:clamp(3rem,7vw,5.75rem);}
.section--tint{background:var(--mist);}
.section--tight{padding-block:clamp(2rem,4vw,3rem);}
.eyebrow{
  display:block;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin-bottom:.7rem;
}
.lede{font-size:var(--step-1);color:var(--slate);max-width:34em;}
.section-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem);}
.section-head h2{margin-bottom:.35em;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:absolute;top:-60px;left:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:300;transition:top var(--speed);}
.skip-link:focus{top:0;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}
.note{font-size:var(--step--1);color:var(--slate-soft);max-width:42em;}

/* Firma visual: línea de sinapsis como separador */
.motif{display:flex;justify-content:center;padding:clamp(1.5rem,4vw,2.5rem) 0;color:var(--blue);opacity:.5;}
.motif svg{width:120px;height:28px;}

/* ---------- 04. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;text-align:center;
  transition:background var(--speed),color var(--speed),border-color var(--speed),transform var(--speed);
}
.btn:active{transform:translateY(1px);}
.btn svg{width:17px;height:17px;flex:none;}
.btn--primary{background:var(--blue);color:#fff;}
.btn--primary:hover{background:var(--blue-deep);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--ink);}
.btn--on-dark{border-color:rgba(255,255,255,.45);color:#fff;background:transparent;}
.btn--on-dark:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.btn--wa{background:#1FA855;color:#fff;}
.btn--wa:hover{background:#188441;}
.btn--sm{padding:.6rem 1.1rem;}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;}

/* Enlace con flecha */
.arrow-link{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--1);font-weight:700;color:var(--blue);}
.arrow-link svg{width:14px;height:14px;transition:transform var(--speed);}
.arrow-link:hover svg{transform:translateX(3px);}

/* ---------- 05. Header + nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,251,252,.94);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__bar{display:flex;align-items:center;gap:1rem;justify-content:space-between;min-height:var(--header-h);}
/* Lockup de marca: ícono real + wordmark real, ambos del logotipo oficial. */
.brand{display:flex;align-items:center;gap:.6rem;flex:none;}
.brand__icon{height:clamp(26px,3vw,32px);width:auto;}
.brand__word{height:clamp(15px,1.7vw,18px);width:auto;}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.5vw,1.75rem);}
.nav ul{list-style:none;display:flex;align-items:center;gap:inherit;flex-direction:inherit;}
.nav a{font-size:.85rem;font-weight:600;color:var(--slate);position:relative;padding:.3rem 0;white-space:nowrap;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue);}
.header-cta{display:flex;align-items:center;gap:.6rem;flex:none;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.45rem;cursor:pointer;color:var(--ink);}
.nav-toggle svg{width:22px;height:22px;}

@media (max-width:1040px){
  .nav{
    position:fixed;inset:var(--header-h) 0 0 0;background:var(--paper);
    flex-direction:column;align-items:flex-start;padding:2rem var(--pad) 4rem;gap:1.25rem;
    transform:translateY(-10px);opacity:0;pointer-events:none;overflow:auto;
    transition:opacity var(--speed),transform var(--speed);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto;}
  .nav ul{flex-direction:column;align-items:flex-start;gap:1.25rem;width:100%;}
  .nav a{font-size:1.1rem;}
  .nav-toggle{display:inline-flex;}
  .header-cta .btn--desktop{display:none;}
}

/* ---------- 06. Hero ---------- */
.hero{position:relative;min-height:clamp(540px,82vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 38%;}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,14,22,.15) 0%,rgba(8,14,22,.42) 45%,rgba(6,11,18,.9) 100%);}
.hero__content{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,9vw,5rem) clamp(2.25rem,6vw,3.5rem);}
.hero__inner{max-width:44rem;}
.hero .eyebrow{color:#8FE3EF;}
.hero h1{color:#fff;margin-bottom:.45em;}
.hero__sub{font-size:var(--step-1);color:rgba(255,255,255,.88);max-width:32em;margin-bottom:1.6em;}
.hero__cta .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
@media (max-width:640px){
  .hero{min-height:clamp(470px,88vh,620px);}
  .hero__bg img{object-position:68% 30%;}
  .hero__cta .btn{flex:1 1 100%;}
}

/* ---------- 07. Bloque de respuesta (AEO) + urgencia ---------- */
.answer{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--radius);padding:clamp(1.5rem,3.5vw,2.25rem);
}
.answer h2{font-size:var(--step-2);margin-bottom:.5em;}
.answer dl{display:grid;gap:.85rem;margin:1.4rem 0 0;}
.answer dt{font-weight:700;color:var(--ink);font-size:var(--step--1);letter-spacing:.04em;text-transform:uppercase;}
.answer dd{margin:.15rem 0 0;}

.urgency{background:#2A1512;color:#fff;}
.urgency .container{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding-block:1.1rem;}
.urgency p{margin:0;max-width:52em;font-size:var(--step--1);color:rgba(255,255,255,.9);}
.urgency strong{color:#FFB4A2;font-weight:700;}
.urgency .btn{margin-left:auto;}

/* ---------- 08. Dossier y listas ---------- */
.dossier-list{border-top:1px solid var(--line);}
.dossier{
  display:grid;grid-template-columns:3.5rem 1fr;gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.6rem,3.5vw,2.4rem);border-bottom:1px solid var(--line);
}
.dossier__num{
  font-family:var(--font-display),'Manrope Fallback',Arial,sans-serif;
  font-size:var(--step-1);font-weight:800;color:var(--blue);opacity:.55;line-height:1.2;
}
.dossier__body h3{font-size:var(--step-2);margin-bottom:.3em;}
.dossier__body p{margin-bottom:.6em;}
@media (max-width:560px){
  .dossier{grid-template-columns:1fr;gap:.4rem;}
}

/* Rejilla compacta de términos (casos, procedimientos, tecnología) */
.term-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:0 clamp(1.5rem,4vw,3rem);}
.term{padding-block:1.25rem;border-top:1px solid var(--line);}
.term h3{font-size:var(--step-1);margin-bottom:.25em;}
.term p{font-size:var(--step--1);color:var(--slate);margin:0;max-width:32em;}

/* Lista de credenciales */
.cred-list{list-style:none;}
.cred-list li{display:grid;grid-template-columns:10rem 1fr;gap:.5rem 1.25rem;padding:1rem 0;border-top:1px solid var(--line);}
.cred-list li:last-child{border-bottom:1px solid var(--line);}
.cred-list b{color:var(--slate-soft);font-size:var(--step--1);font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
@media (max-width:560px){.cred-list li{grid-template-columns:1fr;}}

/* Retrato + biografía */
.bio{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.bio__figure{position:sticky;top:calc(var(--header-h) + 2rem);}
.bio__figure img{width:100%;border-radius:var(--radius);}
.bio__figure figcaption{font-size:var(--step--1);color:var(--slate-soft);margin-top:.75rem;}
@media (max-width:840px){.bio{grid-template-columns:1fr;}.bio__figure{max-width:22rem;position:static;}}

/* ---------- 09. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2rem;margin:0;}
.stat dt{font-family:var(--font-display),'Manrope Fallback',Arial,sans-serif;font-size:var(--step-3);color:var(--ink);font-weight:800;line-height:1;}
.stat dd{margin:.4rem 0 0;font-size:var(--step--1);color:var(--slate-soft);max-width:16em;}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}

/* ---------- 10. Bandas CTA ---------- */
.cta-band{background:var(--blue);color:#fff;}
.cta-band .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;}
.cta-band .container > *:first-child{flex:1 1 24rem;}
.cta-band .container > .btn-row{flex:0 1 auto;}
.cta-band h2{color:#fff;margin-bottom:.3em;}
.cta-band p{color:rgba(255,255,255,.85);margin:0;max-width:40em;}

/* ---------- 11. FAQ nativo (<details>) ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-family:var(--font-display),'Manrope Fallback',Arial,sans-serif;
  font-size:var(--step-1);font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:currentColor;color:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2v14M2 9h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2v14M2 9h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--speed);
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--blue);}
.faq .faq__a{padding-bottom:1.4rem;}

/* ---------- 12. Formulario ---------- */
.form{display:grid;gap:1.1rem;max-width:34rem;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:var(--step--1);font-weight:600;color:var(--ink);}
.field input,.field select,.field textarea{
  font:inherit;padding:.8rem .95rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);color:var(--ink);width:100%;
}
.field textarea{resize:vertical;min-height:130px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:2px solid rgba(24,110,158,.18);outline-offset:0;}
.field-error{font-size:var(--step--1);color:var(--alert);display:none;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--alert);}
.field.has-error .field-error{display:block;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{font-size:var(--step--1);font-weight:600;color:var(--blue);min-height:1.2em;}

/* Sedes */
.location{padding-block:1.5rem;border-top:1px solid var(--line);}
.location:last-of-type{border-bottom:1px solid var(--line);}
.location h3{font-size:var(--step-1);margin-bottom:.25em;}
.location address{font-style:normal;font-size:var(--step--1);color:var(--slate);margin-bottom:.5rem;}
.location .hours{font-size:var(--step--1);color:var(--slate-soft);}
.location .tel{color:var(--blue);font-weight:600;display:inline-block;margin-top:.4rem;}

/* ---------- 13. Mapas (facade: no carga el iframe hasta el clic) ---------- */
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,4vw,3rem);}
.map-grid figure{display:grid;gap:1rem;align-content:start;}
.map-grid figcaption h3{font-size:var(--step-1);margin-bottom:.2em;}
.map-grid figcaption p{font-size:var(--step--1);color:var(--slate);margin:0;max-width:30em;}
.map{position:relative;aspect-ratio:4/3;background:var(--blue-tint);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;}
.map iframe{width:100%;height:100%;border:0;display:block;}
.map__placeholder{display:grid;gap:1rem;place-items:center;text-align:center;padding:2rem;}
.map__placeholder p{color:var(--slate-soft);font-size:var(--step--1);margin:0;}

/* ---------- 14. Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.68);}
.site-footer .container{padding-block:clamp(2.5rem,6vw,4rem);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.5rem;}
.footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;}
.footer-brand .brand__icon{height:34px;}
.footer-brand .brand__word{height:19px;}
.site-footer p{color:rgba(255,255,255,.62);max-width:26em;font-size:var(--step--1);}
.footer-grid h2{color:#fff;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;font-size:var(--step--1);}
.footer-grid a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--step--1);color:rgba(255,255,255,.5);
}
.disclaimer{background:var(--white);border-top:1px solid var(--line);}
.disclaimer .container{padding-block:2rem;}
.disclaimer p{font-size:var(--step--1);color:var(--slate-soft);max-width:60em;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;gap:2rem;}}

/* ---------- 15. Barra de acción móvil ---------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.5rem;padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(250,251,252,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
}
.action-bar .btn{flex:1;}
@media (max-width:760px){
  .action-bar{display:flex;}
  body{padding-bottom:4.5rem;}
}

/* Miga de pan */
.breadcrumb{font-size:var(--step--1);color:var(--slate-soft);margin-bottom:1.25rem;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.4rem;color:var(--line);}
.breadcrumb a:hover{color:var(--blue);}

/* Cabecera de página interior */
.page-hero{padding-block:clamp(2.25rem,5vw,3.5rem) clamp(1.5rem,3vw,2.5rem);}

/* Artículos del blog */
.post{padding-block:1.7rem;border-top:1px solid var(--line);}
.post:last-child{border-bottom:1px solid var(--line);}
.post__meta{font-size:var(--step--1);color:var(--slate-soft);margin-bottom:.35rem;}
.post h2{font-size:var(--step-2);margin-bottom:.3em;}
.post h2 a:hover{color:var(--blue);}
.prose h2{margin-top:2em;}
.prose ul{padding-left:1.25rem;max-width:var(--measure);margin:0 0 1.1em;}
.prose li{margin-bottom:.45em;}

/* Caja de autoría (E-E-A-T) */
.author-box{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:center;
  background:var(--mist);border-radius:var(--radius);padding:1.25rem 1.5rem;
}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;}
.author-box p{font-size:var(--step--1);margin:0;}
.author-box b{display:block;color:var(--ink);font-size:var(--step-0);}
@media (max-width:520px){.author-box{grid-template-columns:1fr;}}

/* ---------- Reveal progresivo ----------
   El contenido es visible por defecto: solo si el JS se ejecuta (html.js)
   se activa el estado oculto-hasta-revelar. Nada depende de JavaScript. */
html.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity 550ms ease,transform 550ms ease;}
html.js [data-reveal].is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html.js [data-reveal]{opacity:1;transform:none;}
}

@media print{
  .site-header,.action-bar,.urgency,.cta-band,.map{display:none !important;}
  body{background:#fff;color:#000;}
}