/* =========================================================================
   MAJICO · hoja de estilos común
   Dirección "imprenta": papel, tinta y un solo rojo reservado a la señal viva.
   Todo el color y la tipografía viven en :root. Para pasar la web entera al
   tema oscuro basta con poner data-tema="noche" en la etiqueta <html>.
   ========================================================================= */

:root{
  /* --- superficie --- */
  --papel:       #0c1014;   /* fondo */
  --papel-2:     #090d11;   /* fondo alterno */
  --negro:       #05080a;   /* bandas y cortes */

  /* --- texto --- */
  --tinta:       #e6eaed;   /* texto principal */
  --tinta-2:     #d3d9de;   /* cuerpo de texto */
  --tinta-3:     #aeb8c1;   /* cuerpo secundario */
  --gris:        #8a97a2;   /* rótulos y metadatos */
  --gris-2:      #6f7d88;   /* apagado */

  /* --- filetes --- */
  --filete:      #1e262e;   /* 1px */
  --filete-2:    #2b3640;   /* 2px, el del cabezal */
  --filete-neg:  #1a222a;   /* sobre las bandas */

  /* --- señal: el ámbar solo aparece donde hay algo vivo --- */
  --rojo:        #e0a028;
  --rojo-claro:  #f0bc5c;

  /* --- sobre las bandas negras --- */
  --sobre-negro:      #e6eaed;
  --sobre-negro-soft: #8a97a2;

  /* --- tipografía --- */
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans:  Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --max: 1180px;
  --pad: 56px;
}

/* Tema alternativo — la variante en papel. Se activa poniendo
   <html data-tema="papel"> y no hace falta tocar nada más. */
