/* =========================================================================
   Dra. Tatiana — Medicina Laboral y Salud Ocupacional
   Hoja de estilos única. Sin dependencias ni compilación.
   ========================================================================= */

:root{
  --tinta:        #14261F;
  --verde-900:    #103A2F;
  --verde-700:    #1E5C4B;
  --verde-500:    #3C8570;
  --verde-200:    #BFD8CD;
  --verde-50:     #EAF2ED;
  --papel:        #FCFBF8;
  --arena:        #F2EFE8;
  --ocre:         #A87C22;
  --gris:         #5A6A63;
  --linea:        #DDD8CE;

  --fuente-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --fuente-texto:  "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 1120px;
  --radio: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--fuente-texto);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--fuente-titulo);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-0.011em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.15rem, 1.35rem + 3.3vw, 3.7rem); }
h2{ font-size:clamp(1.75rem, 1.25rem + 2vw, 2.6rem); }
h3{ font-size:1.28rem; line-height:1.25; }
h4{ font-size:1.1rem; }
p{ margin:0 0 1.05em; max-width:68ch; }
a{ color:inherit; }

ul,ol{ margin:0; padding:0; list-style:none; }

.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--verde-900); color:#fff; padding:.7rem 1.1rem;
  text-decoration:none; border-radius:0 0 var(--radio) 0;
}
.saltar:focus{ left:0; }

:focus-visible{ outline:2px solid var(--verde-700); outline-offset:3px; border-radius:2px; }

/* Marcas de datos pendientes ------------------------------------------- */
.pendiente{
  border-bottom:1px dashed currentColor;
  opacity:.75;
  font-style:italic;
}

/* ===================== CABECERA ===================== */
.cabecera{
  position:sticky; top:0; z-index:40;
  background:rgba(252,251,248,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linea);
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px; padding-block:.7rem;
}
.marca{ text-decoration:none; display:block; line-height:1.2; }
.marca__nombre{
  display:block; font-family:var(--fuente-titulo);
  font-size:1.18rem; color:var(--verde-900);
}
.marca__rol{
  display:block; font-size:.775rem; color:var(--gris);
  letter-spacing:.04em; margin-top:.15rem;
}

.nav ul{ display:flex; align-items:center; gap:1.6rem; }
.nav a{
  text-decoration:none; font-size:.94rem; color:var(--tinta);
  padding-block:.35rem; border-bottom:1px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--verde-500); }
.nav__cta{
  background:var(--verde-900); color:#fff !important;
  padding:.62rem 1.05rem !important; border-radius:var(--radio);
  border-bottom:0 !important;
}
.nav__cta:hover{ background:var(--verde-700); }

.menu-btn{
  display:none; align-items:center; gap:.55rem;
  background:none; border:1px solid var(--linea); border-radius:var(--radio);
  padding:.5rem .8rem; font:inherit; font-size:.9rem; color:var(--tinta); cursor:pointer;
}
.menu-btn__barras, .menu-btn__barras::before, .menu-btn__barras::after{
  display:block; width:18px; height:1.5px; background:var(--tinta); content:"";
}
.menu-btn__barras{ position:relative; }
.menu-btn__barras::before{ position:absolute; top:-5px; }
.menu-btn__barras::after{ position:absolute; top:5px; }

/* ===================== BOTONES ===================== */
.boton{
  display:inline-block; text-decoration:none; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:var(--radio);
  border:1px solid transparent; transition:background-color .18s ease, color .18s ease;
}
.boton--principal{ background:var(--verde-900); color:#fff; }
.boton--principal:hover{ background:var(--verde-700); }
.boton--secundario{ border-color:var(--verde-900); color:var(--verde-900); }
.boton--secundario:hover{ background:var(--verde-50); }

/* ===================== HERO ===================== */
.hero{ padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); }
.hero__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.hero__intro{
  font-size:.92rem; color:var(--verde-700); margin-bottom:1.1rem;
  padding-left:1rem; border-left:2px solid var(--ocre);
}
.hero h1{ margin-bottom:1.1rem; }
.hero__bajada{ font-size:1.1rem; color:var(--gris); max-width:56ch; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.9rem; }

.hero__tarjeta{
  background:var(--verde-50);
  border:1px solid var(--verde-200);
  border-radius:var(--radio);
  overflow:hidden;
}
.retrato{ aspect-ratio:4/5; background:var(--verde-200); }
.retrato img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }

