/* ============================================================
   NOE LÓPEZ · public-overrides.css
   Solo cambia: paleta (celeste + blanco + degradados) + tipografía (Outfit)
   NO toca layout/disposición — todo el diseño original se preserva.
   ============================================================ */

:root{
  /* === PALETA NUEVA (sustituye gold/navy por celeste/ink) === */
  --navy:        #0C4A6E;   /* sky-900 — antes navy */
  --navy-deep:   #082F49;   /* sky-950 — antes navy-deep */
  --navy-soft:   #075985;   /* sky-800 — antes navy-soft */
  --gold:        #0EA5E9;   /* sky-500 — antes gold */
  --gold-light:  #38BDF8;   /* sky-400 — antes gold-light */
  --gold-deep:   #0284C7;   /* sky-600 — antes gold-deep */
  --sky:         #7DD3FC;   /* sky-300 */
  --blue:        #1E88E5;
  --ice:         #E0F2FE;   /* sky-100 — antes ice */
  --cream:       #F0F9FF;   /* sky-50 — antes cream */
  --white:       #FFFFFF;
  --text:        #0F172A;
  --muted:       #64748B;
  --border:      rgba(14,165,233,.12);
}

/* ============ TIPOGRAFÍA — Outfit reemplaza Playfair Display ============ */
html, body{ font-family:'Inter',system-ui,-apple-system,sans-serif; }

/* Cualquier uso de Playfair Display lo reemplaza Outfit */
.brand .name,
.big-name,
.intro-video-title,
.bio-header h2,
.bio-text h3,
.bio-pullquote,
.bio-image-tag .num,
.card h3,
.work-visual .visual-tag .num,
.work-content h3,
.book-item h5,
.awards-header h2,
.works-header h2,
.gallery-header h2,
.testimonios-header h2,
.contact-header h2,
.featured-year,
.featured-right h3,
.award h4,
.gallery-item .caption h4,
.lightbox .lb-caption h4,
.featured-mark,
.featured-quote,
.featured-avatar,
.testimonio-card .text,
.testimonio-card .mark,
.testimonio-avatar,
.stat-num,
.quote-text,
.quote-mark,
.manifesto-decoration,
.manifesto-quote,
.cta-text h4,
.contact-featured-text h3,
.contact-option-body h4,
.footer-mark,
.footer-hero h2{
  font-family:'Outfit',system-ui,-apple-system,sans-serif !important;
  font-weight:700;
  letter-spacing:-.02em;
}

/* Cursivas (Dancing Script → Outfit italic) */
.bio-signature,
.quote-author,
.manifesto-author,
.footer-hero .signature{
  font-family:'Outfit',system-ui,-apple-system,sans-serif !important;
  font-style:italic;
  font-weight:600;
}

/* Números con Space Grotesk para look moderno */
.stat-num,
.featured-year,
.bio-image-tag .num,
.work-visual .visual-tag .num{
  font-family:'Space Grotesk',ui-monospace,monospace !important;
  letter-spacing:-.02em;
  font-weight:700;
}

/* ============ TOPBAR — texto blanco mantiene contraste sobre hero celeste ============ */
.brand .name{ letter-spacing:1.5px; }

/* ============ HERO — fondo gradient celeste profundo ============ */
.hero{ background:linear-gradient(135deg,#082F49 0%, #0C4A6E 60%, #0284C7 100%); }
.bg-slide::after{
  background:
    linear-gradient(95deg, rgba(8,47,73,.85) 0%, rgba(8,47,73,.40) 30%, rgba(8,47,73,.50) 70%, rgba(8,47,73,.85) 100%),
    linear-gradient(180deg, rgba(8,47,73,.55) 0%, transparent 25%, transparent 60%, rgba(8,47,73,.85) 100%);
}

/* Difuminar el corte inferior de la foto del Dr. */
.person-png{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.85) 86%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.85) 86%, rgba(0,0,0,0) 100%);
  filter:drop-shadow(0 40px 60px rgba(8,47,73,.55)) saturate(1.10) brightness(1.02);
}

/* Transición suave entre hero y siguiente sección (intro-video) */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,47,73,0) 0%, rgba(8,47,73,.6) 60%, #082F49 100%);
}

/* ============ HERO — mejor jerarquía y espacios ============ */
/* Ocultar elementos visualmente ruidosos */
.slide-indicator{ display:none !important; }
.vert-brand{ display:none !important; }

/* Centrar contenido verticalmente, no al final */
.hero-content{
  align-items:center !important;
  padding:120px 80px 100px !important;
  min-height:calc(100vh - 60px);
}

