/* ============================================================
   BioEnfermería — Hoja de estilos
   Paleta: cream/ivory + ember/amber + ochre/rust + ink
   ============================================================ */

/* ============================================================
   FALLBACK CRÍTICO — Si Tailwind CDN falla, la web sigue legible
   ============================================================ */

/* Reset universal y box-sizing */
*, *::before, *::after{ box-sizing: border-box; }
body{ margin: 0; }

/* Prevención de desbordes de texto (CRÍTICO MÓVIL) */
h1, h2, h3, h4, h5, h6, p, a, span, li, blockquote, figcaption{
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Contenedores no pueden desbordar */
img, svg, video{ max-width: 100%; height: auto; display: block; }

/* El body y html nunca hacen scroll horizontal */
html, body{
  max-width: 100vw;
  overflow-x: hidden;
}

/* Respaldo: si Tailwind no carga, que al menos sea legible */
body{
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: #FAF4EC;
  color: #2A1A12;
  line-height: 1.5;
}

:root{
  --grain-opacity: .035;
  --cream:  #FAF4EC;
  --ivory:  #F3E9DB;
  --ember:  #E0683A;
  --amber2: #F2A65A;
  --ochre:  #C9481F;
  --rust:   #8C2A14;
  --ink:    #2A1A12;
  --mist:   #E8DCC7;
  --glass:  #FFE9D6;
}

html{ scroll-behavior:smooth; }
body{
  background: var(--cream);
  color: var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
}

/* ————— Ruido sutil para calidez ————— */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode:multiply;
}

/* ————— Tipografía ————— */
.display{ font-family:'Fraunces', serif; font-weight:400; letter-spacing:-0.02em; }
.display-italic{ font-family:'Fraunces', serif; font-style:italic; font-weight:300; }
.eyebrow{
  font-family:'Manrope',sans-serif;
  font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase;
  color: var(--rust);
}

/* ————— Hero: retrato con halo ————— */
.portrait-wrap{ position:relative; }
.portrait-halo{
  position:absolute; inset:-8% -12%;
  border-radius: 9999px;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255,233,214,.9) 0%, rgba(242,166,90,.5) 25%, rgba(224,104,58,.28) 45%, rgba(140,42,20,.1) 70%, rgba(140,42,20,0) 100%);
  filter: blur(20px);
  z-index:0;
  animation: halo-pulse 6s ease-in-out infinite;
}
@keyframes halo-pulse{
  0%,100%{ transform:scale(1); opacity:.9; }
  50%{ transform:scale(1.04); opacity:1; }
}
.portrait-frame{
  position:relative;
  width:100%; height:100%;
  border-radius: 24px 24px 140px 140px / 24px 24px 200px 200px;
  overflow:hidden;
  box-shadow:
    0 40px 80px -20px rgba(140,42,20,.35),
    0 10px 30px -5px rgba(42,26,18,.2),
    inset 0 0 0 1px rgba(255,255,255,.4);
  z-index:1;
  transform: rotate(-1deg);
  transition: transform .8s ease;
}
.portrait-frame:hover{ transform: rotate(0deg) scale(1.01); }
.portrait-frame img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 22%;
  display:block;
}
.portrait-tint{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,220,180,.08) 0%, rgba(255,220,180,0) 30%, rgba(201,72,31,.12) 100%);
  mix-blend-mode: overlay;
  pointer-events:none;
}
.portrait-badge{
  position:absolute;
  top:14px; left:14px;
  width: 42px; height: 42px;
  border-radius: 9999px;
  background: rgba(250,244,236,.92);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px -4px rgba(42,26,18,.35);
  z-index:2;
}

/* ————— Sobre mí ————— */
.about-portrait{
  position:relative;
  border-radius: 28px;
  overflow:hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -15px rgba(140,42,20,.35);
}
.about-portrait img{
  width:100%; height:100%;
  object-fit:cover; object-position: center 22%;
  display:block;
}
.about-portrait::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(42,26,18,.55) 100%);
}
.about-caption{
  position:absolute; bottom:18px; left:18px; right:18px;
  color: var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  z-index:2;
  gap: 10px;
  flex-wrap: wrap;
}