.ficha{ margin:0; padding:1.5rem 1.6rem .4rem; }
.ficha > div{ padding-bottom:1.15rem; margin-bottom:1.15rem; border-bottom:1px solid var(--verde-200); }
.ficha > div:last-child{ border-bottom:0; }
.ficha dt{
  font-size:.78rem; color:var(--verde-700); margin-bottom:.3rem; letter-spacing:.03em;
}
.ficha dd{ margin:0; font-size:.95rem; line-height:1.55; }

/* ===================== SECCIONES BASE ===================== */
.seccion{ padding:clamp(3.4rem,7vw,6rem) 0; }
.seccion--arena{ background:var(--arena); }

.seccion__encabezado{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem); }
.seccion__encabezado p{ color:var(--gris); font-size:1.05rem; margin-bottom:0; }

.dos-columnas{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  gap:clamp(1.6rem,5vw,4.5rem); align-items:start;
}
.columna-titulo h2{ margin-bottom:.4rem; }
.columna-titulo__nota{ color:var(--gris); font-size:.98rem; }
.columna-texto .destacado{
  font-family:var(--fuente-titulo); font-size:1.3rem; line-height:1.45; color:var(--verde-900);
}
.columna-texto p{ color:var(--gris); }
.columna-texto .destacado{ color:var(--verde-900); }

/* ===================== SERVICIOS ===================== */
.rejilla-servicios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:1px;
  background:var(--linea); border:1px solid var(--linea);
}
.servicio{ background:var(--arena); padding:1.9rem 1.7rem; }
.servicio h3{ color:var(--verde-900); }
.servicio > p{ color:var(--gris); font-size:.98rem; }
.servicio ul{ margin-top:1.1rem; }
.servicio li{
  font-size:.93rem; padding:.42rem 0 .42rem 1.05rem; position:relative;
  border-top:1px solid var(--linea); color:var(--tinta);
}
.servicio li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:5px; height:5px; background:var(--ocre); border-radius:50%;
}

