/* =========================================================
   FULGORA CLINIC — Responsive / Mobile UX V11
   Capa de mejoras responsive compartida por todo el sitio
   ========================================================= */

:root{
  --mobile-header-h:76px;
}

/* Evita desbordes por contenidos largos */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
input,textarea,select,button{max-width:100%}
h1,h2,h3,p,a,span,strong{overflow-wrap:break-word}
section[id],div[id]{scroll-margin-top:96px}

/* Accesibilidad de foco */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(209,154,123,.72);
  outline-offset:3px;
}

/* Header y logo */
.header .nav{min-height:52px}
.header .brand{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
}
.header .brand img{
  width:clamp(158px,16vw,220px);
  height:auto;
  max-height:58px;
  object-fit:contain;
}
.nav-links{min-width:0}
.nav-links a{min-height:44px;display:inline-flex;align-items:center}

/* Hamburguesa */
.menu-toggle{
  display:none;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(255,255,255,.07);
  color:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle svg{width:23px;height:23px;display:block}

/* Off canvas */
.mobile-backdrop{
  position:fixed;
  inset:0;
  z-index:1190;
  background:rgba(0,0,0,.48);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.mobile-menu{
  position:fixed;
  z-index:1200;
  top:0;
  right:0;
  width:min(88vw,380px);
  height:100dvh;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  background:#07111d;
  color:#fff;
  box-shadow:-24px 0 70px rgba(0,0,0,.32);
  transform:translateX(105%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
  overscroll-behavior:contain;
}
body.menu-open{overflow:hidden;touch-action:none}
body.menu-open .mobile-backdrop{opacity:1;visibility:visible}
body.menu-open .mobile-menu{transform:translateX(0)}
.mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-menu-logo{
  width:176px;
  height:auto;
  max-height:58px;
  object-fit:contain;
}
.mobile-menu-close{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.mobile-menu-close svg{width:21px;height:21px}
.mobile-menu-nav{
  display:grid;
  gap:5px;
  padding:20px 0;
}
.mobile-menu-nav a{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 10px;
  border-bottom:1px solid rgba(255,255,255,.075);
  font-weight:700;
  font-size:1rem;
}
.mobile-menu-nav a::after{
  content:"›";
  color:#d19a7b;
  font-size:1.35rem;
  line-height:1;
}
.mobile-menu-actions{
  display:grid;
  gap:10px;
  padding-top:4px;
}
.mobile-menu-actions .btn{
  width:100%;
  min-height:52px;
  padding-inline:18px;
}
.mobile-menu-note{
  margin-top:18px;
  color:#9aa6af;
  font-size:.78rem;
  line-height:1.5;
}

/* Layout fluido y prevención de overflow */
.hero-grid,.info-split,.spec-wrap,.footer-grid,.mid-cta-inner,
.cards,.space-grid,.steps,.trust-grid{min-width:0}
.hero-grid>*,
.info-split>*,
.spec-wrap>*,
.footer-grid>*,
.mid-cta-inner>*{min-width:0}
.card-panel,.hero-form,.mini-card,.photo-card,.step,.side-panel{min-width:0}
.spec-chip{white-space:normal;line-height:1.3}

/* Formularios: 16px evita zoom automático en iOS */
input,textarea,select{font-size:16px}
textarea{min-height:120px}
label{line-height:1.35}
.form-submit{min-height:54px}

/* Botones */
.btn{line-height:1.2;text-align:center}
.btn span{min-width:0}

/* Tablets landscape / small laptop */
@media (max-width:1100px){
  .container{width:min(100% - 36px,1180px)}
  .hero-grid{gap:34px}
  .hero-copy{max-width:760px}
  .hero-form{max-width:760px;width:100%;justify-self:center}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .space-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{gap:28px}
}

/* Menú off-canvas para tablet y mobile */
@media (max-width:960px){
  :root{--mobile-header-h:74px}
  .header{
    padding:10px 0;
    background:rgba(6,16,27,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .header.scrolled{padding:8px 0}
  .header .nav{gap:12px}
  .header .brand img{
    width:clamp(160px,28vw,195px);
    max-height:52px;
  }
  .nav-links{display:none !important}
  .menu-toggle{display:inline-flex}
  .hero{
    min-height:auto !important;
    padding-top:calc(var(--mobile-header-h) + 48px) !important;
    background-attachment:scroll !important;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .info-split,.spec-wrap{grid-template-columns:1fr !important}
  .visual-large{min-height:440px}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .mid-cta-inner{align-items:flex-start !important}
}

/* Tablet portrait */
@media (max-width:768px){
  .container{width:min(100% - 30px,1180px)}
  .section{padding:72px 0}
  h1{font-size:clamp(2.25rem,9vw,3.45rem)}
  h2{font-size:clamp(1.9rem,7vw,2.8rem)}
  h3{line-height:1.2}
  .section-head{margin-bottom:30px}
  .hero-copy h1{margin-top:14px}
  .hero-sub{font-size:1rem}
  .hero-points{grid-template-columns:1fr !important}
  .form-grid{grid-template-columns:1fr !important}
  .field.full{grid-column:auto !important}
  .hero-form{padding:28px 24px;border-radius:24px}
  .hero-form h2,.hero-form h3{font-size:1.75rem}
  .cards{grid-template-columns:1fr !important}
  .space-grid{grid-template-columns:1fr 1fr !important}
  .spec-list{grid-template-columns:1fr 1fr !important}
  .mid-cta-inner{flex-direction:column !important}
  .mid-cta-inner .cta-row{width:100%}
  .photo-card .image{height:220px}
  .wa-float{
    width:56px;
    height:56px;
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
  }
}

/* Mobile */
@media (max-width:560px){
  :root{--mobile-header-h:70px}
  .container{width:min(100% - 28px,1180px)}
  .header{padding:8px 0}
  .header .brand img{
    width:158px;
    max-height:48px;
  }
  .menu-toggle{
    width:46px;
    height:46px;
    flex-basis:46px;
  }
  .hero{
    padding-top:calc(var(--mobile-header-h) + 34px) !important;
    padding-bottom:46px !important;
    background-position:62% center !important;
  }
  .hero-copy h1{
    font-size:clamp(2.08rem,10vw,2.65rem) !important;
    line-height:1.02;
    letter-spacing:-.035em;
  }
  .hero-sub{font-size:.98rem;line-height:1.55}
  .eyebrow{
    font-size:.68rem;
    letter-spacing:.12em;
    gap:8px;
  }
  .eyebrow:before{width:24px}
  .cta-row{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
  }
  .cta-row .btn{width:100%;min-height:52px;padding:0 17px}
  .hero-form{
    padding:24px 18px;
    border-radius:20px;
  }
  .hero-form .intro{margin-bottom:20px}
  input,textarea,select{padding:14px 13px}
  .trust-grid{grid-template-columns:1fr !important}
  .trust-item{
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    padding:19px 14px;
  }
  .trust-item:last-child{border-bottom:0 !important}
  .section{padding:60px 0}
  .card-panel{padding:24px 20px;border-radius:20px}
  .card-panel h2,.card-panel h3{font-size:1.65rem}
  .visual-large{min-height:330px;border-radius:22px}
  .mini-card{padding:20px;border-radius:19px}
  .mini-card .btn{width:100%}
  .steps{grid-template-columns:1fr !important}
  .step{min-height:auto}
  .space-grid{grid-template-columns:1fr !important}
  .photo-card .image{height:210px}
  .spec-list{grid-template-columns:1fr !important}
  .spec-chip{min-height:50px;padding:13px 13px}
  .side-panel{padding:22px 18px}
  .mid-cta{padding:24px 0}
  .mid-cta-copy strong{font-size:1.28rem}
  .mid-cta-inner .btn{width:100%}
  .footer-grid{grid-template-columns:1fr !important;gap:30px}
  footer{padding:54px 0 36px}
  .footer-logo{width:min(210px,78vw)}
  .footer-link{align-items:flex-start}
  .social-link{width:44px;height:44px}
  .mobile-menu{width:min(91vw,360px)}
}

/* Dispositivos muy angostos */
@media (max-width:380px){
  .container{width:min(100% - 22px,1180px)}
  .header .brand img{width:145px}
  .hero-copy h1{font-size:2rem !important}
  .hero-form{padding:21px 15px}
  .btn{padding-inline:14px}
  .mobile-menu{padding-inline:16px}
}

/* Alturas chicas (landscape móvil) */
@media (max-height:520px) and (max-width:960px){
  .mobile-menu{padding-top:12px}
  .mobile-menu-head{padding-bottom:12px}
  .mobile-menu-nav{padding:10px 0}
  .mobile-menu-nav a{min-height:44px}
}

/* Preferencias de movimiento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
}


/* V13 — Refuerzo de logo/menu responsive */
.header .brand img,
.footer-logo,
.mobile-menu-logo{
  height:auto !important;
}
@media (max-width:960px){
  .header .brand img{width:168px !important;max-width:168px !important}
  .mobile-menu-logo{width:165px !important;max-width:165px !important}
}
@media (max-width:560px){
  .header .brand img{width:145px !important;max-width:145px !important}
  .footer-logo{width:180px !important;max-width:180px !important}
}


/* =========================================================
   V31 — Menú mobile: flecha solo en elementos desplegables
   ========================================================= */

/* Inicio y Área para Especialistas son enlaces directos:
   no deben mostrar indicador de desplegable. */
.mobile-menu-nav > a::after{
  content:none !important;
  display:none !important;
}

/* El único indicador de expansión queda en el botón
   “Especialidades y servicios”, mediante su SVG propio. */
.mobile-menu .mobile-submenu-toggle svg{
  display:block !important;
}


/* V51 — ampliar el uso del off-canvas a notebooks */
@media (min-width:961px) and (max-width:1230px){
  .menu-toggle{display:inline-flex !important}
  .mobile-menu{display:block}
}