@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/zilla-slab-400-latin-1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/zilla-slab-700-latin-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo Narrow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-narrow-600-latin-1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   Clínica Odontológica de Oriente — El Tigre, Anzoátegui
   Arquetipo Q · "Acta institucional": el sitio se lee como un documento
   registrado — membrete, folio, artículos numerados al margen, anexos
   fotográficos y un sello al pie. Marino profundo, cian médico, oro.
   ========================================================================== */

:root{
  --marino:#1E3A8A;
  --tinta:#0F2352;
  --tinta-honda:#0B1A3D;
  --cian:#06B6D4;
  --oro:#F59E0B;
  --oro-vivo:#FBBF24;
  --acento:#1E3A8A;

  --papel:#FAFAFA;
  --papel-panel:#EEF2FA;
  --texto:#1E293B;
  --texto-suave:#475569;
  --claro:#E8EDF7;
  --claro-suave:#A9BCE8;

  --linea:rgba(30,58,138,.20);
  --linea-fuerte:rgba(30,58,138,.42);
  --linea-clara:rgba(232,237,247,.24);

  --slab:'Zilla Slab', Georgia, 'Times New Roman', serif;
  --etiqueta:'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;

  --medida:1080px;
  --margen:clamp(1.15rem, 5vw, 3rem);

  --salida:cubic-bezier(0.25, 1, 0.5, 1);
  --salida-larga:cubic-bezier(0.16, 1, 0.3, 1);

  --z-barra:40;
  --z-membrete:50;
  --z-saltar:60;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--slab);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.62;
  overflow-x:hidden;
  padding-bottom:4.6rem; /* deja sitio a la barra fija de contacto en móvil */
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-weight:700;line-height:1.14;letter-spacing:-.018em;text-wrap:balance;margin:0}
p{margin:0}
img{max-width:100%;display:block}

a{color:var(--marino)}
a:focus-visible,
button:focus-visible,
input:focus-visible{outline:3px solid var(--cian);outline-offset:3px;border-radius:2px}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:var(--z-saltar);
  background:var(--oro);color:var(--texto);
  font-family:var(--etiqueta);text-transform:uppercase;letter-spacing:.09em;
  padding:.85rem 1.3rem;text-decoration:none;
}
.saltar:focus{left:.5rem;top:.5rem}

.envoltura,
.membrete__fila,
.portada__inner,
.constancia__inner,
.articulo,
.ubicacion__inner,
.cierre__inner,
.pie__inner{
  max-width:var(--medida);
  margin-inline:auto;
  padding-inline:var(--margen);
}

/* ---------- Etiquetas administrativas -------------------------------- */

.folio,
.articulo__ordinal,
.articulo__rotulo,
.expediente__titulo,
.expediente__par dt,
.registro__num,
.anexo__marca,
.horario caption,
.publico__quien,
.sello__pie,
.boton{
  font-family:var(--etiqueta);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:600;
}

/* ---------- Membrete ------------------------------------------------- */

.membrete{
  position:sticky;top:0;z-index:var(--z-membrete);
  background:var(--tinta);
  border-bottom:2px solid var(--oro);
}
.membrete__fila{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:3.6rem;
}
.membrete__marca{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.membrete__nombre{
  color:#fff;font-weight:700;font-size:clamp(.94rem,.85rem + .4vw,1.12rem);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.membrete__sede{
  font-family:var(--etiqueta);text-transform:uppercase;letter-spacing:.16em;
  font-size:.66rem;color:var(--cian);font-weight:600;
}

/* ---------- Botones -------------------------------------------------- */

.boton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.8rem 1.35rem;
  font-size:.83rem;line-height:1.1;text-align:center;
  text-decoration:none;border-radius:2px;border:1px solid transparent;
  transition:background-color 180ms var(--salida),
             border-color 180ms var(--salida),
             color 180ms var(--salida),
             box-shadow 180ms var(--salida),
             transform 140ms var(--salida);
}
.boton:active{transform:scale(.97)}