/* ===================== ALCANCE ===================== */
.alcance{
  background:var(--verde-900); color:#EDF2EE;
  padding:clamp(3.6rem,8vw,6.5rem) 0;
}
.alcance h2{ color:#fff; }
.alcance__intro{ max-width:62ch; margin-bottom:clamp(2.2rem,5vw,3.4rem); }
.alcance__intro p{ color:#C4D6CD; font-size:1.06rem; margin-bottom:0; }

.rejilla-alcance{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.6rem,3vw,2.4rem);
}
.ambito{ border-top:1px solid rgba(191,216,205,.32); padding-top:1.25rem; }
.ambito h3{ color:#fff; font-size:1.2rem; margin-bottom:.45rem; }
.ambito > p{ color:#A9C4B8; font-size:.95rem; margin-bottom:.9rem; }
.ambito li{
  font-size:.92rem; line-height:1.5; color:#DCE7E1;
  padding:.35rem 0 .35rem 1rem; position:relative;
}
.ambito li::before{
  content:""; position:absolute; left:0; top:.92rem;
  width:6px; height:1px; background:var(--verde-500);
}

.limites{
  margin-top:clamp(2.6rem,5vw,4rem);
  border:1px solid rgba(191,216,205,.3); border-left:3px solid var(--ocre);
  padding:1.8rem 1.9rem; max-width:78ch;
}
.limites h3{ color:#fff; }
.limites p{ color:#C4D6CD; margin-bottom:0; }

/* ===================== EXPERIENCIA ===================== */
.caso{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(1.8rem,5vw,4rem); align-items:start;
}
.caso__contexto{
  background:var(--verde-50); border:1px solid var(--verde-200);
  border-radius:var(--radio); padding:1.7rem 1.6rem;
  position:sticky; top:104px;
}
.caso__contexto h3{ color:var(--verde-900); }
.caso__contexto p{ font-size:.97rem; color:var(--gris); }
.caso__nota{ font-size:.88rem !important; margin-bottom:0 !important; }

.caso__bloques{ display:grid; gap:0; }
.bloque{ padding:1.45rem 0; border-top:1px solid var(--linea); }
.bloque:first-child{ border-top:0; padding-top:0; }
.bloque h4{ color:var(--verde-900); margin-bottom:.35rem; }
.bloque p{ color:var(--gris); font-size:.98rem; margin-bottom:0; }

/* ===================== PILARES / PÚBLICO ===================== */
.rejilla-pilares,.rejilla-publico{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:clamp(1.5rem,3vw,2.4rem);
}
.pilar,.publico{ border-top:2px solid var(--verde-700); padding-top:1.15rem; }
.pilar h3,.publico h3{ color:var(--verde-900); font-size:1.15rem; }
.pilar p,.publico p{ color:var(--gris); font-size:.97rem; margin-bottom:0; }

/* ===================== PROCESO ===================== */
.pasos{ counter-reset:paso; display:grid; gap:0; }
.pasos li{
  counter-increment:paso; position:relative;
  padding:1.35rem 0 1.35rem 3.4rem; border-top:1px solid var(--linea);
}
.pasos li:first-child{ border-top:0; padding-top:0; }
.pasos li::before{
  content:counter(paso); position:absolute; left:0; top:1.35rem;
  font-family:var(--fuente-titulo); font-size:1.05rem; color:var(--ocre);
  width:2.1rem; height:2.1rem; display:grid; place-items:center;
  border:1px solid var(--linea); border-radius:50%;
}
.pasos li:first-child::before{ top:0; }
.pasos h3{ font-size:1.14rem; margin-bottom:.25rem; color:var(--verde-900); }
.pasos p{ color:var(--gris); font-size:.97rem; margin-bottom:0; }

/* ===================== CREDENCIALES ===================== */
.lista-credenciales li{ padding:1.3rem 0; border-top:1px solid var(--linea); }
.lista-credenciales li:first-child{ border-top:0; padding-top:0; }
.lista-credenciales h3{ color:var(--verde-900); font-size:1.15rem; margin-bottom:.25rem; }
.lista-credenciales p{ color:var(--gris); font-size:.97rem; margin-bottom:0; }

/* ===================== CONTACTO ===================== */
.contacto{
  background:var(--verde-50); border-top:1px solid var(--verde-200);
  padding:clamp(3.4rem,7vw,5.5rem) 0;
}
.contacto__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.contacto h2{ color:var(--verde-900); }
.contacto__texto p{ color:var(--gris); font-size:1.05rem; margin-bottom:0; }

.contacto__datos{ display:grid; gap:1px; background:var(--verde-200); border:1px solid var(--verde-200); }
.contacto__item{
  background:var(--papel); padding:1.1rem 1.3rem; text-decoration:none;
  display:flex; flex-direction:column; gap:.15rem;
  transition:background-color .18s ease;
}
a.contacto__item:hover{ background:#fff; }
.contacto__etiqueta{ font-size:.78rem; color:var(--verde-700); letter-spacing:.03em; }
.contacto__valor{ font-size:1.02rem; color:var(--tinta); }
.contacto__detalle{ font-size:.83rem; color:var(--gris); line-height:1.4; margin-top:.1rem; }

/* ===================== PIE ===================== */
.pie{ background:var(--verde-900); color:#B9CEC5; padding:2.6rem 0; font-size:.9rem; }
.pie__fila{ display:grid; gap:.9rem; }
.pie__marca{ color:#fff; font-family:var(--fuente-titulo); font-size:1.05rem; margin:0; }
.pie__aviso{ margin:0; max-width:72ch; line-height:1.55; }
.pie__copy{ margin:0; font-size:.82rem; color:#8FA9A0; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__tarjeta{ max-width:520px; }
  .retrato{ aspect-ratio:3/2; }
  .dos-columnas,.caso,.contacto__grid{ grid-template-columns:1fr; }
  .caso__contexto{ position:static; }
}

@media (max-width:820px){
  html{ scroll-padding-top:80px; }
  .menu-btn{ display:inline-flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--papel); border-bottom:1px solid var(--linea);
    padding:.6rem 0 1.2rem; display:none;
  }
  .nav.abierto{ display:block; }
  .nav ul{
    flex-direction:column; align-items:stretch; gap:0;
    width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto;
  }
  .nav li{ border-top:1px solid var(--linea); }
  .nav a{ display:block; padding:.95rem .2rem; font-size:1rem; }
  .nav__cta{ margin-top:1rem; text-align:center; padding:.9rem 1rem !important; }
  .nav li:has(.nav__cta){ border-top:0; }
}

@media (max-width:560px){
  body{ font-size:1rem; }
  .contenedor{ width:calc(100% - 2rem); }
  .servicio{ padding:1.5rem 1.25rem; }
  .hero__acciones .boton{ width:100%; text-align:center; }
  .marca__rol{ font-size:.72rem; }
}

/* ===================== MOVIMIENTO ===================== */
.entrada{ opacity:0; transform:translateY(14px); }
.entrada.visible{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .entrada,.entrada.visible{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ===================== IMPRESIÓN ===================== */
@media print{
  .cabecera,.menu-btn,.hero__acciones,.saltar{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .alcance{ background:#fff; color:#000; }
  .alcance h2,.ambito h3,.limites h3{ color:#000; }
  .ambito > p,.ambito li,.alcance__intro p,.limites p{ color:#333; }
  .seccion,.alcance,.contacto{ padding:1.2rem 0; }
  a{ text-decoration:none; }
}