/* ————— Hero orbe (usado en nav/footer logo) ————— */
.orb{
  position:absolute; inset:0;
  border-radius:9999px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0%, rgba(255,235,210,.55) 18%, rgba(242,166,90,.35) 38%, rgba(224,104,58,.25) 58%, rgba(140,42,20,.15) 78%, rgba(42,26,18,.05) 100%);
  box-shadow:
    inset -30px -40px 80px rgba(140,42,20,.18),
    inset 20px 30px 60px rgba(255,240,220,.6),
    0 40px 80px -20px rgba(201,72,31,.35),
    0 10px 30px -5px rgba(42,26,18,.15);
  filter:saturate(1.05);
}
.orb::before{
  content:""; position:absolute;
  top:10%; left:18%;
  width:28%; height:20%;
  border-radius:9999px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%);
  filter:blur(2px);
}

/* chispas */
.sparkle{
  position:absolute; width:6px; height:6px; border-radius:9999px;
  background:radial-gradient(circle, #FFE9D6 0%, rgba(255,233,214,0) 70%);
  filter:blur(.5px);
  animation: twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.2; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.2); }
}

/* nubes decorativas */
.smoke{
  position:absolute;
  pointer-events:none;
  border-radius:9999px;
  filter:blur(60px);
  opacity:.55;
}

/* reveal */
.reveal{ opacity:0; transform:translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

/* líneas */
.hairline{ height:1px; background:linear-gradient(90deg, transparent, rgba(140,42,20,.25), transparent); }

/* botones */
.btn-primary{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem;
  background: var(--ink); color: var(--cream);
  border-radius:9999px;
  font-weight:500; letter-spacing:.02em;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  box-shadow: 0 10px 24px -8px rgba(42,26,18,.5);
  cursor:pointer; border:0;
}
.btn-primary:hover{
  background: var(--rust);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(140,42,20,.5);
}
.btn-primary .arrow{ transition: transform .35s ease; }
.btn-primary:hover .arrow{ transform: translateX(4px); }

/* ————— Botón RESERVA — naranja llamativo ————— */
.btn-reserve{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem;
  background: linear-gradient(135deg, var(--amber2) 0%, var(--ember) 55%, var(--ochre) 100%);
  color: var(--cream);
  border-radius:9999px;
  font-weight:600; letter-spacing:.02em;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  box-shadow:
    0 10px 24px -6px rgba(224,104,58,.55),
    0 0 0 0 rgba(224,104,58,.6);
  cursor:pointer; border:0;
  animation: reserve-pulse 2.4s ease-in-out infinite;
}
.btn-reserve:hover{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 18px 36px -8px rgba(224,104,58,.7),
    0 0 0 8px rgba(224,104,58,.08);
  animation: none;
}
.btn-reserve .arrow{ transition: transform .35s ease; }
.btn-reserve:hover .arrow{ transform: translateX(4px); }

@keyframes reserve-pulse{
  0%, 100%{
    box-shadow:
      0 10px 24px -6px rgba(224,104,58,.55),
      0 0 0 0 rgba(224,104,58,.4);
  }
  50%{
    box-shadow:
      0 12px 28px -6px rgba(224,104,58,.65),
      0 0 0 10px rgba(224,104,58,0);
  }
}
@media (prefers-reduced-motion: reduce){
  .btn-reserve{ animation: none; }
}

.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.4rem;
  border:1px solid rgba(42,26,18,.25);
  border-radius:9999px;
  color: var(--ink);
  transition: all .35s ease;
  cursor: pointer; background: transparent;
}
.btn-ghost:hover{
  background: var(--ink); color: var(--cream);
  border-color: var(--ink);
}

