/* =========================================================================
   CD TERUEL — Páginas interiores «Poniendo el corazón» (corazon-paginas.css)
   Club, historia, estadio, Teruel, himno y escudo, patrocinadores, afición,
   transparencia, legal, contacto, entradas, jugador 20, partido, camino,
   galería, álbum y 404. Requiere corazon.css (tokens y fuentes) y
   body.corazon. Solo reviste lo que ya existe: no cambia la maquetación.
   ========================================================================= */

/* ---- superficies: todo lo interior va sobre el negro de la portada ---- */
.corazon .section { background: transparent; }
.corazon main > .section { padding-block: clamp(2.4rem, 4.5vw, 3.8rem); }   /* más denso que el diseño antiguo */
.corazon .page-hero { background: var(--cz-negro); }

/* ---- cabecera: la misma que la de una noticia ------------------------
   Sin foto: negro con el degradado rojo subiendo desde abajo y el escudo
   de fondo asomando por la derecha, igual que la ficha de una noticia.
   Las páginas que aún usan .page-hero heredan aquí ese mismo tratamiento.
   --------------------------------------------------------------------- */
/* La altura la marca el contenido: un titular de una línea no necesita el
   alto que reserva la ficha de una noticia de tres. */
.corazon .page-hero {
  position: relative; overflow: hidden; color: #fff; background: var(--cz-negro);
  min-height: clamp(180px, 22vw, 280px); display: flex; align-items: flex-end;
}
.corazon main > .nl-hero { min-height: clamp(180px, 22vw, 280px); }
.corazon .page-hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: clamp(-40px, -2vw, -10px); bottom: -10%;
  width: clamp(200px, 26vw, 360px); aspect-ratio: 215 / 300;
  background: url("../assets/img/cartel/escudo-silueta.png") no-repeat center / contain;
  transform: rotate(10deg); opacity: .12;
}
/* el degradado del fondo, que en la ficha de noticia lo pinta el scrim */
.corazon .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 100%, rgba(200,16,46,.35), transparent 70%),
              linear-gradient(180deg, rgba(8,4,5,.55) 0%, rgba(8,4,5,.15) 35%, rgba(8,4,5,.6) 70%, var(--cz-negro) 100%);
}
.corazon .page-hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(3rem, 5vw, 4rem); padding-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.corazon .page-hero h1 {
  font-family: var(--f-black); font-weight: normal; text-transform: uppercase;
  letter-spacing: .01em; padding-right: .06em; line-height: .95; max-width: 22ch;
  font-size: clamp(2.2rem, 6vw, 4.6rem); text-shadow: 5px 6px 0 #1a0507, 0 14px 30px rgba(0,0,0,.7);
}
.corazon .page-hero p {
  margin-top: .8rem; color: var(--cz-texto-2); font-family: var(--f-cond-2);
  font-size: clamp(1rem, 1.7vw, 1.15rem); letter-spacing: .02em;
}
.corazon .breadcrumb { font-family: var(--f-bebas); font-weight: normal; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cz-texto-2); }
.corazon .page-hero .breadcrumb a { color: var(--cz-rosa); }
.corazon .page-hero .breadcrumb a:hover { color: #fff; }

/* datos del club dentro de la cabecera: a la izquierda, como el titular */
.corazon .nl-hero .club-stats,
.corazon .page-hero .club-stats {
  justify-items: start; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: clamp(1.4rem, 4vw, 3rem); margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
}
.corazon .nl-hero .club-stats li,
.corazon .page-hero .club-stats li { align-items: flex-start; }
.corazon .club-stats .icon { color: var(--cz-rojo); }
.corazon .club-stats__n { font-family: var(--f-black); font-weight: normal; font-size: clamp(1.3rem, 2.8vw, 1.8rem); padding-right: .06em; }
.corazon .club-stats__l { font-family: var(--f-bebas); font-size: .82rem; letter-spacing: .16em; color: var(--cz-texto-2); }

/* ---- texto corrido: ocupa su columna, sin quedarse corto a la izquierda ---- */
.corazon .article > .prose { max-width: 72ch; }
.corazon .sec-head--center + .prose,
.corazon .section .prose[style*="margin:0 auto"] { margin-inline: auto; }

/* ---- texto corrido sobre negro ---- */
.corazon .prose p,
.corazon .prose li { color: var(--cz-texto); font-family: var(--f-cond-2); font-weight: normal; font-size: 1.08rem; line-height: 1.75; letter-spacing: .01em; }
.corazon .prose strong { color: #fff; }
.corazon .prose a { color: var(--cz-rosa); }
.corazon .prose a:hover { color: #fff; }
.corazon .prose h2,
.corazon .prose h3 { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.corazon .prose blockquote {
  border-left: 4px solid var(--cz-rojo); background: var(--cz-panel); padding: 1rem 1.2rem;
  font-family: var(--f-cond); font-style: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff;
}
.corazon .prose figure img { border-radius: 0; box-shadow: 0 0 0 1px var(--cz-linea), 0 22px 50px -30px rgba(0,0,0,.95); }
.corazon .prose figcaption { font-family: var(--f-stencil); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-rojo-texto, #ff4d5f); }
.corazon .link-todo { font-family: var(--f-bebas); font-weight: normal; font-size: 1.05rem; letter-spacing: .1em; color: var(--cz-rosa); }
.corazon .link-todo:hover { color: #fff; }
.corazon .link-todo .icon { color: var(--cz-rojo); }

/* ---- fichas laterales y listas de datos ---- */
.corazon .aside-card {
  background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0;
  border-top: 3px solid var(--cz-rojo-2); padding: 1.3rem 1.4rem 1.4rem; color: var(--cz-texto);
}
.corazon .aside-card h3 {
  font-family: var(--f-bebas) !important; font-weight: normal; font-size: 1.2rem;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.corazon .struct li { border-bottom-color: var(--cz-linea); }
.corazon .struct li span { font-family: var(--f-cond-2); letter-spacing: .04em; text-transform: uppercase; color: var(--cz-texto-2); }
.corazon .struct li strong { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff; }

/* ---- bloques de valores / iconos ---- */
.corazon .value {
  background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0;
  padding: 1.6rem 1.4rem; transition: border-color .25s ease, transform .25s ease;
}
.corazon .value:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.25); }
.corazon .value__ico {
  background: var(--cz-rojo); border-radius: 0; transform: skewX(-9deg); color: #fff;
  box-shadow: 0 10px 24px -14px rgba(226,21,52,.9);
}
.corazon .value__ico .icon { transform: skewX(9deg); }
.corazon .value h3 { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; font-size: 1.35rem; }
.corazon .value p { color: var(--cz-texto-2); font-family: var(--f-cond-2); line-height: 1.6; }

/* ---- documento legal: índice lateral y artículos ---- */
.corazon .legal-nav__card {
  background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0; border-top: 3px solid var(--cz-rojo-2);
}
.corazon .legal-nav__card h3 { font-family: var(--f-bebas); font-weight: normal; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.corazon .legal-nav__card nav a {
  font-family: var(--f-cond-2); letter-spacing: .03em; text-transform: uppercase;
  color: var(--cz-texto-2); border-left: 2px solid transparent;
}
.corazon .legal-nav__card nav a:hover,
.corazon .legal-nav__card nav a.is-active { color: #fff; background: rgba(226,21,52,.14); border-left-color: var(--cz-rojo); }
.corazon .legal-block { background: transparent; border-bottom: 1px solid var(--cz-linea); }
.corazon .legal-block h2 {
  font-family: var(--f-black); font-weight: normal; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.5rem, 3vw, 2.1rem); padding-right: .06em;
}
.corazon .legal-block h3 { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.corazon .legal-block p,
.corazon .legal-block li { color: var(--cz-texto); font-family: var(--f-cond-2); line-height: 1.75; }
.corazon .legal-block a { color: var(--cz-rosa); }
.corazon .legal-block a:hover { color: #fff; }
.corazon .legal-updated { font-family: var(--f-stencil); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-rojo); }
.corazon .legal-data { background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0; border-left: 4px solid var(--cz-rojo-2); }
.corazon .legal-data dt { font-family: var(--f-bebas); font-weight: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--cz-texto-2); }
.corazon .legal-data dd { color: #fff; font-family: var(--f-cond-2); }
.corazon .legal-note { background: rgba(226,21,52,.12); border-left: 4px solid var(--cz-rojo); color: var(--cz-texto); border-radius: 0; }
.corazon .legal-table { border-collapse: collapse; font-family: var(--f-cond-2); }
.corazon .legal-table th {
  background: #050303; color: #fff; font-family: var(--f-bebas); font-weight: normal;
  letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--cz-rojo-2);
}
.corazon .legal-table td { color: var(--cz-texto); border-top: 1px solid var(--cz-linea); }
.corazon .legal-table tr:hover td { background: rgba(255,255,255,.03); }
.corazon .legal-table-wrap { border: 1px solid var(--cz-linea); border-radius: 0; background: var(--cz-panel); }

/* ---- galería y álbum ---- */
.corazon .gal-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.corazon .gal-filters button,
.corazon .nl-filters button {
  border-radius: 0; transform: skewX(-9deg); background: var(--cz-panel); border: 1px solid var(--cz-linea);
  color: var(--cz-texto-2); font-family: var(--f-bebas); font-weight: normal; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
}
.corazon .gal-filters button > * { display: inline-block; transform: skewX(9deg); }
.corazon .gal-filters button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.corazon .gal-filters button.is-active { background: var(--cz-rojo); border-color: var(--cz-rojo); color: #fff; }
.corazon .alb-card,
.corazon .gal-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #fff;
}
.corazon .alb-card__media,
.corazon .gal-card__media,
.corazon .gal-item {
  border-radius: 0; overflow: hidden; background: #1a0509;
  box-shadow: 0 0 0 1px var(--cz-linea), 0 20px 40px -26px rgba(0,0,0,.95); transition: box-shadow .3s ease;
}
.corazon .alb-card:hover .alb-card__media,
.corazon .gal-card:hover .gal-card__media,
.corazon .gal-item:hover { box-shadow: 0 0 0 2px var(--cz-rojo-luz), 0 0 22px rgba(255,36,64,.4), 0 20px 40px -24px rgba(0,0,0,.95); }
.corazon .alb-card__title,
.corazon .gal-card__title {
  font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff;
}
.corazon .alb-card:hover .alb-card__title { color: #ffd7dc; }
.corazon .alb-card__meta,
.corazon .gal-card__meta { font-family: var(--f-stencil); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-rojo); }
.corazon .gal-empty { color: var(--cz-texto-2); font-family: var(--f-cond-2); }

/* ---- 404 ---- */
.corazon .p404 { background: var(--cz-negro); }
.corazon .p404__num {
  font-family: var(--f-black); font-weight: normal; color: var(--cz-rojo);
  text-shadow: 6px 7px 0 #3a0410; opacity: 1;
}
.corazon .p404 h1 {
  font-family: var(--f-black); font-weight: normal; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2rem, 6vw, 3.6rem); text-shadow: 4px 5px 0 #1a0507;
}
.corazon .p404 p { color: var(--cz-texto-2); font-family: var(--f-cond-2); font-size: 1.1rem; }
.corazon .p404__botones .btn {
  border-radius: 0; transform: skewX(-9deg); font-family: var(--f-btn); font-weight: normal; letter-spacing: .09em; font-size: 1rem; text-transform: uppercase;
}
.corazon .p404__botones .btn > * { display: inline-block; transform: skewX(9deg); }
.corazon .p404__botones .btn--light { background: var(--cz-rojo); border-color: var(--cz-rojo); color: #fff; }
.corazon .p404__botones .btn--light:hover { background: var(--cz-rojo-luz); border-color: var(--cz-rojo-luz); }
.corazon .p404__botones .btn--ghost { background: transparent; border: 2px solid rgba(255,255,255,.45); color: #fff; }
.corazon .p404__botones .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ---- botones genéricos dentro de páginas interiores ---- */
.corazon main .btn--primary {
  background: var(--cz-rojo); border-color: var(--cz-rojo); border-radius: 0; transform: skewX(-9deg);
  font-family: var(--f-btn); font-weight: normal; letter-spacing: .09em; font-size: 1rem; text-transform: uppercase; color: #fff;
}
.corazon main .btn--primary > * { display: inline-block; transform: skewX(9deg); }
.corazon main .btn--primary:hover { background: var(--cz-rojo-luz); border-color: var(--cz-rojo-luz); transform: skewX(-9deg) translateY(-2px); }
.corazon main .btn--ghost {
  border-radius: 0; transform: skewX(-9deg); background: transparent;
  border: 2px solid rgba(255,255,255,.4); color: #fff;
  font-family: var(--f-btn); font-weight: normal; letter-spacing: .09em; font-size: 1rem; text-transform: uppercase;
}
.corazon main .btn--ghost > * { display: inline-block; transform: skewX(9deg); }
.corazon main .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

/* ---- rejillas y tarjetas genéricas que usan varias páginas ---- */
.corazon .card,
.corazon .info-card,
.corazon .dato-card {
  background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0; box-shadow: none; color: var(--cz-texto);
}
.corazon .card h3,
.corazon .info-card h3,
.corazon .dato-card h3 { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff; }

@media (max-width: 760px) {
  .corazon .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .corazon .nl-hero .club-stats,
  .corazon .page-hero .club-stats { gap: 1.2rem; }
}

/* =========================================================================
   Componentes propios de cada página interior
   ========================================================================= */

/* ---- texto largo fuera de .prose (historia, estadio, Teruel, jugador 20) ---- */
.corazon .hist p,
.corazon .hist li { color: var(--cz-texto); font-family: var(--f-cond-2); font-size: 1.08rem; line-height: 1.75; }
.corazon .hist strong { color: #fff; }
.corazon .hist a { color: var(--cz-rosa); }
.corazon .hist h2,
.corazon .hist h3 { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.corazon .hist-fig img { border-radius: 0; box-shadow: 0 0 0 1px var(--cz-linea), 0 22px 50px -30px rgba(0,0,0,.95); }
.corazon .hist-fig figcaption,
.corazon figcaption { font-family: var(--f-stencil); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-rojo-texto, #ff4d5f); }

/* ---- cronología de la historia ---- */
.corazon .timeline { border-left-color: var(--cz-linea); }
.corazon .timeline__item { border-color: var(--cz-linea); }
.corazon .timeline__item::before,
.corazon .timeline__item::after { background: var(--cz-rojo); border-color: var(--cz-negro); }
.corazon .timeline__year {
  font-family: var(--f-black); font-weight: normal; color: var(--cz-rojo);
  letter-spacing: .01em; padding-right: .06em; text-shadow: 2px 3px 0 #3a0410;
}
.corazon .timeline__item p,
.corazon .timeline__item li { color: var(--cz-texto); font-family: var(--f-cond-2); line-height: 1.7; }
.corazon .timeline__item h3 { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff; }

/* ---- mapa del estadio ---- */
.corazon .estadio-map { border: 1px solid var(--cz-linea); border-radius: 0; overflow: hidden; background: var(--cz-panel); filter: grayscale(.3) contrast(1.05); }

/* ---- campaña del Jugador Nº20 ---- */
.corazon .cd20 { background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0; border-top: 3px solid var(--cz-rojo-2); }
.corazon .cd20__item { border-color: var(--cz-linea); }
.corazon .cd20__n { font-family: var(--f-black); font-weight: normal; color: #fff; padding-right: .06em; }
.corazon .cd20__l { font-family: var(--f-bebas); font-weight: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--cz-texto-2); }
.corazon .cd20__plazo,
.corazon .cd20__fin { font-family: var(--f-stencil); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-rojo); }

/* ---- formulario de contacto ---- */
.corazon .form-card,
.corazon .contact-info {
  background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0; border-top: 3px solid var(--cz-rojo-2);
}
.corazon .contact-info h3,
.corazon .form-card h2,
.corazon .form-card h3 { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.corazon .contact-info p,
.corazon .contact-info li,
.corazon .contact-info a { color: var(--cz-texto); font-family: var(--f-cond-2); }
.corazon .contact-info a:hover { color: var(--cz-rosa); }
.corazon .field label,
.corazon .consent { color: var(--cz-texto-2); font-family: var(--f-bebas); font-weight: normal; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }
.corazon .consent { font-family: var(--f-cond-2); letter-spacing: .02em; text-transform: none; font-size: .92rem; }
.corazon .consent a { color: var(--cz-rosa); }
.corazon .field input,
.corazon .field select,
.corazon .field textarea {
  background: #050303; border: 1px solid var(--cz-linea); border-radius: 0; color: #fff;
  font-family: var(--f-cond-2); font-size: 1rem;
}
.corazon .field input:focus,
.corazon .field select:focus,
.corazon .field textarea:focus { border-color: var(--cz-rojo); outline: 2px solid rgba(226,21,52,.35); outline-offset: 1px; }
.corazon .field input::placeholder,
.corazon .field textarea::placeholder { color: rgba(255,255,255,.35); }
.corazon .consent__error { color: var(--cz-rojo-luz); font-family: var(--f-cond-2); }
.corazon .form-ok { background: rgba(29,138,69,.14); border-left: 4px solid #1d8a45; border-radius: 0; color: var(--cz-texto); }

/* ---- entradas y ficha de partido ---- */
.corazon .match-hero { background: var(--cz-negro); position: relative; overflow: hidden; }
.corazon .match-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-40px, -2vw, -10px); bottom: -10%;
  width: clamp(200px, 26vw, 360px); aspect-ratio: 215 / 300;
  background: url("../assets/img/cartel/escudo-silueta.png") no-repeat center / contain;
  transform: rotate(10deg); opacity: .12;
}
.corazon .match-hero__inner { position: relative; z-index: 2; }
.corazon .match-hero__comp { font-family: var(--f-stencil); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-rojo); }
.corazon .match-hero__team h2 { font-family: var(--f-black); font-weight: normal; text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.corazon .match-hero__center .sc,
.corazon .match-hero__center { font-family: var(--f-black); font-weight: normal; color: #fff; }
.corazon .match-hero__meta { font-family: var(--f-cond-2); letter-spacing: .04em; text-transform: uppercase; color: var(--cz-texto-2); }
.corazon .match-team span { font-family: var(--f-cond); font-weight: normal; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.corazon .lineup li { border-bottom: 1px solid var(--cz-linea); color: var(--cz-texto); font-family: var(--f-cond-2); }
.corazon .lineup .n { font-family: var(--f-black); font-weight: normal; color: var(--cz-rojo); padding-right: .06em; }
.corazon .share-row a { border-radius: 0; transform: skewX(-9deg); background: var(--cz-panel); border: 1px solid var(--cz-linea); color: #fff; }
.corazon .share-row a .icon { transform: skewX(9deg); }
.corazon .share-row a:hover { background: var(--cz-rojo); border-color: var(--cz-rojo); }
.corazon .gallery-grid img { border-radius: 0; box-shadow: 0 0 0 1px var(--cz-linea), 0 20px 40px -26px rgba(0,0,0,.95); }

/* ---- tarjetas de patrocinadores ---- */
.corazon .spon-card,
.corazon .sponsor-card { background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0; }
.corazon .spon-card:hover,
.corazon .sponsor-card:hover { border-color: rgba(255,255,255,.25); }

/* descargo del documento legal: tenue, pero legible sobre negro */
.corazon .legal-disclaimer { border-top-color: var(--cz-linea); color: var(--cz-texto-2); font-family: var(--f-cond-2); }

/* ---- fichas de patrocinadores: sobre el negro, como la tira de la portada ---- */
.corazon .spo-item {
  background: var(--cz-panel); border: 1px solid var(--cz-linea); border-radius: 0;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.corazon a.spo-item:hover {
  transform: translateY(-3px); border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px var(--cz-rojo-luz), 0 18px 34px -22px rgba(0,0,0,.95);
}
.corazon .spo-item--ph { border-style: dashed; color: var(--cz-texto-2); font-family: var(--f-cond-2); }
.corazon .block-title { font-family: var(--f-bebas); font-weight: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--cz-texto-2); }

/* ---- fotos intercaladas en el texto (historia, estadio, jugador 20) ----
   Con aire arriba y abajo, centradas y a su tamaño real como mucho: las
   fotos antiguas son pequeñas y estiradas al ancho de la columna se veían
   borrosas y pegadas al párrafo. */
.corazon .hist figure.hist-fig,
.corazon .hist .hist-fig {
  width: fit-content; max-width: 100%;
  margin: clamp(2rem, 4vw, 2.8rem) auto; text-align: center;
}
.corazon .hist .hist-fig img {
  width: auto; max-width: 100%; max-height: min(70vh, 560px); margin-inline: auto;
}
.corazon .hist .hist-fig figcaption { margin-top: .8rem; text-align: center; font-style: normal; }
.corazon .hist .hist-fig + p,
.corazon .hist .hist-fig + h3 { margin-top: 0; }
.corazon .hist .estadio-map { margin-block: clamp(1.6rem, 3vw, 2.2rem); }

/* ---- portal de transparencia: botones rectos, sin inclinación ---- */
.corazon.pag-transparencia main .btn--primary,
.corazon.pag-transparencia main .btn--ghost { transform: none; }
.corazon.pag-transparencia main .btn--primary > *,
.corazon.pag-transparencia main .btn--ghost > * { transform: none; }
.corazon.pag-transparencia main .btn--primary:hover { transform: translateY(-2px); }

/* ---- 404: el Torico se ha escapado de su columna ---- */
.corazon .p404--torico { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; text-align: left;
  background: radial-gradient(55% 60% at 72% 55%, rgba(200,16,46,.32), transparent 70%), linear-gradient(180deg, #0e0507 0, #070304 60%, #040203 100%); }
.corazon .p404__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.corazon .p404--torico .p404__num { display: flex; align-items: center; gap: .02em; margin: 0; font-family: var(--f-black); font-size: clamp(5rem, 15vw, 10rem); line-height: .9;
  color: var(--cz-rojo); letter-spacing: -.01em; text-shadow: .033em .04em 0 #3a0410, 0 0 .23em rgba(226,21,52,.45); }
.corazon .p404--torico .p404__num img { height: .86em; width: auto; transform: skewX(-11deg); margin: 0 .03em; filter: drop-shadow(.033em .04em 0 #3a0410); }
.corazon .p404--torico h1 { margin-top: .6rem; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1; }
.corazon .p404--torico p { margin: 1rem 0 0; max-width: 48ch; color: var(--cz-texto-2); }
.corazon .p404__ecg { display: block; width: min(100%, 420px); height: 40px; margin-top: 1.4rem; overflow: visible; }
.corazon .p404__ecg path { fill: none; stroke: var(--cz-rojo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: p404-ecg 2.4s .3s ease-out forwards; }
.corazon .p404--torico .p404__botones { justify-content: flex-start; margin-top: 1.6rem; }
.corazon .p404__torico { position: relative; justify-self: center; width: min(100%, 380px); }
.corazon .p404__torico img { position: relative; display: block; width: 100%; height: auto;
  filter: brightness(.62) sepia(.35) hue-rotate(-18deg) saturate(1.6) contrast(1.1) drop-shadow(-14px 0 26px rgba(226,21,52,.5)); }
.corazon .p404__halo { position: absolute; left: 50%; top: 42%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,36,64,.35) 0, rgba(226,21,52,.1) 42%, transparent 68%); animation: p404-latido 1.1s ease-in-out infinite; }
@keyframes p404-ecg { to { stroke-dashoffset: 0; } }
@keyframes p404-latido { 0%, 100% { opacity: .55; } 14% { opacity: 1; } 28% { opacity: .55; } 42% { opacity: .8; } }
@media (max-width: 760px) {
  .corazon .p404__grid { grid-template-columns: 1fr; text-align: center; }
  .corazon .p404__torico { order: -1; width: min(60%, 240px); }
  .corazon .p404--torico .p404__num { justify-content: center; }
  .corazon .p404--torico p, .corazon .p404__ecg { margin-left: auto; margin-right: auto; }
  .corazon .p404--torico .p404__botones { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .corazon .p404__ecg path { animation: none; stroke-dashoffset: 0; } .corazon .p404__halo { animation: none; } }