html[data-tema="papel"]{
  --papel:       #e9e9e4;
  --papel-2:     #e1e1da;
  --negro:       #12120f;
  --tinta:       #12120f;
  --tinta-2:     #2c2c26;
  --tinta-3:     #4a4a42;
  --gris:        #5f5f57;
  --gris-2:      #79796f;
  --filete:      #c9c9c0;
  --filete-2:    #12120f;
  --filete-neg:  #26261f;
  --rojo:        #b82c1a;
  --rojo-claro:  #ff6a4d;
  --sobre-negro: #e9e9e4;
  --sobre-negro-soft: #9a9a90;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }

body{
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
::selection{ background: var(--rojo); color: #fff; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.mono{ font-family: var(--mono); }
.serif{ font-family: var(--serif); }

h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
em{ font-style: italic; }

/* rótulo de instrumento — el mono solo aparece donde algo se está midiendo */
.rot{
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  display: inline-block;
}
.rot-rojo{ color: var(--rojo); }

/* filetes */
.filete{ height: 1px; background: var(--filete); }
.filete-grueso{ height: 2px; background: var(--filete-2); }

/* =========================================================================
   CABEZAL
   ========================================================================= */
.cabezal{
  position: sticky; top: 0; z-index: 100;
  background: var(--papel);
  transition: box-shadow .3s ease;
}
.cabezal.pegado{ box-shadow: 0 1px 0 var(--filete), 0 12px 26px rgba(18,18,15,.06); }
html:not([data-tema="papel"]) .cabezal.pegado{ box-shadow: 0 1px 0 var(--filete), 0 14px 30px rgba(0,0,0,.55); }

.masthead{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; padding: 26px 0 14px;
  transition: padding .3s ease;
}
.cabezal.pegado .masthead{ padding: 12px 0 8px; }

/* el logotipo: MAJICO dentro de las comillas */
.marca{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.72rem;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--tinta);
  white-space: nowrap;
  transition: font-size .3s ease;
}
.cabezal.pegado .marca{ font-size: 1.28rem; }
.marca .c1, .marca .c2{ font-size: 1.26em; line-height: 0; position: relative; top: .05em; }
.marca .c1{ color: var(--gris); }
.marca .c2{ color: var(--rojo); }

.masthead .apellido{
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); padding-bottom: 5px; text-align: right;
}
.cabezal.pegado .masthead .apellido{ display: none; }

.regla-cabezal{ height: 2px; background: var(--filete-2); }

.menu{
  display: flex; align-items: center; gap: 28px;
  padding: 10px 0 12px;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.menu .enlaces{ display: flex; align-items: center; gap: 26px; }
.menu a{ color: var(--gris); transition: color .2s; padding-bottom: 2px; border-bottom: 1px solid transparent; white-space: nowrap; }
.menu a:hover{ color: var(--tinta); border-bottom-color: var(--tinta); }
.menu a.activo{ color: var(--tinta); }
.menu .empuje{ margin-left: auto; }

.idioma{ display: flex; border: 1px solid var(--filete); font-size: .68rem; font-weight: 600; }
.idioma button{
  background: none; border: none; cursor: pointer; padding: 5px 11px;
  color: var(--gris); letter-spacing: .1em; font-family: var(--mono); transition: .2s;
}
.idioma button.on{ background: var(--tinta); color: var(--papel); }

.hamburguesa{ display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px 0; }
.hamburguesa span{ width: 22px; height: 1.5px; background: var(--tinta); display: block; transition: .3s; }

/* =========================================================================
   TELETIPO — la vigilancia que no para
   ========================================================================= */
.teletipo{ overflow: hidden; background: var(--negro); color: var(--sobre-negro); }
.teletipo .via{ display: flex; width: max-content; animation: rodar 46s linear infinite; }
.teletipo .via > span{
  display: flex; align-items: center; gap: 44px; padding-right: 44px; white-space: nowrap;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding-top: 13px; padding-bottom: 13px;
}
.teletipo .senal{ color: var(--rojo-claro); }
@keyframes rodar{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.teletipo:hover .via{ animation-play-state: paused; }

/* =========================================================================
   PORTADA
   ========================================================================= */
.portada{ padding: 78px 0 0; }
.portada h1{
  font-size: clamp(2.9rem, 8.2vw, 7.1rem);
  line-height: .95;
  letter-spacing: -.035em;
  max-width: 15ch;
}
.portada h1 em{ font-style: italic; }

.entradilla{
  display: grid; grid-template-columns: 6fr 5fr; gap: 56px;
  padding-top: 28px; padding-bottom: 64px;
}
.entradilla{ align-items: end; }
.entradilla .hueco{ display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 4px; }
.entradilla .indice{ border-top: 1px solid var(--filete-2); max-width: 340px; }
.entradilla .indice a{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--filete);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); transition: color .25s, padding-left .25s;
}
.entradilla .indice a:hover{ color: var(--tinta); padding-left: 8px; }
.entradilla .indice .momento{ color: var(--gris); letter-spacing: .12em; }
.entradilla .texto{
  display: flex; flex-direction: column; gap: 20px;
  padding-left: 30px; border-left: 2px solid var(--filete-2);
}
.entradilla .sumario{ font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; color: var(--tinta-2); }
.entradilla .apunte{ font-size: .96rem; line-height: 1.7; color: var(--gris); }

.acciones{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.boton{
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 26px; background: var(--tinta); color: var(--papel);
  font-size: .94rem; font-weight: 600; letter-spacing: .01em;
  transition: background .25s, transform .25s;
}
.boton:hover{ background: var(--rojo); transform: translateX(3px); }
.boton svg{ transition: transform .25s; }
.boton:hover svg{ transform: translateX(3px); }
.enlace-sub{
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--tinta); padding-bottom: 3px; transition: color .25s, border-color .25s;
}
.enlace-sub:hover{ color: var(--rojo); border-bottom-color: var(--rojo); }

/* =========================================================================
   SECCIONES GENÉRICAS
   ========================================================================= */
.seccion{ padding: 84px 0; }
.seccion-ajustada{ padding: 64px 0; }

.dos-columnas{ display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.dos-columnas h2{ font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: 1.1rem; }
.dos-columnas p{ color: var(--tinta-3); font-size: 1.02rem; line-height: 1.75; }

/* marco de imagen: filete fino y una segunda línea por dentro, como un grabado */
.marco{ position: relative; border: 1px solid var(--filete); background: var(--negro); overflow: hidden; aspect-ratio: 4/5; }
.marco img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.marco::after{ content: ""; position: absolute; inset: 12px; border: 1px solid rgba(233,233,228,.22); pointer-events: none; }

/* --- el protocolo: tres columnas con filete, sin una sola caja --- */
.protocolo{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.protocolo > div{ display: flex; flex-direction: column; gap: 13px; padding: 40px 38px 0 0; }
.protocolo > div + div{ border-left: 1px solid var(--filete); padding-left: 38px; }
.protocolo > div:last-child{ padding-right: 0; }
.protocolo .romano{ font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--gris-2); }
.protocolo .romano.viva{ color: var(--rojo); }
.protocolo h3{ font-size: 1.6rem; }
.protocolo p{ color: var(--tinta-3); font-size: .96rem; line-height: 1.7; }

/* --- la sección negra: la frase y la onda que se apaga --- */
.negra{ background: var(--negro); color: var(--sobre-negro); }
.negra .titular{ display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; padding: 84px 0 0; }
.negra h2{ font-size: clamp(1.9rem, 4.4vw, 3.5rem); line-height: 1.12; }
.negra h2 em{ color: var(--rojo-claro); }
.negra p{ color: var(--sobre-negro-soft); font-size: 1rem; line-height: 1.7; }

.onda{ padding-top: 26px; }
.onda svg{ display: block; width: 100%; }
.onda .extremos{
  display: flex; justify-content: space-between; max-width: var(--max); margin: -14px auto 0;
  padding: 0 var(--pad) 40px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
}
.onda .extremos .izq{ color: #9a9a90; }
.onda .extremos .der{ color: #7d7d73; }
html:not([data-tema="papel"]) .onda .extremos .der{ color: #3b4652; }

/* la línea se dibuja sola, se queda en silencio y vuelve a empezar */
.trazo{ stroke-dasharray: 2900; animation: trazar 13s cubic-bezier(.2,.55,.3,1) infinite both,
                                          desvanecer 13s ease-in-out infinite both; }
@keyframes trazar{ 0%{ stroke-dashoffset: 2900; } 44%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 0; } }
@keyframes desvanecer{ 0%{ opacity: 0; } 3%{ opacity: 1; } 82%{ opacity: 1; } 96%, 100%{ opacity: 0; } }

/* --- áreas: una lista con filetes, no tarjetas --- */
.areas{ border-top: 1px solid var(--filete-2); }
.area{
  display: grid; grid-template-columns: .85fr 1.6fr; gap: 48px;
  padding: 34px 0; border-bottom: 1px solid var(--filete);
  align-items: start; transition: padding-left .3s ease, background .3s ease;
}
.area:hover{ padding-left: 14px; }
.area h3{ font-size: 1.5rem; }
.area .etiqueta{ font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin-top: .5rem; display: block; }
.area p{ color: var(--tinta-3); font-size: .98rem; line-height: 1.72; }

/* --- por qué: cuatro columnas con filete --- */
.valores{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.valores > div{ padding: 32px 28px 0 0; display: flex; flex-direction: column; gap: 9px; }
.valores > div + div{ border-left: 1px solid var(--filete); padding-left: 28px; }
.valores h3{ font-size: 1.24rem; }
.valores p{ font-size: .92rem; color: var(--tinta-3); line-height: 1.68; }

/* --- del blog: una fila entre dos filetes --- */
.fila-blog{ display: grid; grid-template-columns: 4fr 7fr; gap: 48px; padding: 32px 0 38px; align-items: start; }
.fila-blog .izquierda{ display: flex; flex-direction: column; gap: 7px; }
.fila-blog h2, .fila-blog h3{ font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; max-width: 26ch; }
.fila-blog p{ color: var(--tinta-3); font-size: 1rem; line-height: 1.7; max-width: 60ch; margin-top: .6rem; }
.fila-blog .pie{ display: flex; gap: 28px; margin-top: 1rem; flex-wrap: wrap; }
.fila-blog .pie a{ font-size: .94rem; font-weight: 600; border-bottom: 1px solid var(--tinta); padding-bottom: 3px; transition: color .25s, border-color .25s; }
.fila-blog .pie a:hover{ color: var(--rojo); border-bottom-color: var(--rojo); }
.fila-blog .pie a.suave{ font-weight: 400; color: var(--gris); border-bottom-color: var(--filete); }

/* --- contacto --- */
.contacto{ display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; padding-top: 74px; padding-bottom: 78px; }
.contacto h2{ font-size: clamp(1.8rem, 4vw, 3rem); max-width: 16ch; }
.contacto p{ color: var(--tinta-3); font-size: 1rem; line-height: 1.7; }
.correo{
  font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  border-bottom: 2px solid var(--tinta); padding-bottom: 5px; align-self: flex-start;
  display: inline-block; margin-top: .9rem; transition: color .25s, border-color .25s; word-break: break-word;
}
.correo:hover{ color: var(--rojo); border-bottom-color: var(--rojo); }
.contacto .datos{ display: flex; flex-direction: column; gap: 16px; }
.contacto .dato .rot{ display: block; margin-bottom: .2rem; }

/* =========================================================================
   PIE
   ========================================================================= */
footer.pie{ border-top: 2px solid var(--filete-2); background: var(--papel-2); }
footer.pie .fila{
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  padding-top: 18px; padding-bottom: 24px; flex-wrap: wrap;
}
footer.pie .marca{ font-size: 1.05rem; }
footer.pie .legal{ font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
footer.pie .legal a{ border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
footer.pie .legal a:hover{ color: var(--tinta); border-bottom-color: var(--rojo); }
footer.pie .nota{ font-size: .82rem; color: var(--gris); max-width: 34ch; line-height: 1.6; }

/* =========================================================================
   BLOG — se reutilizan los nombres de clase que ya tenían las páginas,
   para poder cambiar la piel sin tocar una coma del contenido.
   ========================================================================= */
.eyebrow{ font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 400; color: var(--rojo); display: block; margin-bottom: 1rem; }
.cat{ font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; color: var(--rojo); display: block; margin-bottom: .7rem; }
.ptitle{ font-family: var(--serif); font-weight: 400; line-height: 1.13; letter-spacing: -.022em; }
.ptitle a{ transition: color .25s; }
.ptitle a:hover{ color: var(--rojo); }
.excerpt{ color: var(--tinta-3); margin-top: .7rem; font-size: .98rem; line-height: 1.7; }
.read{
  display: inline-block; margin-top: 1rem; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--tinta); padding-bottom: 3px; transition: color .25s, border-color .25s;
}
.read:hover{ color: var(--rojo); border-bottom-color: var(--rojo); }

.intro{ padding-top: 68px; padding-bottom: 20px; }
.intro h1{ font-size: clamp(2.3rem, 6.4vw, 4.4rem); max-width: 17ch; }
.intro p{ color: var(--tinta-3); font-size: 1.1rem; max-width: 52ch; margin-top: 1.1rem; line-height: 1.65; }

/* marco de imagen del blog */
.ph{ display: block; position: relative; border: 1px solid var(--filete); overflow: hidden; background: var(--negro); }
.ph img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph::after{ content: ""; position: absolute; inset: 10px; border: 1px solid rgba(233,233,228,.2); pointer-events: none; }

/* destacado: fila a dos columnas entre filetes, sin tarjeta */
.featured{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;
  padding: 40px 0 56px; border-top: 1px solid var(--filete-2); border-bottom: 1px solid var(--filete-2);
}
.featured .ph{ aspect-ratio: 4/3; }
.featured .ptitle{ font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.featured .tag{ font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); margin-bottom: .9rem; display: block; }

/* resto de artículos: dos columnas separadas por filete */
.grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; padding: 0 0 80px; }
.grid .card{ padding: 44px 0 40px; border-bottom: 1px solid var(--filete); }
.grid .card:nth-child(odd){ padding-right: 28px; border-right: 1px solid var(--filete); }
.grid .card:nth-child(even){ padding-left: 0; }
.grid .card .ph{ aspect-ratio: 3/2; margin-bottom: 1.2rem; }
.grid .card .ptitle{ font-size: 1.42rem; }

/* --- artículo --- */
.post-head{ padding-top: 62px; padding-bottom: 4px; }
.post-head h1{ font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
.meta{ font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-top: 1.2rem; }
.post-head + .wrap .ph, .wrap > .ph{ aspect-ratio: 16/9; margin: 36px 0 44px; }
.body{ font-size: 1.06rem; line-height: 1.85; }
.body p{ margin-bottom: 1.25rem; color: var(--tinta-2); }
.body p:first-of-type{ font-family: var(--serif); font-size: 1.24rem; line-height: 1.6; color: var(--tinta); }
.body strong{ color: var(--tinta); font-weight: 600; }
.back{
  display: inline-flex; align-items: center; gap: .6rem; margin: 38px 0 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
  transition: color .25s;
}
.back::before{ content: ""; width: 28px; height: 1px; background: var(--gris); transition: background .25s, width .25s; }
.back:hover{ color: var(--tinta); }
.back:hover::before{ background: var(--rojo); width: 38px; }

/* --- páginas legales --- */
main.legal{ padding-top: 62px; padding-bottom: 84px; }
main.legal h1{ font-size: clamp(2rem, 5.4vw, 3.2rem); margin-bottom: .5rem; }
main.legal h2{ font-size: 1.4rem; margin: 2.4rem 0 .8rem; }
main.legal p, main.legal li{ color: var(--tinta-2); margin-bottom: .9rem; line-height: 1.8; }
main.legal ul{ padding-left: 1.2rem; margin-bottom: 1rem; }
main.legal li{ margin-bottom: .5rem; }
.updated{ font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 2.6rem; display: block; }
.data-box{ border-left: 2px solid var(--filete-2); padding: 4px 0 4px 22px; margin: 1.2rem 0 1.6rem; font-size: .96rem; line-height: 2; color: var(--tinta-2); }
.data-box strong{ color: var(--tinta); }
main.legal table{ width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: .9rem; }
main.legal th, main.legal td{ text-align: left; padding: 12px 14px; border: 1px solid var(--filete); vertical-align: top; }
main.legal th{ background: var(--papel-2); font-family: var(--mono); font-weight: 500; color: var(--tinta); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; }
main.legal td{ color: var(--tinta-2); }
main.legal a.email, main.legal .email{ border-bottom: 1px solid var(--rojo); }
main.legal .estrecho{ max-width: 760px; }

/* =========================================================================
   BANNER DE COOKIES
   ========================================================================= */
.cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200;
  max-width: 780px; margin: 0 auto;
  background: var(--papel); border: 1px solid var(--filete-2);
  box-shadow: 0 18px 44px rgba(18,18,15,.18);
  padding: 20px 24px; display: flex; gap: 22px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; transform: translateY(190%); transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.cookie-banner.show{ transform: none; }
.cookie-banner p{ font-size: .86rem; color: var(--tinta-3); margin: 0; flex: 1; min-width: 240px; line-height: 1.6; }
.cookie-banner a{ color: var(--rojo); border-bottom: 1px solid var(--rojo); }
.cookie-actions{ display: flex; gap: 10px; flex-shrink: 0; }
.ck-btn{
  font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; padding: 11px 20px; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--papel); transition: .25s;
}
.ck-btn:hover{ background: var(--rojo); border-color: var(--rojo); }
.ck-btn.ghost{ background: none; color: var(--gris); border-color: var(--filete); }
.ck-btn.ghost:hover{ color: var(--tinta); border-color: var(--tinta); background: none; }

/* =========================================================================
   APARICIÓN AL DESPLAZAR
   ========================================================================= */
.reveal{ opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity: 1; transform: none; }

/* =========================================================================
   MOVIMIENTO REDUCIDO — nada se mueve, todo se ve
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .teletipo .via{ animation: none; }
  .trazo{ animation: none; stroke-dashoffset: 0; opacity: 1; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .boton:hover{ transform: none; }
  .area:hover{ padding-left: 0; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1040px){
  :root{ --pad: 40px; }
  .protocolo{ grid-template-columns: 1fr 1fr; }
  .protocolo > div:nth-child(3){ border-left: none; padding-left: 0; border-top: 1px solid var(--filete); padding-top: 34px; margin-top: 34px; }
  .valores{ grid-template-columns: 1fr 1fr; }
  .valores > div:nth-child(3){ border-left: none; padding-left: 0; }
  .valores > div:nth-child(n+3){ border-top: 1px solid var(--filete); padding-top: 28px; margin-top: 28px; }
}

@media (max-width: 860px){
  :root{ --pad: 24px; }

  .hamburguesa{ display: flex; }
  .menu{ position: relative; }
  .menu .enlaces{
    position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); top: 100%;
    background: var(--papel); border-bottom: 1px solid var(--filete);
    display: flex; flex-direction: column; gap: 0;
    transform: translateY(-130%); transition: transform .35s ease, visibility 0s .35s;
    visibility: hidden; z-index: -1;
  }
  .menu .enlaces.abierto{ transform: none; visibility: visible; z-index: 1; transition: transform .35s ease; }
  .menu .enlaces a{ padding: 15px var(--pad); border-bottom: 1px solid var(--filete); font-size: .82rem; }
  .menu .enlaces a:hover{ border-bottom-color: var(--filete); }

  .portada{ padding: 46px 0 0; }
  .entradilla{ grid-template-columns: 1fr; gap: 30px; padding-top: 22px; padding-bottom: 46px; }
  .entradilla .hueco{ order: 2; padding-bottom: 0; }
  .entradilla .indice{ max-width: none; }
  .entradilla .texto{ padding-left: 20px; }

  .seccion{ padding: 56px 0; }
  .dos-columnas{ grid-template-columns: 1fr; gap: 32px; }
  .dos-columnas .marco{ order: -1; }

  .protocolo{ grid-template-columns: 1fr; }
  .protocolo > div{ padding: 28px 0 0; }
  .protocolo > div + div{ border-left: none; padding-left: 0; border-top: 1px solid var(--filete); padding-top: 28px; margin-top: 4px; }

  .negra .titular{ grid-template-columns: 1fr; gap: 20px; padding: 56px 0 0; }
  .onda .extremos{ font-size: .58rem; letter-spacing: .14em; padding-bottom: 32px; margin-top: -6px; }

  .valores{ grid-template-columns: 1fr; }
  .valores > div{ padding: 26px 0 0; }
  .valores > div + div{ border-left: none; padding-left: 0; border-top: 1px solid var(--filete); padding-top: 26px; margin-top: 0; }

  .area{ grid-template-columns: 1fr; gap: 12px; }
  .fila-blog{ grid-template-columns: 1fr; gap: 16px; }
  .contacto{ grid-template-columns: 1fr; gap: 32px; padding-top: 54px; padding-bottom: 60px; }

  .featured{ grid-template-columns: 1fr; gap: 26px; padding: 28px 0 40px; }
  .grid{ grid-template-columns: 1fr; gap: 0; }
  .grid .card:nth-child(odd){ padding-right: 0; border-right: none; }

  footer.pie .fila{ padding-top: 16px; padding-bottom: 22px; }
  .cookie-banner{ left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; }
  .cookie-actions{ justify-content: flex-end; }
}

@media (max-width: 520px){
  .marca{ font-size: 1.34rem; }
  .masthead .apellido{ display: none; }
  .menu{ gap: 16px; }
  .acciones{ gap: 12px; }
  .boton{ width: 100%; justify-content: space-between; }
}

/* =========================================================================
   MEDIDA DE LECTURA — artículos y páginas legales
   ========================================================================= */
.lectura .wrap{ max-width: 820px; }
main.legal .wrap{ max-width: 860px; }

/* --- seguir leyendo: tres filetes, sin tarjetas --- */
.mas-lectura{ padding: 56px 0 8px; }
.mas-lectura .wrap{ max-width: 820px; }
.mas-lectura .cabecera-mas{ padding: 14px 0 4px; }
.mas-lectura .otros{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mas-lectura .otro{
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px 26px 0; transition: color .25s;
}
.mas-lectura .otro + .otro{ border-left: 1px solid var(--filete); padding-left: 24px; }
.mas-lectura .otro:last-child{ padding-right: 0; }
.mas-lectura .otro .t{
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; letter-spacing: -.018em;
  color: var(--tinta); transition: color .25s;
}
.mas-lectura .otro:hover .t{ color: var(--rojo); }

@media (max-width: 860px){
  .mas-lectura .otros{ grid-template-columns: 1fr; }
  .mas-lectura .otro{ padding: 18px 0; border-bottom: 1px solid var(--filete); }
  .mas-lectura .otro + .otro{ border-left: none; padding-left: 0; }
  .mas-lectura .otro:last-child{ border-bottom: none; }
}

/* La tabla de la política de cookies no cabe en un móvil estrecho:
   se le deja hacer scroll horizontal a ella sola, sin arrastrar la página. */
@media (max-width: 700px){
  main.legal table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  main.legal th, main.legal td{ padding: 10px 12px; }
  main.legal td{ white-space: normal; min-width: 150px; }
}

/* Encabezado que ordena el documento sin ocupar sitio: sin él, un lector de
   pantalla se salta un nivel de la jerarquía. */
.solo-lectores{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* El foco de teclado siempre visible. */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--rojo); outline-offset: 3px;
}
html:not([data-tema="papel"]) .onda .extremos .der{ color: #77848f; }

/* =========================================================================
   AFINADO DEL TEMA OSCURO
   Sobre papel, el negro y los filetes se ganan solos. Sobre negro hay que
   devolverlos a mano: si no, las bandas negras se funden con el fondo y la
   página pierde el ritmo de secciones que tiene en claro.
   ========================================================================= */
html:not([data-tema="papel"]) .teletipo{
  border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
}
html:not([data-tema="papel"]) .negra{
  border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete);
}
/* el botón principal deja de ser un bloque blanco y pasa a ser la señal */
html:not([data-tema="papel"]) .boton{ background: var(--rojo); color: #10161c; }
html:not([data-tema="papel"]) .boton:hover{ background: #f0bc5c; }
/* el cierre de la cita y los rótulos vivos, en el dorado del tema */
html:not([data-tema="papel"]) .marca .c1{ color: #6f7d88; }
html:not([data-tema="papel"]) .cookie-banner{ box-shadow: 0 18px 44px rgba(0,0,0,.5); }
html:not([data-tema="papel"]) .marco{ border-color: #24303a; }
html:not([data-tema="papel"]) .marco::after{ border-color: rgba(230,234,237,.16); }
html:not([data-tema="papel"]) .idioma button.on{ background: var(--rojo); color: #10161c; }
html:not([data-tema="papel"]) ::selection{ background: var(--rojo); color: #10161c; }

/* aviso de que se está comparando: solo lo lleva la página gemela */
.aviso-comparacion{
  position: fixed; left: 16px; bottom: 16px; z-index: 300;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--negro); color: var(--sobre-negro);
  border: 1px solid var(--filete);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}
.aviso-comparacion a{ color: var(--rojo); border-bottom: 1px solid var(--rojo); padding-bottom: 1px; }
@media (max-width: 600px){ .aviso-comparacion{ left: 10px; right: 10px; bottom: 10px; justify-content: center; } }

/* =========================================================================
   EL PROTOCOLO EN MARCHA · la mesa de instrumentos

   Un barrido cruza las tres fases cada 15 segundos, de izquierda a derecha,
   y va despertando lo que encuentra a su paso. La fase que toca se ilumina,
   su numeral crece y su aparato se pone a trabajar: en Prevención los
   sensores rastrean, en Respuesta el ruido pega el pico y se aplana, en
   Recuperación las barras vuelven a levantarse.

   El mismo reloj gobierna el índice de la portada, media página más arriba.
   Cuando aquí se enciende «Prevención», allí se enciende «Vigilar».

   Es todo CSS. Si el JavaScript no carga, esto sigue funcionando.
   ========================================================================= */

/* --- el barrido: una línea con halo que cruza el bloque entero ---------- */
.protocolo{ position: relative; }
.protocolo::after{
  content: ""; position: absolute; inset: -14px 0 0; pointer-events: none; z-index: 2;
  /* una línea nítida de 2 px con un halo corto: tiene que cruzar y llamar la
     atención, no borrar el texto por el que pasa */
  background-image: linear-gradient(90deg,
      transparent 0px,
      color-mix(in srgb, var(--rojo) 5%, transparent) 32px,
      color-mix(in srgb, var(--rojo) 16%, transparent) 56px,
      var(--rojo) 60px,
      var(--rojo) 62px,
      color-mix(in srgb, var(--rojo) 16%, transparent) 66px,
      color-mix(in srgb, var(--rojo) 5%, transparent) 90px,
      transparent 122px);
  background-size: 122px 100%;
  background-repeat: no-repeat;
  animation: barrido 15s linear infinite;
}
@keyframes barrido{
  from { background-position: -122px 0; }
  to   { background-position: calc(100% + 122px) 0; }
}

/* --- lo que hace cada fase cuando el barrido llega ---------------------- */
@keyframes despierta1{
  0%, 2%    { opacity: 0; }
  6%, 29%   { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes despierta2{
  0%, 35%   { opacity: 0; }
  39%, 62%  { opacity: 1; }
  67%, 100% { opacity: 0; }
}
@keyframes despierta3{
  0%, 68%   { opacity: 0; }
  72%, 95%  { opacity: 1; }
  99%, 100% { opacity: 0; }
}

/* el numeral crece, se pone en ámbar y suelta un halo */
@keyframes numeral1{
  0%, 2%    { color: var(--gris-2); transform: none; text-shadow: none; }
  7%, 29%   { color: var(--rojo); transform: translateY(-7px) scale(1.16);
              text-shadow: 0 0 26px color-mix(in srgb, var(--rojo) 55%, transparent); }
  36%, 100% { color: var(--gris-2); transform: none; text-shadow: none; }
}
@keyframes numeral2{
  0%, 35%   { color: var(--gris-2); transform: none; text-shadow: none; }
  40%, 62%  { color: var(--rojo); transform: translateY(-7px) scale(1.16);
              text-shadow: 0 0 26px color-mix(in srgb, var(--rojo) 55%, transparent); }
  69%, 100% { color: var(--gris-2); transform: none; text-shadow: none; }
}
@keyframes numeral3{
  0%, 68%   { color: var(--gris-2); transform: none; text-shadow: none; }
  73%, 95%  { color: var(--rojo); transform: translateY(-7px) scale(1.16);
              text-shadow: 0 0 26px color-mix(in srgb, var(--rojo) 55%, transparent); }
  99%, 100% { color: var(--gris-2); transform: none; text-shadow: none; }
}

/* el texto de la columna sube de tono mientras está en curso */
@keyframes vivo1{ 0%,2%{ color: var(--tinta-3) } 7%,29%{ color: var(--tinta) } 36%,100%{ color: var(--tinta-3) } }
@keyframes vivo2{ 0%,35%{ color: var(--tinta-3) } 40%,62%{ color: var(--tinta) } 69%,100%{ color: var(--tinta-3) } }
@keyframes vivo3{ 0%,68%{ color: var(--tinta-3) } 73%,95%{ color: var(--tinta) } 99%,100%{ color: var(--tinta-3) } }

@keyframes rotulo1{ 0%,2%{ color: var(--gris) } 7%,29%{ color: var(--rojo) } 36%,100%{ color: var(--gris) } }
@keyframes rotulo2{ 0%,35%{ color: var(--gris) } 40%,62%{ color: var(--rojo) } 69%,100%{ color: var(--gris) } }
@keyframes rotulo3{ 0%,68%{ color: var(--gris) } 73%,95%{ color: var(--rojo) } 99%,100%{ color: var(--gris) } }

/* el lavado de fondo de la columna encendida */
.protocolo > div{ position: relative; }
.protocolo > div::before{
  content: ""; position: absolute; inset: -14px -14px 0; z-index: 0; opacity: 0;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--rojo) 9%, transparent) 0%,
      transparent 54%);
  border-top: 2px solid var(--rojo);
  animation: 15s ease-in-out infinite both;
}
.protocolo > div:nth-child(1)::before{ animation-name: despierta1; }
.protocolo > div:nth-child(2)::before{ animation-name: despierta2; }
.protocolo > div:nth-child(3)::before{ animation-name: despierta3; }
.protocolo > div > *{ position: relative; z-index: 1; }

/* align-self evita que el numeral, al ser hijo de un flex en columna, se
   estire a todo el ancho: al escalarlo se salía de la página en el móvil. */
.protocolo .romano{ display: inline-block; align-self: flex-start;
                    transform-origin: left bottom;
                    animation: 15s cubic-bezier(.34, 1.3, .5, 1) infinite both; }
.protocolo > div:nth-child(1) .romano{ animation-name: numeral1; }
.protocolo > div:nth-child(2) .romano{ animation-name: numeral2; }
.protocolo > div:nth-child(3) .romano{ animation-name: numeral3; }

.protocolo .rot{ animation: 15s ease-in-out infinite both; }
.protocolo > div:nth-child(1) .rot{ animation-name: rotulo1; }
.protocolo > div:nth-child(2) .rot{ animation-name: rotulo2; }
.protocolo > div:nth-child(3) .rot{ animation-name: rotulo3; }

.protocolo p{ animation: 15s ease-in-out infinite both; }
.protocolo > div:nth-child(1) p{ animation-name: vivo1; }
.protocolo > div:nth-child(2) p{ animation-name: vivo2; }
.protocolo > div:nth-child(3) p{ animation-name: vivo3; }

/* =========================================================================
   LOS APARATOS · cada fase tiene su instrumento y hace lo que dice el verbo
   ========================================================================= */
.aparato{
  display: flex; align-items: flex-end; gap: 4px; height: 40px;
  margin: 6px 0 2px; padding-bottom: 5px;
  border-bottom: 1px solid var(--filete);
}
.aparato i{
  display: block; width: 4px; background: var(--gris-2); height: 5px; flex: none;
}

/* --- I · VIGILAR: los sensores rastrean, uno tras otro ------------------ */
.ap-vigilar i{ animation: rastreo 15s linear infinite both; }
@keyframes rastreo{
  0%, 3%   { height: 5px;  background: var(--gris-2); }
  8%       { height: 30px; background: var(--rojo); }
  14%      { height: 5px;  background: var(--gris-2); }
  29%,100% { height: 5px;  background: var(--gris-2); }
}
.ap-vigilar i:nth-child(1){ animation-delay: 0s }      .ap-vigilar i:nth-child(2){ animation-delay: .18s }
.ap-vigilar i:nth-child(3){ animation-delay: .36s }    .ap-vigilar i:nth-child(4){ animation-delay: .54s }
.ap-vigilar i:nth-child(5){ animation-delay: .72s }    .ap-vigilar i:nth-child(6){ animation-delay: .90s }
.ap-vigilar i:nth-child(7){ animation-delay: 1.08s }   .ap-vigilar i:nth-child(8){ animation-delay: 1.26s }
.ap-vigilar i:nth-child(9){ animation-delay: 1.44s }   .ap-vigilar i:nth-child(10){ animation-delay: 1.62s }
.ap-vigilar i:nth-child(11){ animation-delay: 1.80s }  .ap-vigilar i:nth-child(12){ animation-delay: 1.98s }
.ap-vigilar i:nth-child(13){ animation-delay: 2.16s }  .ap-vigilar i:nth-child(14){ animation-delay: 2.34s }

/* --- II · CONTENER: el ruido pega el pico y se aplana ------------------- */
.ap-contener i{ animation: pico 15s cubic-bezier(.2, .8, .3, 1) infinite both; }
@keyframes pico{
  0%, 36%   { height: 5px; background: var(--gris-2); }
  41%       { height: var(--h, 26px); background: var(--rojo); }
  47%       { height: calc(var(--h, 26px) * .7); background: var(--rojo); }
  53%       { height: calc(var(--h, 26px) * .32); background: var(--rojo-claro); }
  60%, 100% { height: 5px; background: var(--gris-2); }
}
.ap-contener i:nth-child(1){ --h: 11px } .ap-contener i:nth-child(2){ --h: 25px }
.ap-contener i:nth-child(3){ --h: 38px } .ap-contener i:nth-child(4){ --h: 30px }
.ap-contener i:nth-child(5){ --h: 37px } .ap-contener i:nth-child(6){ --h: 21px }
.ap-contener i:nth-child(7){ --h: 31px } .ap-contener i:nth-child(8){ --h: 16px }
.ap-contener i:nth-child(9){ --h: 24px } .ap-contener i:nth-child(10){ --h: 12px }
.ap-contener i:nth-child(11){ --h: 18px } .ap-contener i:nth-child(12){ --h: 9px }
.ap-contener i:nth-child(13){ --h: 13px } .ap-contener i:nth-child(14){ --h: 7px }

/* --- III · RECONSTRUIR: las barras se levantan y se quedan -------------- */
.ap-reconstruir i{ animation: levanta 15s cubic-bezier(.3, .9, .3, 1) infinite both; }
@keyframes levanta{
  0%, 69%   { height: 5px; background: var(--gris-2); }
  78%       { height: var(--h, 20px); background: var(--rojo); }
  95%       { height: var(--h, 20px); background: var(--rojo); }
  99%, 100% { height: 5px; background: var(--gris-2); }
}
.ap-reconstruir i:nth-child(1){ --h: 7px;  animation-delay: 0s }
.ap-reconstruir i:nth-child(2){ --h: 10px; animation-delay: .12s }
.ap-reconstruir i:nth-child(3){ --h: 12px; animation-delay: .24s }
.ap-reconstruir i:nth-child(4){ --h: 15px; animation-delay: .36s }
.ap-reconstruir i:nth-child(5){ --h: 17px; animation-delay: .48s }
.ap-reconstruir i:nth-child(6){ --h: 20px; animation-delay: .60s }
.ap-reconstruir i:nth-child(7){ --h: 22px; animation-delay: .72s }
.ap-reconstruir i:nth-child(8){ --h: 24px; animation-delay: .84s }
.ap-reconstruir i:nth-child(9){ --h: 25px; animation-delay: .96s }
.ap-reconstruir i:nth-child(10){ --h: 27px; animation-delay: 1.08s }
.ap-reconstruir i:nth-child(11){ --h: 28px; animation-delay: 1.20s }
.ap-reconstruir i:nth-child(12){ --h: 29px; animation-delay: 1.32s }
.ap-reconstruir i:nth-child(13){ --h: 30px; animation-delay: 1.44s }
.ap-reconstruir i:nth-child(14){ --h: 31px; animation-delay: 1.56s }

.protocolo > div:nth-child(1) .aparato{ animation: despierta1 15s ease-in-out infinite both; }
.protocolo > div:nth-child(2) .aparato{ animation: despierta2 15s ease-in-out infinite both; }
.protocolo > div:nth-child(3) .aparato{ animation: despierta3 15s ease-in-out infinite both; }
.protocolo .aparato{ opacity: 1; }
@keyframes despiertaAp{ 0%{ opacity: .28 } 100%{ opacity: 1 } }

/* =========================================================================
   EL ÍNDICE DE PORTADA · el mismo reloj, media página más arriba
   ========================================================================= */
.entradilla .indice a{ position: relative; padding-left: 0; transition: none; }
.entradilla .indice a::before{
  content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; background: var(--rojo); opacity: 0;
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--rojo) 60%, transparent);
  animation: 15s ease-in-out infinite both;
}
.entradilla .indice a:nth-child(1)::before{ animation-name: despierta1; }
.entradilla .indice a:nth-child(2)::before{ animation-name: despierta2; }
.entradilla .indice a:nth-child(3)::before{ animation-name: despierta3; }

.entradilla .indice a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--rojo); transform: scaleX(0); transform-origin: left center;
  animation: 15s cubic-bezier(.4, 0, .15, 1) infinite both;
}
@keyframes llena1{ 0%,3%{ transform: scaleX(0) } 29%,96%{ transform: scaleX(1) } 100%{ transform: scaleX(0) } }
@keyframes llena2{ 0%,36%{ transform: scaleX(0) } 62%,96%{ transform: scaleX(1) } 100%{ transform: scaleX(0) } }
@keyframes llena3{ 0%,69%{ transform: scaleX(0) } 95%,96%{ transform: scaleX(1) } 100%{ transform: scaleX(0) } }
.entradilla .indice a:nth-child(1)::after{ animation-name: llena1; }
.entradilla .indice a:nth-child(2)::after{ animation-name: llena2; }
.entradilla .indice a:nth-child(3)::after{ animation-name: llena3; }

.entradilla .indice a > span:first-child{ display: inline-block; animation: 15s ease-in-out infinite both; }
@keyframes voz1{ 0%,2%{ color: var(--gris); transform: none } 7%,29%{ color: var(--tinta); transform: translateX(5px) } 36%,100%{ color: var(--gris); transform: none } }
@keyframes voz2{ 0%,35%{ color: var(--gris); transform: none } 40%,62%{ color: var(--tinta); transform: translateX(5px) } 69%,100%{ color: var(--gris); transform: none } }
@keyframes voz3{ 0%,68%{ color: var(--gris); transform: none } 73%,95%{ color: var(--tinta); transform: translateX(5px) } 99%,100%{ color: var(--gris); transform: none } }
.entradilla .indice a:nth-child(1) > span:first-child{ animation-name: voz1; }
.entradilla .indice a:nth-child(2) > span:first-child{ animation-name: voz2; }
.entradilla .indice a:nth-child(3) > span:first-child{ animation-name: voz3; }

/* Quien pide menos movimiento lo ve quieto y completo. */
@media (prefers-reduced-motion: reduce){
  .protocolo::after,
  .protocolo > div::before,
  .protocolo .romano, .protocolo .rot, .protocolo p,
  .aparato, .aparato i,
  .entradilla .indice a::before, .entradilla .indice a::after,
  .entradilla .indice a > span:first-child{ animation: none !important; }
  .protocolo > div::before{ opacity: 0; }
  .entradilla .indice a::before{ opacity: 0; }
  .entradilla .indice a::after{ transform: scaleX(1); opacity: .4; }
  .aparato{ opacity: .5; }
  .aparato i{ height: 5px; }
}

/* =========================================================================
   LA ENTRADA · los dos primeros segundos

   No es un vídeo ni una cortina que haya que esperar: es la propia página
   entrando en orden. El contenido ya está ahí desde el primer instante —si
   el JavaScript no arranca, esto sencillamente no ocurre y no se nota—,
   pero se coloca por partes: primero la banda negra cruza, luego el titular
   se descubre de arriba abajo, después el filete baja y el texto se posa.

   Dura 2,1 segundos y solo pasa la primera vez de cada visita. Volver a la
   portada desde el blog no lo repite: una entrada que se repite deja de ser
   una entrada y se convierte en un peaje.
   ========================================================================= */
html.entrada .teletipo{ transform-origin: left center; animation: entraBanda .55s cubic-bezier(.7,0,.2,1) both; }
@keyframes entraBanda{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }

html.entrada .regla-cabezal{ transform-origin: left center; animation: entraBanda .5s cubic-bezier(.7,0,.2,1) .1s both; }
html.entrada .masthead{ animation: entraSube .5s ease-out both; }
html.entrada .menu{ animation: entraSube .5s ease-out .12s both; }

/* el titular se descubre de arriba abajo, como si lo estuvieran imprimiendo */
html.entrada .portada h1{
  animation: entraTitular .85s cubic-bezier(.22, .68, .28, 1) .35s both;
}
@keyframes entraTitular{
  from{ clip-path: inset(0 0 102% 0); transform: translateY(16px); }
  to  { clip-path: inset(0 0 -8% 0);  transform: none; }
}

/* el filete de la entradilla baja, y detrás va el texto */
html.entrada .entradilla .texto{ animation: entraFilete .7s cubic-bezier(.6,0,.2,1) 1.02s both; }
@keyframes entraFilete{
  from{ clip-path: inset(0 0 100% 0); }
  to  { clip-path: inset(0 0 -12% 0); }
}
html.entrada .entradilla .sumario{ animation: entraSube .55s ease-out 1.18s both; }
html.entrada .entradilla .apunte{ animation: entraSube .55s ease-out 1.32s both; }
html.entrada .acciones{ animation: entraSube .55s ease-out 1.46s both; }

/* y por último el índice, fila a fila */
html.entrada .entradilla .indice{ animation: entraSube .5s ease-out 1.5s both; }
html.entrada .entradilla .indice a{ animation: entraLado .5s cubic-bezier(.3,.8,.3,1) both; }
html.entrada .entradilla .indice a:nth-child(1){ animation-delay: 1.58s }
html.entrada .entradilla .indice a:nth-child(2){ animation-delay: 1.70s }
html.entrada .entradilla .indice a:nth-child(3){ animation-delay: 1.82s }
@keyframes entraLado{ from{ opacity: 0; transform: translateX(-14px) } to{ opacity: 1; transform: none } }

@keyframes entraSube{ from{ opacity: 0; transform: translateY(12px) } to{ opacity: 1; transform: none } }

/* Las animaciones del protocolo arrancan con el ciclo ya empezado; se les
   da un empujón para que la primera vuelta no pille a nadie mirando una
   pantalla quieta. */
html.entrada .protocolo::after{ animation-delay: -1.6s; }

@media (prefers-reduced-motion: reduce){
  html.entrada .teletipo, html.entrada .regla-cabezal, html.entrada .masthead,
  html.entrada .menu, html.entrada .portada h1, html.entrada .entradilla .texto,
  html.entrada .entradilla .sumario, html.entrada .entradilla .apunte,
  html.entrada .acciones, html.entrada .entradilla .indice,
  html.entrada .entradilla .indice a{ animation: none !important; clip-path: none !important; }
}