/* service cards */
.svc{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(243,233,219,.55) 100%);
  border:1px solid rgba(140,42,20,.12);
  border-radius: 28px;
  padding: 2.25rem 1.75rem 2rem;
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
  overflow:hidden;
}
.svc::after{
  content:"";
  position:absolute; inset:auto -40% -60% auto;
  width:220px; height:220px; border-radius:9999px;
  background:radial-gradient(circle, rgba(224,104,58,.25) 0%, rgba(224,104,58,0) 70%);
  transition: transform .6s ease;
}
.svc:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(140,42,20,.22);
  border-color: rgba(140,42,20,.25);
}
.svc:hover::after{ transform: scale(1.25); }

.svc-num{
  font-family:'Fraunces', serif;
  font-style:italic; font-weight:300;
  color: var(--ochre);
  font-size:2.25rem; line-height:1;
}

/* método */
.step-dot{
  width:14px; height:14px; border-radius:9999px;
  background: var(--ember);
  box-shadow: 0 0 0 6px rgba(224,104,58,.18), 0 0 0 14px rgba(224,104,58,.08);
}

/* FAQ */
details summary{ cursor:pointer; list-style:none; }
details summary::-webkit-details-marker{ display:none; }
details[open] .plus{ transform: rotate(45deg); }
.plus{ transition: transform .35s ease; }

/* marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track{ animation: marquee 40s linear infinite; }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
  .halo-pulse, .caduceus, .sparkle{ animation: none !important; }
}

/* focus accesible */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 4px;
}

/* wave */
.wave-divider{ display:block; width:100%; height:auto; }

/* ============================================================
   AGENDA / BOOKING
   ============================================================ */
.slot-btn{
  padding: .55rem .9rem;
  border-radius: 9999px;
  border: 1px solid rgba(140,42,20,.2);
  background: var(--cream);
  color: var(--ink);
  font-size: .85rem;
  transition: all .25s ease;
  cursor: pointer;
}
.slot-btn:hover{
  background: var(--ember);
  color: var(--cream);
  border-color: var(--ember);
}
.slot-btn.selected{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.slot-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* Forms */
.form-field{
  display:block;
  position: relative;
}
.form-field label{
  font-size: .72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: rgba(42,26,18,.6);
  display:block;
  margin-bottom: .4rem;
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(42,26,18,.25);
  padding: .55rem 0;
  color: var(--ink);
  font-family:'Manrope',sans-serif;
  font-size: 1rem;
  transition: border-color .3s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder{
  color: rgba(42,26,18,.35);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline: none;
  border-bottom-color: var(--ochre);
}

/* ============================================================
   BLOG CARDS
   ============================================================ */
.post-card{
  display:flex; flex-direction:column;
  background: var(--ivory);
  border: 1px solid rgba(140,42,20,.12);
  border-radius: 24px;
  overflow:hidden;
  transition: transform .5s ease, box-shadow .5s ease;
}
.post-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(140,42,20,.22);
}
.post-cover{
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--glass) 0%, var(--amber2) 60%, var(--ochre) 100%);
  position:relative;
  overflow:hidden;
}
.post-cover svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* ============================================================
   FORMULARIO DE RESERVA (sección 06)
   ============================================================ */
#reservaForm .form-field input,
#reservaForm .form-field textarea{
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(140,42,20,.2);
  padding: .55rem 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .25s ease;
  outline: none;
  box-sizing: border-box;
}
#reservaForm .form-field input:focus,
#reservaForm .form-field textarea:focus{
  border-bottom-color: var(--ember);
}
#reservaForm .form-field input::placeholder,
#reservaForm .form-field textarea::placeholder{
  color: rgba(42,26,18,.35);
}
#reservaForm .form-field label{
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(42,26,18,.6);
  display: block;
  margin-bottom: .4rem;
  font-weight: 500;
}

/* ============================================================
   RESPONSIVE — Reglas mínimas, Tailwind hace el resto
   ============================================================ */

/* Evita scroll horizontal por cualquier overflow */
html, body{ max-width: 100vw; overflow-x: hidden; }

