/* ====== TOKENS ====== */
:root{
  --verde: #3D5A50;
  --verde-oscuro: #2A3F38;
  --crema: #FAF6EF;
  --crema-2: #F1EBDD;
  --azul: #7FA8C9;
  --carbon: #2B2B28;
  --dorado: #C9A35C;
  --blanco: #FFFFFF;

  --serif: 'Fraunces', serif;
  --sans: 'Inter', sans-serif;

  --radius: 4px;
  --max-width: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--sans);
  color: var(--carbon);
  background: var(--crema);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--verde-oscuro);
}
h1{font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 400;}
h2{font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500;}
h3{font-size: 1.25rem; font-weight: 600;}

:focus-visible{
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ====== DECORATIVE HALO (signature motif) ====== */
.halo-deco{
  position: fixed;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  border: 1px solid rgba(61,90,80,0.12);
}
.halo-1{ width:520px; height:520px; top:-180px; right:-220px; }
.halo-1::before{
  content:"";
  position:absolute; inset:40px;
  border-radius:50%;
  border: 1px solid rgba(201,163,92,0.18);
}

/* ====== HEADER ====== */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(250,246,239,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(43,43,40,0.08);
}
.header-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:44px; height:44px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.brand-text{font-size:1.32rem; font-weight:600; color:var(--verde-oscuro); line-height:1.3;}
.brand-text small{font-weight:400; color: var(--carbon); font-size:0.9rem;}

.main-nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.main-nav a{
  font-size:0.95rem; font-weight:500;
  color: var(--verde-oscuro);
  position:relative;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(61,90,80,0.25);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.main-nav a:hover{
  background: rgba(61,90,80,0.08);
  border-color: rgba(61,90,80,0.4);
}
.main-nav a.active{
  background: var(--verde);
  color: var(--crema);
  border-color: var(--verde);
}
.main-nav a.active:hover{background: var(--verde);}

.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:8px;
}
.nav-toggle span{width:24px; height:2px; background:var(--verde-oscuro);}

/* ====== WELCOME ====== */
.welcome{
  background: var(--crema-2);
  padding: 72px 24px;
  position: relative; z-index:1;
  text-align: center;
}
.welcome-inner{
  max-width: 720px;
  margin: 0 auto;
}
.welcome-inner h2{
  margin: 12px 0 28px;
  font-size: 1.8rem;
}
.welcome-inner p{
  font-size: 1.02rem;
  color: #4A4A45;
  line-height: 1.85;
  margin-bottom: 18px;
  text-align: left;
}
.welcome-inner p:last-child{margin-bottom: 0;}
.welcome-divider{
  width: 48px;
  height: 3px;
  background: var(--dorado);
  margin: 0 auto 28px;
  border-radius: 2px;
}

/* ====== HERO ====== */
.hero{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px 96px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items:center;
  position:relative; z-index:1;
}
.eyebrow{
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--verde);
  font-weight:600;
  margin-bottom:18px;
}
.hero-lede{
  font-size:1.08rem;
  max-width:46ch;
  margin: 22px 0 32px;
  color: #4A4A45;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight:600;
  font-size:0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1.5px solid transparent;
}
.btn-primary{
  background: var(--verde);
  color: var(--crema);
}
.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 8px 20px rgba(61,90,80,0.25);}
.btn-ghost{
  border-color: var(--verde-oscuro);
  color: var(--verde-oscuro);
}
.btn-ghost:hover{background: rgba(61,90,80,0.06);}
.btn-large{padding:16px 36px; font-size:1.02rem;}

.hero-image{position:relative;}
.hero-image img{
  border-radius: 6px;
  box-shadow: 0 24px 48px -16px rgba(43,43,40,0.28);
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top center;
}
.hero-image-tag{
  position:absolute;
  bottom:-18px; left:-18px;
  background: var(--blanco);
  padding: 14px 20px;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(43,43,40,0.15);
  font-family: var(--serif);
  font-size:0.95rem;
  font-weight:500;
  color: var(--verde-oscuro);
  border-left: 3px solid var(--dorado);
  max-width: 280px;
}
.hero-image-tag span{
  display:block;
  font-family: var(--sans);
  font-size:0.75rem;
  font-weight:400;
  color: #6b6b66;
  margin-top:4px;
  line-height:1.4;
}