/* "BIENVENIDO" más visible: más bold, contraste, espaciado */
.hero-right .eyebrow{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:6px !important;
  color:#7DD3FC !important;
  margin-bottom:28px !important;
  text-shadow:0 2px 16px rgba(8,47,73,.5);
  animation-delay:.2s !important;
}
.hero-right .eyebrow .bar{
  width:48px !important;
  height:2px !important;
  background:linear-gradient(90deg,#7DD3FC,#0EA5E9) !important;
}

/* Título más prominente */
.big-name{
  font-size:96px !important;
  margin-bottom:22px !important;
  text-shadow:0 4px 30px rgba(8,47,73,.4);
}

/* Divider más visible */
.divider-gold{
  width:120px !important;
  height:3px !important;
  margin-bottom:32px !important;
}

/* Motto más legible */
.motto{
  font-size:22px !important;
  color:rgba(255,255,255,.95) !important;
  margin-bottom:38px !important;
  text-shadow:0 2px 12px rgba(8,47,73,.4);
  font-family:'Outfit',sans-serif !important;
  font-style:normal !important;
  font-weight:400 !important;
}

/* SCROLL cue más arriba */
.scroll-cue{
  bottom:32px !important;
}

@media (max-width:980px){
  .hero-content{
    padding:90px 24px 80px !important;
    grid-template-columns:1fr !important;
    text-align:center;
  }
  .hero-right{ padding:0 !important; }
  .hero-right .eyebrow{ justify-content:center; }
  .big-name{ font-size:54px !important; white-space:normal !important; }
  .divider-gold{ margin-left:auto;margin-right:auto; }
  .cta-row{ justify-content:center; }
}

/* Acento highlight — degradado cyan/sky */
.big-name .dr,
.bio-header h2 em,
.bio-text h3 em,
.work-content h3 em,
.work-block.dark .work-content h3 em,
.awards-header h2 em,
.works-header h2 em,
.gallery-header h2 em,
.contact-header h2 em,
.testimonios-header h2 em,
.intro-video-title em,
.featured-quote strong,
.testimonio-card .text strong,
.manifesto-quote strong,
.contact-featured-text h3 em,
.footer-hero .quote strong{
  background:linear-gradient(90deg,#7DD3FC,#0EA5E9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:700;
}

/* ============ BOTONES — pill con gradiente azul oscuro vivo ============ */
.btn-primary,
.btn-book{
  background:linear-gradient(135deg,#0369A1 0%,#0284C7 50%,#0EA5E9 100%) !important;
  color:#fff !important;
  border-radius:999px !important;
  box-shadow:0 12px 32px rgba(3,105,161,.40) !important;
  animation:none !important;
  font-weight:700 !important;
}
.btn-primary::before,
.btn-book::before{
  background:linear-gradient(135deg,#0C4A6E 0%,#0369A1 100%) !important;
}
.btn-primary .arrow,
.btn-book .arrow{ background:rgba(255,255,255,.22) !important; }

.gallery-cta{
  border-color:#0EA5E9 !important;
  color:#0EA5E9 !important;
  border-radius:999px !important;
  letter-spacing:1.5px !important;
}
.gallery-cta::before{ background:linear-gradient(90deg,#0EA5E9,#0284C7) !important; }
.gallery-cta:hover{ color:#fff !important; }

.cta-form-row button{ background:linear-gradient(90deg,#0EA5E9,#0284C7) !important; color:#fff !important; border-radius:999px !important; }
.cta-form-row button:hover{ filter:brightness(1.08); }

/* ============ MARQUEE — celeste claro ============ */
.marquee{ background:#0EA5E9 !important; border-top-color:#0284C7 !important; }
.marquee span{ color:#fff !important; }
.marquee span::after{ color:#fff !important; }

/* ============ CARDS / BLOQUES — radius más grande, sombras suaves celeste ============ */
.card{ border-radius:20px !important; border-top-color:#0EA5E9 !important; box-shadow:0 16px 40px rgba(14,165,233,.10) !important; }
.card:hover{ box-shadow:0 28px 60px rgba(14,165,233,.18) !important; }
.card-icon{ background:linear-gradient(135deg,#082F49,#0C4A6E) !important; color:#7DD3FC !important; border-radius:14px !important; }
.card:hover .card-icon{ background:linear-gradient(135deg,#0EA5E9,#0284C7) !important; color:#fff !important; }

.work-block{ border-radius:24px !important; border-color:rgba(14,165,233,.12) !important; }
.work-block.dark{ background:linear-gradient(135deg,#082F49,#0C4A6E) !important; }
.work-block.cream{ background:linear-gradient(135deg,#F0F9FF 0%, #FFFFFF 100%) !important; }

.intro-video{ background:linear-gradient(180deg,#082F49 0%, #0C4A6E 50%, #082F49 100%) !important; }
.video-frame{ border-radius:20px !important; box-shadow:0 30px 80px rgba(14,165,233,.20),0 0 0 1px rgba(14,165,233,.30) !important; }
.video-frame .corner{ border-color:#7DD3FC !important; }
.big-play-btn{ background:linear-gradient(135deg,#0EA5E9,#0284C7) !important; color:#fff !important; box-shadow:0 12px 30px rgba(14,165,233,.45) !important; animation:none !important; }
.big-play-btn:hover{ filter:brightness(1.08); }

.bio{ background:#fff !important; }
.bio::before{ color:rgba(14,165,233,.05) !important; }
.bio-image{ border-radius:16px !important; box-shadow:0 30px 80px rgba(14,165,233,.20) !important; }
.bio-image .corner{ border-color:#0EA5E9 !important; }
.bio-image-tag{ background:linear-gradient(135deg,#082F49,#0C4A6E) !important; border-top-color:#0EA5E9 !important; border-radius:12px !important; }
.bio-image-tag .num{ color:#7DD3FC !important; }
.bio-image-tag .label small{ color:#7DD3FC !important; }
.bio-pullquote{ border-left-color:#0EA5E9 !important; color:#0C4A6E !important; }
.bio-facts li .ico{ background:rgba(14,165,233,.12) !important; color:#0284C7 !important; }
.bio-facts li small{ color:#0284C7 !important; }
.bio-text .bio-kicker{ color:#0284C7 !important; }
.bio-signature{ color:#0C4A6E !important; }

/* ============ AWARDS ============ */
.awards{ background:linear-gradient(180deg,#fff 0%, #F0F9FF 100%) !important; }
.awards-header .divider{ background:linear-gradient(90deg,#0EA5E9,#0284C7) !important; }
.awards-featured{ background:linear-gradient(135deg,#082F49,#0C4A6E) !important; border-top-color:#0EA5E9 !important; border-radius:20px !important; box-shadow:0 30px 80px rgba(14,165,233,.20) !important; }
.featured-year{ color:#7DD3FC !important; }
.featured-tag{ color:rgba(255,255,255,.75) !important; }
.featured-seal{ border-color:rgba(125,211,252,.4) !important; }
.featured-seal::before{ border-color:rgba(125,211,252,.32) !important; }
.featured-seal::after{ border-color:rgba(125,211,252,.18) !important; }
.featured-seal .star{ color:#7DD3FC !important; }
.featured-right .institution{ color:#7DD3FC !important; }
.featured-meta svg{ color:#7DD3FC !important; }
.award{ border-radius:18px !important; border-top-color:#0EA5E9 !important; box-shadow:0 12px 30px rgba(14,165,233,.08) !important; }
.award:hover{ box-shadow:0 24px 50px rgba(14,165,233,.18) !important; }
.award-year{ background:linear-gradient(90deg,#0EA5E9,#0284C7) !important; color:#fff !important; border-radius:0 0 8px 8px !important; }
.award-medal{ background:rgba(14,165,233,.12) !important; color:#0284C7 !important; }
.award-institution{ color:#0284C7 !important; }

/* ============ GALLERY ============ */
.gallery{ background:#F0F9FF !important; }
.gallery-filters{ background:rgba(14,165,233,.08) !important; border-color:rgba(14,165,233,.12) !important; }
.gallery-filters button.active{ background:linear-gradient(90deg,#0EA5E9,#0284C7) !important; color:#fff !important; box-shadow:0 4px 14px rgba(14,165,233,.35) !important; }
.gallery-filters button:hover{ color:#0284C7 !important; }
.gallery-item{ background:#082F49 !important; border-radius:14px !important; }
.gallery-item .caption .cat{ background:linear-gradient(90deg,#0EA5E9,#0284C7) !important; color:#fff !important; border-radius:6px !important; }
.gallery-item:hover .corner-badge{ background:#0EA5E9 !important; border-color:#0EA5E9 !important; color:#fff !important; }
.lightbox .close:hover, .lightbox .nav:hover{ background:#0EA5E9 !important; border-color:#0EA5E9 !important; color:#fff !important; }
.lightbox .lb-caption small{ color:#7DD3FC !important; }

/* ============ STATS / TESTIMONIOS / MANIFESTO ============ */
.stats-section{ background:linear-gradient(135deg,#082F49,#0C4A6E) !important; }
.stats-title{ color:#7DD3FC !important; }
.stats-title-line{ background:linear-gradient(90deg,#7DD3FC,#38BDF8) !important; }
.stat{ border-left-color:rgba(125,211,252,.3) !important; }
.stat-icon{ color:#7DD3FC !important; }
.stat-label{ color:#7DD3FC !important; }
.quote-mark{ background:rgba(125,211,252,.18) !important; color:#7DD3FC !important; }
.quote-text strong{ color:#7DD3FC !important; }
.quote-author{ color:#7DD3FC !important; }

.testimonios{ background:#082F49 !important; }
.testimonios::after{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(14,165,233,.15) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 80%, rgba(125,211,252,.12) 0%, transparent 50%) !important;
}
.featured-mark{ color:#7DD3FC !important; }
.featured-avatar{ background:linear-gradient(135deg,#0EA5E9,#0284C7) !important; color:#fff !important; }
.featured-author-info .role{ color:#7DD3FC !important; }
.testimonio-card{ border-radius:18px !important; }
.testimonio-card:hover{ border-color:rgba(125,211,252,.35) !important; }
.testimonio-card .mark{ color:#7DD3FC !important; }
.testimonio-avatar{ background:rgba(14,165,233,.20) !important; color:#7DD3FC !important; border-color:rgba(125,211,252,.4) !important; }
.testimonio-author-info .role{ color:#7DD3FC !important; }
.testimonio-rating{ color:#FACC15 !important; }

.manifesto::before{
  background:
    linear-gradient(180deg, rgba(8,47,73,.88) 0%, rgba(8,47,73,.65) 40%, rgba(8,47,73,.93) 100%),
    radial-gradient(ellipse at center, rgba(14,165,233,.15) 0%, transparent 60%) !important;
}
.manifesto-decoration{ color:rgba(125,211,252,.10) !important; }
.manifesto-eyebrow{ color:#7DD3FC !important; }
.manifesto-eyebrow .bar{ background:#7DD3FC !important; }
.manifesto-quote strong{ color:#7DD3FC !important; }
.manifesto-divider{ background:linear-gradient(90deg,#7DD3FC,#38BDF8) !important; }
.manifesto-author{ color:#7DD3FC !important; }

/* ============ EYEBROWS — celeste ============ */
.eyebrow,
.intro-video-eyebrow,
.bio-header .eyebrow,
.bio-text .bio-kicker,
.awards-header .eyebrow,
.works-header .eyebrow,
.gallery-header .eyebrow,
.contact-header .eyebrow,
.testimonios-header .eyebrow,
.work-content .work-kicker{ color:#0284C7 !important; }
.eyebrow .bar,
.intro-video-eyebrow .bar,
.bio-header .eyebrow .bar,
.awards-header .eyebrow .bar,
.works-header .eyebrow .bar,
.gallery-header .eyebrow .bar,
.contact-header .eyebrow .bar,
.testimonios-header .eyebrow .bar{ background:#0EA5E9 !important; }

/* En contextos oscuros */
.testimonios-header .eyebrow,
.work-block.dark .work-content .work-kicker,
.intro-video-eyebrow{ color:#7DD3FC !important; }

/* divider-gold del hero */
.divider-gold{ background:linear-gradient(90deg,#7DD3FC,#0EA5E9) !important; }
.motto strong{ color:#7DD3FC !important; font-style:normal; }

/* ============ BTN-SHOP ============ */
.btn-shop .ico-bag{ background:#0EA5E9 !important; color:#fff !important; }
.btn-shop:hover{ border-color:#7DD3FC !important; }
.btn-shop:hover .ico-bag{ background:#38BDF8 !important; }
.btn-shop .badge{ background:#0EA5E9 !important; color:#fff !important; border-color:#082F49 !important; }
.topbar.scrolled .btn-shop .badge{ border-color:#fff !important; }

/* ============ CONTACT ============ */
.contact-section{ background:linear-gradient(180deg,#FFFFFF 0%, #F0F9FF 100%) !important; }
.contact-section::before{ background-image:radial-gradient(rgba(14,165,233,.06) 1px, transparent 1px) !important; }
.contact-featured{ background:linear-gradient(135deg,#082F49,#0C4A6E) !important; border-top-color:#0EA5E9 !important; border-radius:20px !important; }
.contact-featured::before{ background:radial-gradient(circle, rgba(14,165,233,.20) 0%, transparent 70%) !important; }
.contact-featured-text .kicker{ color:#7DD3FC !important; }
.contact-option{ border-radius:18px !important; border-top-color:#0EA5E9 !important; }
.contact-option:hover{ border-color:#7DD3FC !important; box-shadow:0 18px 40px rgba(14,165,233,.12) !important; }
.contact-option .ico{ background:rgba(14,165,233,.12) !important; color:#0284C7 !important; border-radius:14px !important; }
.contact-option-body .lnk{ color:#0284C7 !important; }
.contact-info-bar{ background:linear-gradient(135deg,#082F49,#0C4A6E) !important; border-top-color:rgba(125,211,252,.3) !important; border-radius:18px !important; }
.info-item .ico{ background:rgba(125,211,252,.18) !important; color:#7DD3FC !important; border-color:rgba(125,211,252,.32) !important; }
.info-item-data .lbl{ color:#7DD3FC !important; }

/* ============ EMAIL CTA FORM ============ */
.cta-form{ background:#082F49 !important; }
.cta-form-inner{ border-radius:18px !important; border-top-color:#0EA5E9 !important; }
.cta-icon{ background:rgba(14,165,233,.12) !important; color:#0284C7 !important; }
.cta-form-row input:focus{ border-color:#0EA5E9 !important; box-shadow:0 0 0 4px rgba(14,165,233,.15) !important; }

/* ============ FOOTER ============ */
.site-footer{ background:#082F49 !important; border-top-color:#0EA5E9 !important; }
.footer-mark{ color:rgba(125,211,252,.06) !important; }
.footer-hero .tagline{ color:#7DD3FC !important; }
.footer-hero .divider{ background:linear-gradient(90deg,#7DD3FC,#38BDF8) !important; }
.footer-hero .signature{ color:#7DD3FC !important; }
.footer-col h4{ color:#7DD3FC !important; }
.footer-col h4::after{ background:#0EA5E9 !important; }
.footer-col ul a::before{ color:#7DD3FC !important; }
.contact-item .icon{ background:rgba(14,165,233,.15) !important; border-color:rgba(125,211,252,.3) !important; color:#7DD3FC !important; }
.footer-social a:hover{ background:linear-gradient(135deg,#0EA5E9,#0284C7) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 12px 24px rgba(14,165,233,.40) !important; }
.footer-bottom .legal a:hover{ color:#7DD3FC !important; }
.back-top:hover{ color:#7DD3FC !important; }
.back-top:hover .arrow{ background:linear-gradient(135deg,#0EA5E9,#0284C7) !important; border-color:transparent !important; color:#fff !important; }

/* ============ MENU GLASSMORPHIC — fondo celeste tenue (sobre hero oscuro) ============ */
nav.menu{
  background:rgba(8,47,73,.55) !important;
}
.topbar.scrolled nav.menu{
  background:rgba(8,47,73,.85) !important;
}
nav.menu a.active{
  background:rgba(14,165,233,.20) !important;
  color:#fff !important;
}

/* ============================================================
   TOPBAR EN PÁGINAS INTERNAS (.is-internal)
   Fondo blanco sólido + textos navy oscuro · sin transparencias lavadas
   ============================================================ */
.topbar.is-internal{
  background:#fff !important;
  backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(14,165,233,.10), 0 8px 24px rgba(12,27,51,.06) !important;
  border-bottom:1px solid rgba(14,165,233,.08) !important;
}
.topbar.is-internal .brand .name{
  color:#0C1B33 !important;
  text-shadow:none !important;
  font-weight:800;
}
.topbar.is-internal .brand .tag{
  color:#0284C7 !important;
  text-shadow:none !important;
  font-weight:700;
}
.topbar.is-internal .brand .logo-white{ opacity:0 !important; }
.topbar.is-internal .brand .logo-gold{ opacity:1 !important; }

/* Menú: fondo claro en lugar de glass oscuro */
.topbar.is-internal nav.menu{
  background:#F0F9FF !important;
  border-color:rgba(14,165,233,.18) !important;
  box-shadow:0 2px 8px rgba(14,165,233,.08), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.topbar.is-internal nav.menu a{
  color:#0C1B33 !important;
  font-weight:600;
  text-shadow:none !important;
}
.topbar.is-internal nav.menu a:hover{
  background:rgba(14,165,233,.12) !important;
  color:#0284C7 !important;
}
.topbar.is-internal nav.menu a.active{
  background:linear-gradient(90deg,#0EA5E9,#0284C7) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(14,165,233,.30) !important;
}

/* Botón tienda en scrolled */
.topbar.is-internal .btn-shop{
  background:#F0F9FF !important;
  color:#0C1B33 !important;
  border-color:rgba(14,165,233,.18) !important;
  box-shadow:0 4px 12px rgba(14,165,233,.10) !important;
}
.topbar.is-internal .btn-shop:hover{
  background:#E0F2FE !important;
  border-color:#7DD3FC !important;
}
.topbar.is-internal .btn-shop .ico-bag{
  background:linear-gradient(135deg,#0EA5E9,#0284C7) !important;
  color:#fff !important;
}
.topbar.is-internal .btn-shop .badge{
  background:#0EA5E9 !important;
  color:#fff !important;
  border-color:#fff !important;
}

/* Padding más compacto en internas (ya no es hero) */
.topbar.is-internal{
  padding:14px 56px !important;
}
@media (max-width:980px){
  .topbar.is-internal{ padding:12px 20px !important; }
}

/* ============ WORK-LIST bullet — celeste ============ */
.work-list li::before{ background:#0EA5E9 !important; }
.work-list li::before{ box-shadow:0 0 0 2px rgba(14,165,233,.18); }
.book-item .book-status{ background:linear-gradient(90deg,#0EA5E9,#0284C7) !important; color:#fff !important; border-radius:6px !important; }
.book-item .book-status.coming{ background:transparent !important; border-color:#0EA5E9 !important; color:#0284C7 !important; }
.work-block.dark .book-item .book-status.coming{ color:#7DD3FC !important; border-color:#7DD3FC !important; }
.work-cta{ color:#0284C7 !important; }
.work-block.dark .work-cta{ color:#7DD3FC !important; }
.work-cta:hover{ color:#082F49 !important; }
.work-block.dark .work-cta:hover{ color:#fff !important; }

.card-arrow{ color:#0284C7 !important; }

/* ============================================================
   TIENDA — listado, detalle, carrito, checkout, gracias, tracking
   ============================================================ */

/* Wrapper común para todas las páginas de tienda — empuja por debajo del topbar fixed */
.tienda-page{
  padding:140px 56px 100px;
  background:#fff;
  min-height:80vh;
}
.tienda-page > .container{ max-width:1240px; margin:0 auto; }

/* Hero de la tienda */
.tienda-hero{
  text-align:center;max-width:780px;margin:0 auto 56px;
}
.tienda-hero .eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;color:#0284C7;
  letter-spacing:5px;text-transform:uppercase;margin-bottom:20px;justify-content:center;
}
.tienda-hero .eyebrow .bar{ width:36px;height:1px;background:#0EA5E9; }
.tienda-hero h1{
  font-family:'Outfit',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:800;
  color:#0C1B33;line-height:1.1;letter-spacing:-1.5px;margin:0 0 14px;
}
.tienda-hero p{ font-size:16px;color:#475569;line-height:1.65;margin:0; }
.tienda-hero .eyebrow{ color:#0369A1 !important; }

/* Grid de productos */
.tienda-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1240px;margin:0 auto;
}

/* Card de producto */
.producto-card{
  background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid rgba(12,74,110,.10);
  display:flex;flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  box-shadow:0 8px 24px rgba(12,27,51,.08);
}
.producto-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(12,27,51,.18);
  border-color:#0284C7;
}
.producto-card > a{ display:block; }
.producto-card img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  background:#E0F2FE;display:block;
}
.producto-portada-placeholder{
  width:100%;aspect-ratio:4/5;
  background:linear-gradient(135deg,#E0F2FE,#fff);
  display:flex;align-items:center;justify-content:center;color:#7DD3FC;
}
.producto-portada-placeholder svg{ width:56px;height:56px; }

.producto-body{
  padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;
}
.producto-tipo{
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:#0369A1;font-weight:700;margin-bottom:8px;
}
.producto-card h3{
  font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;
  color:#0C1B33;line-height:1.25;margin:0 0 10px;
}
.producto-card h3 a{ color:inherit;text-decoration:none; }
.producto-card p{
  font-size:13px;line-height:1.55;color:#475569;
  margin:0 0 14px;flex:1;
}
.producto-precio{
  font-family:'Space Grotesk',monospace;font-weight:800;
  font-size:24px;color:#0C4A6E;margin-bottom:14px;
}

/* Botón del card debe ser pequeño y solo dentro de la card, no a todo el ancho */
.producto-card .add-cart-form{
  display:flex;
}
.producto-card .add-cart-form .btn-primary{
  width:100%;justify-content:center;
  padding:13px 20px;font-size:11px;letter-spacing:2px;
  border-radius:999px;
  animation:none !important;
}
.producto-card a.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;font-size:11px;letter-spacing:2px;
  border-radius:999px;width:100%;
  animation:none !important;
}

/* Empty state */
.tienda-empty{
  text-align:center;max-width:560px;margin:0 auto;
  background:#fff;border-radius:18px;padding:64px 32px;
  border:1px solid rgba(14,165,233,.12);
}
.tienda-empty h3{
  font-family:'Outfit',sans-serif;font-size:22px;color:#0C1B33;margin-bottom:10px;
}
.tienda-empty p{ font-size:14px;color:#64748B; }

/* Garantizar padding-top en TODAS las páginas internas de tienda
   (carrito, checkout, gracias, tracking, detalle) que tienen el topbar fixed */
body > section[class*="tienda-page"],
body > .tienda-page{
  padding-top:140px;
}

/* Responsive */
@media (max-width:980px){
  .tienda-page{ padding:120px 24px 80px; }
  .tienda-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
@media (max-width:600px){
  .tienda-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   PÁGINAS INTERNAS — /contacto y /politica
   Clases que el HTML usa pero no estaban en public.css original.
   ============================================================ */

/* ============ /CONTACTO ============ */
.contact-page{
  padding:140px 24px 80px;
  background:#fff;
  min-height:80vh;
}
.contact-wrap{
  max-width:760px;margin:0 auto;
  background:#fff;border-radius:20px;
  border:1px solid rgba(12,74,110,.10);
  box-shadow:0 16px 40px rgba(12,27,51,.08);
  padding:48px 44px;
}
.contact-wrap .eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;color:#0369A1;
  letter-spacing:5px;text-transform:uppercase;margin-bottom:18px;
}
.contact-wrap .eyebrow .bar{ width:36px;height:1px;background:#0EA5E9; }
.contact-wrap h1{
  font-family:'Outfit',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:700;
  color:#0C1B33;line-height:1.2;letter-spacing:-.4px;margin:0 0 14px;
}
.contact-wrap .lead{
  font-size:15px;line-height:1.6;color:#475569;margin:0 0 28px;
}

.contact-form{ display:flex;flex-direction:column;gap:14px; }
.contact-form .row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.contact-form label{
  display:flex;flex-direction:column;gap:6px;
  font-size:11px;font-weight:700;color:#0C1B33;
  letter-spacing:1.5px;text-transform:uppercase;
}
.contact-form input,
.contact-form textarea{
  padding:14px 16px;border:1.5px solid rgba(12,74,110,.18);
  border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;
  color:#0C1B33;background:#fff;
  transition:border-color .15s, box-shadow .15s;
  font-weight:500;letter-spacing:0;text-transform:none;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:0;border-color:#0EA5E9;
  box-shadow:0 0 0 4px rgba(14,165,233,.15);
}
.contact-form textarea{ resize:vertical;min-height:140px; }
.contact-form button{
  margin-top:14px;align-self:flex-start;
  padding:14px 32px;
}

/* Alerts */
.contact-wrap .alert{
  padding:14px 18px;border-radius:12px;margin-bottom:20px;font-size:14px;font-weight:500;
}
.contact-wrap .alert-ok{
  background:rgba(16,185,129,.08);
  color:#047857;
  border:1px solid rgba(16,185,129,.25);
}
.contact-wrap .alert-err{
  background:rgba(239,68,68,.08);
  color:#B91C1C;
  border:1px solid rgba(239,68,68,.25);
}

@media (max-width:600px){
  .contact-page{ padding:120px 16px 60px; }
  .contact-wrap{ padding:32px 22px;border-radius:16px; }
  .contact-form .row{ grid-template-columns:1fr; }
  .contact-form button{ width:100%;justify-content:center;align-self:stretch; }
}

/* ============ /POLITICA ============ */
.politica-pub{
  padding:140px 24px 80px;
  background:#fff;
  min-height:80vh;
}
.politica-hero{
  text-align:center;max-width:760px;margin:0 auto 56px;
}
.politica-hero .eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;color:#0369A1;
  letter-spacing:5px;text-transform:uppercase;margin-bottom:18px;justify-content:center;
}
.politica-hero .eyebrow .bar{ width:36px;height:1px;background:#0EA5E9; }
.politica-hero h1{
  font-family:'Outfit',sans-serif;font-size:clamp(28px,3.5vw,42px);font-weight:800;
  color:#0C1B33;line-height:1.15;letter-spacing:-.6px;margin:0 0 14px;
}
.politica-hero p{ font-size:16px;line-height:1.6;color:#475569;margin:0; }

.politica-grupo{
  max-width:1240px;margin:0 auto 60px;
}
.politica-grupo header{
  text-align:center;max-width:640px;margin:0 auto 28px;
}
.politica-grupo header h2{
  font-family:'Outfit',sans-serif;font-size:clamp(22px,2.6vw,32px);font-weight:700;
  color:#0C1B33;letter-spacing:-.4px;margin:0 0 8px;
}
.politica-grupo header p{ color:#475569;font-size:14px;margin:0; }

.politica-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}

.politica-card{
  background:#fff;border-radius:16px;overflow:hidden;
  border:1px solid rgba(12,74,110,.10);
  box-shadow:0 8px 22px rgba(12,27,51,.06);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  display:flex;flex-direction:column;
}
.politica-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px rgba(12,27,51,.14);
  border-color:#0284C7;
}
.politica-card img{
  width:100%;aspect-ratio:16/9;object-fit:cover;background:#E0F2FE;
}
.politica-card-body{
  padding:22px 24px 24px;
}
.politica-card .meta{
  display:block;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:#0369A1;font-weight:700;margin-bottom:8px;
}
.politica-card h3{
  font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;
  color:#0C1B33;line-height:1.3;margin:0 0 10px;
}
.politica-card p{
  font-size:13px;line-height:1.55;color:#475569;margin:0;
}

.politica-empty{
  text-align:center;max-width:520px;margin:0 auto;
  background:#fff;border-radius:16px;padding:48px 32px;
  border:1px solid rgba(12,74,110,.10);
}
.politica-empty h3{
  font-family:'Outfit',sans-serif;font-size:20px;color:#0C1B33;margin-bottom:10px;
}
.politica-empty p{ font-size:14px;color:#475569; }

@media (max-width:980px){
  .politica-grid{ grid-template-columns:repeat(2,1fr);gap:18px; }
}
@media (max-width:600px){
  .politica-pub{ padding:120px 16px 60px; }
  .politica-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   FIX GLOBAL: Letras cortadas en headings grandes
   - overflow-wrap permite quebrar palabras largas
   - quitar white-space:nowrap del .big-name (corta la última palabra)
   - reducir font-sizes con clamp() para escalar suave
   ============================================================ */

/* Solo bloqueamos scroll horizontal a nivel HTML (nunca en sections,
   porque overflow:hidden en sections recorta italics que se salen
   ligeramente de su bounding box). */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; max-width:100vw; }

/* QUITAR italic de los <em> dentro de headings.
   Outfit italic + letter-spacing negativo + bold hace que las letras
   se salgan de su caja — y cualquier overflow:hidden las recorta.
   Solución: diferenciar con color y peso, no con italic. */
.big-name em,
.intro-video-title em,
.bio-header h2 em,
.bio-text h3 em,
.awards-header h2 em,
.works-header h2 em,
.gallery-header h2 em,
.testimonios-header h2 em,
.contact-header h2 em,
.featured-quote strong,
.featured-quote em,
.featured-right h3 em,
.work-content h3 em,
.contact-featured-text h3 em,
.manifesto-quote em,
.manifesto-quote strong,
.footer-hero h2 em,
.footer-hero .quote strong,
.testimonio-card .text em,
.testimonio-card .text strong{
  font-style:normal !important;        /* QUITAR italic */
  display:inline-block;                 /* contiene letras dentro del flow */
  padding-inline:.05em;                 /* respiro lateral mínimo */
}

/* Wrap natural en palabras enteras */
.big-name,
.intro-video-title,
.bio-header h2,
.bio-text h3,
.awards-header h2,
.works-header h2,
.gallery-header h2,
.testimonios-header h2,
.contact-header h2,
.featured-quote,
.featured-right h3,
.work-content h3,
.contact-featured-text h3,
.manifesto-quote,
.footer-hero h2{
  hyphens:manual !important;
  -webkit-hyphens:manual !important;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
  white-space:normal !important;
  max-width:100%;
}

/* Grid/flex items: min-width:0 para respetar wrap del texto */
.hero-content > *,
.bio-split > *,
.contact-featured > *,
.work-block > *,
.featured-content > *{ min-width:0; max-width:100%; }

section h1, section h2, section h3, section h4{ max-width:100%; }

/* QUITAR overflow:hidden de las secciones — recorta italics y letras */
.hero, .intro-video, .bio, .works, .awards, .gallery,
.testimonios, .stats-section, .manifesto, .contact-section,
.site-footer, .tienda-page{
  overflow-x:visible !important;
  overflow-y:visible !important;
}

/* Hero: nunca cortar una palabra a la mitad — wrap normal */
.big-name,
.big-name .name-wrap{
  white-space:normal !important;
}

/* Decoraciones gigantes — overflow oculto (no son texto real) */
.bio::before,
.footer-mark,
.manifesto-decoration{
  white-space:nowrap;
  overflow:hidden;
  max-width:100%;
}

/* Contener todas las secciones — nunca permitir scroll horizontal */
.hero, .intro-video, .bio, .works, .awards, .gallery,
.testimonios, .stats-section, .manifesto, .contact-section,
.site-footer, .tienda-page{
  overflow-x:hidden;
}

/* ============ HERO MOBILE: mostrar foto del Dr. ============ */
/* El CSS original oculta .hero-left en <=1200px. La hacemos visible con tamaño
   adecuado al stack vertical. La foto va arriba y el texto debajo, centrado. */
@media (max-width:1200px){
  .hero-content{
    grid-template-columns:1fr !important;
    text-align:center;
    padding:90px 24px 60px !important;
    gap:0;
  }
  .hero-left{
    display:flex !important;
    align-items:flex-end;
    justify-content:center;
    height:auto !important;
    margin-bottom:-30px;
  }
  .person-png{
    height:auto !important;
    max-height:340px !important;
    width:auto;
    max-width:80%;
    -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .hero-right{
    padding:10px 0 0 !important;
  }
}
@media (max-width:600px){
  .hero-content{ padding:80px 18px 50px !important; }
  .person-png{ max-height:260px !important; max-width:78% !important; }
  .hero-left{ margin-bottom:-20px; }
}
@media (max-width:380px){
  .person-png{ max-height:220px !important; max-width:80% !important; }
}

/* AJUSTE OUTFIT vs PLAYFAIR:
   Los font-sizes del CSS original fueron calibrados para Playfair Display
   (serif compacto). Outfit es ~12% más ancho horizontalmente.
   Reducimos los headings ese ~12% para que ocupen el mismo ancho visual
   que el diseño aprobado, sin que se salgan del viewport. */

.big-name              { font-size:84px !important; letter-spacing:-2.5px !important; }
.intro-video-title     { font-size:52px !important; letter-spacing:-1.2px !important; }
.bio-header h2,
.awards-header h2,
.works-header h2,
.gallery-header h2,
.testimonios-header h2,
.contact-header h2,
.footer-hero h2        { font-size:46px !important; letter-spacing:-1.2px !important; }
.bio-text h3,
.work-content h3,
.featured-right h3,
.contact-featured-text h3{ font-size:34px !important; letter-spacing:-.8px !important; }
.manifesto-quote       { font-size:60px !important; letter-spacing:-1.5px !important; }
.featured-quote        { font-size:32px !important; letter-spacing:-.4px !important; }
.featured-year         { font-size:88px !important; letter-spacing:-1.5px !important; }
.work-visual .visual-tag .num { font-size:54px !important; }
.featured-mark         { font-size:120px !important; }

/* Tablet — escalar suave */
@media (max-width:1100px){
  .big-name              { font-size:60px !important; letter-spacing:-1.2px !important; }
  .intro-video-title     { font-size:42px !important; }
  .bio-header h2,
  .awards-header h2,
  .works-header h2,
  .gallery-header h2,
  .testimonios-header h2,
  .contact-header h2,
  .footer-hero h2        { font-size:34px !important; }
  .bio-text h3,
  .work-content h3,
  .featured-right h3,
  .contact-featured-text h3{ font-size:26px !important; }
  .manifesto-quote       { font-size:42px !important; }
  .featured-quote        { font-size:24px !important; }
}

/* Mobile — más compacto */
@media (max-width:600px){
  .big-name              { font-size:42px !important; letter-spacing:-.8px !important; }
  .big-name .dr          { font-size:24px !important; }
  .intro-video-title     { font-size:30px !important; }
  .bio-header h2,
  .awards-header h2,
  .works-header h2,
  .gallery-header h2,
  .testimonios-header h2,
  .contact-header h2,
  .footer-hero h2        { font-size:28px !important; }
  .manifesto-quote       { font-size:32px !important; line-height:1.2 !important; }
  .featured-quote        { font-size:22px !important; }
  .contact-featured-text h3{ font-size:24px !important; }
  /* paddings laterales mínimos */
  .intro-video, .manifesto, .contact-section, .bio,
  .works, .awards, .gallery, .testimonios,
  .stats-section, .footer-hero, .footer-grid{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}