/* Respeta safe-areas de iPhone con notch */
@supports (padding: max(0px)){
  body{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* —— Móvil y tablet: ajustes tipográficos —— */
@media (max-width: 768px){
  /* Reducir el tamaño del título principal del hero */
  .hero-title{
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.1;
  }

  /* Retrato del hero más compacto */
  .portrait-wrap{ width: 260px !important; height: 330px !important; }

  /* Orbe del "Sobre mí": centrado y limitado */
  .orb-container{ max-width: 280px !important; margin: 0 auto; }

  /* Citas: tamaño razonable en móvil */
  blockquote.display-italic{
    font-size: 1.1rem !important;
    line-height: 1.45;
  }

  /* Formularios: evitar zoom automático en iOS al enfocar input */
  input, textarea, select{
    font-size: 16px !important;
  }

  /* Listas de servicios: quitar bullets nativos que se ven mal */
  .svc ul{ list-style: none; padding-left: 0; }
}

/* —— Móvil estándar —— */
@media (max-width: 640px){
  /* Botones táctiles mínimo 48px de altura */
  .btn-primary, .btn-ghost, .btn-reserve{
    min-height: 48px;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* CTAs principales: ancho completo en móvil */
  .btn-reserve{
    width: 100%;
    justify-content: center;
    padding: .95rem 1rem;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Excepción: el botón pequeño del header no debe ocupar todo */
  header .btn-reserve{
    width: auto;
    min-height: auto;
    padding: .85rem 1.3rem;
  }

  /* Garantizar que ningún form desborde */
  form, .form-field, .form-field input, .form-field textarea, .form-field select{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Koalendar: altura adaptada al móvil */
  #agenda iframe{
    height: 820px !important;
    min-height: 820px;
  }

  /* Botones flotantes: no solaparse */
  #scrollTop{ bottom: 1rem; right: 1rem; width: 44px; height: 44px; }
  a[aria-label="WhatsApp"].fixed{
    bottom: 1rem; left: 1rem; width: 52px; height: 52px;
  }
}

/* —— iPhone SE y similares —— */
@media (max-width: 380px){
  .hero-title{ font-size: 1.9rem !important; }
  .portrait-wrap{ width: 230px !important; height: 290px !important; }
}

/* ============================================================
   REFUERZOS CRÍTICOS PARA MÓVIL
   ============================================================ */

/* Menú móvil: forzar fondo opaco y pantalla completa */
#mobileMenu{
  background: #FAF4EC !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 60 !important;
}
#mobileMenu.menu-open{
  opacity: 1 !important;
}
#mobileMenu nav a{
  color: #2A1A12;
  text-decoration: none;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(140,42,20,.08);
}

/* Evitar desbordes en cualquier contenedor de texto */
section, header, footer, main, article, aside{
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Las imágenes y SVGs del logo deben tener tamaños fijos */
header svg, footer svg{
  flex-shrink: 0;
}

/* Botón logo header: tamaño mínimo */
header a[aria-label="Inicio BioEnfermería"] span.block{
  min-width: 44px;
  min-height: 44px;
}

/* El retrato del hero no debe causar overflow */
@media (max-width: 420px){
  .portrait-wrap{
    width: min(260px, 75vw) !important;
    height: auto !important;
    aspect-ratio: 4/5;
  }
}

/* Evitar cualquier overflow horizontal residual */
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl{
  max-width: 100%;
}
@media (min-width: 1280px){
  .max-w-7xl{ max-width: 80rem; }
}
@media (min-width: 1152px){
  .max-w-6xl{ max-width: 72rem; }
}

/* El H1 y H2 en móvil nunca deben cortar palabras */
h1, h2, h3{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Espacios bajo el logo header para que no se pegue */
@media (max-width: 640px){
  header .py-5{ padding-top: .75rem; padding-bottom: .75rem; }
  header .display.text-xl{ font-size: 1.05rem; }
  header .text-\[10px\]{ font-size: 9px !important; letter-spacing: .2em !important; }
}