/* ============================================================
   V1 — EDITORIAL · hoja de carácter
   ============================================================
   La paleta ya viene resuelta: generar.py remapea el crema y el naranjo
   de cada página al papel blanco, el rojo de prensa y el verde petróleo.
   Este archivo no se ocupa del fondo: se ocupa de la tipografía, la
   jerarquía y el ritmo, que es lo que hace que se lea como un diario y
   no como un catálogo.

   Tipografía: Cabinet Grotesk (títulos) + Satoshi (texto). Sin serif.

   Secciones:
     1. Fundamentos        6. Eventos y fechas
     2. Cabecera y nav     7. Artículo y columna
     3. Portadas           8. Listados internos
     4. Antetítulos        9. Newsletter y pie
     5. Fichas            10. Foco, movimiento, impresión
   ============================================================ */

body.v1 {
  --tinta:      #10151A;
  --tinta-2:    #2C343C;   /* texto corrido: menos duro que el titular */
  --petroleo:   #DB812D;
  --crema:      #FEF3E2;   /* texto sobre el naranjo: menos duro que el blanco */
  --rojo:       #C8321B;
  --linea:      #DCDAD3;
  --linea-dura: #10151A;
  --papel-2:    #F4F3F0;   /* gris papel para zócalos */

  background: #fff;
  color: var(--tinta);
  font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ——— 1. Fundamentos ——— */

body.v1 h1, body.v1 h2, body.v1 h3, body.v1 h4,
body.v1 .hero-tagline, body.v1 .section-title, body.v1 .art-title,
body.v1 .card-title, body.v1 .evento-card-title, body.v1 .article-title,
body.v1 .trend-title, body.v1 .column-title, body.v1 .newsletter-title,
body.v1 .header-logo, body.v1 .page-header-title, body.v1 .hero-headline,
body.v1 .mag-section-title, body.v1 .related-title, body.v1 .gallery-title-text,
body.v1 .animal-card-name, body.v1 .dir2-card-title {
  font-family: 'Cabinet Grotesk', 'Satoshi', ui-sans-serif, sans-serif;
  letter-spacing: -.024em;
  text-wrap: balance;
}

body.v1 p { text-wrap: pretty; }

/* Las cabeceras de sección de las páginas internas salían a sangre con
   `width: 100vw` y márgenes de `-50vw`. Esas unidades incluyen la barra de
   scroll, así que sobraban 7px por lado y la página ganaba 8px de scroll
   horizontal en cuatro páginas. Se alinean con la columna de contenido, que
   además es lo correcto: la cabecera y su grilla comparten el mismo eje.
   (Probado: cortar el sobrante con overflow en la raíz rompe el header
   sticky, así que se arregla en el origen.) */
@media (min-width: 1024px) {
  body.v1 .mag-section-head,
  body.v1 .section-head,
  body.v1 #secNoticias .section-head,
  body.v1 #secEducacion .section-head,
  body.v1 #secGuias .section-head,
  body.v1 #secTendencias .section-head {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
body.v1 ::selection { background: var(--rojo); color: #fff; }

/* ——— 2. Cabecera y navegación ——— */

body.v1 .header {
  background: #fff;
  border-bottom: 2px solid var(--linea-dura);
  height: 64px;
}
body.v1 .header-logo { font-weight: 800; letter-spacing: -.04em; }
body.v1 .nav-desktop-link {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinta);
}
/* El menú usa la paleta del pie: verde petróleo. El ítem vigente se marca
   con un subrayado recto, sin fondo ni esquinas redondeadas. */
body.v1 .nav-desktop-link { border-radius: 0; }
body.v1 .nav-desktop-link:hover { background: rgba(219,129,45,.08); color: var(--petroleo); }
body.v1 .nav-desktop-link.active {
  background: transparent;
  color: var(--petroleo);
  box-shadow: inset 0 -3px 0 var(--petroleo);
}
body.v1 .nav-link { font-weight: 500; }
body.v1 .nav-link:hover { color: var(--petroleo); }
body.v1 .nav-link.active {
  color: var(--petroleo);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
body.v1 .nav-search { border-radius: 0; border-color: var(--linea); }

/* Encabezado de página interna: franja de sección, no una barra más */
body.v1 .page-header {
  border-bottom: 1px solid var(--linea);
  background: #fff;
}
body.v1 .page-header-title {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
body.v1 .page-header-back { color: var(--tinta); }

/* ——— 3. Portadas ——— */

/* El hero es un carrusel de cuatro piezas, dos de ellas video publicitario.
   Eso no se toca: es contenido. Lo que cambia es cómo se presenta. Antes
   era un banner cualquiera —puntitos, flechas redondas, título centrado
   sin relación con el resto de la página—. Ahora:

   · el bloque de texto se alinea a 48px, el mismo eje que las cabeceras de
     sección de abajo, así el hero pertenece a la página en vez de flotar;
   · filete rojo sobre el titular, la misma marca que ordena las secciones;
   · el degradado suma una caída lateral, porque una foto clara por la
     izquierda se comía el texto blanco;
   · los puntitos pasan a índice numerado 01–04, que es como una revista
     dice "vas en la uno de cuatro";
   · las flechas dejan de ser círculos translúcidos y pasan a cuadrados de
     filete, coherentes con las fichas.
   ——— */

body.v1 .hero {
  margin-bottom: 0;
  border-bottom: 1px solid var(--linea);
}

/* El hero pedía 82vh y los slides 620px: en escritorio sobraban 99px de
   blanco bajo la foto, y ahí caía el índice. Una sola medida para los dos. */
body.v1 .hero,
body.v1 .hero-slide { min-height: min(78vh, 680px); }
body.v1 .hero-slides { min-height: inherit; }

/* Legibilidad: al degradado de abajo se le suma uno lateral. Sin esto el
   titular blanco desaparece sobre las zonas claras de la foto. */
body.v1 .hero-slide-media::after {
  background:
    linear-gradient(105deg, rgba(10,14,18,.72) 0%, rgba(10,14,18,.28) 46%, rgba(10,14,18,0) 72%),
    linear-gradient(to bottom, rgba(10,14,18,0) 30%, rgba(10,14,18,.55) 72%, rgba(10,14,18,.86) 100%);
}

body.v1 .hero-content { position: relative; }

/* El filete rojo que encabeza el titular */
body.v1 .hero-content::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--rojo);
  margin-bottom: 20px;
}

body.v1 .hero-tagline {
  font-size: clamp(2.1rem, 6.4vw, 4.5rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.04em;
  max-width: 17ch;
  margin-bottom: 16px;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}

body.v1 .hero-subcopy {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  max-width: 44ch;
  color: rgba(255,255,255,.92);
}

/* El botón sobre foto: bloque blanco, como un sello impreso. La tinta
   sobre una foto oscura no se distinguía del fondo. */
body.v1 .hero-ctas .btn-primary {
  background: #fff;
  color: var(--tinta);
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
}
body.v1 .hero-ctas .btn-primary:hover { background: var(--rojo); color: #fff; }

/* Índice de piezas: 01 02 03 04 en vez de puntos */
/* El índice va abajo a la izquierda, en el mismo eje que el titular. A la
   derecha chocaba con la columna de accesos flotantes. */
body.v1 .hero-dots {
  left: 20px;
  right: auto;
  bottom: 22px;
  transform: none;
  gap: 18px;
  align-items: flex-end;
}
body.v1 .hero-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  padding: 0 0 6px;
  border-bottom: 3px solid transparent;
  color: rgba(255,255,255,.55);
  font-family: 'Satoshi', ui-sans-serif, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  transform: none;
}
body.v1 .hero-dot::before { content: "01"; }
body.v1 .hero-dot:nth-child(2)::before { content: "02"; }
body.v1 .hero-dot:nth-child(3)::before { content: "03"; }
body.v1 .hero-dot:nth-child(4)::before { content: "04"; }
body.v1 .hero-dot:hover { color: #fff; }
body.v1 .hero-dot.active {
  background: none;
  transform: none;
  color: #fff;
  /* Verde agua de la familia del pie: el petróleo no se ve sobre el video. */
  border-bottom-color: #DB812D;
}

/* Flechas: cuadradas y de filete, como las fichas */
body.v1 .hero-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: rgba(10,14,18,.35);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  transition: background .18s, border-color .18s;
}
body.v1 .hero-nav-btn:hover {
  background: var(--rojo);
  border-color: var(--rojo);
}
body.v1 .hero-prev { left: 20px; }
body.v1 .hero-next { right: 20px; }

/* El "saltar" del video del auspiciador, en la misma lengua */
body.v1 .bci-skip {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.5);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.v1 .bci-progress-fill { background: var(--rojo); }

@media (min-width: 1024px) {
  /* El texto se alinea con el eje de las secciones de abajo (48px), no en
     los 80px que traía: el hero deja de ser una isla. */
  body.v1 .hero-content { padding: 0 48px 88px; max-width: 780px; }
  body.v1 .hero-dots { left: 48px; right: auto; bottom: 30px; }
  body.v1 .hero-prev { left: 48px; }
  body.v1 .hero-next { right: 48px; }
}

@media (max-width: 1023px) {
  /* En móvil el texto viene centrado: el filete y el índice también */
  body.v1 .hero-content::before { margin-left: auto; margin-right: auto; }
  body.v1 .hero-tagline, body.v1 .hero-subcopy { margin-left: auto; margin-right: auto; }
  body.v1 .hero-content { padding-bottom: 72px; }
  body.v1 .hero-dots { left: 50%; right: auto; transform: translateX(-50%); }
}

/* Portadilla de sección interna (salud, vida, etc.) */
body.v1 .hero-editorial { border-bottom: 1px solid var(--linea); }
body.v1 .hero-editorial-overlay {
  background: linear-gradient(180deg, rgba(16,21,26,.15) 0%, rgba(16,21,26,.82) 100%);
}
body.v1 .hero-headline {
  font-size: clamp(2rem, 6.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
body.v1 .hero-editorial-subtext {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.5;
  max-width: 52ch;
}

/* ——— 4. Antetítulos y cabezas de sección ——— */

body.v1 .section-eyebrow,
body.v1 .destacados .section-eyebrow,
body.v1 .accesos .section-eyebrow,
body.v1 .eventos .section-eyebrow {
  display: inline-block;
  background: var(--petroleo);
  color: #fff;
  padding: 5px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 10px;
  border-radius: 0;
}

body.v1 .section-title,
body.v1 .mag-section-title {
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.04;
}

body.v1 .section-head,
body.v1 .mag-section-head,
body.v1 .destacados-header { border-bottom: 2px solid var(--linea-dura); }

/* El CSS base cuelga un triangulito rojo de cada cabecera de sección, hecho
   con bordes. Es un recurso de plantilla de los 2000 y no pertenece a este
   sistema: la regla de 2px ya marca la sección. Se van los tres. */
body.v1 .destacados-header::after,
body.v1 .section-head::after,
body.v1 .mag-section-head::after,
body.v1 .accesos .section-header::after,
body.v1 .eventos .section-header::after { content: none; }

body.v1 .destacados,
body.v1 .eventos,
body.v1 .accesos,
body.v1 .section-block { border-top: 1px solid var(--linea); }

/* Filtros: pestañas de diario, no globos */
body.v1 .filter-pill,
body.v1 .adv-pill,
body.v1 .map-cat-chip {
  border-radius: 0;
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--tinta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.v1 .filter-pill.active,
body.v1 .adv-pill.active,
body.v1 .map-cat-chip.active,
body.v1 .filter-pill:hover,
body.v1 .map-cat-chip:hover {
  background: var(--tinta);
  color: #fff;
  border-color: var(--tinta);
}

/* ——— 5. Fichas ——— */

body.v1 .card,
body.v1 .evento-card,
body.v1 .acceso-btn,
body.v1 .date-pill,
body.v1 .article-card,
body.v1 .trend-card,
body.v1 .column-card,
body.v1 .dir2-card,
body.v1 .gallery-card,
body.v1 .animal-card,
body.v1 .icon-grid-card {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 0;
  box-shadow: none;
  transition: border-color .18s, transform .18s cubic-bezier(.16,1,.3,1);
}
body.v1 .card:hover,
body.v1 .evento-card:hover,
body.v1 .acceso-btn:hover,
body.v1 .article-card:hover,
body.v1 .trend-card:hover,
body.v1 .column-card:hover,
body.v1 .dir2-card:hover { border-color: var(--linea-dura); }

body.v1 .card-img { height: 168px; background: var(--papel-2); }

body.v1 .card-title,
body.v1 .evento-card-title,
body.v1 .article-title,
body.v1 .trend-title,
body.v1 .column-title,
body.v1 .dir2-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--tinta);
}

/* Fecha, vistas y sección: son rótulos, y como rótulos van en versalitas. */
body.v1 .article-meta,
body.v1 .trend-meta,
body.v1 .column-meta,
body.v1 .gallery-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
}

/* .card-meta y .acceso-detail-text no son rótulos: son frases. En versalitas
   se leen peor y a 11px no se leen. Van como prosa corta. */
body.v1 .card-meta {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--gray);
}

/* El texto del acceso va sobre el panel rojo, así que va en blanco: en gris
   daba 1.6:1 y no se leía. */
body.v1 .acceso-detail-text {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: #fff;
}

/* Los links del pie van sobre el verde petróleo: el rojo de marca ahí da
   2.3:1. Se usan en claro, y el subrayado marca que son links. */
body.v1 .footer-col a,
body.v1 .footer-legal a,
body.v1 .footer-copyright a,
body.v1 .newsletter-legal a { color: #D7E3E0; text-decoration: underline; text-underline-offset: 2px; }
body.v1 .footer-col a:hover,
body.v1 .footer-legal a:hover,
body.v1 .newsletter-legal a:hover { color: #fff; }

body.v1 .article-body p,
body.v1 .trend-excerpt,
body.v1 .column-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-2);
}

body.v1 .card-read-more,
body.v1 .btn-read-more,
body.v1 .art-btn,
body.v1 .btn-gallery-open {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rojo);
  border-radius: 0;
}

/* Etiquetas de categoría: rectas, sólidas, en pocos tonos */
body.v1 .card-tag,
body.v1 .tag-articulo, body.v1 .tag-noticias,
body.v1 .tag-lugar, body.v1 .tag-adopcion,
body.v1 .evento-tag-destacado,
body.v1 .article-cat-badge,
body.v1 .trend-cat,
body.v1 .col-tag,
body.v1 .animal-tag,
body.v1 .art-tag {
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.v1 .tag-articulo, body.v1 .article-cat-badge { background: var(--petroleo); color: #fff; }
body.v1 .tag-noticias, body.v1 .trend-cat         { background: var(--rojo);     color: #fff; }
body.v1 .tag-lugar                                { background: var(--tinta);    color: #fff; }
body.v1 .tag-adopcion                             { background: #C79A12;         color: #10151A; }
body.v1 .animal-tag { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }

/* Botones */
body.v1 .btn-primary,
body.v1 .btn-newsletter,
body.v1 .btn-ver-eventos,
body.v1 .also-interest-btn {
  background: var(--tinta);
  color: #fff;
  border: none;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .18s cubic-bezier(.16,1,.3,1);
}
body.v1 .btn-primary:hover,
body.v1 .btn-newsletter:hover,
body.v1 .btn-ver-eventos:hover { background: var(--rojo); }

body.v1 .btn-ver-todo,
body.v1 .btn-ver-todas,
body.v1 .btn-outline {
  border: 1px solid var(--tinta);
  color: var(--tinta);
  background: #fff;
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
}
body.v1 .btn-ver-todo:hover,
body.v1 .btn-ver-todas:hover,
body.v1 .btn-outline:hover { background: var(--tinta); color: #fff; }

/* ——— 5b. Portada: jerarquía ———
   La home traía siete fichas idénticas de 232px en un carrusel horizontal.
   En escritorio eso significa que cuatro se ven y tres quedan escondidas
   detrás de una flecha, y que ninguna nota vale más que otra: es un
   catálogo, no una portada.

   El markup ya distingue la primera con .card--destacada, así que en
   escritorio se arma la grilla de diario: nota principal a lo ancho,
   apaisada y con el titular grande, y debajo dos filas de tres. El gap de
   1px sobre fondo gris hace de filete y ahorra bordes dobles.

   En móvil se deja el carrusel: ahí funciona bien y es lo esperable.
   ——— */

@media (min-width: 1024px) {
  body.v1 .cards-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #fff;
    border: 1px solid var(--linea);
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  body.v1 .cards-scroll .card {
    flex: none;
    width: auto;
    min-width: 0;
    border: none;
    outline: none;
  }

  /* Nota principal: a lo ancho y apaisada */
  body.v1 .cards-scroll .card--destacada {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: stretch;
  }
  body.v1 .cards-scroll .card--destacada .card-img {
    height: 100%;
    min-height: 296px;
  }
  /* El texto se apoya abajo, como un pie de foto de diario, en vez de
     flotar centrado en una columna medio vacía. */
  body.v1 .cards-scroll .card--destacada .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    padding: 28px 32px 26px;
  }
  body.v1 .cards-scroll .card--destacada .card-title { margin-bottom: 0; }
  body.v1 .cards-scroll .card--destacada .card-title {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    line-height: 1.02;
    letter-spacing: -.032em;
    margin-bottom: 14px;
  }
  body.v1 .cards-scroll .card--destacada .card-meta {
    font-size: 16px;
    line-height: 1.5;
    max-width: 44ch;
  }

  /* Las seis restantes */
  body.v1 .cards-scroll .card:not(.card--destacada) .card-img { height: 190px; }
  body.v1 .cards-scroll .card:not(.card--destacada) .card-body { padding: 18px 20px 22px; }

  /* Sin carrusel no hacen falta las flechas */
  body.v1 .scroll-prev,
  body.v1 .scroll-next { display: none; }

  /* Ritmo vertical. Empezó en 72px, bajó a 52 y seguía sintiéndose vacío.
     Medido: del hero a la grilla había 182px, de los cuales 106 eran marco
     alrededor de un bloque de título que mide 76. Se recorta el marco.
     Con los filetes marcando el corte, 36px separan igual de bien. */
  body.v1 .destacados { padding-top: 36px; padding-bottom: 32px; }
  body.v1 .accesos    { padding-top: 36px; padding-bottom: 32px; }
  body.v1 .eventos    { padding-top: 36px; padding-bottom: 36px; }
  body.v1 .section-block { padding-top: 32px; padding-bottom: 32px; }
}

/* ——— 6. Eventos y fechas ——— */

body.v1 .date-pill-header { background: var(--petroleo); }
body.v1 .date-pill-month {
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.v1 .date-pill-day { font-weight: 800; letter-spacing: -.03em; }

/* ——— 5c. Listados de sección: la misma grilla que la portada ———
   Las páginas de sección repiten el patrón del carrusel: en salud quedaban
   612px de artículos escondidos detrás de una flecha, en noticias 764px.
   En escritorio eso es contenido que nadie ve. Misma solución que en la
   portada: grilla que se adapta al ancho, con el gap de 1px como filete.

   De paso se esconde el menú móvil, que en escritorio queda estacionado a
   la derecha fuera de la pantalla y ensancha la página 280px (se notaba
   como 8px de scroll horizontal en cuatro páginas).
   ——— */

@media (min-width: 1024px) {
  body.v1 .nav-drawer,
  body.v1 .nav-overlay { display: none; }

  /* .art-scroll-wrap es flex, así que la grilla es un item y no se estira
     sola: sin esto se encoge al ancho de una sola ficha. */
  body.v1 .art-scroll {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 1px;
    background: #fff;
    border: 1px solid var(--linea);
    overflow: visible;
    scroll-snap-type: none;
  }
  body.v1 .art-scroll .article-card {
    flex: none;
    width: auto;
    min-width: 0;
    border: none;
  }
  body.v1 .art-scroll .article-img { height: 186px; }
  body.v1 .art-btn { display: none; }
}

/* ——— 6b. Eventos: agenda, no cuatro fichas apretadas ———
   La columna derecha metía cuatro fichas de 230x203 en una grilla 2x2 al
   lado de un evento grande. A ese tamaño la foto no muestra nada y el
   título se corta. Un diario resuelve esto como agenda: una fila por
   evento, miniatura a la izquierda, separadas por filete. Se leen los
   cuatro de un vistazo y la columna calza en alto con el evento principal.
   ——— */

@media (min-width: 1024px) {
  body.v1 .eventos-subgrid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body.v1 .evento-card--sub {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    width: 100%;
    justify-self: stretch;
    gap: 16px;
    align-items: center;
    border: none;
    border-top: 1px solid var(--linea);
    padding: 15px 0;
  }
  body.v1 .evento-card--sub:first-child { border-top: none; padding-top: 0; }

  body.v1 .evento-card--sub .evento-card-img {
    width: 104px;
    height: 74px;
    margin: 0;
    flex: none;
  }
  body.v1 .evento-card--sub .evento-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.v1 .evento-card--sub .evento-card-title {
    font-size: 16px;
    line-height: 1.22;
  }
  body.v1 .evento-card--sub:hover { border-color: var(--linea); }
  body.v1 .evento-card--sub:hover .evento-card-title { color: var(--rojo); }
}

/* ——— 7. Artículo y columna: acá se gana o se pierde ——— */

body.v1 .art-wrap { max-width: 1180px; }

body.v1 .art-title {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  margin-bottom: 14px;
}

/* Bajada: el puente entre el titular y el cuerpo */
body.v1 .art-lede {
  font-size: clamp(1.1rem, 2.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta-2);
  max-width: 60ch;
  letter-spacing: -.011em;
}

/* Firma y fecha, entre reglas */
body.v1 .art-meta,
body.v1 .col-author-strip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: 10px 0;
}
body.v1 .col-author-name { color: var(--tinta); }
body.v1 .col-author-role { color: var(--gray); font-weight: 500; letter-spacing: .04em; }

/* Cuerpo: una sola columna y una medida que se pueda leer.
   El CSS base lo parte en dos columnas en escritorio; en pantalla eso
   obliga a subir y bajar para leer un solo párrafo. */
body.v1 .art-body {
  column-count: 1 !important;
  max-width: 68ch;
}
body.v1 .art-body p {
  font-size: 18px;
  line-height: 1.68;
  color: var(--tinta-2);
  margin-bottom: 22px;
}
body.v1 .art-body h2,
body.v1 .art-body h3 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -.025em;
  margin: 40px 0 12px;
}
body.v1 .art-body li {
  font-size: 18px;
  line-height: 1.65;
  color: var(--tinta-2);
  margin-bottom: 10px;
}

/* Capitular: el guiño editorial que fija la entrada del texto */
body.v1 .art-body > p:first-of-type::first-letter {
  font-family: 'Cabinet Grotesk', sans-serif;
  float: left;
  font-size: 4.1em;
  line-height: .82;
  font-weight: 800;
  color: var(--rojo);
  padding: 4px 10px 0 0;
  margin-top: 2px;
}

/* Cita destacada */
body.v1 .art-body blockquote {
  border-left: 4px solid var(--rojo);
  padding: 2px 0 2px 20px;
  margin: 32px 0;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--tinta);
}

body.v1 .art-inline-caption {
  font-size: 12px;
  color: var(--gray);
  border-left: 2px solid var(--linea);
  padding-left: 10px;
}

body.v1 .col-author-box {
  border: 1px solid var(--linea);
  border-radius: 0;
  background: var(--papel-2);
}
body.v1 .col-author-box-bio { font-size: 15px; line-height: 1.6; color: var(--tinta-2); }

body.v1 .related-title,
body.v1 .art-share-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  border-bottom: 2px solid var(--linea-dura);
  padding-bottom: 8px;
}
body.v1 .related-item { border-bottom: 1px solid var(--linea); }
body.v1 .related-item-title { font-size: 15px; font-weight: 700; line-height: 1.3; }

/* Espacios publicitarios: se marcan, no se disimulan */
body.v1 .ad-slot {
  background: var(--papel-2);
  border: 1px dashed var(--linea);
  border-radius: 0;
}
body.v1 .ad-slot-tag,
body.v1 .ad-slot-size {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ——— 8. Listados internos ——— */

body.v1 .columnist-name { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
body.v1 .columnist-specialty {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--petroleo);
  color: #fff;
  border-radius: 0;
}
body.v1 .columnist-bio { font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
body.v1 .columnist-avatar { border-radius: 0; }

body.v1 .animal-card-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
body.v1 .animal-address,
body.v1 .animal-foundation { font-size: 12px; color: var(--gray); }

body.v1 .gallery-title-text { font-size: 16px; font-weight: 700; }


/* ——— 8b. Taxonomía de categorías ———
   Las páginas internas pintan las categorías con veinte colores distintos
   (el arcoíris completo de Tailwind, al 85% de opacidad sobre las fotos).
   Eso destruye cualquier sistema: si todo es un color, ninguno significa.
   Acá se colapsan a cinco tonos con criterio, opacos para que el texto
   blanco se lea sobre cualquier imagen.

     rojo      urgencia y riesgo
     petróleo  salud y cuidado
     ocre      etapas de la vida del animal
     pizarra   ciudad, lugares y servicios
     tinta     todo lo demás
   ——— */

body.v1 [class*="badge-"] { background: var(--tinta); color: #fff; }

body.v1 .badge-enfermedades,
body.v1 .badge-primeros-auxilios,
body.v1 .badge-duelo,
body.v1 .trend-cat-legislacion { background: var(--rojo); color: #fff; }

body.v1 .badge-vacunas,
body.v1 .badge-prevencion,
body.v1 .badge-nutricion,
body.v1 .badge-etologia { background: var(--petroleo); color: #fff; }

body.v1 .badge-cachorro,
body.v1 .badge-cachorros,
body.v1 .badge-primer-perro,
body.v1 .badge-razas,
body.v1 .badge-bebe,
body.v1 .badge-perros-ninos,
body.v1 .badge-educacion { background: #8A6114; color: #fff; }

body.v1 .badge-lugares,
body.v1 .badge-mudanzas,
body.v1 .badge-internacional,
body.v1 .badge-local,
body.v1 .badge-grooming,
body.v1 .trend-cat-productos,
body.v1 .trend-cat-servicios { background: #2B4C7E; color: #fff; }

body.v1 .badge-lifestyle,
body.v1 .badge-ansiedad { background: var(--tinta); color: #fff; }

/* Vida: cada tema con su propio color, para distinguirlos de un vistazo.
   Tonos profundos que conviven con la paleta; todos pasan 5:1 con blanco.
   Estas clases solo se usan en vida.html. */
body.v1 .badge-perros-ninos { background: #2B4C7E; }
body.v1 .badge-primer-perro { background: #DB812D; }
body.v1 .badge-bebe         { background: #A3366B; }
body.v1 .badge-mudanzas     { background: #8A6114; }
body.v1 .badge-duelo        { background: #4B5563; }
body.v1 .badge-cachorro     { background: #B5471A; }
body.v1 .badge-senior       { background: #5B3F8C; }
body.v1 .badge-viajar       { background: #1F6F8B; }
body.v1 .badge-razas        { background: #3F6B2A; }
/* La publicidad no es un tema: va en tinta, aparte de los colores de tema. */
body.v1 .article-cat-badge.article-ad-badge { background: var(--tinta); }

/* Adopción: la ficha del perro destacado y las tarjetas de "Perros
   esperando" traían el crema y el naranjo del sitio anterior (celdas
   #fff6e8, íconos y filetes en rojo, flechas naranjas en los filtros).
   Pasan a papel, tinta y petróleo. La franja lila es de Cuidapet y el
   rojo de SuperZoo es su marca: se quedan. */
body.v1 .pet-collapsible-toggle { border-bottom: 2px solid var(--linea-dura); }
body.v1 .pet-collapsible-toggle span {
  color: var(--tinta);
  font-size: 12px;
  letter-spacing: .12em;
}
body.v1 .pet-collapsible-toggle .toggle-arrow { color: var(--tinta); }
body.v1 .pet-desc { color: var(--tinta-2); font-size: 15px; line-height: 1.65; }
body.v1 .pet-dato-cell {
  background: var(--papel-2);
  border-left: 3px solid var(--petroleo);
  padding: 10px 12px;
}
body.v1 .pet-dato-icon { color: var(--petroleo); }
body.v1 .pet-dato-label { color: var(--gray); letter-spacing: .1em; }
body.v1 .pet-dato-val { color: var(--tinta); font-size: 12px; }
body.v1 .pet-thumb.active { border-color: var(--petroleo); }
body.v1 .btn-adoptar {
  background: var(--petroleo);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.v1 .btn-adoptar:hover { background: var(--tinta); }

body.v1 .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2310151A'/%3E%3C/svg%3E");
}
body.v1 .filter-select:focus { border-color: var(--petroleo); }
body.v1 .animal-card .flip-back { background: var(--petroleo); }
body.v1 .animal-tag.coral { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }

/* Servicios: botones, filtros y etiquetas venían todos en rojo, las
   estrellas en dorado y la publicidad con borde naranjo. Pasan a tinta y
   petróleo, como el resto del sitio. El rojo queda solo para Urgencias
   24/7: rojo es urgencia y riesgo. */
body.v1 .dir2-filter-chip:hover,
body.v1 .dir2-filter-chip.active { background: var(--tinta); border-color: var(--tinta); color: #fff; }
body.v1 .dir2-search-wrap:focus-within,
body.v1 .dir2-comuna-select:focus { border-color: var(--petroleo); }
body.v1 .dir2-comuna-label i,
body.v1 .dir2-card-location i { color: var(--petroleo); }

body.v1 .dir2-tag,
body.v1 .dir2-tag-seguros { background: var(--petroleo); color: #fff; }
body.v1 .dir2-tag.dir2-urg-tag { background: var(--rojo); }
body.v1 .dir2-stars-filled { color: var(--petroleo); }

body.v1 .dir2-btn-call { border-color: var(--tinta); color: var(--tinta); }
body.v1 .dir2-btn-call:hover { background: var(--tinta); color: #fff; }
body.v1 .dir2-btn-more { background: var(--petroleo); border-color: var(--petroleo); }
body.v1 .dir2-btn-more:hover { background: var(--tinta); border-color: var(--tinta); }
body.v1 .dir2-btn-ver-mas { border-color: var(--tinta); color: var(--tinta); }
body.v1 .dir2-btn-ver-mas:hover { background: var(--tinta); color: #fff; }

/* Publicidad y patrocinados: se marcan con filete punteado en tinta,
   sin el naranjo ni la sombra. */
body.v1 .dir2-card--ad,
body.v1 .dir2-card--sponsored { border: 1px dashed var(--tinta); box-shadow: none; }
body.v1 .dir2-badge-spon { background: var(--tinta); color: #fff; }
body.v1 .dir2-spon-star { color: var(--petroleo); }
body.v1 .dir2-spon-item:hover { background: var(--papel-2); }

/* Grillas de fichas (portada, listados, relacionados): el filete entre
   fichas lo dibuja cada ficha con una sombra de 1px que cae en el gap.
   Antes lo hacía el fondo gris de la grilla, y una fila incompleta dejaba
   un bloque gris donde faltaban fichas. */
@media (min-width: 1024px) {
  body.v1 .cards-scroll > *,
  body.v1 .art-scroll > *,
  body.v1 .also-interest-scroll > * { box-shadow: 0 0 0 1px var(--linea); }
}

/* Actualidad: las guías destacadas venían en ámbar (filete, sombra,
   cuerpo crema y una etiqueta que latía) y la publicidad en naranjo.
   Destacada pasa a petróleo y sin animación; publicidad, a tinta. */
body.v1 .guide-card.featured,
body.v1 .article-card.featured {
  border: 2px solid var(--petroleo);
  box-shadow: none;
}
body.v1 .guide-card.featured .guide-body,
body.v1 .article-card.featured .article-body { background: #fff; }
body.v1 .guide-featured-badge {
  background: var(--petroleo);
  box-shadow: none;
  animation: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 6px 12px;
}
body.v1 .ad-distinct-tag { background: var(--tinta); }

/* Un color por tema, para distinguirlos de un vistazo. Solo se usan en
   Actualidad (y el artículo de vacunas, que repite los de Tendencias).
   Legislación sigue en rojo: rojo es riesgo. Todos pasan 5:1 con blanco. */
body.v1 .badge-local           { background: #DB812D; }
body.v1 .badge-internacional   { background: #2B4C7E; }
body.v1 .badge-lugares         { background: #3F6B2A; }
body.v1 .badge-lifestyle       { background: #A3366B; }
body.v1 .badge-grooming        { background: #5B3F8C; }
body.v1 .trend-cat-productos   { background: #1F6F8B; color: #fff; }
body.v1 .trend-cat-servicios   { background: #8A6114; color: #fff; }
body.v1 .trend-cat-legislacion { background: var(--rojo); color: #fff; }

/* Sin auspiciador, el aviso del kit de bienvenida va en la paleta del
   sitio: papel con filete petróleo, igual que las celdas de datos. */
body.v1 .pet-kit {
  background: var(--papel-2);
  border-left: 3px solid var(--petroleo);
  color: var(--tinta);
  font-size: 13px;
}

/* Columnas: el "Ver más" es un botón lleno. La regla general de arriba le
   daba texto rojo sobre el fondo rojo de la página: no se leía. */
body.v1 .column-card .btn-read-more { background: var(--petroleo); color: #fff; }
body.v1 .column-card .btn-read-more:hover { background: var(--tinta); }

/* WordPress: con la sesión iniciada, la barra de administración ocupa el
   borde superior; el menú fijo del sitio se pega debajo de ella. */
body.v1.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.v1.admin-bar .header { top: 46px; } }

/* WordPress: sección sin notas publicadas todavía, y título de tarjeta
   que lleva a la nota sin cambiar su aspecto. */
body.v1 .mfa-vacio { grid-column: 1 / -1; padding: 28px 0; font-size: 15px; color: var(--gray); }
body.v1 .mfa-titulo-link { color: inherit; text-decoration: none; }
body.v1 .mfa-titulo-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ——— 9. Newsletter y pie ——— */

body.v1 .newsletter {
  background: var(--petroleo);
  border-top: none;
  border-bottom: none;
  color: #fff;
}
body.v1 .newsletter-title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.02;
}
body.v1 .newsletter-sub,
body.v1 .newsletter-legal { color: rgba(255,255,255,.9); }
body.v1 .newsletter-input {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  color: #fff;
}
body.v1 .newsletter-input::placeholder { color: rgba(255,255,255,.75); }
body.v1 .btn-newsletter { background: var(--rojo); }
body.v1 .btn-newsletter:hover { background: #fff; color: var(--petroleo); }
body.v1 .newsletter-img-col::after { background: var(--petroleo); }

body.v1 .footer-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.v1 .footer-tagline { font-size: 14px; line-height: 1.5; }

/* ——— 9b. El perro que persigue la pelota ———
   El original tenía cuatro problemas: el perro corría por delante de la
   pelota (delay negativo), era gris oscuro sobre el fondo oscuro, la
   pelota no rodaba, y el movimiento se hacía animando `left`, que obliga
   al navegador a recalcular layout en cada cuadro.

   Acá: los dos carriles ocupan el ancho completo y se mueven con
   translateX, que es relativo al ancho del propio carril y corre en el
   compositor. El perro no lleva delay: va desplazado 130px hacia atrás,
   así que la distancia entre los dos es siempre la misma y se lee como
   persecución. La pelota gira con una costura visible, porque un círculo
   liso girando no se nota. Y hay una línea de 1px como suelo.
   ——— */

body.v1 .newsletter-chase {
  height: 56px;
  margin-bottom: 18px;
  overflow: hidden;
  contain: layout paint;
}

/* El suelo por el que corren */
body.v1 .newsletter-chase::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.22);
}

body.v1 .chase-track-ball,
body.v1 .chase-track-dog {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  animation: v1-cruzar 5.4s linear infinite;
  animation-delay: 0s;
  will-change: transform;
}

/* El perro, 130px más atrás que la pelota, siempre */
body.v1 .chase-track-dog { left: -130px; padding-bottom: 1px; }
body.v1 .chase-track-ball { padding-bottom: 7px; }

@keyframes v1-cruzar {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* La pelota: rueda de verdad porque tiene una costura que lo muestra */
body.v1 .newsletter-ball {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: none;
  animation: v1-rodar .62s linear infinite;
}
body.v1 .newsletter-ball::after {
  content: "";
  position: absolute;
  inset: 3px 0;
  border-left: 2px solid rgba(255,255,255,.75);
  border-right: 2px solid rgba(255,255,255,.75);
  border-radius: 50%;
}

@keyframes v1-rodar {
  to { transform: rotate(360deg); }
}

/* El perro: galope, no tiritón. Sube, cae y se aplasta un poco al aterrizar. */
body.v1 .newsletter-dog {
  font-size: 30px;
  color: #F4F3F0;
  transform-origin: bottom center;
  animation: v1-galope .46s cubic-bezier(.33,0,.4,1) infinite;
}

@keyframes v1-galope {
  0%   { transform: translateY(0)    scaleY(.94) scaleX(1.05) rotate(-2deg); }
  28%  { transform: translateY(-9px) scaleY(1.04) scaleX(.97) rotate(3deg); }
  55%  { transform: translateY(-11px) scaleY(1)   scaleX(1)   rotate(1deg); }
  100% { transform: translateY(0)    scaleY(.94) scaleX(1.05) rotate(-2deg); }
}

/* En pantalla chica la distancia se acorta o el perro no entra nunca */
@media (max-width: 600px) {
  body.v1 .chase-track-dog { left: -78px; }
  body.v1 .newsletter-dog { font-size: 24px; }
  body.v1 .newsletter-ball { width: 12px; height: 12px; }
}

/* Si el sistema pide menos movimiento, la escena no se saca ni se congela a
   media pista: queda quieta y compuesta, con el perro detrás de la pelota.
   Se sigue entendiendo el chiste, sin nada moviéndose. */
@media (prefers-reduced-motion: reduce) {
  body.v1 .newsletter-chase { display: block; }
  body.v1 .chase-track-ball,
  body.v1 .chase-track-dog {
    animation: none;
    transform: translateX(45%);
  }
  body.v1 .newsletter-ball,
  body.v1 .newsletter-dog { animation: none; }
  body.v1 .newsletter-dog { transform: translateY(-2px) rotate(-2deg); }
}

/* ——— 10. Foco, movimiento, impresión ——— */

body.v1 .assistant-fab {
  border-radius: 0;
  background: var(--tinta);
  box-shadow: none;
}
body.v1 .assistant-fab:hover { background: var(--rojo); }
body.v1 .bottom-nav-item.active,
body.v1 .bottom-nav-item:hover { color: var(--rojo); }
body.v1 .quick-fab-item { border-radius: 0; }

body.v1 a:focus-visible,
body.v1 button:focus-visible,
body.v1 input:focus-visible,
body.v1 [tabindex]:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
}

/* .card-autor es la etiqueta del auspiciador y trae su propio rojo de marca
   con texto blanco. No se le toca el color o queda ilegible. */

@media (prefers-reduced-motion: reduce) {
  body.v1 *, body.v1 *::before, body.v1 *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body.v1 .header, body.v1 .bottom-nav, body.v1 .assistant-fab,
  body.v1 .quick-fab-stack, body.v1 .ad-slot, body.v1 .newsletter { display: none; }
  body.v1 .art-body { max-width: none; }
  body.v1 .art-body p { font-size: 11pt; color: #000; }
}

/* ——— 11. Los banners no mandan en el ritmo ———
   El banner del banco vive entre dos secciones y traía 40px de margen a cada
   lado, que se sumaban a los paddings de las dos: 347px de aire alrededor de
   un aviso. Se aprieta a 20px y el corte lo hacen los filetes. */
body.v1 .banner-banco-wrap {
  margin-top: 12px;
  margin-bottom: 12px;
}
body.v1 .eventos-banner { margin-top: 12px; margin-bottom: 12px; }

/* Y donde el banner cae justo entre dos secciones, se recorta también el
   padding de las vecinas: si no, el aviso queda flotando en 136px de nada. */
body.v1 .destacados:has(+ .banner-banco-wrap) { padding-bottom: 24px; }
body.v1 .banner-banco-wrap + section,
body.v1 .banner-banco-wrap + .accesos { padding-top: 32px; }

@media (min-width: 1024px) {
  body.v1 footer { padding-top: 48px; }
}

/* ——— 12. El marco de las cabeceras ———
   Cada cabecera de sección traía 16px arriba, 14 abajo y 20 de margen: 50px
   de aire alrededor de dos líneas de texto, en cinco secciones. Se aprieta a
   la mitad. El filete de 2px es el que separa, no el vacío. */
body.v1 .destacados-header,
body.v1 .section-head,
body.v1 .mag-section-head {
  padding-top: 6px;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

/* El bloque "ver todo" tampoco necesita tanto respiro */
body.v1 .ver-todo-wrap { padding-top: 8px; padding-bottom: 0; }

/* ——— 13. Los espacios que David marcó uno por uno ———
   Cuatro sobrantes de origen distinto, cada uno con su causa. */

/* (a) Bajo la grilla de portada quedaba una franja gris de 12px: es el
   padding del contenedor, que con el fondo de filete se ve como una fila
   vacía de la grilla. En modo grilla no va. */
@media (min-width: 1024px) {
  body.v1 .scroll-wrapper .cards-scroll,
  body.v1 .art-scroll-wrap .art-scroll { padding: 0; }

  /* (b) El aire sobre cada antetítulo. 36px seguía leyéndose como hueco. */
  body.v1 .destacados { padding-top: 28px; padding-bottom: 28px; }
  body.v1 .accesos    { padding-top: 28px; padding-bottom: 28px; }
  body.v1 .eventos    { padding-top: 28px; padding-bottom: 32px; }
  body.v1 .section-block { padding-top: 28px; padding-bottom: 28px; }
  body.v1 .banner-banco-wrap + section,
  body.v1 .banner-banco-wrap + .accesos { padding-top: 20px; }

  /* (c) El pie: el newsletter cerraba con 28px propios más 63 de separación
     antes de las columnas. */
  body.v1 .newsletter { padding-bottom: 0; }
  body.v1 footer { padding-top: 40px; padding-bottom: 28px; }
}

/* (d) El hueco del final: el <body> reserva 88px para la barra de navegación
   inferior, que solo existe en móvil. En escritorio esa barra está oculta y
   el espacio queda muerto al pie de todas las páginas. */
@media (min-width: 1024px) {
  body.v1 { padding-bottom: 0; }
}

/* ——— 14. Los dos "ver todo" en el mismo eje ———
   El de destacados queda centrado en la página; el de eventos vive dentro de
   la columna derecha, así que se centraba respecto de esa columna y quedaba
   corrido.

   Primer intento: estirar el bloque a las dos columnas con margen negativo.
   Centraba bien pero el botón seguía colgando del flujo de la columna
   derecha, que termina antes que la izquierda, así que quedaba pisando la
   ficha del evento principal.

   Esto lo saca del flujo y lo apoya al pie de la grilla completa, que es
   donde corresponde: debajo de las dos columnas y centrado en la página. La
   grilla reserva el alto para que no se monte sobre nada. */
@media (min-width: 1024px) {
  body.v1 .eventos-grid {
    position: relative;
    padding-bottom: 64px;
  }
  body.v1 .eventos .ver-todo-wrap.ver-todo-right {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 0;
    justify-content: center;
  }
}

/* ——— 15. La página de artículo ———
   Medido antes de tocar, a 1440:

     cuerpo        86 caracteres por línea   (la regla de la casa: 45-75)
     bajada        84 caracteres, y 915px de ancho contra 743 del cuerpo
     titular       arranca en x=0; el texto en x=48. Dos ejes distintos.
     relacionados  161px de fichas escondidas tras una flecha

   El `ch` me engañó: puse `max-width: 68ch` pensando en 68 caracteres, pero
   el cero de Satoshi es ancho y 68ch daban 86 caracteres reales. Acá va una
   medida en rem, verificada contando caracteres sobre el render.

   La decisión de fondo: el artículo pasa a ser una columna de lectura
   centrada. Antetítulo, titular, bajada y cuerpo comparten un solo eje, y el
   espacio sobrante queda simétrico a los lados en vez de colgar todo a la
   izquierda con 437px de vacío a la derecha. La foto de apertura sigue a
   sangre, que es el contraste que hace que la columna se lea como columna.
   ——— */

@media (min-width: 1024px) {
  /* El eje único. Medido sobre el render con la fuente ya cargada, no a ojo:
     42rem daban 78 caracteres por línea y 38rem dan 71, dentro del 45-75 que
     pide la regla de la casa. El `ch` no sirve acá: el cero de Satoshi es
     ancho y 68ch daban 86 caracteres reales. */
  body.v1 .section-head:has(+ .art-wrap),
  body.v1 .col-author-strip,
  body.v1 .art-tags,
  body.v1 .art-share,
  body.v1 .art-wrap > .art-lede,
  body.v1 .art-wrap > .art-body,
  body.v1 .art-wrap > .art-meta,
  body.v1 .art-wrap > .col-author-strip,
  body.v1 .art-wrap > .art-tags,
  body.v1 .art-wrap > .art-share,
  body.v1 .art-wrap > .col-author-box {
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* El contenedor también se centra: si solo se le pone max-width, queda
     pegado a la izquierda y el titular (que sí se centraba) cae en otro eje. */
  body.v1 .art-wrap {
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    /* El padding lateral de 48px corría el texto respecto del titular. Con la
       medida puesta por max-width, ese padding ya no cumple ninguna función
       en escritorio. En móvil se queda, que ahí sí hace de margen. */
    padding-left: 0;
    padding-right: 0;
  }

  /* El titular del artículo manda más que un título de sección */
  body.v1 .section-head:has(+ .art-wrap) .section-title {
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    line-height: 1;
    letter-spacing: -.035em;
  }

  /* La bajada es puente, no otro párrafo: se distingue por tamaño y peso */
  body.v1 .art-lede {
    font-size: 1.25rem;
    line-height: 1.5;
    max-width: 38rem;
  }

  /* Las imágenes dentro del texto sí pueden pasarse de la columna: es lo que
     le da aire a una lectura larga sin romper el eje. */
  body.v1 .art-body .art-inline-img,
  body.v1 .art-wrap > .ad-slot--wide,
  body.v1 .art-wrap > .ad-slot--banner {
    width: calc(100% + 8rem);
    max-width: none;
    margin-left: -4rem;
    margin-right: -4rem;
  }

  /* Relacionados: la misma grilla que el resto del sitio, sin flecha */
  body.v1 .also-interest-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 1px;
    background: #fff;
    border: 1px solid var(--linea);
    overflow: visible;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  body.v1 .also-interest-scroll > * {
    flex: none;
    width: auto;
    min-width: 0;
    border: none;
  }
  body.v1 .also-interest-btn { display: none; }

  body.v1 .related-title,
  body.v1 .section-ver-mas { max-width: 1180px; margin-left: auto; margin-right: auto; }
}

/* ——— 15. Portadilla de sección interna ———
   Las siete páginas de sección abrían con la misma foto a sangre de 520px y
   el titular blanco sobre degradé que ya usa la portada. Dos problemas: el
   visitante que llega desde la home ve la misma pantalla dos veces, y el
   primer listado queda abajo del pliegue. Una sección de diario no se abre
   con un afiche: se abre con su nombre, una bajada y una foto que acompaña.

   Solo CSS sobre el markup existente (.hero-editorial y sus tres hijos, y
   en actualidad .news-banner, que trae la foto suelta sin envoltorio):
   texto en tinta sobre papel a la izquierda, foto recortada a la derecha
   que sí llega al borde. En móvil la foto va arriba en 2:1 y el texto
   debajo, sin degradé. El nombre de la sección sale del link activo del
   menú con :has(), así no hay que tocar ninguna página. Los selectores miran
   el final del href para servir igual aquí (../paginas/salud.html) y en el
   tema de WordPress (/salud/).
   ——— */

body.v1 .hero-editorial,
body.v1 .news-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 0;
  background: #fff;
  border-bottom: 2px solid var(--linea-dura);
}
body.v1 .hero-editorial-overlay,
body.v1 .news-banner-overlay { display: none; }

body.v1 .hero-editorial-bg,
body.v1 .news-banner > img {
  position: relative;
  inset: auto;
  aspect-ratio: 2 / 1;
  background: var(--papel-2);
}
body.v1 .news-banner > img { width: 100%; height: auto; object-fit: cover; object-position: 92% 35%; }
body.v1 .hero-editorial-bg img { transition: transform .4s cubic-bezier(.16,1,.3,1); }
/* Al recortar a una columna, cada foto necesita su propio encuadre: en la
   de salud (salud.jpeg) el perro y el botiquín van un poco a la izquierda
   del centro. */
body.v1:has(.nav-desktop-link.active:is([href$="/salud.html"], [href$="/salud/"])) .hero-editorial-bg img { object-position: 45% 40%; }

body.v1 .hero-editorial-body,
body.v1 .news-banner-body {
  position: static;
  padding: 24px 20px 28px;
  color: var(--tinta);
  max-width: none;
}

/* Antetítulo: nombre de la sección, con la ficha petróleo del sistema */
body.v1 .hero-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 10px 4px;
  background: var(--petroleo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* En móvil la barra de página ya dice el nombre de la sección, justo arriba */
@media (max-width: 1023px) {
  body.v1 .hero-eyebrow { display: none; }
}

body.v1 .hero-editorial .hero-headline,
body.v1 .news-banner .news-banner-headline {
  color: var(--tinta);
  font-size: clamp(2rem, 3.6vw + 1rem, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  max-width: 14ch;
  margin-bottom: 16px;
}
body.v1 .hero-editorial .hero-editorial-subtext,
body.v1 .hero-editorial .hero-subtext,
body.v1 .news-banner .news-banner-subtext {
  color: var(--tinta-2);
  font-size: clamp(1rem, .4vw + .9rem, 1.15rem);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0;
}

@media (min-width: 1024px) {
  /* Texto alineado con la columna de 1280 del resto del sitio; la foto
     ocupa el 42% derecho y llega al borde de la ventana. */
  body.v1 .hero-editorial,
  body.v1 .news-banner {
    grid-template-columns: minmax(0, 1fr) 42%;
    /* Alto mínimo, no fijo: con una bajada larga (actualidad) y la ventana
       cerca de 1024px el texto no cabía y se salía por debajo del filete. */
    height: auto;
    min-height: clamp(320px, 30vw, 420px);
  }
  body.v1 .hero-editorial-bg,
  body.v1 .news-banner > img {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
    height: 100%;
    border-left: 2px solid var(--linea-dura);
  }
  body.v1 .hero-editorial-body,
  body.v1 .news-banner-body {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding: 48px 56px 48px max(48px, calc((100vw - 1280px) / 2 + 48px));
  }
  body.v1 .hero-editorial:hover .hero-editorial-bg img { transform: scale(1.03); }

  /* En salud y vida las secciones no tenían contenedor: el título "Salud"
     quedaba pegado al borde izquierdo y la grilla corría a sangre. */
  /* El filete de 2px ya cierra la portadilla: el filete gris de la primera
     sección, 28px más abajo, se leía como una segunda raya. */
  body.v1 .hero-editorial + .section-block,
  body.v1 .news-banner + .section-block { border-top: none; margin-top: 0; padding-top: 40px; }

  body.v1 .hero-editorial ~ .section-block,
  body.v1 .news-banner ~ .section-block {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px;
    padding-right: 48px;
  }
  body.v1 .hero-editorial ~ .section-block .filter-row,
  body.v1 .hero-editorial ~ .section-block .art-scroll-wrap,
  body.v1 .news-banner ~ .section-block .filter-row,
  body.v1 .news-banner ~ .section-block .art-scroll-wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v1 .hero-editorial-bg img { transition: none; }
  body.v1 .hero-editorial:hover .hero-editorial-bg img { transform: none; }
}


/* ——— Crema sobre naranjo ———
   Todo texto que va sobre el naranjo #DB812D se escribe en crema #FEF3E2
   en vez de blanco: el blanco puro contrastaba de más. */
body.v1 footer,
body.v1 footer *,
body.v1 .newsletter,
body.v1 .newsletter *:not(.btn-newsletter) { color: var(--crema) !important; }
body.v1 .footer-logo img.footer-logo-crema { filter: none; }
body.v1 .newsletter-input { border-color: rgba(254,243,226,.45); background: rgba(254,243,226,.08); }
body.v1 .newsletter-input::placeholder { color: rgba(254,243,226,.75) !important; }
body.v1 .btn-newsletter { color: var(--crema); }

body.v1 .section-eyebrow,
body.v1 .destacados .section-eyebrow,
body.v1 .accesos .section-eyebrow,
body.v1 .eventos .section-eyebrow,
body.v1 .hero-eyebrow,
body.v1 .columnist-specialty,
body.v1 .tag-articulo,
body.v1 .article-cat-badge,
body.v1 .badge-vacunas,
body.v1 .badge-prevencion,
body.v1 .badge-nutricion,
body.v1 .badge-etologia,
body.v1 .badge-local,
body.v1 .badge-primer-perro,
body.v1 .date-pill-header,
body.v1 .guide-featured-badge,
body.v1 .btn-adoptar,
body.v1 .animal-tag.coral,
body.v1 .dir2-tag,
body.v1 .dir2-btn-more,
body.v1 .dir2-urg-phone-btn,
body.v1 .column-card .btn-read-more,
body.v1 .nota-avatar,
body.v1 .nota-icon:hover { color: var(--crema); }

body.v1 .animal-card .flip-back,
body.v1 .animal-card .flip-back * { color: var(--crema) !important; }

/* Panel de "Conoce mi fiel amigo": naranjo en escritorio, blanco en móvil */
@media (min-width: 1024px) {
  body.v1 .acceso-btn .acceso-btn-detail,
  body.v1 .acceso-btn .acceso-detail-name,
  body.v1 .acceso-btn .acceso-detail-text { color: var(--crema); }
}

/* Tarjetas de notas: sin autor, y la fecha un 35% más chica (11px → 7.15px) */
body.v1 .article-card .article-meta,
body.v1 .guide-card .article-meta { font-size: 7.15px; }

/* Ciudad — Sugiere un lugar: en caja de papel, con los campos y el botón
   en la paleta. El desplegable de categoría repetía su flecha como patrón
   (una regla de fondo dejaba el background-repeat en "repeat"). */
body.v1 .map-form-primary {
  background: var(--papel-2);
  border-top: 3px solid var(--petroleo);
  padding: 22px 20px 20px;
}
body.v1 .suggest-input,
body.v1 .suggest-textarea,
body.v1 .suggest-form .suggest-select {
  max-width: none;
  border: 1px solid var(--linea);
  background-color: #fff;
  font-size: 14px;
}
body.v1 .suggest-form .suggest-select {
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  color: var(--tinta);
}
body.v1 .suggest-input:focus,
body.v1 .suggest-textarea:focus,
body.v1 .suggest-form .suggest-select:focus { border-color: var(--petroleo); box-shadow: 0 0 0 2px rgba(219,129,45,.18); }
body.v1 .suggest-photo-btn {
  max-width: none;
  border: 1px dashed var(--petroleo);
  color: var(--petroleo);
  background: #fff;
}
body.v1 .suggest-photo-btn:hover { background: rgba(219,129,45,.06); }
body.v1 .suggest-submit {
  max-width: none;
  width: 100%;
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: var(--crema);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
body.v1 .suggest-submit:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
body.v1 .suggest-note { font-size: 12px; color: var(--gray); }

/* Enlaces con forma de botón o de foto (notas de Ciudad, tarjetas de WordPress) */
body.v1 a.btn-gallery-open,
body.v1 a.gallery-single-photo,
body.v1 a.dir2-btn-call { text-decoration: none; }
body.v1 a.gallery-single-photo { display: block; }

/* ——— Pop up de evento (eventos.js) ——— */
.mfa-modal[hidden] { display: none; }
.mfa-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16,21,26,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.mfa-modal-caja {
  position: relative; background: #fff; width: 100%; max-width: 640px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  border-top: 4px solid var(--petroleo);
}
.mfa-modal-cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--tinta); font-size: 18px; cursor: pointer;
}
.mfa-modal-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mfa-modal-cuerpo { padding: 22px 24px 26px; }
.mfa-modal-eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 4px 9px;
  background: var(--petroleo); color: var(--crema, #FEF3E2);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.mfa-modal-titulo {
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 14px; color: var(--tinta, #10151A);
}
.mfa-modal-datos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.mfa-modal-datos li { font-size: 14px; font-weight: 600; color: var(--tinta-2, #2C343C); }
.mfa-modal-datos i { color: var(--petroleo); width: 18px; }
.mfa-modal-secciones section { border-top: 1px solid var(--linea, #DCDAD3); padding-top: 14px; margin-top: 14px; }
.mfa-modal-secciones h3 {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 8px; color: var(--tinta, #10151A);
}
.mfa-modal-texto, .mfa-modal-pendiente { font-size: 15px; line-height: 1.6; color: var(--tinta-2, #2C343C); }
.mfa-modal-texto p { margin: 0 0 10px; }
.mfa-modal-texto ul, .mfa-modal-texto ol { margin: 0 0 10px 1.2em; }
.mfa-evento-detalle, .mfa-evento-especificaciones, .mfa-evento-reglamento { display: none; }
.mfa-evento-ver {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rojo, #C8321B);
}

/* Portada, Lo mejor de la semana: una línea de vista previa por tarjeta */
body.v1 .card-excerpt {
  margin: 4px 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Todas las notas: grilla también en celular (no carrusel) */
body.v1 .mfa-grilla-todas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  overflow: visible;
  scroll-snap-type: none;
}
body.v1 .mfa-grilla-todas > .article-card { width: auto; min-width: 0; flex: none; }
@media (min-width: 600px) and (max-width: 1023px) {
  body.v1 .mfa-grilla-todas { grid-template-columns: repeat(2, 1fr); }
}

/* Botones, campos y desplegables usan la letra del sitio: el navegador les
   pone Arial por defecto y los filtros (Todos, Vacunas…) se veían distintos. */
body.v1 button,
body.v1 input,
body.v1 select,
body.v1 textarea { font-family: inherit; }

/* Fotos de las tarjetas de notas: siempre llenan su recuadro. En WordPress
   la imagen sale sin estilo propio y se veía a tamaño real, recortada. */
body.v1 .article-img { position: relative; overflow: hidden; }
body.v1 .article-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  /* Todas las notas: misma grilla de 4 que el resto del sitio, dentro del
     mismo ancho de contenido. */
  body.v1 #secTodas {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 48px 56px;
  }
  body.v1 #secTodas .filter-row,
  body.v1 #secTodas .art-scroll-wrap { padding-left: 0; padding-right: 0; }
  body.v1 .mfa-grilla-todas { grid-template-columns: repeat(4, 1fr); gap: 1px; }

  /* Las cabeceras de sección parten donde parte "Lo mejor de la semana" en
     la portada: a 48px del borde, con el filete de lado a lado. El contenido
     de cada sección sigue en su columna centrada. (!important: hay reglas
     anteriores con #id que fijaban el ancho de la columna.) */
  html, body.v1 { overflow-x: clip; }
  body.v1 .section-head:not(:has(+ .art-wrap)),
  body.v1 .mag-section-head {
    width: auto !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* Adopción: perros adoptados y enlaces del reverso de la tarjeta */
body.v1 .animal-adoptado {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  padding: 4px 8px; background: var(--tinta); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
body.v1 .animal-card--adoptado .animal-card-img img { filter: grayscale(.55); }
body.v1 .animal-card .flip-back a.animal-foundation { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 2px; }
body.v1 .animal-card .flip-back .animal-adoptar {
  margin-top: 6px; padding: 7px 12px; background: #fff; color: var(--tinta);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
body.v1 .animal-card .flip-back .animal-adoptado-texto { margin-top: 4px; font-size: 12px; font-weight: 800; }


/* ——— Fase 2A ——— */

/* Antetítulo de la portadilla: ahora es texto editable (antes lo ponía el CSS) */
body.v1 .hero-eyebrow { width: max-content; }

/* Introducción opcional de una sección (se escribe en la página) */
body.v1 .mfa-sec-intro { max-width: 46rem; margin: -4px 20px 18px; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
@media (min-width: 1024px) { body.v1 .mfa-sec-intro { margin-left: 0; margin-right: 0; } body.v1 .destacados .mfa-sec-intro { margin: 0 auto 18px; max-width: 1184px; padding: 0; } }

/* Filtros: si no hay subtemas con notas, la fila no se muestra */
body.v1 .filter-row:empty { display: none; }

/* Grillas de notas en páginas que no traían el estilo de tarjeta */
body.v1 .mfa-notas .art-scroll-wrap { position: relative; display: block; padding: 0 20px; }
@media (max-width: 1023px) {
  body.v1 .mfa-notas .art-scroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 12px; }
  body.v1 .mfa-notas .article-card { flex: 0 0 232px; border: 1px solid var(--rojo); }
}
body.v1 .mfa-notas .article-card { background: #fff; overflow: hidden; }
body.v1 .mfa-notas .article-img { width: 100%; height: 136px; position: relative; overflow: hidden; background: #ddd; }
body.v1 .mfa-notas .article-cat-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--rojo); }
body.v1 .mfa-notas .article-body { padding: 14px 16px 16px; }
body.v1 .mfa-notas .article-meta { font-size: 12px; color: #6B7280; margin-bottom: 7px; }
body.v1 .mfa-notas .article-title { font-size: 14px; font-weight: 800; line-height: 1.35; margin: 0 0 6px; }
body.v1 .mfa-notas .article-title a { color: var(--tinta); text-decoration: none; }
body.v1 .mfa-notas .article-footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--linea); padding-top: 11px; }
body.v1 .mfa-notas .btn-read-more { display: flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 700; color: var(--rojo); text-decoration: none; }
@media (min-width: 1024px) {
  body.v1 .destacados .mfa-notas { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  body.v1 .mfa-notas .art-scroll-wrap { padding: 0; }
  body.v1 .mfa-notas .art-scroll .article-img { height: 186px; }
}

/* Inicio: Explora por tema */
body.v1 .mfa-pilares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0 20px; background: var(--linea); border: 1px solid var(--linea); }
body.v1 .mfa-pilar { --c: var(--petroleo); display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 16px; background: #fff; color: var(--tinta); text-decoration: none; border-top: 4px solid var(--c); transition: background .2s; }
body.v1 .mfa-pilar:hover { background: #FBF7F1; }
body.v1 .mfa-pilar-nombre { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
body.v1 .mfa-pilar-desc { font-size: 13px; line-height: 1.45; color: var(--tinta-2); flex: 1; }
body.v1 .mfa-pilar-ir { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); display: inline-flex; gap: 6px; align-items: center; }
body.v1 .mfa-pilar-num { font-size: 12px; color: #6B7280; }
@media (min-width: 1024px) {
  body.v1 .mfa-pilares { grid-template-columns: repeat(4, 1fr); max-width: 1184px; margin: 0 auto; }
  body.v1 .mfa-pilar { padding: 22px 20px 20px; min-height: 168px; }
  body.v1 .mfa-pilar-nombre { font-size: 21px; }
}

/* Salud: ¿Es una urgencia? */
body.v1 .mfa-urgencia { display: flex; flex-direction: column; gap: 16px; margin: 0 20px; padding: 22px 20px; border-left: 6px solid var(--rojo); background: #FBEDEA; }
body.v1 .mfa-urgencia-titulo { font-size: 24px; font-weight: 900; line-height: 1.1; margin: 4px 0 8px; color: var(--tinta); }
body.v1 .mfa-urgencia-texto { font-size: 15px; line-height: 1.5; color: var(--tinta-2); margin: 0; max-width: 40rem; }
body.v1 .mfa-urgencia-btn { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; background: var(--rojo); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
@media (min-width: 1024px) {
  body.v1 .mfa-urgencia { flex-direction: row; align-items: center; justify-content: space-between; margin: 0; padding: 28px 32px; }
  body.v1 .mfa-urgencia-btn { align-self: center; flex-shrink: 0; }
}