/*
Theme Name: EJ 2026
Theme URI: https://especialistajuridico.com/
Author: Especialista Jurídico
Description: Tema propio de especialistajuridico.com. Papel verjurado, Aleo y Public Sans servidas desde este mismo servidor, cobre y azul marino. Nació de los prototipos aprobados el 26-sep-2026; desde entonces se mantiene A MANO (el generador que citaba esta línea no existe).
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: ej-2026
*/

/* ==================== tipografias, servidas desde aqui ====================
   Aleo y Public Sans son SIL Open Font License: se pueden alojar y publicar.
   Se sirven desde este servidor y no desde Google, para no depender de un
   tercero ni enviarle la IP de cada visitante. Solo el subconjunto latino:
   se comprobo que el sitio no usa ningun caracter de U+0100-024F.
   font-display:swap -> el texto se lee desde el primer instante. */
@font-face{font-family:'Aleo';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fuentes/aleo-300.woff2) format('woff2')}
@font-face{font-family:'Aleo';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fuentes/aleo-400.woff2) format('woff2')}
@font-face{font-family:'Aleo';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fuentes/aleo-500.woff2) format('woff2')}
@font-face{font-family:'Aleo';font-style:italic;font-weight:300 700;font-display:swap;src:url(assets/fuentes/aleo-italic.woff2) format('woff2')} /* 1-oct: cursiva real para las piezas de la portada (variable, OFL) */
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fuentes/libre-caslon-display-400.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fuentes/public-sans-400.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fuentes/public-sans-500.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fuentes/public-sans-600.woff2) format('woff2')}

/* ==================== el sitio ==================== */
/* La portada vigente es la «Expediente» (opción A, 27-sep-2026); su bloque va más abajo. */

/* Tema unico a proposito: se juzga un diseno concreto sobre papel y marino.
   Invertirlo a oscuro falsearia lo que hay que decidir. Todos los colores explicitos. */
:root{--marino:#141C2C;--cobre-osc:#8A6A34;--ease-out:cubic-bezier(.23,1,.32,1);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:#F3F4F1;color:#14171C;
     font-family:'Public Sans',system-ui,-apple-system,sans-serif}


/* ---------- el sitio ---------- */
body{
  --papel:#F3F4F1;--p-tinta:#14171C;--gris:#5A616B;--p-tenue:#8B9097;--p-filete:#DCDED8;
  --cobre:#B47840;--cobre-dec:#B98E52;--marfil:#F4F0EC;
  background:var(--papel);color:var(--p-tinta);font-family:'Aleo',Georgia,serif;
}
p,h1,h2,h3,h4,ul,ol,li,figure{margin:0;padding:0}
main ul,nav ul,footer ul{list-style:none}
a{text-decoration:none;color:inherit}
.sc{font-family:'Public Sans',system-ui,sans-serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--p-tenue)}
.contenedor{max-width:1120px;margin:0 auto;padding:0 40px}
/* ==================== PORTADA «EXPEDIENTE» — opción A (Héctor, 27-sep-2026) ====================
   Prototipo: diseno/prototipos/portada-v3/opciones.html. Clara de principio a fin;
   el marino solo en el pie. Todo lo de la portada cuelga de main.portada para que
   no pise a las páginas interiores (.articulo). La barra y el pie sí son comunes. */
:root{--ancho:1120px;--g:clamp(20px,5vw,64px);--spring:cubic-bezier(.32,.72,0,1)}
.ancho{max-width:var(--ancho);margin:0 auto;padding-inline:var(--g)}

/* --- botones que usan también las páginas interiores --- */
.btn{font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;color:#fff;
  background:var(--cobre-osc);box-shadow:0 3px 0 0 var(--marino);padding:11px 18px;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  -webkit-tap-highlight-color:transparent;
  transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--marino);transition-duration:60ms}
.btn.gde{font-size:16px;padding:15px 26px;box-shadow:0 4px 0 0 var(--marino)}
.btn.gde:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--marino)}

/* El botón principal: texto + cuadro de bronce con la flecha (botón dentro de botón). */
.cta{display:inline-flex;align-items:center;gap:14px;min-height:54px;background:var(--marino);color:#F4F0EC;
  font-family:'Public Sans',sans-serif;font-size:15px;font-weight:600;padding:8px 8px 8px 24px;
  -webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease-out)}
.cta span{width:38px;height:38px;display:grid;place-items:center;background:var(--cobre-osc);
  transition:transform 300ms var(--spring)}
@media (hover:hover) and (pointer:fine){.cta:hover span{transform:translateX(3px)}}
.cta:active{transform:scale(.97)}
.cta:focus-visible,.fila:focus-visible,.herr:focus-visible,.mat:focus-visible,.nav a:focus-visible,.pie a:focus-visible{
  outline:2px solid var(--cobre);outline-offset:3px}

/* --- barra, común a todo el sitio --- */
.nav{position:sticky;top:0;z-index:20;background:rgba(243,244,241,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.nav .ancho{display:flex;align-items:center;gap:36px;height:84px;transition:height 200ms var(--ease-out)}
.nav.corta{border-bottom-color:var(--p-filete);box-shadow:0 6px 18px rgba(20,28,44,.05)}
@media (min-width:901px){.nav.corta .ancho{height:66px}}
.nav .marca{display:flex;align-items:center;gap:11px;flex:none}
.nav .marca img{width:26px;height:auto}
.nav .marca b{font-family:'Aleo',Georgia,serif;font-size:18px;font-weight:400;letter-spacing:.01em}
.menu{display:flex;align-items:center;gap:30px;margin:0 0 0 auto;padding:0;list-style:none;
  font-family:'Public Sans',sans-serif;font-size:14px;font-weight:500;color:var(--gris)}
.menu li{margin:0}
.menu a{position:relative;display:block;padding:6px 0;transition:color 200ms var(--ease-out)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cobre);
  transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--ease-out)}
.menu .current-menu-item > a{color:var(--p-tinta)}
.menu .current-menu-item > a::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.menu a:hover{color:var(--p-tinta)}.menu a:hover::after{transform:scaleX(1)}}
.nav .wa{flex:none;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;padding:11px 20px;min-height:44px;
  display:inline-flex;align-items:center;border:1px solid var(--p-tinta);
  -webkit-tap-highlight-color:transparent;
  transition:background 200ms var(--ease-out),color 200ms var(--ease-out),transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav .wa:hover{background:var(--p-tinta);color:var(--papel)}}
.nav .wa:active{transform:scale(.97)}

/* --- 1. titular a todo lo ancho + el certificado que asoma debajo ---
   Encabezado «Hoja que asoma», elegido por Héctor el 27-sep-2026 entre tres
   (diseno/prototipos/portada-v3/heroe-opciones.html). Sustituye a las dos columnas
   (texto | certificado): «esto partido vertical no me gusta». */
/* overflow-x:clip: la hoja va girada y sus esquinas no pueden abrir desplazamiento lateral. */
.portada{overflow-x:clip}
/* Marca «Documento» (27-sep-2026, «es justo lo que busco»). Valores y porqué: diseno/GUSTO_DE_HECTOR.md.
   El tamaño que llena el ancho sale de la letra medida, no de un script: «Especialista Jurídico» en Caslon
   ocupa 717,6 px por cada 100 px de cuerpo y «Especialista» sola, 420,1; con las letras separadas para animarlas crece ~1 %, así que se usa 13,75 % del ancho y 23,6 % (medido en el sitio: 1002 px en 992 con 13,9).
   Así no hay salto al cargar. Si se cambia la letra o el texto, hay que volver a medir estas dos cifras. */