/* ====== SPIRIT SECTION ====== */
.spirit{
  background: var(--verde-oscuro);
  color: var(--crema);
  padding: 96px 24px;
  position:relative;
  z-index:1;
}
.spirit-inner{max-width:760px; margin:0 auto; text-align:center;}
.eyebrow-center{color: var(--dorado);}
.spirit h2{color: var(--crema); margin-bottom:24px;}
.spirit-text{font-size:1.05rem; color: rgba(250,246,239,0.85); max-width:62ch; margin:0 auto;}

.pillars{
  max-width: var(--max-width);
  margin: 64px auto 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pillar{text-align:left;}
.pillar-icon{
  width:48px; height:48px;
  color: var(--dorado);
  margin-bottom:18px;
}
.pillar h3{color: var(--crema); margin-bottom:8px; font-size:1.1rem;}
.pillar p{color: rgba(250,246,239,0.7); font-size:0.95rem;}

/* ====== QUICKLINKS ====== */
.quicklinks{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 96px 24px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position:relative; z-index:1;
}
.qlink{
  background: var(--blanco);
  border: 1px solid rgba(43,43,40,0.08);
  border-radius: 8px;
  padding: 36px 28px;
  position:relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qlink:hover{transform: translateY(-4px); box-shadow: 0 16px 32px rgba(43,43,40,0.1);}
.qlink-num{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:600;
  color: var(--azul);
}
.qlink h3{margin: 14px 0 10px;}
.qlink p{font-size:0.92rem; color:#5c5c57;}
.qlink-arrow{
  position:absolute; bottom:28px; right:28px;
  font-size:1.3rem; color: var(--dorado);
  transition: transform 0.25s ease;
}
.qlink:hover .qlink-arrow{transform: translateX(4px);}

/* ====== CTA FINAL ====== */
.cta-final{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 120px;
  text-align:center;
  position:relative; z-index:1;
}
.cta-final p{margin: 18px 0 32px; font-size:1.05rem; color:#4A4A45;}

/* ====== PAGE HEADER (for sub-pages) ====== */
.page-header{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px 48px;
  position:relative; z-index:1;
}
.page-header h1{margin-bottom:16px;}
.page-header p{max-width:60ch; font-size:1.05rem; color:#4A4A45;}

.spirit-photo{
  max-width: var(--max-width);
  margin: 48px auto 0;
  padding: 0 24px;
}
.spirit-photo img{
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  background: #1e2e29;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}

/* ====== REVIEWS ====== */
.reviews{
  background: var(--crema-2);
  padding: 80px 24px;
  position:relative; z-index:1;
  text-align:center;
}
.reviews-inner{max-width: var(--max-width); margin: 0 auto;}
.reviews h2{margin-bottom:40px;}
.reviews-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.review-card{
  background: var(--blanco);
  border-radius: 8px;
  padding: 28px;
  text-align:left;
  border: 1px solid rgba(43,43,40,0.08);
}
.review-stars{color: #F4A824; font-size:1.1rem; margin-bottom:12px; letter-spacing:2px;}
.review-text{font-size:0.95rem; color:#4A4A45; font-style:italic; margin-bottom:14px; line-height:1.6;}
.review-author{font-size:0.82rem; font-weight:600; color: var(--verde-oscuro);}
.reviews-note{font-size:0.85rem; color:#6b6b66;}
.reviews-note a{color: var(--verde); font-weight:600; text-decoration:underline; text-underline-offset:3px;}

/* ====== CONTENT GRID (enfermedades/examenes) ====== */
.content-grid{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 96px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position:relative; z-index:1;
}
.card{
  background: var(--blanco);
  border: 1px solid rgba(43,43,40,0.08);
  border-radius: 8px;
  padding: 32px;
}
.card-icon{width:40px; height:40px; color:var(--verde); margin-bottom:16px;}
.card h3{margin-bottom:10px;}
.card p{font-size:0.95rem; color:#5c5c57;}
.card ul{margin-top:14px;}
.card ul li{
  font-size:0.9rem; color:#5c5c57;
  padding-left:18px; position:relative; margin-bottom:6px;
}
.card ul li::before{
  content:"";
  position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%;
  background: var(--dorado);
}

/* ====== FULL WIDTH SECTION (examenes detail rows) ====== */
.exam-rows{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 96px;
  position:relative; z-index:1;
}
.exam-row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(43,43,40,0.1);
}
.exam-row:last-child{border-bottom:none;}
.exam-row h3{color: var(--verde-oscuro);}
.exam-row .exam-label{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em;
  color: var(--azul); font-weight:600; padding-top:4px;
}
.exam-row p{color:#5c5c57; font-size:0.97rem; max-width:62ch;}

/* ====== BLOG ====== */
.blog-grid{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 96px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position:relative; z-index:1;
}
.blog-card{
  background: var(--blanco);
  border: 1px solid rgba(43,43,40,0.08);
  border-radius: 8px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.blog-card-top{
  height: 8px;
  background: linear-gradient(90deg, var(--verde), var(--azul));
}
.blog-card-body{padding: 28px;}
.blog-tag{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--dorado); font-weight:700;
}
.blog-card h3{margin:12px 0 10px; font-size:1.15rem;}
.blog-card p{font-size:0.92rem; color:#5c5c57; flex-grow:1;}
.blog-card-link{
  margin-top:18px;
  font-size:0.88rem; font-weight:600;
  color: var(--verde-oscuro);
  display:inline-flex; align-items:center; gap:6px;
}

/* ====== UBICACION ====== */
.locations{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 96px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  position:relative; z-index:1;
}
.location-card{
  background: var(--blanco);
  border: 1px solid rgba(43,43,40,0.08);
  border-radius: 8px;
  padding: 0;
  overflow:hidden;
}
.location-map{
  width:100%; height:220px; border:none; display:block;
}
.location-body{padding:32px;}
.location-body h3{margin-bottom:6px;}
.location-address{font-size:0.95rem; color:#5c5c57; margin-bottom:18px;}
.location-actions{display:flex; gap:12px; flex-wrap:wrap;}
.btn-small{padding:10px 18px; font-size:0.88rem;}

.virtual-note{
  max-width: var(--max-width);
  margin: 0 auto 96px;
  padding: 32px 36px;
  background: var(--crema-2);
  border-left: 3px solid var(--dorado);
  border-radius: 6px;
  position:relative; z-index:1;
}
.virtual-note h3{margin-bottom:8px;}
.virtual-note p{color:#4A4A45; font-size:0.97rem;}

/* ====== VIRTUAL HIGHLIGHT ====== */
.virtual-highlight{
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 64px;
  position: relative; z-index:1;
}
.virtual-highlight-inner{
  background: var(--verde-oscuro);
  border-radius: 10px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  text-align: left;
}
.virtual-icon{
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--dorado);
}
.virtual-content h3{
  color: var(--crema);
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.virtual-content p{
  color: rgba(250,246,239,0.8);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

@media (max-width: 900px){
  .virtual-highlight-inner{flex-direction: column; gap:18px; padding: 28px 20px; text-align:center;}
}

/* ====== FOOTER ====== */
.site-footer{
  background: var(--verde-oscuro);
  color: rgba(250,246,239,0.85);
  position:relative; z-index:1;
}
.footer-inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding: 64px 24px 40px;
  display:grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
}
.footer-brand{display:flex; gap:14px; align-items:flex-start;}
.footer-brand p{font-size:0.92rem; line-height:1.5;}
.footer-cols{display:grid; grid-template-columns: repeat(4,1fr); gap:32px;}
.footer-cols h4{
  color: var(--dorado); font-family: var(--sans);
  font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em;
  margin-bottom:14px;
}
.footer-cols a, .footer-cols p{
  display:block; font-size:0.88rem; margin-bottom:8px;
  color: rgba(250,246,239,0.75);
}
.footer-cols a:hover{color: var(--crema);}
.footer-bottom{
  text-align:center; padding: 20px 24px;
  border-top: 1px solid rgba(250,246,239,0.1);
  font-size:0.82rem; color: rgba(250,246,239,0.5);
}

/* ====== WHATSAPP FLOAT ====== */
.whatsapp-float{
  position: fixed;
  bottom: 24px; right: 24px;
  width: 58px; height:58px;
  border-radius:50%;
  box-shadow: 0 8px 20px rgba(43,43,40,0.3);
  z-index: 60;
  transition: transform 0.2s ease;
}
.whatsapp-float:hover{transform: scale(1.08);}

/* ====== RESPONSIVE ====== */
@media (max-width: 900px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .main-nav.open{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background: var(--crema); padding: 20px 24px;
    border-bottom: 1px solid rgba(43,43,40,0.08);
    gap:16px;
  }
  .reviews-grid{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr; padding-top:40px;}
  .hero-image{order:-1; max-width:340px; margin:0 auto 24px;}
  .pillars{grid-template-columns:1fr; gap:32px;}
  .quicklinks{grid-template-columns:1fr;}
  .content-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .locations{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr; gap:32px;}
  .footer-cols{grid-template-columns:1fr; gap:24px;}
  .exam-row{grid-template-columns:1fr; gap:10px;}
  .halo-1{width:300px; height:300px; top:-100px; right:-140px;}
}