/*
 * index.css — Clínica Dra. Julieta Rivero · Homepage
 * Estilos exclusivos de index.html.
 * Requiere global.css cargado primero.
 *
 * Variables de color del homepage
 */
:root {
  --bg:       #0c0b08;
  --bg-dark:  #0f0e0a;
  --bg-mid:   #161410;
  --bg-deep:  #0a0908;
  --gold:     #c4a352;
  --gold-dim: rgba(196,163,82,0.28);
  --accent:   #f0e8d2;
  --text:     #f0e8d2;
  --text-sec: rgba(240,232,210,0.65);
  --text-dim: rgba(240,232,210,0.38);
  --border:   rgba(196,163,82,0.1);
  --border-l: rgba(240,232,210,0.1);
  --hero-glow:  rgba(196,163,82,0.06);
  --cta-stripe: rgba(0,0,0,0.04);
  --cta-border: rgba(0,0,0,0.2);
}

html, body { background:#0c0b08; font-family:'Cormorant Garamond',serif; min-height:100vh; }
.page { width:100%; background:#0c0b08; overflow-x:hidden; }

/* ══ GRID ══ */
.main-grid { display:grid; grid-template-columns:40px 1fr 1fr; min-height:100vh; padding-top:64px; }

/* ══ SIDEBAR ══ */
.sidebar { background:#c4a352; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg); }
.sidebar-text { font-family:'DM Sans',sans-serif; font-size:16px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:#0c0b08; white-space:nowrap; }

/* ══ LEFT ══ */
.left { padding:64px 48px 52px 40px; display:flex; flex-direction:column; justify-content:space-between; border-right:0.5px solid rgba(196,163,82,0.1); position:relative; }
.corner-tr { position:absolute; top:32px; right:32px; width:22px; height:22px; border-top:0.5px solid rgba(196,163,82,0.28); border-right:0.5px solid rgba(196,163,82,0.28); }
.corner-bl { position:absolute; bottom:32px; left:40px; width:22px; height:22px; border-bottom:0.5px solid rgba(196,163,82,0.28); border-left:0.5px solid rgba(196,163,82,0.28); }
.eyebrow { font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.26em; text-transform:uppercase; color:rgba(196,163,82,0.62); margin-bottom:28px; display:flex; align-items:center; gap:10px; }
.eyebrow::before { content:''; width:24px; height:0.5px; background:rgba(196,163,82,0.38); display:inline-block; }
.hero-title { font-size:90px; line-height:0.86; font-weight:300; color:#f0e8d2; font-style:italic; letter-spacing:-0.015em; }
.hero-title .gold { display:block; font-style:normal; color:#c4a352; font-size:78px; margin-top:4px; }
.bottom-left { margin-top:auto; padding-top:48px; }
.quote-with-photo { display:inline-flex; align-items:flex-end; gap:16px; margin-bottom:40px; }
.quote-block { border-left:1.5px solid rgba(196,163,82,0.28); padding-left:18px; }
.julieta-photo { width:119px; height:150px; object-fit:cover; object-position:center top; filter:grayscale(15%) contrast(1.05) brightness(0.9); border-right:1.5px solid rgba(196,163,82,0.28); }
.quote-text { font-size:20px; font-style:italic; color:rgba(240,232,210,0.48); line-height:1.9; display:block; margin-bottom:10px; }
.quote-author { font-family:'DM Sans',sans-serif; font-size:14px; font-weight:300; letter-spacing:0.18em; text-transform:uppercase; color:rgba(196,163,82,0.42); display:block; }
.cta-row { display:flex; align-items:center; gap:24px; }
.cta-primary { display:inline-block; text-decoration:none; font-family:'DM Sans',sans-serif; font-size:18px; letter-spacing:0.2em; text-transform:uppercase; color:#0c0b08; background:#c4a352; padding:15px 32px; cursor:pointer; border:none; transition:opacity .2s; }
.cta-primary:hover { opacity:0.85; }
.cta-secondary { font-family:'DM Sans',sans-serif; font-size:18px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(240,232,210,0.28); cursor:pointer; border-bottom:0.5px solid rgba(240,232,210,0.16); padding-bottom:2px; }

/* ══ RIGHT VIDEO PANEL ══ */
.right { position:relative; overflow:hidden; background:#f5f2ee; }
.right-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; display:block; filter:contrast(1.04) brightness(0.88) saturate(0.88); -webkit-mask-image:linear-gradient(to right, black 55%, transparent 88%); mask-image:linear-gradient(to right, black 55%, transparent 88%); }

/* Overlays */
.ov { position:absolute; pointer-events:none; z-index:1; }
.ov-left { top:0; left:0; width:32%; height:100%; background:linear-gradient(to right, rgba(12,11,8,0.95) 0%, rgba(12,11,8,0.5) 50%, transparent 100%); }
.ov-bottom { bottom:0; left:0; right:0; height:52%; background:linear-gradient(to top, rgba(7,6,4,0.97) 0%, rgba(7,6,4,0.75) 30%, rgba(7,6,4,0.25) 60%, transparent 100%); }
.ov-right { top:0; right:0; width:30%; height:100%; background:linear-gradient(to right, transparent 0%, rgba(12,11,8,0.92) 100%); }
.ov-top { top:0; left:0; right:0; height:22%; background:linear-gradient(to bottom, rgba(12,11,8,0.55) 0%, transparent 100%); }
.ov-warm { inset:0; position:absolute; background:rgba(196,163,82,0.03); }

/* Logo reveal */
.logo-reveal { position:absolute; right:2%; top:50%; transform:translateY(-50%); width:30%; z-index:3; pointer-events:none; opacity:0; transition:opacity 0.05s linear; }
.logo-reveal img { width:100%; height:auto; display:block; filter:drop-shadow(0 2px 12px rgba(196,163,82,0.3)) drop-shadow(0 0 24px rgba(196,163,82,0.15)); }

/* Contenido superpuesto */
.right-content { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:space-between; padding:28px 32px 36px 28px; }
.right-tag { align-self:flex-end; font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(196,163,82,0.75); border:0.5px solid rgba(196,163,82,0.28); padding:6px 14px; background:rgba(12,11,8,0.35); }
.treats-label { font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(196,163,82,0.5); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.treats-label::after { content:''; flex:1; height:0.5px; background:rgba(196,163,82,0.16); }
.treat-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:0.5px solid rgba(196,163,82,0.1); }
.treat-item:last-child { border-bottom:0.5px solid rgba(196,163,82,0.1); }
.treat-num { font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.12em; color:rgba(196,163,82,0.4); width:20px; flex-shrink:0; }
.treat-name { font-family:'DM Sans',sans-serif; font-size:18px; font-weight:300; letter-spacing:0.03em; color:rgba(240,232,210,0.85); }
.treat-arrow { margin-left:auto; font-size:14px; color:rgba(196,163,82,0.3); flex-shrink:0; }
.treat-link { text-decoration:none; cursor:none; transition:background .2s, padding-left .2s; }
.treat-link:hover { background:rgba(196,163,82,0.06); padding-left:8px; }
.treat-link:hover .treat-arrow { color:rgba(196,163,82,0.8); transform:translateX(4px); }
.treat-link:hover .treat-name { color:#c4a352; }

/* ══ BOTTOM BAR ══ */
.bottom-bar { display:grid; grid-template-columns:40px 1fr 1fr; border-top:0.5px solid rgba(196,163,82,0.1); }
.bb-gold { background:#c4a352; }
.bb-stats { display:flex; border-right:0.5px solid rgba(196,163,82,0.08); }
.bb-stat { flex:1; padding:18px 20px; border-right:0.5px solid rgba(196,163,82,0.08); }
.bb-stat:last-child { border-right:none; }
.bb-num { display:block; font-size:26px; font-weight:300; color:#c4a352; }
.bb-lbl { display:block; font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(240,232,210,0.22); margin-top:2px; }
.bb-marquee { padding:18px 24px; display:flex; align-items:center; overflow:hidden; }
.bb-marquee-text { font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(240,232,210,0.13); white-space:nowrap; }
.foot-note { font-family:'DM Sans',sans-serif; font-size:18px; color:rgba(196,163,82,0.28); letter-spacing:0.1em; text-align:center; line-height:1.9; }

/* ══ REVIEWS GOOGLE ══ */
.section-reviews { background:#0c0b08; padding:100px 0; border-top:0.5px solid rgba(196,163,82,0.1); }
.reviews-inner { max-width:1160px; margin:0 auto; padding:0 80px; }
.section-header { display:flex; align-items:center; gap:20px; margin-bottom:56px; }
.section-number { font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.2em; color:rgba(196,163,82,0.45); flex-shrink:0; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:300; font-style:italic; color:#f0e8d2; letter-spacing:0.02em; white-space:nowrap; }
.section-line { flex:1; height:0.5px; background:rgba(196,163,82,0.18); }
.reviews-meta { display:flex; align-items:center; gap:48px; margin-bottom:48px; padding-bottom:40px; border-bottom:0.5px solid rgba(196,163,82,0.1); }
.reviews-score, .reviews-count { display:flex; flex-direction:column; gap:4px; }
.reviews-score-num, .reviews-total { font-family:'Cormorant Garamond',serif; font-size:54px; font-weight:300; line-height:1; }
.reviews-score-num { color:#c4a352; }
.reviews-total { color:#f0e8d2; }
.reviews-stars { color:#c4a352; font-size:18px; letter-spacing:2px; }
.reviews-platform, .reviews-total-label { font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(240,232,210,0.3); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(196,163,82,0.1); margin-bottom:48px; }
.review-card { background:#0c0b08; padding:36px 32px; display:flex; flex-direction:column; gap:20px; }
.review-stars { color:#c4a352; font-size:16px; letter-spacing:3px; }
.review-text { font-family:'Cormorant Garamond',serif; font-size:20px; font-style:italic; color:rgba(240,232,210,0.72); line-height:1.9; flex:1; }
.review-footer { display:flex; justify-content:space-between; align-items:flex-end; border-top:0.5px solid rgba(196,163,82,0.1); padding-top:16px; }
.review-name { font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.12em; color:rgba(240,232,210,0.55); }
.review-date { font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.1em; color:rgba(240,232,210,0.22); }
.reviews-cta { text-align:center; padding-top:8px; }
.reviews-btn { font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:#c4a352; text-decoration:none; border-bottom:0.5px solid rgba(196,163,82,0.3); padding-bottom:3px; transition:opacity .2s; }
.reviews-btn:hover { opacity:.65; }

/* ══ FOOTER — homepage ══ */
footer { background:#0f0e0a; border-top:0.5px solid rgba(196,163,82,0.18); padding:64px 80px 40px; }
.footer-top { display:grid; grid-template-columns:1fr auto 1fr; gap:64px; align-items:start; padding-bottom:48px; border-bottom:0.5px solid rgba(196,163,82,0.1); margin-bottom:32px; }
.footer-brand { display:flex; flex-direction:column; gap:8px; }
.footer-logo-name { font-family:'Cormorant Garamond',serif; font-size:21px; font-style:italic; color:#c4a352; opacity:.8; }
.footer-tagline { font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.14em; color:rgba(240,232,210,0.28); line-height:1.7; }
.footer-nav-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.footer-nav-label { font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(196,163,82,0.45); display:block; margin-bottom:18px; }
.footer-nav-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-nav-col a { font-family:'DM Sans',sans-serif; font-size:18px; letter-spacing:0.08em; color:rgba(240,232,210,0.38); text-decoration:none; transition:color .2s; }
.footer-nav-col a:hover { color:#c4a352; }
.footer-contact { display:flex; flex-direction:column; gap:10px; }
.footer-contact-label { font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(196,163,82,0.45); margin-bottom:6px; }
.footer-contact-email { font-family:'DM Sans',sans-serif; font-size:18px; color:rgba(240,232,210,0.42); text-decoration:none; transition:color .2s; }
.footer-contact-email:hover { color:#c4a352; }
.footer-contact-place { font-family:'DM Sans',sans-serif; font-size:14px; color:rgba(240,232,210,0.22); letter-spacing:0.06em; }
.footer-cta-link { margin-top:18px; font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:#c4a352; text-decoration:none; border-bottom:0.5px solid rgba(196,163,82,0.3); padding-bottom:2px; transition:opacity .2s; }
.footer-cta-link:hover { opacity:.6; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; }
.footer-legal-text { font-family:'DM Sans',sans-serif; font-size:16px; letter-spacing:0.1em; color:rgba(240,232,210,0.18); }
.footer-legal-links { display:flex; gap:24px; }
.footer-legal-links a { font-family:'DM Sans',sans-serif; font-size:16px; color:rgba(240,232,210,0.18); text-decoration:none; transition:color .2s; }
.footer-legal-links a:hover { color:rgba(240,232,210,0.48); }

/* ══ RESPONSIVE ══ */
@media (max-width:1024px) {
  footer { padding:56px 40px 36px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand { grid-column:1 / -1; }
  .reviews-inner { padding:0 40px; }
  .section-title { font-size:30px; }
  .main-grid { grid-template-columns:32px 1fr; }
  .right { display:none; }
  .hero-title { font-size:70px; }
  .hero-title .gold { font-size:60px; }
  .bottom-bar { grid-template-columns:32px 1fr; }
  .bb-marquee { display:none; }
  .left { padding:56px 40px 48px 36px; }
  .main-grid { padding-top:64px; }
}

@media (max-width:768px) {
  footer { padding:48px 24px 32px; }
  .footer-top { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .footer-legal-links { justify-content:center; }
  .section-reviews { padding:64px 0; }
  .reviews-inner { padding:0 24px; }
  .reviews-grid { grid-template-columns:1fr; }
  .section-title { font-size:26px; white-space:normal; }
  .reviews-meta { gap:28px; }
  .main-grid { grid-template-columns:1fr; min-height:auto; }
  .sidebar { display:none; }
  .left { padding:44px 24px 40px; }
  .corner-tr { top:16px; right:16px; }
  .corner-bl { bottom:16px; left:24px; }
  .hero-title { font-size:54px; }
  .hero-title .gold { font-size:46px; }
  .eyebrow { margin-bottom:20px; }
  .bottom-left { padding-top:36px; }
  .quote-text { font-size:16px; }
  .cta-row { flex-direction:column; align-items:flex-start; gap:16px; }
  .cta-primary { width:100%; text-align:center; padding:16px 24px; }
  .bottom-bar { grid-template-columns:1fr; }
  .bb-gold { display:none; }
  .bb-stats { flex-wrap:wrap; border-right:none; }
  .bb-stat { flex:0 0 33.33%; border-right:0.5px solid rgba(196,163,82,0.08); }
  .bb-stat:last-child { border-right:none; }
  .bb-num { font-size:20px; }
  .bb-marquee { display:none; }
}

@media (max-width:420px) {
  .hero-title { font-size:46px; }
  .hero-title .gold { font-size:38px; }
  .left { padding:36px 20px 36px; }
  .bb-stat { flex:0 0 100%; border-right:none; border-bottom:0.5px solid rgba(196,163,82,0.08); }
}


/* ── Pie legal ───────────────────────────────────────────────────────────
   Discreto a proposito: obligatorio por LSSI y por publicidad sanitaria,
   pero no debe competir con el CTA. */
.pie-legal{ position:static; background:#0c0b08; color:#6f6a60; padding:34px 24px; font-family:'DM Sans',sans-serif; }
.pie-legal-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.pie-legal-links{ position:static; display:block; margin-bottom:14px; }
.pie-legal-links a{ color:#9c8a5e; text-decoration:none; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; margin:0 14px; transition:color .2s; }
.pie-legal-links a:hover{ color:#c4a352; }
.pie-legal-datos{ font-size:11px; line-height:1.9; color:#5d594f; margin:0; }
.pie-legal-datos strong{ color:#7d7567; font-weight:500; }
@media (max-width:560px){
  .pie-legal{ padding:28px 18px; }
  .pie-legal-links a{ display:inline-block; margin:4px 10px; }
  .pie-legal-datos{ font-size:10.5px; }
}

/* ══════════════════════════════════════════════════════════════
   TRATAMIENTOS DEL HERO EN MÓVIL Y TABLETA
   El panel derecho (.right) se ocultaba por debajo de 1024 px, y
   con él desaparecía la lista de los cinco tratamientos — que son
   los unicos enlaces del home a sus paginas. En movil quedaban
   inaccesibles. Aqui el panel se recupera como bloque apilado:
   se oculta solo el video, y la lista se mantiene y se enlaza.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .right{ display:block; grid-column:1 / -1; position:relative; overflow:visible;
    background:#0c0b08; border-top:0.5px solid rgba(196,163,82,0.12); }
  .right-video, .ov{ display:none; }
  .right-content{ position:static; inset:auto; display:block; padding:34px 28px 40px; }
  .right-tag{ display:inline-block; align-self:auto; margin-bottom:26px; font-size:12px; }
  .treats-label{ font-size:13px; letter-spacing:0.2em; margin-bottom:14px; }
  .treat-item{ padding:15px 0; }
  .treat-name{ font-size:16px; line-height:1.4; }
  .treat-num{ font-size:12px; }
  .treat-link{ cursor:pointer; }
  .treat-link:active{ background:rgba(196,163,82,0.08); }
}
@media (max-width:420px){
  .right-content{ padding:28px 20px 34px; }
  .treat-name{ font-size:15px; }
}

/* ── En movil el boton grande de reservar sobra: ya esta fijo en la
      cabecera. Su sitio lo ocupan los enlaces a los tratamientos,
      que es a donde conviene mandar a quien aun esta mirando. ── */
@media (max-width:768px){
  .cta-row{ display:none; }
  .bottom-left{ padding-top:30px; }
  .right{ border-top:none; }
  .right-content{ padding-top:10px; }
}