.portada .heroe{padding-top:clamp(40px,7vw,104px);container-type:inline-size}
.portada .rotulos{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;
  font-family:'Public Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.portada .filete{height:1px;background:#14171C;opacity:.8}
/* 1D (29-sep-2026): el filete inferior baja al sitio de la línea que escribe la pluma (0,34 cuerpos bajo la línea
   base; medido en 1440: 304 px = 304 px). Sin el script queda igual, solo un poco más abajo: no salta nada. */
.portada .filete.bajo{margin-top:2.62cqi}
.portada h1{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:13.745cqi;line-height:1;
  letter-spacing:-.01em;margin:.1em 0 0;max-width:none;white-space:nowrap;text-wrap:nowrap}
.portada h1 em{font-style:normal;color:var(--cobre-osc)}
.portada h1 .pal{white-space:nowrap}
.portada h1 .l{display:inline-block}
/* Inicial: la E del logotipo con su pluma (Héctor, 27-sep, «esta definitivamente»). Alto = mayúscula de la
   Caslon (0,70 em); así su pie queda en la línea base y el titular conserva el ancho (medido 992/992). */
.portada h1 .e-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.portada h1 .e-svg{display:inline-block;height:.70em;width:auto;vertical-align:baseline;margin-right:-.01em} /* la E del logo es 0,01 em más ancha que la de Caslon */
.portada h1 .pluma{transform-box:fill-box;transform-origin:30% 100%}
.portada .sub{font-size:clamp(19px,2.2cqi,30px);line-height:1.3;color:#14171C;max-width:36ch;margin-top:28px}
.portada .debajo{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:flex-end;justify-content:space-between;margin-top:20px}
/* «La pluma firma» en la portada (1D, Héctor, 29-sep-2026; assets/pluma-firma.js), las mismas reglas de la carátula
   de la Consulta SECOP. Las clases firmando / firma-lista las pone el script. */
.portada .heroe{position:relative}
.portada .firma{display:none;position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
html.firma-lista .portada .firma{display:block}
html.firmando .portada .filete.bajo,html.firma-lista .portada .filete.bajo{visibility:hidden}
.portada .viajera{position:absolute;left:0;top:0;z-index:3;opacity:0;pointer-events:none;will-change:transform}
.portada .viajera svg{display:block;width:100%;height:100%}
/* (Las dos reglas que esconden la pluma de la E mientras escribe la viajera van DESPUÉS del bloque de entrada: con la
   misma especificidad, gana la que viene después.) */
/* En el celular, una palabra por línea y cada una a todo el ancho: en una sola línea no se leería. */
@media (max-width:700px){
  .portada h1{font-size:23.6cqi;white-space:normal;text-wrap:wrap}
  .portada h1 .pal{display:block}
  .portada .filete.bajo{margin-top:4.57cqi} /* bajo el último renglón (medido en 390: 255 px = 255 px) */
  .portada .rotulos{font-size:9px;letter-spacing:.1em;white-space:nowrap;flex-wrap:wrap;row-gap:5px}
  .portada .rotulos span:last-child{margin-left:auto} /* si no cabe (320-360 px), baja al renglón de abajo, a la derecha */
}
/* Entrada, EN CADA CARGA (Héctor, 29-sep-2026: como la rúbrica del pie; antes era una vez por visita). Solo transform, opacity y filter.
   Los filetes se abren desde el centro; las letras se asientan una a una (26 ms), desenfocadas al principio;
   lo de abajo entra después. Si el visitante pide menos movimiento, nada se mueve. */
@media (prefers-reduced-motion:no-preference){
  html:not(.marca-vista) .portada .filete{animation:ej-trazo 800ms cubic-bezier(.77,0,.175,1) both;transform-origin:center}
  html:not(.marca-vista) .portada .rotulos{animation:ej-aparece 500ms ease 650ms both}
  html:not(.marca-vista) .portada h1 .l{display:inline-block;animation:ej-letra 520ms var(--ease-out) both;
    animation-delay:calc(260ms + var(--i) * 26ms)}
  /* La pluma se posa cuando las letras ya se asentaron, como quien deja la pluma sobre el papel. */
  html:not(.marca-vista) .portada h1 .pluma{animation:ej-pluma 900ms var(--ease-out) 1100ms both}
  html:not(.marca-vista) .portada .sub{animation:ej-enfoca 600ms var(--ease-out) 620ms both}
  html:not(.marca-vista) .portada .debajo{animation:ej-enfoca 600ms var(--ease-out) 720ms both}
}
@keyframes ej-trazo{from{transform:scaleX(0)}}
@keyframes ej-aparece{from{opacity:0}}
@keyframes ej-letra{from{opacity:0;transform:translateY(.12em);filter:blur(3px)}}
@keyframes ej-pluma{from{opacity:0;transform:translate(16%,-18%) rotate(-12deg)}}
@keyframes ej-enfoca{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
/* Portada 1D: mientras la pluma viajera escribe, la de la E no hace su entrada; reaparece al posarse la viajera. */
html.firmando .portada h1 .pluma{opacity:0;animation:none}
html.firmando .portada h1 .pluma.posada{opacity:1}
.portada .bajada{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--gris);max-width:30em}
.portada .acciones{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.portada .horario{font-family:'Public Sans',sans-serif;font-size:14px;color:var(--gris)}

/* La «mesa»: una franja de alto fijo que corta la hoja por debajo, como un documento
   que asoma. El filete de .viene, justo debajo, hace de borde de la mesa. */
.folio{position:relative;margin:clamp(48px,6vw,72px) calc(var(--g) * -1) 0;padding-inline:var(--g);
  height:480px;overflow:hidden} /* corta la hoja justo después del embargo, que debe verse ENTERO (medido 1200-1920) */
.folio .ejemplo{position:absolute;right:var(--g);top:0;font-family:'Public Sans',sans-serif;font-size:11px;
  color:var(--p-tenue);letter-spacing:.06em}
.folio .hoja{position:relative;max-width:760px;margin:22px 0 0 auto;padding:26px 30px 40px;background:#FDFDFB;
  transform:rotate(1.2deg) translateY(8px);overflow:hidden;
  box-shadow:0 1px 0 rgba(20,28,44,.06),0 24px 48px -12px rgba(20,28,44,.16),0 60px 90px -40px rgba(20,28,44,.2)}
/* --- el certificado: imita el FORMATO real (Helvetica, mayúsculas, separadores) con datos ficticios --- */
.cert{font-family:Helvetica,Arial,sans-serif;font-size:11px;line-height:1.5;color:#1d1d1d;border:1px solid #2b2b2b}
.cert::before{content:"EJEMPLO";position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-18deg);
  font:700 110px/1 Helvetica,Arial,sans-serif;letter-spacing:.08em;color:rgba(20,28,44,.05);pointer-events:none;white-space:nowrap}
.cert p{position:relative}
.cert-cab{text-align:center;font-weight:700;font-size:14px;line-height:1.45;letter-spacing:.01em}
.cert-meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:11.5px}
.cert-meta b{font-size:12.5px}
.cert-leyenda{margin-top:10px;text-align:center;font-weight:700;font-size:11.5px;line-height:1.45}
.cert-regla{margin-top:8px;white-space:nowrap;overflow:hidden;color:#555;letter-spacing:.02em}
.cert .anot{position:relative;padding:10px 0 12px;border-bottom:1px dotted #9a9a9a}
.cert .anot p + p{margin-top:3px}
.cert .doble{display:flex;justify-content:space-between;gap:16px}
.cert .doble > :last-child{flex:none}
/* El embargo, marcado como lo marcaría quien estudia el folio: recuadro de bronce y fondo tenue. */
.cert .anot.alerta{margin-inline:-12px;padding-inline:12px;background:rgba(180,120,64,.10);
  box-shadow:inset 0 0 0 1.5px var(--cobre);border-bottom-color:transparent}
.cert .anot.alerta .espec{font-weight:700;color:#6E4415}
/* El sello vive en el hueco a la izquierda de la hoja y NUNCA la pisa
   (medir_portada_A.py comprueba que no tape ninguna anotación). */
.folio .sello{position:absolute;left:var(--g);top:64px;z-index:2;max-width:215px;transform:rotate(-2deg);
  background:var(--marino);color:#F4F0EC;padding:14px 18px;
  font-family:'Public Sans',sans-serif;font-size:13px;line-height:1.45;box-shadow:0 18px 36px -12px rgba(14,20,32,.45)}
.folio .sello small{display:block;color:#C9A36B;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
/* Por debajo de 1200 px no hay hueco a la izquierda de la hoja: el sello va encima,
   sin pisarla (en el prototipo, a 1024 tapaba cuatro anotaciones). */
@media (max-width:1199px){
  /* columna: primero el rótulo de ejemplo, luego el sello y debajo la hoja. En el HTML el
     sello va después de la hoja, y en el celular quedaba montado sobre su borde inferior. */
  .folio{height:auto;display:flex;flex-direction:column}
  .folio .ejemplo{order:-2}
  .folio .sello{order:-1;align-self:flex-start;position:relative;left:auto;top:auto;max-width:250px;margin:0 0 18px}
  .folio .hoja{margin-top:0;width:100%}
}

/* --- presentación de la firma (29-sep-2026, «Firma sobria», texto B aprobado por Héctor): identidad + confianza,
   bajo la marca. El .ejp-seo se justifica desde el bloque TEXTO JUSTIFICADO (regla permanente); el lema .ejp-lede no. --- */
.ej-presenta{padding-top:clamp(40px,5vw,72px)} /* 29-sep, corrección B: sin la segunda raya bajo la marca */
.ej-presenta .ejp-tit{font-family:'Aleo',Georgia,serif;font-weight:300;font-size:clamp(30px,4.4vw,54px);
  line-height:1.06;letter-spacing:-.03em;margin:0;color:#14171C}
/* El lema (29-sep, ronda 3): UNA frase, así que no es prosa. Justificado partía «perso-nas» en el celular y abría
   huecos; va a la izquierda, sin partir, cortado tras la coma, con «de personas para personas» en cobre. */
.ej-presenta .ejp-lede{font-family:'Aleo',Georgia,serif;font-weight:400;font-size:clamp(20px,2vw,26px);
  line-height:1.6;color:#14171C;max-width:62ch;margin:clamp(20px,2.4vw,30px) 0 0;text-align:left;hyphens:manual}
.ej-presenta .ejp-acento{font-style:normal;color:#8A6A34}
/* Párrafo con las palabras de búsqueda (ronda 5, dictado por Héctor): prosa, justificado desde TEXTO JUSTIFICADO. */
.ej-presenta .ejp-seo{font-family:'Aleo',Georgia,serif;font-weight:400;font-size:clamp(17px,1.5vw,19px);
  line-height:1.65;color:#3B414A;max-width:62ch;margin:clamp(14px,1.6vw,20px) 0 0}
/* Celular: a 17 px partía «exper-tos» con huecos; a 16 px cae en dos renglones justificados, cortando en los dos puntos. */
@media (max-width:600px){.ej-presenta .ejp-seo{font-size:16px}}

/* --- Presentación + lacre en proporción áurea (Héctor, 29-sep-2026, «de acuerdo con la propuesta»; celular M2).
   Espacios verticales en escala φ: 16 · 26 · 42 · 68 · 110. El lienzo del SVG mide 280/208 la cera (1,3462). --- */
.ej-presenta .ejp-lacre{margin:0}
.ej-presenta .ejp-lacre img{display:block;height:auto;filter:drop-shadow(0 14px 12px rgba(38,30,22,.26)) drop-shadow(0 2px 2px rgba(38,30,22,.34))}
@media (min-width:821px){
  .portada .ej-presenta{display:grid;grid-template-columns:61.8% 38.2%;grid-template-rows:repeat(4,auto);padding-top:68px}
  .portada .ej-presenta > :not(.ejp-lacre){grid-column:1}
  .portada .ej-presenta .ejp-lede{margin-top:42px}
  .portada .ej-presenta .ejp-seo{margin-top:26px;max-width:100%} /* a 100% - 42px partía «jurí-dico» (lo atrapó medir_presentacion) */
  .portada .ej-presenta .acciones{margin-top:42px}
  /* la columna del lacre abarca las 4 filas; container-type:size da su alto (cqh) = alto del bloque de texto */
  .portada .ej-presenta .ejp-lacre{grid-column:2;grid-row:1 / 5;position:relative;container-type:size}
  .portada .ej-presenta .ejp-lacre img{position:absolute;left:50%;top:38.2%;width:calc(100cqh / 1.618 * 1.3462);max-width:none;
    transform:translate(-50%,-50%) rotate(-7deg)}
}
@media (max-width:820px){
  .portada .ej-presenta{padding-top:42px}
  .portada .ej-presenta .ejp-lede{margin-top:26px}
  .portada .ej-presenta .ejp-seo{margin-top:16px}
  .portada .ej-presenta .acciones{margin-top:26px}
  .portada .ej-presenta .ejp-lacre{width:51.4%;margin:6px auto 0} /* 0,382 × 1,3462: cera = ancho / φ² */
  .portada .ej-presenta .ejp-lacre img{width:100%;transform:rotate(-7deg)}
}
.ej-presenta .acciones{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:clamp(26px,3vw,38px)}
/* El certificado, bajado a media página como prueba; su filete hace de borde de «mesa». */
.ej-certif{padding-top:clamp(48px,7.6vw,110px)} /* 29-sep: 110 = escala φ de la presentación */
.ej-certif .ejc-filete{height:1px;background:#14171C;opacity:.8;margin-bottom:clamp(24px,3.5vw,40px)}
.ej-certif .ejc-tit{font-family:'Aleo',Georgia,serif;font-weight:300;font-size:clamp(26px,3.2vw,42px);
  line-height:1.08;letter-spacing:-.03em;margin:0;color:#14171C}
.ej-certif .ejc-lede{font-family:'Aleo',Georgia,serif;font-weight:400;font-size:clamp(17px,1.6vw,21px);
  line-height:1.6;color:#14171C;max-width:60ch;margin:clamp(16px,2vw,24px) 0 0}
.ej-certif .ejc-lede a{color:var(--cobre-osc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* Opción A + «La pluma firma el estudio» (Héctor, 29-sep-2026): palabras a la izquierda, documento a la derecha; la pluma
   del logo subraya «Una duda razonable» y se posa en la E de «Estudio de títulos» (assets/certif-pluma.js).
   Prefijo .portada: la regla general .portada h2:not(.rotulo) (0,2,1) le ganaba al tamaño del título (salía a 52 px). */
.portada .ej-certif{display:grid;grid-template-columns:minmax(0,min(360px,38.2%)) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start;position:relative} /* 29-sep, D: arriba, sin vacío. 30-sep (Héctor): el certificado manda; palabras a lo sumo 360 px o 38,2 % (φ); el documento se queda con el resto */
.portada .ej-certif .ejc-tit{font-size:clamp(28px,2.9vw,42px);line-height:1.12}
.portada .ejc-dr{text-decoration:underline #B47840;text-decoration-thickness:.05em;text-underline-offset:.14em}
html.ejc-anima .portada .ejc-dr{text-decoration:none}
.portada .ejc-sub{display:inline-block;margin-top:clamp(22px,2.6vw,34px);text-decoration:none;color:var(--p-tinta);
  font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:clamp(26px,2.5vw,38px);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.portada .ejc-sub .pal{white-space:nowrap}
.portada .ejc-sub em{font-style:normal;color:var(--cobre-osc)}
.portada .ejc-sub .l{display:inline-block}
.portada .ejc-sub .e-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.portada .ejc-sub .e-svg{display:inline-block;height:.70em;width:auto;vertical-align:baseline;margin-right:-.01em}
.portada .ej-certif .ejc-lede{margin-top:clamp(14px,1.6vw,20px);max-width:46ch}
.portada .ej-certif .folio{margin:0;height:auto;padding-inline:0;display:flex;flex-direction:column}
.portada .ej-certif .folio .ejemplo{order:-2;position:static;text-align:right}
.portada .ej-certif .folio .sello{order:-1;align-self:flex-start;position:static;left:auto;top:auto;max-width:230px;margin:0 0 16px}
.portada .ej-certif .folio .hoja{margin:0;width:100%;max-width:none}
.ejc-pen{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;z-index:6;opacity:0}
.ejc-pen svg{display:block;width:100%;height:100%}
.ejc-ul{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:5}
.ejc-ul path{fill:none;stroke:#B47840;stroke-linecap:round}
/* 29-sep (Héctor: la señal es el ratón): nada se esconde de antemano; solo la pluma de la E mientras vuela. */
.portada .ejc-sub .pluma.en-vuelo{opacity:0}
/* 30-sep: en pantallas anchas el bloque se sale de la columna de 992 hacia la derecha (hasta 160 px), para que el documento
   gane tamaño sin mover el borde izquierdo de la rejilla. */
@media (min-width:1025px){.portada .ej-certif{margin-right:calc(-1 * max(0px, min(160px, (100vw - var(--ancho)) / 2 - 8px)))}
  /* 30-sep (Héctor): el recuadro «Antes de firmar» pasa a la columna de las palabras y ocupa su hueco, alineado al pie
     de la hoja; así la columna izquierda pesa lo mismo que el documento. La .folio se disuelve en la rejilla
     (display:contents) y sus piezas se reparten: rótulo arriba a la derecha, hoja debajo, sello al pie de la izquierda.
     Si el texto crece, la fila crece: el sello nunca lo pisa (con position:absolute a 1440 lo tapaba 60 px). */
  .portada .ej-certif{grid-template-rows:auto 1fr auto;row-gap:0}
  .portada .ej-certif .ejc-palabras{grid-column:1;grid-row:1 / 3}
  .portada .ej-certif .folio{display:contents}
  .portada .ej-certif .folio .ejemplo{grid-column:2;grid-row:1}
  .portada .ej-certif .folio .hoja{grid-column:2;grid-row:2 / 4}
  .portada .ej-certif .folio .sello{grid-column:1;grid-row:3;align-self:end;position:relative;left:auto;top:auto;margin:32px 0 0;
    width:auto;max-width:none;padding:clamp(20px,2vw,28px) clamp(22px,2.2vw,32px);
    font-size:clamp(15px,1.25vw,18px);line-height:1.5}
  .portada .ej-certif .folio .sello small{font-size:12px;margin-bottom:8px}
  .portada .ej-certif .ejc-tit{font-size:clamp(28px,2.4vw,36px)} /* 30-sep: 42 px dejaba 4 renglones y el sello bajaba 76 px de la hoja a 1440 */
  .portada .ej-certif .folio .ejemplo{margin-bottom:10px}}
@media (max-width:1024px){.portada .ej-certif{grid-template-columns:1fr;gap:24px}} /* 30-sep */
/* 30-sep (Héctor): apilado, el recuadro «Antes de firmar» sube al lado del texto de «Una duda razonable» y cubre el hueco
   que dejaba a la derecha; la hoja va debajo, a todo el ancho. Bajo 600 no hay sitio: sigue en su renglón. */
@media (min-width:768px) and (max-width:1024px){
  .portada .ej-certif{grid-template-columns:minmax(0,1fr) minmax(0,38.2%);column-gap:clamp(24px,4vw,48px);row-gap:0}
  .portada .ej-certif .ejc-palabras{grid-column:1;grid-row:1}
  .portada .ej-certif .folio{display:contents}
  .portada .ej-certif .folio .sello{grid-column:2;grid-row:1;align-self:end;margin:0;max-width:none;font-size:15px;padding:18px 22px}
  .portada .ej-certif .folio .ejemplo{grid-column:1 / -1;grid-row:2;margin-top:28px}
  .portada .ej-certif .folio .hoja{grid-column:1 / -1;grid-row:3;margin-top:8px}} /* 30-sep: con φ, bajo 1024 la columna de palabras queda estrecha: se apila */
/* ── PROPORCIÓN ÁUREA ESTRICTA de «Una duda razonable» (Héctor, 30-sep-2026: «como un diseñador estricto») ──────────────
   Una sola escala, la misma de la presentación: base 16 px × φⁿ → 16 · 26 · 42 · 68 · 110. Nada fuera de ella.
   · Tipos, un paso de φ entre niveles: título 42 → «Estudio de títulos» 26 → texto 16 (interlínea 26 = 16·φ).
   · Computador: palabras : documento = 1 : φ exacto; medianil 42. Tableta (768–1024): palabras : recuadro = φ : 1.
   · Verticales: filete→título 42, título→Estudio 42, Estudio→texto 26, recuadro 26 × 42 de relleno.
   Guardián: pruebas/portada/medir_proporcion_certif.py (razones con tolerancia de 1 %). */
@media (min-width:768px){
  .portada .ej-certif .ejc-filete{margin-bottom:42px}
  .portada .ej-certif .ejc-tit{font-size:42px;line-height:52px} /* 52 = 42·(2/φ) */
  .portada .ejc-sub{margin-top:42px;font-size:26px}
  .portada .ej-certif .ejc-lede{margin-top:26px;font-size:16px;line-height:26px;max-width:none}
  .portada .ej-certif .folio .sello{padding:26px 42px 26px 26px;font-size:16px;line-height:26px}
  .portada .ej-certif .folio .sello small{font-size:10px;line-height:16px;margin-bottom:10px}}
@media (min-width:1025px){
  .portada .ej-certif{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);column-gap:42px}
  .portada .ej-certif .folio .sello{margin-top:26px}}
@media (min-width:1025px) and (max-width:1180px){ /* columna angosta: el recuadro baja un paso de la escala */
  .portada .ej-certif .folio .sello{padding:16px 26px 16px 16px}}
@media (min-width:768px) and (max-width:1024px){
  .portada .ej-certif{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);column-gap:26px}
  .portada .ej-certif .folio .ejemplo{margin-top:42px}
  .portada .ej-certif .folio .hoja{margin-top:16px}
  /* 30-sep, opcion B (elegida por Hector entre A/B/C, diseno/prototipos/certif-tableta/): el recuadro a su tamano natural,
     alineado arriba con el titulo (filete 1 + 42). El estirado a toda la columna quedo «horrible»: no volver a el. */
  .portada .ej-certif .folio .sello{align-self:start;margin-top:43px;padding:26px}}

/* ── LAS PIEZAS: «Si falta una pieza» (Héctor, 1-oct-2026) ─────────────────────────────────────────────────────────────
   Contratación estatal en la portada, EN ESPEJO de «Una duda razonable»: la animación a la izquierda, las palabras a la
   derecha, con la misma escala φ (16 · 26 · 42 · 68 · 110).
   · Computador (≥1025): animación : palabras = φ : 1, medianil 42; la animación sale a la izquierda lo mismo que el
     certificado sale a la derecha; filas 1fr · auto · 1,618fr → las palabras quedan en el punto áureo de la figura.
   · Tipos: título 42/52 (2 renglones; 3 en columna angosta, «no avanza» va amarrado) · carátula 26 · texto 16/26.
   · ≤1024 se apila (palabras, luego la animación); ≤600 la animación va de borde a borde y las notas crecen a ~12 px.
   Todo acotado bajo .ej-pieza (manual §4). Guardián: pruebas/portada/medir_pieza.py. */
.portada .ej-pieza{padding-top:clamp(48px,7.6vw,110px);display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.portada .ej-pieza .ejz-palabras{order:-1;min-width:0}
.portada .ej-pieza .ejz-filete{height:1px;background:#14171C;opacity:.8;margin-bottom:clamp(24px,3.5vw,42px)}
.portada .ej-pieza .ejz-tit{font-family:'Aleo',Georgia,serif;font-weight:300;font-size:clamp(28px,2.9vw,42px);line-height:1.24;margin:0;color:var(--p-tinta)}
.portada .ej-pieza .nw{white-space:nowrap}
.portada .ej-pieza .no{position:relative;display:inline-block;transition:color 500ms ease .25s}
.portada .ej-pieza .no svg{position:absolute;left:-10%;top:30%;width:120%;height:50%;overflow:visible;pointer-events:none}
.portada .ej-pieza .no path{fill:none;stroke:#B47840;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 520ms cubic-bezier(.77,0,.175,1)}
.portada .ej-pieza.tachado .no{color:rgba(138,106,52,.45)}
.portada .ej-pieza.tachado .no path{stroke-dashoffset:0}
/* 2-oct (Héctor: «el subtítulo contratación estatal está muy pequeño, desproporcionado»): a 26 px la carátula se perdía
   bajo un título de 42 y la E del logotipo quedaba diminuta. Llenar el ancho de la columna pedía 57 px a 1440 (medido) y
   habría superado al título, que es el mensaje. Se usa el MEDIO GEOMÉTRICO de la escala, √(26·42) = 33,05 → 34 px:
   jerarquía título 42 › carátula 34 › párrafo 16, y la misma razón en el celular (34 › 28 › 16). */
.portada .ej-pieza .ejc-sub{margin-top:clamp(22px,2.6vw,42px);font-size:34px}
.portada .ej-pieza .ejz-lede{font-family:'Aleo',Georgia,serif;font-size:16px;line-height:26px;margin:26px 0 0;color:var(--p-tinta)}
.portada .ej-pieza .t{background-image:linear-gradient(#B47840,#B47840);background-repeat:no-repeat;background-position:0 92%;background-size:0 1.5px;
  transition:color 600ms ease,background-size 900ms cubic-bezier(.23,1,.32,1)}
.portada .ej-pieza .t.on{background-size:100% 1.5px}
.portada .ej-pieza .t.clave.on{color:var(--cobre-osc)}
.portada .ej-pieza .ejz-fig{display:block;color:inherit;text-decoration:none}
.portada .ej-pieza .ejz-escena{display:block;width:100%;height:auto}
.ejz-escena .ejz-rotulo{font:400 11px 'Public Sans',system-ui,sans-serif;letter-spacing:.24em;fill:#5A616B}
.ejz-escena .ejz-letra{font-family:'Aleo',Georgia,serif;font-style:italic;font-weight:500}
.ejz-escena .ejz-nota{font-family:'Aleo',Georgia,serif;font-style:italic;font-size:16.5px}
.ejz-escena .ejz-nota.clave{font-size:18px;font-weight:500}
.ejz-escena .ejz-sello1{font:600 21px 'Public Sans',system-ui,sans-serif;letter-spacing:.2em;fill:#2B3C8F;text-anchor:middle}
.ejz-escena .ejz-sello2{font:500 18px 'Public Sans',system-ui,sans-serif;letter-spacing:.3em;fill:#2B3C8F;text-anchor:middle}
/* Tableta y «sitio de escritorio» en el celular (601–1024; Héctor, 1-oct: captura a ~980 px): apilado, el párrafo corría
   ~110 caracteres por renglón y el dibujo, a 880 px, aplastaba al título. Las palabras se reparten φ : 1 (título y carátula
   | párrafo, arriba a ras, como el recuadro del certificado en tableta) y el dibujo va a su tamaño natural, centrado. */
/* 2-oct, segunda vuelta sobre 980 (Héctor: «revisa la proporción de texto… como un diseñador obsesionado con la áurea»).
   Las dos columnas φ:1 daban al párrafo 321 px = 34 caracteres por renglón: demasiado corto, y justificado abría ríos de
   espacios (antes, a todo el ancho, eran 110: el extremo contrario). La medida de lectura manda sobre la geometría, así
   que φ se usa donde sirve: el párrafo baja y ocupa 61,8 % del bloque (545 px de 882 a 980 px) → ~58 caracteres, dentro
   del rango clásico de 45-75. Verticales, todas de la escala 16·26·42: filete→título 42, título→carátula 42,
   carátula→párrafo 26, palabras→figura 42. El dibujo se queda en 640 y centrado. */
@media (min-width:601px) and (max-width:1024px){
  .portada .ej-pieza{gap:42px}
  .portada .ej-pieza .ejz-filete{margin-bottom:42px}
  .portada .ej-pieza .ejz-tit{font-size:42px;line-height:52px}
  .portada .ej-pieza .ejc-sub{margin-top:42px;font-size:34px}
  .portada .ej-pieza .ejz-lede{margin-top:26px;max-width:61.8%}
  /* El dibujo se alinea a la IZQUIERDA, no centrado: así su rótulo «Propuesta habilitada» cae sobre el mismo eje que el
     filete, el título y el párrafo, y la sección se lee con un solo eje. Centrado, el rótulo quedaba a 170 px del borde. */
  .portada .ej-pieza .ejz-fig{width:100%;max-width:640px;margin-inline:0}}
@media (max-width:600px){
  .portada .ej-pieza .ejz-fig{margin-inline:calc(-1 * var(--g))}
  /* 2-oct: en el celular el título (28) y la carátula (26) quedaban del mismo tamaño y competían. Se mantiene la razón
     del computador bajando un paso: 34 › 28 › 16 (Héctor, 1-oct: «para el celular podemos cambiar las cosas»). */
  .portada .ej-pieza .ejz-tit{font-size:34px;line-height:42px}
  .portada .ej-pieza .ejc-sub{font-size:28px}}
@media (min-width:1025px){
  .portada .ej-pieza{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);grid-template-rows:1fr auto 1.618fr;column-gap:42px;row-gap:0;
    margin-left:calc(-1 * max(0px, min(160px, (100vw - var(--ancho)) / 2 - 8px)))}
  .portada .ej-pieza .ejz-fig{grid-column:1;grid-row:1 / 4;align-self:center}
  .portada .ej-pieza .ejz-palabras{grid-column:2;grid-row:2;order:0}
  .portada .ej-pieza .ejz-tit{font-size:42px;line-height:52px}
  .portada .ej-pieza .ejc-sub{margin-top:42px;font-size:34px}}

/* --- 2. antes de escribir: cada fila es un enlace entero --- */
.viene{border-top:1px solid var(--p-tinta)}
.viene .rotulo{padding-block:22px 10px;font-family:'Public Sans',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--p-tenue)}
.fila{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 44px;gap:32px;align-items:center;
  padding-block:28px;border-bottom:1px solid var(--p-filete);position:relative;isolation:isolate;
  -webkit-tap-highlight-color:transparent}
.fila::before{content:"";position:absolute;inset:0 calc(var(--g) * -1);background:#EAECE7;z-index:-1;
  opacity:0;transition:opacity 250ms var(--ease-out)}
.fila h3{font-size:clamp(23px,2.6vw,34px);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.fila p{font-size:17px;line-height:1.5;color:var(--gris)}
.fila .flecha{width:44px;height:44px;border:1px solid var(--p-tinta);display:grid;place-items:center;
  font-family:'Public Sans',sans-serif;
  transition:transform 300ms var(--spring),background 200ms var(--ease-out),color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .fila:hover::before{opacity:1}
  .fila:hover .flecha{transform:translateX(6px);background:var(--marino);color:#fff}
}
.fila:active::before{opacity:1}

/* --- secciones --- */
.portada .sec{padding-top:clamp(72px,10vw,140px)}
.portada .enc{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,6vw,88px);
  align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.portada h2:not(.rotulo){font-size:clamp(30px,4vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.portada .enc p{font-size:18px;line-height:1.55;color:var(--gris)}
.portada .mas{margin-top:auto;padding-top:28px;font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;
  color:var(--cobre-osc);display:flex;gap:8px;align-items:center}
.portada .mas span{transition:transform 300ms var(--spring)}
@media (hover:hover) and (pointer:fine){.portada a:hover .mas span{transform:translateX(6px)}}

/* --- 3. herramientas: una ancha y una estrecha --- */
.bento{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px}
.herr{background:#fff;padding:34px 32px 30px;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(20,28,44,.05),0 30px 60px -40px rgba(20,28,44,.25);
  transition:transform 300ms var(--spring),box-shadow 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.herr:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(20,28,44,.05),0 36px 60px -36px rgba(20,28,44,.32)}}
a.herr:active{transform:scale(.99)}
.herr .et{font-family:'Public Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cobre-osc)}
.herr h3{font-size:28px;font-weight:300;letter-spacing:-.02em;margin-top:12px;line-height:1.15}
.herr .txt{margin-top:12px;font-size:16.5px;line-height:1.55;color:var(--gris)}
.herr .campo{display:flex;margin-top:24px;border:1px solid var(--p-filete)}
.herr .campo input{flex:1;min-width:0;border:0;border-radius:0;background:var(--papel);padding:14px 16px;
  font:15px 'Public Sans',sans-serif;color:var(--p-tinta)}
.herr .campo a,.herr .campo button{background:var(--marino);color:#fff;font:600 14px 'Public Sans',sans-serif;padding:0 22px;
  display:grid;place-items:center;min-height:48px;border:0;border-radius:0;cursor:pointer;transition:transform 140ms var(--ease-out)}
.herr .campo button:active{transform:scale(.97)}
.herr .campo button:focus-visible,.herr .campo input:focus-visible{outline:2px solid var(--cobre-osc);outline-offset:2px}
.herr .campo input::placeholder{color:var(--p-tenue)}
.herr .res{margin-top:14px;font-family:'Public Sans',sans-serif;font-size:14px}
.herr .res div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--p-filete)}
.herr .res div:first-child{font-size:12px;color:var(--p-tenue);text-transform:uppercase;letter-spacing:.12em}
.herr .res span{color:var(--gris);white-space:nowrap;font-variant-numeric:tabular-nums}
.herr .nota{margin-top:auto;padding-top:18px;font-family:'Public Sans',sans-serif;font-size:13px;line-height:1.5;color:var(--p-tenue)}
.herr .luces{display:flex;gap:7px;margin-top:28px}
.herr .luces i{width:14px;height:14px;border-radius:50%;background:var(--p-filete)}
.herr .luces i.v{background:#5E8C6A}
.herr .luces i.a{background:#D1A24A}

/* --- 4. materias: dos columnas editoriales con filete vertical --- */
.materias{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--p-tinta)}
.mat{padding:40px 48px 44px 0;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}
.mat + .mat{padding:40px 0 44px 48px;border-left:1px solid var(--p-filete)}
.mat h3{font-size:clamp(28px,3.4vw,44px);font-weight:300;letter-spacing:-.03em;transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mat:hover h3{color:var(--cobre-osc)}}
.mat .txt{margin-top:16px;font-size:18px;line-height:1.55;color:var(--gris);max-width:28em}

/* --- 5. cómo se trabaja: SÍ es una secuencia, por eso números y una línea --- */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative;list-style:none;margin:0;padding:0}
.pasos::before{content:"";position:absolute;left:0;right:0;top:21px;height:1px;background:var(--p-tinta)}
.paso{position:relative;margin:0}
.paso .n{width:42px;height:42px;display:grid;place-items:center;background:var(--papel);border:1px solid var(--p-tinta);
  font:600 13px 'Public Sans',sans-serif;position:relative}
.paso h3{margin-top:24px;font-size:24px;font-weight:300;letter-spacing:-.015em}
.paso p{margin-top:10px;font-size:16.5px;line-height:1.55;color:var(--gris)}

/* --- pie, común a todo el sitio: el único bloque marino --- */
.pie{margin-top:clamp(88px,11vw,150px);background:var(--marino);color:#C2C6CB;
  font-family:'Public Sans',sans-serif;font-size:14px}
.home .pie{margin-top:clamp(56px,6.5vw,96px)} /* 29-sep, corrección A: sin franja muerta entre certificado y pie */
/* «La firma de cierre» (P1, 29-sep-2026): rótulos y filete como las carátulas; la marca con la E del logotipo y una
   rúbrica que se traza al llegar (script en footer.php); al lado, «Consulte con expertos» y el botón. */
.pie .rotulos{display:flex;justify-content:space-between;gap:12px;padding-top:64px;padding-bottom:14px;border-bottom:1px solid rgba(244,240,236,.5);
  font:600 11px/1.3 'Public Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8E949C}
.pie .cierre{padding-block:38px 52px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,6vw,88px);align-items:end;border-bottom:1px solid rgba(244,240,236,.14)}
.pie .nombre{margin:0;font:400 clamp(40px,5.2vw,72px)/1 'Libre Caslon Display',Georgia,serif;letter-spacing:-.01em;color:#F4F0EC;white-space:nowrap}
.pie .nombre em{font-style:normal;color:#C9A36B}
.pie .nombre .e-logo{display:inline-block;height:.7em;width:auto;vertical-align:baseline}
.pie .e-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pie .rubrica{display:block;width:78%;height:34px;margin-top:6px;overflow:visible}
.pie .rubrica path{fill:none;stroke:#C9A36B;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.pie.antes-de-ver .rubrica path{stroke-dashoffset:1}
  .pie.visto .rubrica path{transition:stroke-dashoffset 1400ms cubic-bezier(.65,0,.35,1) 250ms}}
.pie .invita p{margin:0 0 22px;font:300 clamp(20px,1.9vw,24px)/1.4 'Aleo',Georgia,serif;color:#D6D9DD;max-width:26ch}
.pie .invita strong{font-weight:400;color:#F4F0EC}
.pie .cta{background:var(--cobre-osc);justify-self:start}
.pie .cta span{background:rgba(0,0,0,.2)}
.pie .cols{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);gap:32px clamp(32px,5vw,72px);padding-block:44px} /* 29-sep, H: + columna La firma; cada columna mide sus palabras */
.pie h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8E949C;font-weight:600;margin-bottom:14px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:9px}
.pie .cols a{transition:color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pie .cols a:hover,.pie .legal a:hover{color:#F4F0EC}}
.pie .quien{max-width:26em;line-height:1.6}
/* En las páginas interiores el artículo ya trae su propio margen inferior. */
.articulo ~ .pie{margin-top:24px}
.pie .legal{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding-block:20px 28px;
  border-top:1px solid rgba(244,240,236,.14);color:#8E949C;font-size:13px}

/* --- celular y tableta vertical --- */
@media (max-width:900px){
  /* El menú NO se esconde (lección del 27-sep): pasa a un segundo renglón deslizable. */
  .nav .ancho{height:auto;flex-wrap:wrap;gap:10px 12px;padding-top:12px;justify-content:space-between}
  /* 28-sep: los cuatro rótulos miden 397 px y a 390 caben 350: el renglón se desliza. El borde derecho se
     desvanece para avisar que hay más (antes cortaba «Herramienta|s» en seco y parecía un error); el relleno
     final deja el último rótulo entero fuera del desvanecido al llegar al extremo. */
  .menu{order:3;flex:0 0 calc(100% + 2 * var(--g));margin:0 calc(-1 * var(--g));padding:0 calc(var(--g) + 32px) 0 var(--g);gap:22px;
    overflow-x:auto;white-space:nowrap;border-top:1px solid var(--p-filete);scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
  .menu::-webkit-scrollbar{display:none}
  .menu a{padding:12px 0}
  .nav .wa{padding:9px 16px}
  /* minmax(0,1fr) y no 1fr: con 1fr la columna no encoge por debajo del ancho natural del
     buscador del SECOP y a 360 px las dos herramientas se salían por la derecha. */
  .portada .enc,.bento,.materias,.pie .cierre,.pie .cols,.pasos{grid-template-columns:minmax(0,1fr)}
  .herr .campo input{width:100%}
  .folio .ejemplo{position:static;display:block;margin-bottom:8px}
  .folio .hoja{transform:none;margin-bottom:-18px;padding:20px 16px 34px}
  .cert{font-size:10.5px}
  .cert-cab{font-size:12.5px}
  .cert::before{font-size:72px}
  .cert .doble{flex-wrap:wrap;gap:0 12px}
  .fila{grid-template-columns:1fr 44px;gap:8px 16px;padding-block:22px}
  .fila p{grid-row:2;grid-column:1;font-size:16px}
  .fila .flecha{grid-row:1/3;grid-column:2}
  .herr{padding:28px 22px 24px}
  .mat,.mat + .mat{padding:32px 0;border-left:0}
  .mat + .mat{border-top:1px solid var(--p-filete)}
  .pasos{gap:28px}
  .pasos::before{left:21px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .paso{padding-left:64px}
  .paso .n{position:absolute;left:0;top:0}
  .paso h3{margin-top:6px}
  .pie .cierre{padding-block:32px 44px}
  .pie .rotulos{font-size:9px;letter-spacing:.12em;padding-top:48px}
  .pie .nombre{font-size:11.2vw}
  .pie .rubrica{width:92%}
}
@media (max-width:420px){
  .herr .res div{flex-direction:column;gap:2px}
  .portada .acciones,.portada .acciones .cta{width:100%}
  .portada .acciones .cta{justify-content:space-between}
}

/* ==================== movimiento ====================
   La página está COMPLETA en reposo: solo se oculta lo que JS confirma que puede
   devolver (clase .anima en <html>), y nunca lo que ya está a la vista al cargar.
   El h1 no se anima: es el elemento que mide el LCP. */
.anima .entra{opacity:0;translate:0 12px}
.anima .entra.dentro{opacity:1;translate:0 0;
  transition:opacity 500ms var(--ease-out),translate 500ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .anima .entra,.anima .entra.dentro{opacity:1;translate:0 0;transition:none}
  .nav,.nav .ancho,.cta,.cta span,.fila::before,.fila .flecha,.herr,.menu a::after,.portada .mas span{transition:none}
  .cta:active,a.herr:active,.nav .wa:active{transform:none}
}

/* /el-equipo/ : una sola columna de lectura sobre el papel. */
.articulo{max-width:720px;margin:0 auto;padding:64px 40px 76px}
.articulo h1{font-size:54px;line-height:1.05;font-weight:300;letter-spacing:-.03em;text-wrap:balance}
.articulo .entrada{margin-top:22px;font-size:21px;line-height:1.5;color:var(--gris)}
.articulo h2{font-size:29px;font-weight:300;letter-spacing:-.015em;margin-top:52px;
  padding-top:22px;border-top:1px solid var(--p-filete)}
.articulo p{margin-top:16px;font-size:17.5px;line-height:1.62}
.articulo ol{margin-top:18px;padding-left:0;list-style:none;counter-reset:paso}
.articulo ol li{counter-increment:paso;position:relative;padding-left:44px;margin-top:16px;
  font-size:17.5px;line-height:1.6}
.articulo ol li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:'Public Sans',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--cobre)}
.articulo ol b{font-weight:400}
.articulo .cierre{margin-top:40px}
.articulo .horario{margin-top:14px;font-family:'Public Sans',sans-serif;font-size:15px;color:var(--gris)}

@media (max-width:900px){
  .articulo{padding:44px 22px 56px}
  .articulo h1{font-size:36px}
}

/* ==================== ajustes propios del tema ====================
   Lo que en el prototipo iba con atributos sueltos aqui es clase, porque el
   contenido lo va a escribir WordPress y no un generador. */

/* Saltar al contenido: obligatorio para quien navega con teclado. Invisible
   hasta que recibe el foco, y entonces aparece sobre todo lo demas. */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--marino);color:var(--marfil);padding:12px 18px;
  font-family:'Public Sans',system-ui,sans-serif;font-size:15px;font-weight:600}
.saltar:focus{left:0}

/* Etiqueta que solo leen los lectores de pantalla. */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* En /el-equipo/ el texto lo escribe WordPress: la entradilla es el primer
   parrafo, no una clase que ponga un generador. */
.articulo > p:first-of-type{margin-top:22px;font-size:21px;line-height:1.5;color:var(--gris)}
.articulo > p:first-of-type + p{margin-top:18px}
.articulo ol{margin-top:18px;padding-left:0;list-style:none;counter-reset:paso}
.articulo ol li{counter-increment:paso;position:relative;padding-left:44px;margin-top:16px;
  font-size:17.5px;line-height:1.6}
.articulo ol li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:'Public Sans',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--cobre)}
.articulo ol li strong{font-weight:400}
.articulo a:not(.btn){box-shadow:inset 0 -1px 0 var(--cobre-dec)}
.articulo .btn{margin-top:40px}

/* Listados de index.php: busquedas, archivos y la pagina que no existe. */
.articulo .listado{list-style:none;margin-top:26px;border-top:1px solid var(--p-filete)}
.articulo .listado li{padding:18px 0;border-bottom:1px solid var(--p-filete)}
.articulo .listado a{font-size:21px;font-weight:300;box-shadow:none}
@media (hover:hover) and (pointer:fine){.articulo .listado a:hover{box-shadow:inset 0 -1px 0 var(--cobre)}}
.articulo .listado p{margin-top:6px;font-size:16px;color:var(--gris)}

/* (La <ul> del menú ya se limpia en el bloque de la barra; aquí había una segunda regla
   que, por ir después, anulaba el margen del menú en el celular: 38 px de desborde a 768.) */

/* ---- Páginas pilares: caminos, lo esencial y preguntas desplegables (27-sep-2026) ---- */
.articulo ul{margin-top:16px;padding-left:1.2em}
.articulo ul li{margin-top:10px;font-size:17px;line-height:1.6}
.articulo ul.caminos{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.articulo ul.caminos li{margin:0}
.articulo ul.caminos a{display:block;padding:11px 18px;border:1px solid var(--cobre);border-radius:999px;
  color:var(--marino);text-decoration:none;font-family:'Public Sans',sans-serif;font-size:15px;font-weight:500;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out),transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.articulo ul.caminos a:hover{background:var(--marino);border-color:var(--marino);color:var(--marfil)}}
.articulo ul.caminos a:active{transform:scale(.97)}
.articulo ul.caminos a:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
.articulo ul.esencial{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--p-filete);border:1px solid var(--p-filete)}
.articulo ul.esencial li{margin:0;padding:16px 18px;background:var(--papel);font-size:16px;line-height:1.5}
.articulo ul.esencial strong{display:block;margin-bottom:4px;font-family:'Public Sans',sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--cobre-osc)}
.articulo details{border-top:1px solid var(--p-filete)}
.articulo details:last-of-type{border-bottom:1px solid var(--p-filete)}
.articulo summary{cursor:pointer;list-style:none;position:relative;padding:18px 40px 18px 0;
  font-family:'Aleo',serif;font-size:19px;font-weight:400;line-height:1.35;color:var(--marino)}
.articulo summary::-webkit-details-marker{display:none}
.articulo summary::before,.articulo summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:1.5px;background:var(--cobre);transform:translateY(-50%);transition:transform 200ms var(--ease-out)}
.articulo summary::after{transform:translateY(-50%) rotate(90deg)}
.articulo details[open] summary::after{transform:translateY(-50%) rotate(0deg)}
.articulo details[open] > :not(summary){animation:ej-despliega 220ms var(--ease-out)}
@keyframes ej-despliega{from{opacity:0;transform:translateY(-4px)}}
@media (hover:hover) and (pointer:fine){.articulo summary:hover{color:var(--cobre-osc)}}
.articulo summary:focus-visible{outline:2px solid var(--cobre);outline-offset:2px}
.articulo details[open]{padding-bottom:22px}
.articulo details > p:first-of-type{margin-top:0}
@media (max-width:560px){.articulo ul.esencial{grid-template-columns:1fr}}

/* Revisión de movimiento con el criterio de Emil Kowalski (27-sep-2026) */
@media (prefers-reduced-motion:reduce){
  .articulo summary::before,.articulo summary::after,.articulo ul.caminos a{transition:none}
  .articulo ul.caminos a:active{transform:none}
  .articulo details[open] > :not(summary){animation:none}
}

/* Saltos internos (#cuanto-cuesta...): el menú es fijo (sticky) y tapaba el destino — medido 27-sep:
   la pregunta quedaba en y=0 bajo un menú de 76 px. Margen de llegada + desplazamiento suave. */
.articulo [id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ==================== CARÁTULA de las páginas interiores (28-sep-2026) ====================
   Héctor: «la entrada debería ser parecida a la de inicio, con la animación de la E y la pluma… así en cada
   página reforzamos la marca». Es el titular «Documento» de la portada: mismos filetes, rótulos, Caslon,
   entrada letra a letra y pluma. Lo arma ej_titulo_en_letras() (functions.php) y lo pone page.php.
   El tamaño que llena el ancho se MIDE por título (clase c-<página>) con las letras ya separadas. */
.caratula .heroe{padding-top:clamp(40px,6vw,88px);container-type:inline-size}
.caratula .rotulos{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;
  font-family:'Public Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.caratula .filete{height:1px;background:#14171C;opacity:.8}
.caratula .filete.bajo{margin-top:8px}
.caratula h1{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;line-height:1;letter-spacing:-.01em;
  margin:.1em 0 0;max-width:none;white-space:nowrap;text-wrap:nowrap;font-size:13cqi}
.caratula h1 em{font-style:normal;color:var(--cobre-osc)}
.caratula h1 .pal{white-space:nowrap}
.caratula h1 .l{display:inline-block}
.caratula h1 .e-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.caratula h1 .e-svg{display:inline-block;height:.70em;width:auto;vertical-align:baseline;margin-right:-.01em}
.caratula h1 .pluma{transform-box:fill-box;transform-origin:30% 100%}
/* «Contratación Estatal», medido en el sitio de trabajo */
.caratula h1.c-contratacion-estatal{font-size:13.56cqi}
/* «Estudio de Títulos», medido en el sitio de trabajo (28-sep-2026) */
.caratula h1.c-estudio-de-titulos{font-size:14.92cqi}
/* «Consulta Proceso SECOP» con la E del logo dentro de SECOP (28-sep-2026), medido con las letras separadas */
.caratula h1.c-consulta-proceso-secop{font-size:10.19cqi}
/* «Registro en SECOP», medido en el sitio de trabajo (28-sep-2026) */
.caratula h1.c-como-inscribirse-en-secop-ii{font-size:13.49cqi}
.articulo.con-caratula{padding-top:40px}
/* La E del logo DENTRO de una palabra: aire a la izquierda para que la pluma no pise la letra anterior. */
.caratula h1 .l-inicial.en-palabra .e-svg{margin-left:.09em}
/* «La pluma firma» (Consulta proceso SECOP, 28-sep-2026; assets/pluma-firma.js). El filete inferior baja al sitio
   de la línea que escribe la pluma (0,34 cuerpos bajo la línea base: 0,191 × 10,19 cqi), así no salta nada.
   Las clases firmando / firma-lista las pone el script: sin él, esta carátula es igual a las demás. */
.caratula.con-firma .heroe{position:relative}
.caratula.con-firma .filete.bajo{margin-top:1.95cqi}
.caratula.con-firma .firma{display:none;position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
html.firma-lista .caratula.con-firma .firma{display:block}
html.firmando .caratula.con-firma .filete.bajo,html.firma-lista .caratula.con-firma .filete.bajo{visibility:hidden}
.caratula.con-firma .viajera{position:absolute;left:0;top:0;z-index:2;opacity:0;pointer-events:none;will-change:transform}
.caratula.con-firma .viajera svg{display:block;width:100%;height:100%}
@media (max-width:700px){
  .caratula h1{white-space:normal;text-wrap:wrap}
  .caratula h1 .pal{display:block}
  .caratula h1.c-contratacion-estatal{font-size:21.27cqi}
  .caratula h1.c-estudio-de-titulos{font-size:35.88cqi}
  .caratula h1.c-consulta-proceso-secop{font-size:31.15cqi}
  .caratula.con-firma .filete.bajo{margin-top:6cqi}
  .caratula h1.c-como-inscribirse-en-secop-ii{font-size:32.33cqi}
  .caratula .rotulos{font-size:9px;letter-spacing:.1em;white-space:nowrap;flex-wrap:wrap;row-gap:5px}
  .caratula .rotulos span:last-child{margin-left:auto}
  .articulo.con-caratula{padding-top:28px}
}
@media (prefers-reduced-motion:no-preference){
  html:not(.caratula-vista) .caratula .filete{animation:ej-trazo 800ms cubic-bezier(.77,0,.175,1) both;transform-origin:center}
  html:not(.caratula-vista) .caratula .rotulos{animation:ej-aparece 500ms ease 650ms both}
  html:not(.caratula-vista) .caratula h1 .l{display:inline-block;animation:ej-letra 520ms var(--ease-out) both;
    animation-delay:calc(260ms + var(--i) * 26ms)}
  html:not(.caratula-vista) .caratula h1 .pluma{animation:ej-pluma 900ms var(--ease-out) 1100ms both}
  html:not(.caratula-vista) .articulo.con-caratula > p:first-of-type{animation:ej-enfoca 600ms var(--ease-out) 620ms both}
}
html.firmando .caratula.con-firma h1 .pluma{opacity:0;animation:none}
html.firmando .caratula.con-firma h1 .pluma.posada{opacity:1}

/* Subtítulos h3 fuera de las preguntas frecuentes (28-sep-2026: «Las partes del certificado»). */
.articulo h3{margin-top:36px;font-size:21px;font-weight:400;line-height:1.3;letter-spacing:-.005em;color:var(--p-tinta);text-wrap:balance}
.articulo h3 + p{margin-top:10px}
@media (max-width:600px){.articulo h3{font-size:19px;margin-top:30px}}

/* ==================== LA ACCIÓN PRINCIPAL DE UNA PÁGINA INTERIOR (28-sep-2026) ====================
   publicar_paginas.py convierte «[Cotizar…](https://wa.me/…) · 305 299 0474» en el botón principal del sitio (.cta,
   el de la portada y el pie) con el número al lado. Antes era un enlace de texto y parecía una nota al pie. */
.articulo .cotizar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:26px}
.articulo .cotizar .cta{box-shadow:none;max-width:100%;text-align:left}
.articulo .cotizar .tel{font-family:'Public Sans',sans-serif;font-size:15px;font-weight:500;color:var(--gris);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
details .cotizar{margin-top:18px}
/* Un enlace interno suelto («Conozca al equipo») es una acción SECUNDARIA: borde fino marino, como el botón de la
   barra. Antes era el bloque cobre macizo de .btn y competía con WhatsApp, que es la principal. */
.articulo a.btn[href^="/"]{background:transparent;color:var(--marino);box-shadow:inset 0 0 0 1px var(--marino);
  font-size:15px;padding:13px 22px;gap:12px;transition:background-color .2s ease,color .2s ease,transform 160ms var(--ease-out)}
.articulo a.btn[href^="/"]::after{content:"→" / "";transition:transform 300ms var(--spring)}
@media (hover:hover) and (pointer:fine){
  .articulo a.btn[href^="/"]:hover{background:var(--marino);color:var(--papel)}
  .articulo a.btn[href^="/"]:hover::after{transform:translateX(3px)}
}
.articulo a.btn[href^="/"]:active{transform:scale(.97);box-shadow:inset 0 0 0 1px var(--marino)}
.articulo a.btn[href^="/"]:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .articulo a.btn[href^="/"],.articulo a.btn[href^="/"]::after{transition:none}
  .articulo a.btn[href^="/"]:active{transform:none}
}
@media (max-width:600px){
  .articulo .cotizar .cta{width:100%;justify-content:space-between}
}

/* ==================== TEXTO JUSTIFICADO (regla permanente de Héctor, 28-sep-2026) ====================
   «Justifica los textos siempre, déjalo como regla para cada sesión futura.» Solo la prosa: párrafos, listas
   y descripciones. :where() deja la especificidad en cero para que cualquier componente con alineación
   propia gane (el encabezado centrado del certificado, las píldoras, los rótulos). La partición en español
   evita los ríos de espacios en la columna del celular; los titulares nunca se parten (GUSTO, regla 5). */
:where(.articulo p,.articulo li,.fila p,.portada .enc p,.portada .bajada,.herr .txt,.mat .txt,.ej-presenta .ejp-seo,.ej-certif .ejc-lede,.ej-pieza .ejz-lede){
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3;text-wrap:pretty}
:where(.articulo ul.caminos li,.articulo h1,.articulo h2,.articulo h3,.articulo summary){text-align:left;hyphens:manual}
/* Celular: a 21 px caben ~30 letras por renglón y el justificado abría huecos («Atendemos  a  distancia»).
   Entrada algo menor y partición un poco más permisiva: más letras por renglón y menos espacio que repartir. */
@media (max-width:600px){
  .articulo > p:first-of-type,.articulo.con-caratula > p:first-of-type{font-size:18.5px;line-height:1.55}
  :where(.articulo p,.articulo li){hyphenate-limit-chars:6 3 2}
  /* los pasos numerados: 44 px de sangría dejaban el renglón en ~300 px y el justificado lo abría */
  .articulo ol li{padding-left:32px;font-size:16.5px}
}

/* ---------- PUENTES Contratación estatal ⇄ Consulta SECOP (30-sep-2026, aprobados por Héctor) ----------
   inc/puentes.php. Banda marino = contraste real; rótulos + filete cobre como las carátulas; nada de 3D.
   Prefijo .articulo: vence a .articulo h2 / li / a del tema. Maqueta: diseno/prototipos/puentes/armar_puentes.py */
.articulo .ej-puente{background:var(--marino);color:#C9CDD2;margin:clamp(40px,6vw,64px) 0;
  padding:clamp(26px,4vw,40px) clamp(22px,4vw,40px);position:relative;max-width:none;box-sizing:border-box}
.articulo .ej-puente.ancho{left:50%;width:min(992px,calc(100vw - 2 * var(--g,20px)));transform:translateX(-50%)}
.articulo .ej-puente::before{content:"";position:absolute;left:clamp(22px,4vw,40px);right:clamp(22px,4vw,40px);top:0;height:2px;background:var(--cobre)}
.articulo .ej-puente .rotulos{display:flex;justify-content:space-between;gap:12px;font:600 11px/1 'Public Sans',sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:#B98E52;margin-bottom:18px}
.articulo .ej-puente h2{font:400 clamp(24px,2.6vw,30px)/1.2 'Aleo',Georgia,serif;color:#F4F0EC;margin:0 0 12px;
  text-wrap:balance;border:0;padding:0}
.articulo .ej-puente h2::before,.articulo .ej-puente h2::after{content:none}
.articulo .ej-puente p{font:400 17px/1.6 'Aleo',Georgia,serif;color:#C9CDD2;margin:0 0 22px}
.articulo .ej-puente form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px 18px;align-items:end}
.articulo .ej-puente label{display:grid;gap:6px;font:600 11px/1 'Public Sans',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#8E96A1}
.articulo .ej-puente input{font:400 17px/1.3 'Aleo',Georgia,serif;color:#F4F0EC;background:transparent;border:0;
  border-bottom:1px solid #4A5566;padding:8px 0;border-radius:0;outline:0;transition:border-color .2s}
.articulo .ej-puente input::placeholder{color:#6B7482}
.articulo .ej-puente input:focus{border-bottom-color:var(--cobre)}
.articulo .ej-puente .ir{font:600 14px/1 'Public Sans',sans-serif;color:#F4F0EC;background:var(--cobre-osc,#8A5E2E);border:0;
  min-height:48px;padding:0 22px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.articulo .ej-puente form .ir{grid-column:1/-1;justify-self:start;margin-top:8px}
.articulo .ej-puente .ir:active{transform:scale(.97)}
.articulo .ej-puente .ir:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
.articulo .ej-puente .ir.claro{background:transparent;box-shadow:inset 0 0 0 1px #4A5566}
.articulo .ej-puente .salidas{display:flex;flex-wrap:wrap;gap:12px}
.articulo .ej-puente ul{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px}
.articulo .ej-puente li{text-align:left;hyphens:manual;font:400 16px/1.45 'Aleo',Georgia,serif;color:#E3E1DC;
  padding:11px 0;margin:0;border-top:1px solid #2C3646}
.articulo .ej-puente li::before{content:none}
@media (max-width:700px){
  .articulo .ej-puente form,.articulo .ej-puente ul{grid-template-columns:1fr}
  .articulo .ej-puente .ir{justify-content:center;width:100%}
  .articulo .ej-puente .salidas{display:grid}}
@media (prefers-reduced-motion:reduce){.articulo .ej-puente .ir,.articulo .ej-puente input{transition:none}}