.boton--oro{background:var(--oro);color:var(--texto);box-shadow:0 0 0 0 rgba(245,158,11,.45)}
.boton--claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.boton--marino{background:var(--marino);color:#fff}
.boton--fino{
  min-height:40px;padding:.5rem .9rem;font-size:.73rem;
  background:transparent;color:#fff;border-color:rgba(255,255,255,.42);
}

@media (hover:hover) and (pointer:fine){
  .boton--oro:hover{background:var(--oro-vivo);box-shadow:0 0 0 4px rgba(245,158,11,.22)}
  .boton--claro:hover{border-color:var(--cian);background:rgba(6,182,212,.16)}
  .boton--marino:hover{background:#16307A;box-shadow:0 0 0 4px rgba(30,58,138,.16)}
  .boton--fino:hover{border-color:var(--cian);background:rgba(6,182,212,.18)}
}

.acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.acciones .boton{flex:1 1 15rem}

.enlace{color:var(--marino);text-decoration-thickness:1px;text-underline-offset:3px}
.enlace-claro{color:var(--claro);text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .enlace:hover{color:#16307A;text-decoration-color:var(--cian)}
  .enlace-claro:hover{color:#fff;text-decoration-color:var(--cian)}
}

/* ---------- Portada del acta ----------------------------------------- */

.portada{
  background:var(--tinta);
  color:var(--claro);
  border-bottom:1px solid var(--linea-clara);
}
.portada__inner{padding-block:clamp(3rem,9vw,5.5rem) clamp(3rem,8vw,5rem)}

.folio{
  font-size:.72rem;color:var(--cian);
  padding-bottom:.85rem;margin-bottom:1.6rem;
  border-bottom:1px solid var(--linea-clara);
  position:relative;
}
.folio::after{
  content:"";position:absolute;left:0;bottom:-4px;width:64px;height:2px;background:var(--oro);
}

.portada h1{
  color:#fff;
  font-size:clamp(2.05rem, 1.3rem + 3.4vw, 4.05rem);
  letter-spacing:-.022em;
  max-width:17ch;
}
.portada__bajada{
  margin-top:1.35rem;max-width:52ch;
  color:var(--claro-suave);
  font-size:clamp(1.04rem,1rem + .35vw,1.24rem);
  text-wrap:pretty;
}

.expediente{
  margin-top:2.8rem;
  border:1px solid var(--linea-clara);
  background:rgba(255,255,255,.035);
  padding:1.35rem 1.4rem 1.5rem;
}
.expediente__titulo{
  font-size:.68rem;color:var(--cian);
  padding-bottom:.7rem;border-bottom:1px solid var(--linea-clara);
}
.expediente__lista{margin:0}
.expediente__par{padding:.95rem 0;border-bottom:1px solid rgba(232,237,247,.13)}
.expediente__par:last-child{padding-bottom:0;border-bottom:0}
.expediente__par dt{font-size:.66rem;color:var(--claro-suave);margin-bottom:.28rem}
.expediente__par dd{margin:0;color:#fff;font-size:.98rem;line-height:1.5}

/* ---------- Franja de constancia ------------------------------------- */

.constancia{background:var(--papel-panel);border-bottom:1px solid var(--linea)}
.constancia__inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.6rem;
  padding-block:.95rem;
}
.constancia__dato{
  display:flex;align-items:center;gap:.5rem;
  font-size:.93rem;color:var(--texto-suave);
}
.constancia__dato--dir{color:var(--texto)}
.punto{
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--texto-suave);flex:none;
}
.punto--abierto{background:#0E7490;box-shadow:0 0 0 3px rgba(6,182,212,.24)}
.punto--cerrado{background:#94A3B8}

/* ---------- Artículos: margen numerado + cuerpo ---------------------- */

.articulo{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
  padding-block:clamp(2.9rem,7vw,4.6rem);
  border-top:1px solid var(--linea);
}
.articulo:first-of-type{border-top:0}

.articulo__margen{
  display:flex;align-items:baseline;gap:.75rem;
  padding-bottom:.7rem;
  border-bottom:2px solid var(--marino);
}
.articulo__ordinal{font-size:.68rem;color:var(--texto-suave)}
.articulo__numeral{
  font-family:var(--slab);font-weight:700;
  font-size:1.45rem;line-height:1;color:var(--marino);letter-spacing:.04em;
}
.articulo__rotulo{
  font-size:.72rem;color:var(--texto-suave);
  padding-left:.75rem;margin-left:.35rem;
  border-left:1px solid var(--linea-fuerte);
}

.articulo h2{
  font-size:clamp(1.5rem,1.14rem + 1.5vw,2.32rem);
  color:var(--marino);max-width:20ch;
}
.entradilla{
  margin-top:.9rem;max-width:66ch;
  color:var(--texto-suave);font-size:1.04rem;text-wrap:pretty;
}

/* Variante en tinta marina: rompe el ritmo del documento con una hoja a sangre.
   Es ancho completo, así que la caja de texto se recentra por dentro. */
.articulo--tinta{
  display:block;
  max-width:none;
  padding-inline:0;
  background:var(--tinta);color:var(--claro);
  border-top:0;
}
.articulo--tinta .articulo__margen,
.articulo--tinta .articulo__cuerpo{
  max-width:var(--medida);
  margin-inline:auto;
  padding-inline:var(--margen);
}
.articulo--tinta .articulo__margen{margin-bottom:1.7rem}
.articulo--tinta .articulo__margen{border-bottom-color:var(--oro)}
.articulo--tinta .articulo__numeral{color:var(--oro)}
.articulo--tinta .articulo__ordinal{color:var(--claro-suave)}
.articulo--tinta .articulo__rotulo{color:var(--claro-suave);border-left-color:var(--linea-clara)}
.articulo--tinta h2{color:#fff}
.articulo--tinta .entradilla{color:var(--claro-suave)}

/* ---------- Registro de especialidades ------------------------------- */

.registros{list-style:none;margin:2.2rem 0 0;padding:0}
.registro{
  position:relative;
  display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem 1rem;
  padding:1.25rem .75rem 1.35rem;
  border-top:1px solid var(--linea);
  isolation:isolate;
}
.registro:last-child{border-bottom:1px solid var(--linea)}
.registro::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(30,58,138,.075), rgba(6,182,212,.045));
  transform:scaleX(0);transform-origin:left center;
  transition:transform 260ms var(--salida-larga);
}
.registro::after{
  content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;
  background:var(--cian);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 260ms var(--salida-larga);
}
.registro__num{
  font-size:.8rem;color:var(--marino);
  padding-top:.42rem;letter-spacing:.06em;
}
.registro h3{
  font-size:1.12rem;color:var(--texto);letter-spacing:-.008em;line-height:1.3;
}
.registro p{margin-top:.4rem;color:var(--texto-suave);font-size:.99rem;max-width:62ch}

@media (hover:hover) and (pointer:fine){
  .registro:hover::before,
  .registro:hover::after{transform:scaleX(1)}
  .registro:hover .registro__num{color:#16307A}
}

/* ---------- Criterios (artículo en tinta) ---------------------------- */

.criterios{margin-top:2.2rem;display:grid;gap:0}
.criterio{padding:1.5rem 0;border-top:1px solid var(--linea-clara)}
.criterio:last-child{border-bottom:1px solid var(--linea-clara)}
.criterio h3{font-size:1.14rem;color:var(--oro);letter-spacing:-.006em}
.criterio p{margin-top:.5rem;color:var(--claro);max-width:64ch;font-size:1rem}

/* ---------- Público -------------------------------------------------- */

.publico{list-style:none;margin:2.1rem 0 0;padding:0;border-top:1px solid var(--linea)}
.publico__fila{
  display:grid;gap:.25rem;
  padding:1.15rem .1rem;
  border-bottom:1px solid var(--linea);
}
.publico__quien{font-size:.82rem;color:var(--marino)}
.publico__que{color:var(--texto-suave);font-size:1rem}

/* ---------- Anexos fotográficos -------------------------------------- */

.anexo{margin:2.4rem 0 0}
.anexo img{
  width:100%;height:auto;
  border:1px solid var(--linea-fuerte);
  aspect-ratio:3/2;object-fit:cover;
}
.anexo figcaption{
  margin-top:.6rem;
  font-size:.88rem;color:var(--texto-suave);line-height:1.45;
}
.anexo__marca{
  font-size:.68rem;color:var(--marino);margin-right:.5rem;
}
.articulo--tinta .anexo img{border-color:var(--linea-clara)}
.articulo--tinta .anexo figcaption{color:var(--claro-suave)}
.articulo--tinta .anexo__marca{color:var(--oro)}

.anexo--ancho{
  max-width:var(--medida);margin:0 auto;
  padding:clamp(1.8rem,5vw,3rem) var(--margen) 0;
}
.anexo--ancho img{aspect-ratio:3/2}
@media (min-width:720px){
  .anexo--ancho img{aspect-ratio:16/7}
}

/* El anexo del artículo III va al costado de la lista: rompe la cadencia de
   "cada artículo termina en una foto" sin salirse del lenguaje de anexos. */
.publico-bloque{display:grid;gap:0}
.anexo--lado img{aspect-ratio:4/3}
@media (min-width:900px){
  .publico-bloque{grid-template-columns:1.45fr .55fr;gap:0 2.75rem;align-items:start}
  .publico{margin-top:0}
  .anexo--lado{margin-top:0}
  .anexo--lado img{aspect-ratio:4/5}
}

/* ---------- Ubicación y horario -------------------------------------- */

.ubicacion{background:var(--papel-panel);border-top:1px solid var(--linea)}
.ubicacion__inner{
  padding-block:clamp(2.9rem,7vw,4.4rem);
  display:grid;gap:2.2rem;
}
.ubicacion h2{
  font-size:clamp(1.5rem,1.14rem + 1.5vw,2.32rem);color:var(--marino);max-width:16ch;
}
.ubicacion__dir{margin-top:1rem;font-size:1.08rem;line-height:1.55}
.ubicacion .boton{margin-top:1.5rem}

.horario{
  width:100%;border-collapse:collapse;
  background:#fff;border:1px solid var(--linea-fuerte);
}
.horario caption{
  text-align:left;font-size:.68rem;color:var(--texto-suave);padding-bottom:.6rem;
}
.horario th,
.horario td{
  padding:.62rem .85rem;text-align:left;font-weight:400;
  border-bottom:1px solid var(--linea);font-size:.97rem;
}
.horario th{font-weight:700;width:45%}
.horario tr:last-child th,
.horario tr:last-child td{border-bottom:0}
.horario tr[data-hoy]{background:rgba(6,182,212,.13)}
.horario tr[data-hoy] th{
  color:var(--marino);
  box-shadow:inset 3px 0 0 var(--oro);
}

/* ---------- Cierre y sello ------------------------------------------- */

.cierre{background:var(--tinta);color:var(--claro)}
.cierre__inner{
  padding-block:clamp(3rem,8vw,5rem);
  display:grid;gap:2.8rem;justify-items:start;
}
.cierre h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem);color:#fff;max-width:14ch}
.cierre__texto p{margin-top:1rem;max-width:52ch;color:var(--claro-suave);font-size:1.06rem}

.sello{justify-self:center;text-align:center}
.sello__svg{width:min(220px,62vw);height:auto;display:block;margin-inline:auto}
.sello__texto{transform-origin:110px 110px;transition:transform 900ms var(--salida-larga)}
.sello__pie{
  margin:1rem auto 0;font-size:.62rem;color:var(--claro-suave);
  letter-spacing:.13em;max-width:min(240px,62vw);line-height:1.6;
}
@media (hover:hover) and (pointer:fine){
  .sello:hover .sello__texto{transform:rotate(14deg)}
}

/* ---------- Pie ------------------------------------------------------ */

.pie{background:var(--tinta-honda);color:var(--claro-suave);border-top:1px solid var(--linea-clara)}
.pie__inner{padding-block:2.4rem;display:grid;gap:.45rem;font-size:.93rem}
.pie__nombre{color:#fff;font-weight:700;font-size:1.05rem}
.pie__firma{margin-top:.9rem;font-size:.86rem}

/* ---------- Barra fija de contacto (móvil) --------------------------- */

.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barra);
  display:flex;gap:.5rem;padding:.5rem;
  background:var(--tinta);border-top:1px solid var(--oro);
}
.barra__boton{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:.6rem .5rem;
  font-family:var(--etiqueta);text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;text-decoration:none;border-radius:2px;
  color:#fff;border:1px solid rgba(255,255,255,.42);
  transition:background-color 180ms var(--salida),
             border-color 180ms var(--salida),
             transform 140ms var(--salida);
}
.barra__boton--oro{background:var(--oro);color:var(--texto);border-color:var(--oro);font-weight:600}
.barra__boton:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .barra__boton:hover{background:rgba(6,182,212,.18);border-color:var(--cian)}
  .barra__boton--oro:hover{background:var(--oro-vivo);border-color:var(--oro-vivo)}
}

/* ==========================================================================
   Escritorio
   ========================================================================== */

@media (min-width:600px){
  .publico__fila{grid-template-columns:10.5rem 1fr;gap:1.25rem;align-items:baseline}
  .registro{grid-template-columns:3.2rem 1fr;padding-inline:1rem}
}

@media (min-width:720px){
  body{padding-bottom:0}
  .barra{display:none}
  .ubicacion__inner{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
}

@media (min-width:900px){
  .portada__inner{
    display:grid;grid-template-columns:1.4fr 1fr;gap:3.5rem;align-items:start;
  }
  .expediente{margin-top:.35rem}

  .articulo{
    grid-template-columns:9.5rem 1fr;
    gap:0 3rem;
    align-items:start;
  }
  .articulo__margen{
    flex-direction:column;align-items:flex-start;gap:.15rem;
    border-bottom:0;border-top:2px solid var(--marino);
    padding-top:.7rem;padding-bottom:0;
    position:sticky;top:5rem;
  }
  .articulo:not(.articulo--tinta) .articulo__rotulo{
    border-left:0;padding-left:0;margin-left:0;margin-top:.55rem;
  }
  .articulo:not(.articulo--tinta) .articulo__numeral{font-size:2.15rem}
  .articulo--tinta .articulo__margen{
    flex-direction:row;align-items:baseline;gap:.75rem;position:static;
    border-top:0;border-bottom:2px solid var(--oro);
    padding-top:0;padding-bottom:.7rem;margin-bottom:2.2rem;
  }
  .criterios{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}
  .criterio{border-top:1px solid var(--linea-clara);border-bottom:0;padding-block:1.6rem 0}
  .criterio:last-child{border-bottom:0}

  .cierre__inner{grid-template-columns:1.25fr 1fr;gap:4rem;align-items:center}
  .sello{justify-self:end}
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .sello:hover .sello__texto{transform:none}
  .registro::before,
  .registro::after{transition:none}
}