/* ============================================================
 * REDESIGN — Capa de overrides visuales sobre style.css.
 * Carga DESPUÉS de style.css.
 *
 * v2 — Ajustes:
 *  · Fix corte descender (g) en .hero__title
 *  · Degradado del hero más visible
 *  · Tarjetas agrarias rediseñadas (gradiente + icono)
 *  · Hover del botón "Contactar" del CTA-banner refinado
 *  · Footer con paleta verde corporativa (no negro plano)
 *
 * Para revertir: quitar la línea
 *   <link rel="stylesheet" href="css/redesign.css?v=1" />
 * o restaurar redesign.backup-v1.css.
 * El style.css original (respaldado en css/style.backup-v26.css)
 * queda intacto.
 * ============================================================ */

/* --------------------- 0. Variables --------------------- */
:root {
  --rd-accent: #00a86b;          /* verde más vivo para hovers / acentos */
  --rd-accent-soft: #e8f7ef;     /* fondo verde muy claro */
  --rd-lime: #c5f04b;            /* lima para detalles puntuales */
  --rd-shadow-sm: 0 2px 8px rgba(0,40,20,.06);
  --rd-shadow-md: 0 8px 24px rgba(0,40,20,.10);
  --rd-shadow-lg: 0 20px 56px rgba(0,40,20,.18);
  --rd-radius: 14px;
  --rd-ease: cubic-bezier(.2, .8, .2, 1);

  /* Paleta footer */
  --rd-footer-dark:   #062e1a;
  --rd-footer-mid:    #0a3d24;
  --rd-footer-deeper: #03200f;
}

/* --------------------- 1. Tipografía global --------------------- */
h1, h2, h3 {
  letter-spacing: -0.01em;
}
h1, .hero__title {
  font-weight: 800 !important;
}

/* --------------------- 2. HERO --------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Degradado MUCHO más visible que la versión anterior */
  background:
    radial-gradient(1200px 600px at 110% -20%, rgba(0,168,107,.32) 0%, rgba(0,168,107,0) 60%),
    radial-gradient(900px 600px at -10% 120%, rgba(0,83,42,.20) 0%, rgba(0,83,42,0) 60%),
    radial-gradient(700px 380px at 50% 0%, rgba(135,197,64,.16) 0%, rgba(135,197,64,0) 70%),
    linear-gradient(180deg, #f0faf4 0%, #e6f5ec 60%, #ffffff 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 28%, rgba(0,83,42,.22) 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 22%, rgba(0,168,107,.26) 50%, transparent 51%),
    radial-gradient(2px 2px at 18% 78%, rgba(0,83,42,.16) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 82%, rgba(0,168,107,.20) 50%, transparent 51%);
  background-repeat: no-repeat;
}
.hero__content {
  animation: rdFadeUp .65s var(--rd-ease) both;
  position: relative;
  z-index: 1;
}

/* Línea-altura amplia para que los descenders (g, j, p, y) no se corten
   y para forzar el título en 3 líneas claras. */
.hero__title {
  line-height: 1.28 !important;
}
/* El rotator (palabra que cambia: negocio / mascota / salud / hogar)
   necesita aún más espacio porque negocio y hogar tienen "g".
   Con inline-grid de style.css base, el descender se solapaba con la
   línea siguiente. */
.hero__word-rotator {
  min-height: 1.4em !important;
  line-height: 1.28 !important;
  padding-bottom: 0.12em;
}
.hero__word {
  line-height: 1.28 !important;
}
.hero__word-rotator .hero__word.is-active {
  background: linear-gradient(90deg, #00532A 0%, #00a86b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__subtitle {
  font-weight: 500;
}
.hero__media {
  animation: rdFadeUp .8s .1s var(--rd-ease) both;
}
.hero__video {
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-lg);
  transition: transform .6s var(--rd-ease);
}
.hero__video:hover {
  transform: translateY(-4px) scale(1.005);
}

/* --------------------- 3. STATS --------------------- */
.stats {
  background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
}
.stats__item {
  transition: transform .3s var(--rd-ease);
}
.stats__item:hover {
  transform: translateY(-3px);
}
.stats__number {
  background: linear-gradient(90deg, #00532A 0%, #00a86b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* --------------------- 4. PROTECTION --------------------- */
.protection {
  background:
    radial-gradient(800px 360px at 100% 0%, rgba(0,168,107,.08) 0%, transparent 60%),
    #ffffff;
}
.protection__media img {
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-md);
  transition: transform .5s var(--rd-ease), box-shadow .5s var(--rd-ease);
}
.protection__media img:hover {
  transform: translateY(-6px);
  box-shadow: var(--rd-shadow-lg);
}
.protection__title {
  font-weight: 800 !important;
}

/* --------------------- 5. PET --------------------- */
.pet {
  background:
    linear-gradient(135deg, #f4faf6 0%, #ffffff 100%);
}
.pet__media img,
.pet__container > .pet__media img {
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-md);
}

/* --------------------- 6. AGRO CARDS (REDISEÑADAS) --------------------- */
.agro {
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(0,168,107,.10) 0%, transparent 55%),
    radial-gradient(700px 360px at 0% 100%, rgba(0,83,42,.08) 0%, transparent 60%),
    linear-gradient(180deg, #f6fbf8 0%, #ffffff 100%) !important;
}

.agro-card {
  position: relative;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  border: 1px solid #e2ecde;
  box-shadow: 0 6px 18px rgba(0,40,20,.05);
  padding: 38px 28px 28px !important;
  transition:
    transform .4s var(--rd-ease),
    box-shadow .4s var(--rd-ease),
    border-color .4s var(--rd-ease);
  overflow: hidden;
}
/* Borde superior gradiente PERMANENTE (no solo hover) */
.agro-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #00532A 0%, #00a86b 55%, var(--rd-lime) 100%);
  opacity: 1;
}
/* Glow sutil en esquina al hover */
.agro-card::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,107,.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--rd-ease);
  pointer-events: none;
}
.agro-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(0,40,20,.18);
  border-color: transparent;
}
.agro-card:hover::after {
  opacity: 1;
}
/* Icono: contenedor plano (sin look 3D) — fondo verde corp suave + icono verde */
.agro-card__icon {
  position: relative;
  background: var(--rd-accent-soft) !important;
  color: #00532A !important;
  box-shadow: none !important;
  transition: transform .35s var(--rd-ease), background-color .35s var(--rd-ease), color .35s var(--rd-ease) !important;
  z-index: 1;
}
.agro-card:hover .agro-card__icon {
  background: #00532A !important;
  color: #ffffff !important;
  transform: scale(1.04);
}
/* Variante --svg: usa los iconos de /svg/agro-*.svg (que YA traen su
 * fondo circular y trazado verde). Anulamos el fondo del contenedor
 * para que se vea el SVG completo, y agrandamos un poco. */
.agro-card__icon.agro-card__icon--svg {
  background: transparent !important;
  width: 84px !important;
  height: 84px !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.agro-card__icon.agro-card__icon--svg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .35s var(--rd-ease);
}
.agro-card:hover .agro-card__icon.agro-card__icon--svg {
  background: transparent !important;
  transform: none;
}
.agro-card:hover .agro-card__icon.agro-card__icon--svg img {
  transform: scale(1.08) rotate(-2deg);
}
.agro-card__title {
  color: #003a1d !important;
}

/* Foto bajo el título */
.agro-card__photo {
  margin: 0 0 18px;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #e8f7ef 0%, #d3eedd 100%);
  position: relative;
}
.agro-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--rd-ease);
}
.agro-card:hover .agro-card__photo img {
  transform: scale(1.05);
}

/* --------------------- 7. NOTICIAS — Home --------------------- */
/* Las 4 noticias pequeñas se reparten verticalmente hasta igualar
   la altura de la destacada (cada una ocupa 1/4 de la columna). */
.news__grid {
  align-items: stretch !important;
}
.news-featured {
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-md);
  background: #ffffff;
  transition: transform .4s var(--rd-ease), box-shadow .4s var(--rd-ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.news-featured__link {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.news-featured:hover {
  transform: translateY(-6px);
  box-shadow: var(--rd-shadow-lg);
}
.news-featured__image {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  transition: transform .6s var(--rd-ease);
}
.news-featured:hover .news-featured__image {
  transform: scale(1.04);
}
/* Padding interior del cuerpo del destacado (antes se pegaba al borde) */
.news-featured__body {
  padding: 26px 30px 28px !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  box-sizing: border-box;
}
/* "Ver noticia" del destacado: aligned al inicio, sin desbordarse */
.news-featured__more {
  align-self: flex-start;
  margin-top: 10px !important;
}

/* Lista lateral: flex column que estira cada item a 1/4 de la altura */
.news-list {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  gap: 14px !important;
}
.news-item {
  flex: 1 1 0;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  transition: background-color .3s var(--rd-ease), transform .3s var(--rd-ease), box-shadow .3s var(--rd-ease), border-color .3s var(--rd-ease);
  background: #ffffff;
  border: 1px solid #ecf1ee;
}
.news-item:hover {
  background-color: var(--rd-accent-soft);
  transform: translateX(4px);
  box-shadow: var(--rd-shadow-sm);
  border-color: transparent;
}
/* Layout interno del item: foto a la izquierda, body + botón a la derecha */
.news-item__link {
  grid-template-columns: 170px 1fr !important;
  gap: 16px !important;
  height: 100%;
  align-items: stretch !important;
  padding: 12px 16px 12px 12px;
}
.news-item__image {
  width: 170px !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 100px;
  object-fit: cover;
  border-radius: 10px !important;
  transition: transform .4s var(--rd-ease);
  align-self: center;
}
.news-item:hover .news-item__image {
  transform: scale(1.04);
}
.news-item__body {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 2px 0;
}
.news-item__title {
  font-size: 0.98rem !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
}
.news-item__meta {
  margin: 0 0 8px !important;
}
/* Botón "Ver noticia" en cada item — vía pseudo con i18n */
.news-item__body::after {
  content: "Ver noticia →";
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #00532A;
  background: rgba(0,168,107,.10);
  border: 1px solid rgba(0,168,107,.30);
  border-radius: 999px;
  transition: background .25s var(--rd-ease), color .25s var(--rd-ease), transform .25s var(--rd-ease), box-shadow .25s var(--rd-ease), border-color .25s var(--rd-ease);
}
:lang(en) .news-item__body::after { content: "Read article →"; }
:lang(pt) .news-item__body::after { content: "Ver notícia →"; }
.news-item:hover .news-item__body::after {
  background: linear-gradient(135deg, #00532A 0%, #003a1d 100%);
  color: #ffffff;
  border-color: transparent;
  transform: translateX(2px);
  box-shadow: 0 8px 16px -6px rgba(0,83,42,.45);
}

@media (max-width: 768px) {
  .news-item__link {
    grid-template-columns: 110px 1fr !important;
  }
  .news-item__image {
    width: 110px !important;
    min-height: 80px;
  }
  .news-item__body::after {
    font-size: 0.72rem;
    padding: 5px 11px;
  }
}

/* --------------------- 8. PRENSA — Listing --------------------- */
.press-card {
  border-radius: var(--rd-radius);
  overflow: hidden;
  background: #ffffff !important;
  border: 1px solid #e5ebe7;
  box-shadow: var(--rd-shadow-sm);
  transition: transform .35s var(--rd-ease), box-shadow .35s var(--rd-ease), border-color .35s var(--rd-ease);
}
.press-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--rd-shadow-lg);
  border-color: transparent;
}
/* Imagen pegada arriba sin esquinas propias (asume las del card) */
.press-card__media {
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: 16 / 10;
}
.press-card__image {
  transition: transform .5s var(--rd-ease);
}
.press-card:hover .press-card__image {
  transform: scale(1.05);
}
/* Cuerpo del card: padding generoso, gap entre elementos */
.press-card__body {
  padding: 20px 22px 22px !important;
  gap: 4px;
}
.press-card__meta {
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center;
  gap: 10px !important;
}
/* Chip categoría — verde claro, igual estilo que en el detalle */
.press-card__cat {
  display: inline-block;
  padding: 4px 11px;
  background: var(--rd-accent-soft);
  color: #00532A !important;
  border-radius: 999px;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.press-card__sep {
  color: #c8cfca !important;
}
.press-card__date {
  font-size: 0.78rem;
  color: #6b6b6b !important;
  font-weight: 500;
}
.press-card__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  color: #00321a !important;
}
.press-card__excerpt {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: #5a5a5a !important;
  margin: 0 0 16px !important;
}
.press-card__more {
  transition: gap .3s var(--rd-ease), color .3s var(--rd-ease), background .3s var(--rd-ease), transform .3s var(--rd-ease), box-shadow .3s var(--rd-ease), border-color .3s var(--rd-ease) !important;
  margin-top: auto;
  background: rgba(0,168,107,.10) !important;
  color: #00532A !important;
  border: 1px solid rgba(0,168,107,.32) !important;
}
.press-card__more svg {
  stroke: currentColor;
  transition: transform .25s var(--rd-ease) !important;
}
/* Hover limpio: verde corp sólido con texto blanco e icono blanco */
.press-card:hover .press-card__more,
.press-card__link:hover .press-card__more {
  background: linear-gradient(135deg, #00a86b 0%, #00532A 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  gap: 10px !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(0,83,42,.55) !important;
}
.press-card:hover .press-card__more svg,
.press-card__link:hover .press-card__more svg {
  stroke: #ffffff !important;
  transform: translateX(3px);
}
/* Etiqueta "admin" sobre la imagen: pill semitransparente */
.press-card__author {
  background: rgba(0,0,0,.60) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
}

/* --------------------- 9. MEGAMENU items --------------------- */
.megamenu__item {
  border-radius: 10px;
  transition: background-color .25s var(--rd-ease), transform .25s var(--rd-ease);
  position: relative;
}
.megamenu__item:hover {
  background-color: var(--rd-accent-soft);
  transform: translateX(2px);
}
.megamenu__item-icon {
  transition: color .3s var(--rd-ease), transform .3s var(--rd-ease);
}
.megamenu__item:hover .megamenu__item-icon {
  color: var(--rd-accent);
  transform: scale(1.06);
}

/* Títulos de columna del megamenu: ahora son enlaces al hub completo
   y se animan elegantemente al hover. Aplica a Particulares / Autónomos / Empresas. */
.megamenu__column-title {
  display: block !important;
  text-align: center;
  transform-origin: center bottom;
  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1),
    letter-spacing .35s cubic-bezier(.2, .8, .2, 1) !important;
  cursor: pointer;
}
.megamenu__column-title a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  transition: color .25s var(--rd-ease), background-color .25s var(--rd-ease);
}
/* Color por columna heredando el coloreado existente del megamenu */
.megamenu--products .megamenu__column:nth-child(1) .megamenu__column-title a:hover {
  color: var(--color-primary);
  background-color: rgba(135, 197, 64, 0.10);
}
.megamenu--products .megamenu__column:nth-child(2) .megamenu__column-title a:hover {
  color: var(--color-mapfre-red);
  background-color: rgba(227, 6, 19, 0.08);
}
.megamenu--products .megamenu__column:nth-child(3) .megamenu__column-title a:hover {
  color: var(--color-mapfre-blue);
  background-color: rgba(0, 38, 99, 0.08);
}
/* La columna entera (cuando pasas el ratón por la columna) anima el title */
.megamenu__column:hover .megamenu__column-title {
  transform: scale(1.08);
  letter-spacing: 0.06em;
}

/* --------------------- 10. HEADER --------------------- */
.site-header {
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(255,255,255,.92);
}
.site-nav__link {
  position: relative;
  transition: color .25s var(--rd-ease);
}
.site-nav__link:not(.site-nav__link--toggle)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00532A 0%, #00a86b 100%);
  transition: width .3s var(--rd-ease), left .3s var(--rd-ease);
  border-radius: 2px;
}
.site-nav__link:not(.site-nav__link--toggle):hover::after {
  width: 70%;
  left: 15%;
}

/* --------------------- 11. BOTONES --------------------- */
.btn {
  transition: transform .25s var(--rd-ease), box-shadow .25s var(--rd-ease), background-color .25s var(--rd-ease), color .25s var(--rd-ease) !important;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* --------------------- 12. ANIMACIÓN base --------------------- */
@keyframes rdFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal-on-scroll suave para todas las secciones */
.protection,
.pet,
.agro,
.news,
.press {
  animation: rdSectionFade .6s var(--rd-ease) both;
}
@keyframes rdSectionFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------- 13. NEWS ARTICLE (página de detalle) --------------------- */

/* HERO de la noticia: más alto, overlay con más profundidad,
   alineación inferior para que el título "pise" la imagen menos. */
.news-article__hero {
  min-height: 440px !important;
  display: flex;
  align-items: flex-end;
}
.news-article__hero::before {
  background: linear-gradient(180deg, rgba(0,30,15,.20) 0%, rgba(0,30,15,.55) 60%, rgba(0,30,15,.85) 100%) !important;
}
.news-article__hero-inner {
  padding: 80px 24px 60px !important;
}
.news-article__category {
  display: inline-block !important;
  padding: 6px 14px;
  background: var(--rd-accent);
  border-radius: 999px;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-bottom: 18px !important;
  opacity: 1 !important;
}
.news-article__hero-title {
  font-size: clamp(28px, 4.2vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  margin-bottom: 18px !important;
}
.news-article__hero-meta {
  font-size: 14px !important;
  color: rgba(255,255,255,.92) !important;
}

/* Breadcrumb-bar más sutil — degradado verde corp */
.news-article__breadcrumb-bar {
  background: linear-gradient(90deg, #00532A 0%, #00773C 100%) !important;
  padding: 22px 0 24px !important;
}
.news-article__breadcrumb-title {
  display: none !important; /* redundante con el hero-title */
}
.news-article__breadcrumb {
  font-size: 14px !important;
}
.news-article__breadcrumb-current {
  color: #c5f04b !important;
}

/* Layout: 1 sola columna (sidebar oculto), centrado y con max-width
   pensado para lectura cómoda. */
.news-article__layout {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 860px !important;
  padding: 56px 24px 80px !important;
  gap: 0 !important;
}
.news-article__sidebar {
  display: none !important;
}

/* Lead figure: foto grande con sombra y esquinas */
.news-article__lead-figure {
  margin: 0 0 32px !important;
  border-radius: var(--rd-radius) !important;
  overflow: hidden;
  box-shadow: var(--rd-shadow-lg);
  background: #f3f3f3;
}
.news-article__lead-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fecha como chip verde claro */
.news-article__date {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--rd-accent-soft);
  color: #00532A !important;
  font-size: 13px !important;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(0,168,107,.25);
  margin: 0 0 26px !important;
}
.news-article__date::before {
  content: "📅" !important;
}

/* Cuerpo del artículo: tipografía más ancha y respirable */
.news-article__body {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2a2a2a !important;
}
.news-article__body p {
  margin: 0 0 22px !important;
}
.news-article__body strong {
  color: #00532A !important;
  font-weight: 700 !important;
}
.news-article__body h2,
.news-article__body h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: #00321a !important;
  margin: 40px 0 16px !important;
  padding-left: 16px;
  border-left: 4px solid var(--rd-accent);
}
.news-article__body ul li::marker,
.news-article__body ol li::marker {
  color: var(--rd-accent);
}
.news-article__body blockquote {
  margin: 28px 0 !important;
  padding: 22px 26px !important;
  border-left: 5px solid var(--rd-accent) !important;
  background: linear-gradient(90deg, var(--rd-accent-soft) 0%, transparent 100%);
  border-radius: 0 12px 12px 0;
  font-size: 18px;
  font-style: italic;
  color: #2a2a2a !important;
  position: relative;
}
.news-article__body blockquote::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 16px;
  font-size: 56px;
  color: var(--rd-accent);
  opacity: 0.35;
  font-family: Georgia, serif;
  line-height: 1;
}
.news-article__body a {
  color: var(--rd-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .2s var(--rd-ease);
}
.news-article__body a:hover {
  color: #00532A !important;
}

/* Contenido embebido del editor (iframes/img/video). Sin esto, un iframe
 * pegado desde YouTube con width="560" height="315" se renderiza fijo a
 * 560px y un iframe con CSS `position:absolute;width:100%;height:100%`
 * (codigo responsive de WordPress) ocupa toda la pantalla por encima del
 * resto del articulo. Capamos a la anchura de la columna y forzamos
 * aspect-ratio 16:9. */
.news-article__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
  border-radius: 12px;
}
.news-article__body iframe,
.news-article__body video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 24px auto;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--rd-shadow-md);
  position: static !important;
}
/* Wrappers responsive que mete el editor (WordPress/TinyMCE). El truco
 * tradicional usa padding-bottom + iframe absoluto. Si esos wrappers
 * llegan con height:0 y el iframe absoluto, el aspect-ratio del iframe
 * no puede aplicarse. Reseteamos. */
.news-article__body .wp-block-embed,
.news-article__body .wp-block-embed__wrapper,
.news-article__body .responsive-embed,
.news-article__body .embed-responsive,
.news-article__body figure.wp-block-embed {
  position: static !important;
  padding: 0 !important;
  height: auto !important;
  max-width: 100%;
  margin: 24px auto;
}
/* Vídeo embebido (.news-article__video): sombra + esquinas */
.news-article__video {
  border-radius: 12px !important;
  box-shadow: var(--rd-shadow-md);
}

/* ============================================================
 * CARRUSEL DE LA GALERÍA (potenciado por js/news-carousel.js)
 * ============================================================ */

.news-carousel {
  position: relative;
  margin: 40px 0 0;
  border-radius: var(--rd-radius);
  overflow: hidden;
  box-shadow: var(--rd-shadow-lg);
  outline: none;
  background: #000;
}
.news-carousel:focus-visible {
  box-shadow: var(--rd-shadow-lg), 0 0 0 3px var(--rd-accent);
}

.news-carousel__track {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0 !important;
  margin: 0 !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.news-carousel__track::-webkit-scrollbar { display: none; }

.news-carousel__track > figure {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  background: #000;
}
.news-carousel__track > figure:hover {
  transform: none !important;
  box-shadow: none !important;
}
.news-carousel__track img {
  display: block !important;
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Flechas */
.news-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: #00532A;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: background .2s var(--rd-ease), transform .2s var(--rd-ease), opacity .2s var(--rd-ease);
}
.news-carousel__arrow:hover {
  background: #00532A;
  color: #ffffff;
  transform: translateY(-50%) scale(1.05);
}
.news-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.news-carousel__arrow svg {
  width: 22px;
  height: 22px;
}
.news-carousel__arrow--prev { left: 16px; }
.news-carousel__arrow--next { right: 16px; }

/* Contador 1/N */
.news-carousel__counter {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  user-select: none;
}

/* Dots */
.news-carousel__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  max-width: 80%;
  overflow-x: auto;
  scrollbar-width: none;
}
.news-carousel__dots::-webkit-scrollbar { display: none; }
.news-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background .2s var(--rd-ease), transform .2s var(--rd-ease), width .2s var(--rd-ease);
}
.news-carousel__dot:hover { background: rgba(255,255,255,.85); }
.news-carousel__dot.is-active {
  background: var(--rd-lime);
  width: 24px;
  border-radius: 999px;
}

/* Modo "single" — galería con una sola foto: limpio, sin controles */
.news-carousel--single .news-carousel__track img {
  height: auto !important;
  max-height: 600px;
  object-fit: contain !important;
  background: #f3f3f3;
}

@media (max-width: 768px) {
  .news-carousel__track img { height: 320px !important; }
  .news-carousel__arrow { width: 42px; height: 42px; }
  .news-carousel__arrow--prev { left: 10px; }
  .news-carousel__arrow--next { right: 10px; }
}

/* Asegurar que el header siempre se vea correctamente sobre la
   página de noticia (defensivo: si algún estilo previo lo rompiera). */
body.news-article-page .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
}
/* FIX: el body global tiene padding-top:104px para compensar el
 * header fijo. Cuando el header de la pagina de noticia era sticky
 * (en flujo) ese padding sobraba y dejaba una franja del gradiente
 * verde corporativo visible arriba. Ahora el header es fixed igual
 * que en el resto del sitio, asi que el padding es correcto y la
 * franja desaparece. */

/* --------------------- 14. FOOTER (NEGRO + WHITE TEXT + SITEMAP) --------------------- */

/* Fondo: negro puro con un degradado muy sutil para dar profundidad. */
.site-footer {
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(0,168,107,.06) 0%, transparent 60%),
    radial-gradient(700px 420px at 85% 100%, rgba(135,197,64,.05) 0%, transparent 65%),
    #000000 !important;
  color: #ffffff !important;
}

/* Línea superior verde — fina y con brillo */
.site-footer__cta-banner::before {
  height: 4px !important;
  background: linear-gradient(90deg, #00532A 0%, #00a86b 35%, #c5f04b 65%, #00a86b 100%) !important;
  box-shadow: 0 0 18px rgba(0,168,107,.55);
}

/* Banner CTA: gradiente verde corporativo sobre negro */
.site-footer__cta-banner {
  background:
    radial-gradient(ellipse at top right, rgba(0,168,107,.22) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(135,197,64,.10) 0%, transparent 65%),
    linear-gradient(135deg, #0d0d0d 0%, #000000 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Pill eyebrow */
.site-footer__cta-eyebrow {
  background: rgba(0,168,107,.22) !important;
  border: 1px solid rgba(0,168,107,.40);
  color: #cdf2dd !important;
}

/* Título CTA — gradiente blanco→lima muy sutil */
.site-footer__cta-title {
  background: linear-gradient(90deg, #ffffff 0%, #cdf2dd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Botón primario "Contactar" — blanco con texto negro, hover verde */
.site-footer__cta-btn--primary {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow:
    0 10px 24px -8px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10) !important;
}
.site-footer__cta-btn--primary:hover {
  background: #00a86b !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px -8px rgba(0,168,107,.55),
    0 0 0 1px rgba(0,168,107,.40) !important;
}

/* Botón ghost (teléfono) — borde claro sobre negro */
.site-footer__cta-btn--ghost {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}
.site-footer__cta-btn--ghost:hover {
  background: rgba(0,168,107,.22) !important;
  border-color: rgba(0,168,107,.6) !important;
  transform: translateY(-2px);
}

/* Banda brand: divisor más sutil */
.site-footer__brand-row {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.site-footer__brand-inner {
  padding: 36px var(--container-padding) !important;
}
/* Logos sin caja blanca — fondo transparente */
.site-footer__logos {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.site-footer__tagline {
  color: rgba(255,255,255,.75) !important;
  font-size: 0.92rem !important;
}
.site-footer__tagline strong {
  color: #ffffff !important;
}

/* Sociales — círculos sutiles, verde al hover */
.site-footer__socials a {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14);
  color: #ffffff !important;
  transition: background .25s var(--rd-ease), border-color .25s var(--rd-ease), transform .25s var(--rd-ease), color .25s var(--rd-ease);
}
.site-footer__socials a:hover {
  background: rgba(0,168,107,.28) !important;
  border-color: rgba(0,168,107,.65);
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Container del sitemap: pasamos a 4 columnas más anchas */
.site-footer__container {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 36px !important;
  padding: 56px 24px 48px !important;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
}
@media (max-width: 1024px) {
  .site-footer__container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px 32px !important;
  }
}
@media (max-width: 560px) {
  .site-footer__container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Títulos de columna: blanco, en mayúsculas, con barra verde→lima debajo */
.site-footer__col-title {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.10em !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px;
  position: relative;
}
.site-footer__col-title::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 32px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #00a86b 0%, #c5f04b 100%) !important;
  border-radius: 3px;
}

/* Sub-título de columna (para footer con varias secciones dentro de una col) */
.site-footer__col-title--sub {
  margin-top: 28px !important;
  font-size: 12px !important;
  color: #c5f04b !important;
}
.site-footer__col-title--sub::after {
  background: rgba(197,240,75,.45) !important;
  width: 24px !important;
}

/* Links del footer — gris claro, lima al hover */
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.site-footer__links a {
  color: rgba(255,255,255,.68) !important;
  font-size: 14px;
  text-decoration: none;
  transition: color .2s var(--rd-ease), transform .2s var(--rd-ease);
  display: inline-block;
}
.site-footer__links a:hover {
  color: #c5f04b !important;
  transform: translateX(4px);
}

/* Direcciones — texto blanco translúcido, headline en lima */
.site-footer__office {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-footer__office:first-of-type {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.site-footer__office-name {
  color: #c5f04b !important;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.site-footer__office-map {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
  margin-top: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: color .2s var(--rd-ease);
}
.site-footer__office-map:hover {
  color: #c5f04b !important;
}

/* Bottom strip — más oscuro */
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.45) !important;
}
.site-footer__bottom-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer__copy {
  color: rgba(255,255,255,.55) !important;
  font-size: 13px;
  margin: 0;
}
.site-footer__copy strong {
  color: rgba(255,255,255,.85) !important;
}
.site-footer__copy--mapfre strong {
  color: var(--color-mapfre-red) !important;
}

/* Botón back-to-top — oculto a petición del cliente */
.site-footer__back-to-top {
  display: none !important;
}

/* --------------------- 15. BRAND BAR --------------------- */
.brand-bar {
  background: linear-gradient(90deg, #f4faf6 0%, #ffffff 50%, #f4faf6 100%);
}

/* ============================================================
 * 16. HUB PAGES (Particulares / Autónomos / Empresas)
 *     Layout: hero split (texto izq + foto der) y cards detalladas.
 *     Tematizado vía var(--hub-color) que ya define style.css por body.
 * ============================================================ */

/* Tints derivados del color del hub para fondos y sombras */
.hub--particulares {
  --hub-soft:   rgba(135, 197, 64, .14);
  --hub-bg:     #e8f7ef;
  --hub-shadow: rgba(0, 83, 42, .35);
}
.hub--autonomos {
  --hub-soft:   rgba(227, 6, 19, .12);
  --hub-bg:     #fbe5e7;
  --hub-shadow: rgba(227, 6, 19, .30);
}
.hub--empresas {
  --hub-soft:   rgba(0, 38, 99, .10);
  --hub-bg:     #e5ebf3;
  --hub-shadow: rgba(0, 38, 99, .30);
}

/* Hero del hub — split: texto izquierda, media derecha */
.hub-hero {
  padding: 64px 0 32px !important;
  position: relative;
}
.hub-hero__bg {
  /* el fondo a todo lo ancho lo dejamos como tint suave del color del hub */
  background: linear-gradient(180deg, var(--hub-bg) 0%, #ffffff 100%) !important;
  opacity: 1 !important;
}
.hub-hero__container {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  grid-template-areas:
    "body media"
    "products products" !important;
  gap: 48px !important;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 900px) {
  .hub-hero__container {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "body"
      "media"
      "products" !important;
    gap: 28px !important;
  }
}
.hub-hero__body {
  grid-area: body;
  text-align: left !important;
  max-width: none !important;
}
.hub-hero__media {
  grid-area: media;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: #f0f3ef;          /* fallback gris muy claro mientras carga */
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px var(--hub-shadow);
}
/* Imagen real sin filtro de color — se ve tal cual la subiste */
.hub--particulares .hub-hero__media { background-image: url('/img/imagen-hub-particulares.webp'); }
.hub--autonomos    .hub-hero__media { background-image: url('/img/imagen-hub-autonomos.webp');    }
.hub--empresas     .hub-hero__media { background-image: url('/img/imagen-hub-empresas.webp');      }
.hub-products {
  grid-area: products;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  list-style: none;
  padding: 0;
  margin: 24px 0 0 !important;
}
@media (max-width: 980px) {
  .hub-products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .hub-products { grid-template-columns: 1fr !important; }
}

.hub-hero__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--hub-soft);
  color: var(--hub-color, #00532A) !important;
  border-radius: 999px;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.hub-hero__title {
  font-size: clamp(2rem, 3.6vw, 2.9rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--hub-color, #00321a) !important;
  margin: 0 0 18px;
  line-height: 1.12;
}
.hub-hero__body p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #4a4a4a;
  max-width: 620px;
  margin: 0 0 14px;
}

/* --- Cards de producto detalladas --- */
.hub-product {
  background: #ffffff;
  border: 1px solid #e5ebe7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,40,20,.05);
  transition: transform .4s var(--rd-ease), box-shadow .4s var(--rd-ease), border-color .4s var(--rd-ease);
  position: relative;
}
.hub-product::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hub-color) 0%, var(--hub-color) 100%);
  opacity: 0;
  transition: opacity .3s var(--rd-ease);
}
.hub-product:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px var(--hub-shadow, rgba(0,40,20,.14));
  border-color: transparent;
}
.hub-product:hover::before {
  opacity: 1;
}

.hub-product__link {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  gap: 18px !important;
  align-items: flex-start !important;
  padding: 22px 22px 22px !important;
  text-decoration: none;
  color: inherit;
  background: transparent !important;
  border-radius: 0 !important;
  height: 100%;
}
.hub-product__link:hover {
  background: transparent !important;
}
.hub-product__link::after {
  display: none !important;
}

/* Icono con tint del color del hub; al hover se invierte */
.hub-product__icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: var(--hub-soft, rgba(135,197,64,.14)) !important;
  color: var(--hub-color, #00532A) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .3s var(--rd-ease), color .3s var(--rd-ease), transform .3s var(--rd-ease);
}
.hub-product__icon svg {
  width: 32px;
  height: 32px;
}
.hub-product:hover .hub-product__icon {
  background: var(--hub-color, #00532A) !important;
  color: #ffffff !important;
  transform: scale(1.05) rotate(-3deg);
}

.hub-product__body {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hub-product__title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .25s var(--rd-ease);
}
.hub-product__title::after {
  content: "→";
  display: inline-block;
  color: var(--hub-color);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--rd-ease), transform .3s var(--rd-ease);
  font-weight: 700;
}
.hub-product:hover .hub-product__title {
  color: var(--hub-color, #00a86b) !important;
}
.hub-product:hover .hub-product__title::after {
  opacity: 1;
  transform: translateX(2px);
}
.hub-product__desc {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: #555 !important;
}

/* CTA inferior del hub — tematizado */
.hub-cta {
  background: linear-gradient(180deg, #ffffff 0%, var(--hub-bg, #f4faf6) 100%) !important;
  padding: 56px 0 !important;
}
.hub-cta__title {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
  color: var(--hub-color, #00321a) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* Wave divider — color negro coherente con el footer */
.hub-wave svg path {
  fill: #000000;
}

/* ============================================================
 * 17. PRODUCT DETAIL HERO (más vertical, con foto de fondo)
 * ============================================================ */

/* Hero del producto: más alto, foto a sangre, overlay tematizado.
   La foto se pasa como inline style:
     <section class="product-hero" style="background-image:url('/img/X.png');"> */
.product-hero {
  min-height: 460px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}

/* Componentes RGB del color de la sección, para poder usarlos en rgba(). */
.product--particulares { --hub-rgba: 0, 83, 42;   } /* verde corp */
.product--autonomos    { --hub-rgba: 227, 6, 19;  } /* rojo MAPFRE */
.product--empresas     { --hub-rgba: 0, 38, 99;   } /* azul navy MAPFRE */

/* Pequeño degradado del color del hub de IZQUIERDA → derecha.
   Se aprecia en el tercio izquierdo y se funde con la foto a partir del 65%. */
.product-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(var(--hub-rgba, 0,0,0), .65) 0%,
    rgba(var(--hub-rgba, 0,0,0), .30) 35%,
    rgba(var(--hub-rgba, 0,0,0), 0)   65%
  ) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.product-hero__title {
  position: relative !important;
  z-index: 1 !important;
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  text-align: center !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.40);
  padding: 70px 24px !important;
  max-width: 900px;
  line-height: 1.15 !important;
}

@media (max-width: 768px) {
  .product-hero { min-height: 360px !important; }
}

/* ============================================================
 * 18. CTA banner — fondo VERDE con gradiente que se mueve
 * ============================================================ */
@keyframes rdCtaShift {
  0%   { background-position:   0% 50%, 100% 50%,   0% 100%; }
  50%  { background-position: 100% 50%,   0% 50%, 100%   0%; }
  100% { background-position:   0% 50%, 100% 50%,   0% 100%; }
}
.site-footer__cta-banner {
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(135,197,64,.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 70% 50%, rgba(197,240,75,.28) 0%, transparent 65%),
    linear-gradient(135deg, #003a1d 0%, #00532A 35%, #007a3d 70%, #003a1d 100%) !important;
  background-size: 200% 200%, 200% 200%, 300% 300% !important;
  animation: rdCtaShift 14s ease-in-out infinite !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  padding: 56px 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__cta-banner { animation: none !important; }
}
.site-footer__cta-banner::before {
  display: none !important; /* quitamos la línea superior verde-lima, ahora el banner ya es verde */
}
.site-footer__cta-banner::after {
  background: radial-gradient(circle at center, rgba(197,240,75,.18) 0%, transparent 65%) !important;
}
.site-footer__cta-inner {
  align-items: center !important;
}
.site-footer__cta-eyebrow {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22);
  color: #c5f04b !important;
  font-size: 0.72rem !important;
  padding: 5px 14px !important;
}
.site-footer__cta-title {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
}
.site-footer__cta-btn--primary {
  background: #c5f04b !important;
  color: #00321a !important;
  box-shadow:
    0 10px 24px -8px rgba(197,240,75,.45),
    0 0 0 1px rgba(197,240,75,.30) !important;
}
.site-footer__cta-btn--primary:hover {
  background: #ffffff !important;
  color: #00532A !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px -8px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.30) !important;
}
.site-footer__cta-btn--ghost {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}
.site-footer__cta-btn--ghost:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.50) !important;
  transform: translateY(-2px);
}

/* ============================================================
 * 19. FAQ — animación suave de apertura/cierre
 *     Compatible con el initFAQ() que ya añade la clase .is-animating
 *     y modifica max-height en JS.
 * ============================================================ */
/* FAQ — animacion fluida de apertura / cierre.
 *  - max-height anima en 500ms (suficientemente lenta para verse)
 *  - opacity y translateY del body fade en sincronia
 *  - el +/- rota a × con un giro de 180deg con curva ease-back
 *  - el item se eleva con sombra cuando se abre
 */
.faq__item {
  background: #ffffff !important;
  border: 1px solid #e2ecde !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition:
    border-color .35s var(--rd-ease),
    box-shadow .35s var(--rd-ease),
    transform .35s var(--rd-ease);
}
.faq__item:hover {
  border-color: rgba(0,168,107,.32) !important;
  box-shadow: 0 6px 18px rgba(0,40,20,.06);
}
.faq__item[open] {
  border-color: var(--hub-color, var(--rd-accent)) !important;
  box-shadow: 0 14px 32px -10px rgba(0,40,20,.18);
}

.faq__summary {
  position: relative;
  padding: 20px 24px !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  color: #1a2620 !important;
  transition:
    color .3s var(--rd-ease),
    background-color .3s var(--rd-ease) !important;
}
.faq__summary:hover {
  color: var(--hub-color, var(--rd-accent)) !important;
  background: rgba(0, 83, 42, .03);
}
.faq__item[open] .faq__summary {
  color: var(--hub-color, var(--rd-accent)) !important;
}

/* Icono +/- en circulo, rota 180deg al abrir, cambia de hueco a relleno */
.faq__summary::after {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  border: 2px solid var(--hub-color, var(--rd-accent)) !important;
  background: transparent;
  color: var(--hub-color, var(--rd-accent)) !important;
  font-size: 20px !important;
  font-weight: 700;
  transition:
    transform .5s cubic-bezier(.34, 1.4, .64, 1),
    background-color .35s var(--rd-ease),
    color .35s var(--rd-ease) !important;
}
.faq__item[open] .faq__summary::after {
  transform: rotate(180deg) scale(1.05);
  background: var(--hub-color, var(--rd-accent)) !important;
  color: #ffffff !important;
}

/* Body: max-height animado por JS (initFAQ) + fade-slide simultaneo.
 * Cuando JS pone .is-animating, max-height transiciona suavemente.
 * Cuando el item esta [open] sin is-animating (estado estable),
 * el body se muestra al 100%. Cuando se cierra, max-height vuelve a 0. */
.faq__body {
  padding: 0 24px 24px !important;
  color: #4a5a52 !important;
  line-height: 1.7 !important;
  transition:
    opacity .45s var(--rd-ease),
    transform .45s var(--rd-ease);
  transform-origin: top;
}
.faq__item:not([open]) .faq__body {
  opacity: 0;
  transform: translateY(-8px);
}
.faq__item[open] .faq__body {
  opacity: 1;
  transform: translateY(0);
}
.faq__item.is-animating .faq__body {
  overflow: hidden;
  transition:
    max-height .5s cubic-bezier(.2, .8, .2, 1),
    opacity .45s var(--rd-ease),
    transform .45s var(--rd-ease) !important;
}

/* ============================================================
 * 20. Carrusel de noticias — imágenes ENTERAS (object-fit: contain)
 *     El track conserva altura y fondo negro; con contain las fotos
 *     se ven completas con banda negra cuando hace falta.
 * ============================================================ */
.news-carousel__track img {
  object-fit: contain !important;
  background: #000;
}
.news-carousel--single .news-carousel__track img {
  object-fit: contain !important;
  max-height: 600px !important;
}

/* Carrusel al inicio del artículo: separación con el cuerpo */
.news-article__main > .news-carousel,
.news-article__main > .news-article__gallery {
  margin: 0 0 32px !important;
}

/* ============================================================
 * 21. Botón "Ver todas las noticias" en home, centrado
 * ============================================================ */
.news__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.news__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #00532A 0%, #003a1d 100%);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(0,83,42,.55);
  transition: gap .25s var(--rd-ease), transform .25s var(--rd-ease), box-shadow .25s var(--rd-ease), background .25s var(--rd-ease);
}
.news__more-btn svg {
  width: 18px;
  height: 18px;
  transition: transform .25s var(--rd-ease);
}
.news__more-btn {
  transition:
    transform .35s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .35s var(--rd-ease),
    color .25s var(--rd-ease) !important;
}
/* Hover: scale-up suave + texto y flecha en verde lima (sobre el fondo
   verde oscuro). Al quitar el ratón, la transición devuelve el botón
   a su tamaño y color con una animación leve (curva ease-back). */
.news__more-btn:hover {
  transform: scale(1.05);
  color: #c5f04b !important;
  box-shadow: 0 14px 28px -10px rgba(0,83,42,.55) !important;
}
.news__more-btn:hover svg {
  transform: none;
  stroke: #c5f04b !important;
}

/* ============================================================
 * 22. Header sticky GLOBAL — refuerzo en toda la web
 *     style.css ya lo declara, pero algunos contextos lo rompen.
 *     Esto garantiza que el header se queda fijo arriba en scroll
 *     en CUALQUIER página.
 * ============================================================ */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: saturate(140%) blur(6px);
}

/* ============================================================
 * 23. HERO — título en 3 líneas + vídeo entero visible
 * ============================================================ */

/* Más espacio para el texto del hero y menos para el vídeo, para
   que "con la garantía de Mapfre" entre en una sola línea. */
.hero__container {
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 36px !important;
}

/* Reducir font-size del título lo justo para 3 líneas claras */
.hero__title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem) !important;
  line-height: 1.24 !important;
}
.hero__word-rotator {
  min-height: 1.32em !important;
  line-height: 1.24 !important;
}
.hero__word {
  line-height: 1.24 !important;
}

/* Vídeo del hero: vemos toda la imagen (sin recortar) y con más
   altura disponible. Quitamos aspect-ratio fijo y dejamos que el
   vídeo establezca su propia altura. */
.hero__media {
  aspect-ratio: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.hero__video {
  width: 100% !important;
  height: auto !important;
  max-height: 520px;
  object-fit: contain !important;
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-lg);
  background: transparent !important;
}

@media (max-width: 1023px) {
  .hero__container {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
 * 24. FOOTER LOGOS — más grandes y en blanco
 * ============================================================ */
.site-footer__logos {
  gap: 18px !important;
  align-items: center;
}
.site-footer__logo-caesa {
  height: 64px !important;
  width: auto;
  filter: brightness(0) invert(1);
}
.site-footer__logo-mapfre {
  height: 92px !important;
  width: auto;
  filter: brightness(0) invert(1);
}
@media (max-width: 640px) {
  .site-footer__logo-caesa  { height: 52px !important; }
  .site-footer__logo-mapfre { height: 76px !important; }
}

/* ============================================================
 * 25. HOME — degradado continuo top-bar -> stats + composicion
 *     hero/brand/stats que encaja en 100vh.
 *
 *     Aplicamos UN solo gradient sobre <body> que ocupa el primer
 *     100vh exacto. Asi el fondo del header, hero, brand-bar y stats
 *     es el MISMO gradiente continuo (sin saltos de color).
 *     Despues de los stats, el fondo pasa a blanco para el resto
 *     de secciones.
 * ============================================================ */
/* Gradiente del fondo (solo desde arriba hasta despues de los stats).
   Top: un pelin mas verde. Final: fade a blanco MUY suave dentro del
   propio gradiente, asi no se ve la linea de corte con el resto de
   la pagina (la transicion termina en blanco puro mucho antes del fin
   del area, dejando un "colchon" de blanco invisible). */
body {
  background:
    linear-gradient(180deg,
      #d4ebde 0%,
      #d4ebde 6%,
      #dcefe4 22%,
      #e6f4ec 42%,
      #eef8f1 58%,
      #f6fbf8 72%,
      #ffffff 86%,
      #ffffff 100%
    ) no-repeat,
    #ffffff;
  background-size: 100% 115vh, auto;
  background-attachment: scroll;
}

/* Header — TOTALMENTE OPACO y FIJO al viewport.
   Usamos position:fixed (en lugar de sticky) porque sticky depende
   de que ningun ancestro tenga overflow/transform/filter/contain,
   y eso es fragil cuando hay muchas secciones en la pagina. Fixed
   garantiza que se queda arriba SIEMPRE, en todas las paginas. */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,83,42,.08) !important;
  box-shadow: 0 1px 0 rgba(0,40,20,.04);
}
.site-header.is-stuck,
.site-header.scrolled {
  box-shadow: 0 6px 20px rgba(0,40,20,.10) !important;
}
/* Compensamos el espacio que ocupaba el header en el flujo */
body {
  padding-top: 104px;
}
@media (max-width: 640px) {
  body { padding-top: 92px; }
}

/* Las 3 secciones que comparten el gradiente: fondo transparente */
.hero, .brand-bar, .stats {
  background: transparent !important;
}
.hero::after { display: none !important; }   /* puntitos antiguos del hero, fuera */

.hero {
  padding-top: 5vh !important;
  padding-bottom: 2vh !important;
  border-top: none !important;
  border-bottom: none !important;
}
/* Brand-bar (CAESA / ATHOS / EMAX) — sin hairlines, grande */
.brand-bar {
  padding: 2.4vh 0 !important;
  margin-top: 0 !important;
  border: none !important;
}
.brand-bar__image {
  max-height: 96px;
  width: auto !important;
  max-width: min(100%, 1100px) !important;
  margin: 0 auto !important;
}
/* Stats — grandes, SIN hairlines (border-top/bottom) ni separadores */
.stats {
  padding-top: 4vh !important;
  padding-bottom: 4vh !important;
  border-top: none !important;
  border-bottom: none !important;
}
.stats__container { gap: 0 !important; }
.stats__item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.stats__number {
  font-size: clamp(2.8rem, 5.4vw, 4.4rem) !important;
  line-height: 1 !important;
  padding-bottom: 0 !important;
}
.stats__label {
  font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important;
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* Título y vídeo del hero — grandes y proporcionados al viewport */
.hero__title {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important;
  line-height: 1.18 !important;
  margin-bottom: 22px !important;
}
.hero__word-rotator {
  min-height: 1.28em !important;
  line-height: 1.18 !important;
}
.hero__word { line-height: 1.18 !important; }

.hero__subtitle {
  font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
  max-width: 58ch;
  margin-bottom: 26px !important;
  line-height: 1.6;
}

/* Vídeo en desktop: mostrar COMPLETO (sin recortar). object-fit:contain
   respeta la relacion de aspecto natural del archivo .mp4/.mov; si el
   video es vertical, se ve a su altura sin recortes laterales. */
.hero__video {
  max-height: 58vh !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
}
.hero__container { align-items: center !important; }

@media (max-width: 1023px) {
  .hero { padding-top: 32px !important; }
  .hero__title {
    font-size: clamp(1.7rem, 5.6vw, 2.4rem) !important;
  }
  .hero__video { max-height: none !important; }
}

/* ============================================================
 * 26. ICONOS DEL MEGAMENU — SVGs externos /svg/<producto>.svg
 *     via CSS mask-image. Heredan el `color` del contenedor:
 *       - Particulares -> verde corp
 *       - Autonomos    -> rojo MAPFRE
 *       - Empresas     -> azul MAPFRE
 *     En hover, style.css cambia el color del icono a blanco
 *     (var(--color-text-inverse)) y la mascara revela ese color.
 *     Decesos NO usa esta tecnica: mantiene su SVG inline.
 * ============================================================ */
.mm-icon {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-color: currentColor;     /* hereda el color del padre */
  -webkit-mask: var(--mm-icon, none) center/contain no-repeat;
          mask: var(--mm-icon, none) center/contain no-repeat;
  transition: transform .3s var(--rd-ease);
}
.megamenu__item:hover .mm-icon {
  transform: scale(1.06);
}

/* Ajustes especificos por icono:
 *   - coche/moto/agroseguro un pelin mas grandes
 *   - moto y agroseguro estaban subidos en su caja: los bajamos
 *     con mask-position 50% 62% (en lugar del 50% 50% por defecto). */
.mm-icon[style*="coche.svg"] {
  width: 46px;
  height: 46px;
}
/* moto.svg y agroseguro.svg dibujan su contenido en la MITAD SUPERIOR
   del viewBox, por eso lucen "subidos" respecto al resto. Como
   mask-size es contain, mask-position no puede moverlos (la mascara
   llena la caja). Solucion: usar margin-top para desplazar la caja
   entera hacia abajo dentro del contenedor flex padre. */
.mm-icon[style*="moto.svg"],
.mm-icon[style*="agroseguro.svg"] {
  width: 48px;
  height: 48px;
  margin-top: 10px !important;
}
/* Plan de pensiones y responsabilidad civil: un pelin mas grandes */
.mm-icon[style*="plan-de-pensiones.svg"],
.mm-icon[style*="responsabilidad-civil.svg"] {
  width: 44px;
  height: 44px;
}

/* ============================================================
 * Sidebar de productos: mismo sistema mask que el megamenu,
 * pero contenedor mas grande para que se aprecien los iconos.
 * Tambien constrenimos el SVG inline (decesos) al mismo tamano
 * para que NO se vea mas grande que sus hermanos mask-based.
 * ============================================================ */
.product-sidebar__nav-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--color-icon-bg);
  border-radius: var(--radius-sm);
  width: 42px !important;
  height: 42px !important;
  color: inherit;
  flex-shrink: 0;
}
.product-sidebar__nav-icon .mm-icon {
  width: 30px;
  height: 30px;
}
.product-sidebar__nav-icon .mm-icon[style*="moto.svg"],
.product-sidebar__nav-icon .mm-icon[style*="agroseguro.svg"] {
  width: 32px;
  height: 32px;
  margin-top: 6px !important;
}
.product-sidebar__nav-icon .mm-icon[style*="plan-de-pensiones.svg"],
.product-sidebar__nav-icon .mm-icon[style*="responsabilidad-civil.svg"] {
  width: 34px;
  height: 34px;
}
/* SVG INLINE (decesos): al mismo tamano que los mask hermanos */
.product-sidebar__nav-icon > svg {
  width: 30px !important;
  height: 30px !important;
}
/* Sidebar nav-link: rejilla mas ancha para alojar la caja de 42 */
.product-sidebar__nav-link {
  grid-template-columns: 46px 1fr !important;
}
/* TODOS los seguros del sidebar se ven del MISMO color (no diferenciamos
   el activo por tinte de fondo). En su lugar, el activo es NOTORIAMENTE
   mas grande: caja de icono mayor, icono mayor, texto mayor y en negrita. */
.product-sidebar__nav-link,
.product-sidebar__nav-link.is-active {
  color: #2a3a32 !important;        /* mismo gris-verdoso oscuro para todos */
  background: transparent !important;
}
.product-sidebar__nav-link:hover {
  background: rgba(0, 83, 42, .04) !important;
}
.product-sidebar__nav-link.is-active .product-sidebar__nav-icon {
  background: var(--color-icon-bg) !important;  /* misma caja que los demas */
  color: inherit !important;
}

/* Activo NOTORIAMENTE mas grande */
.product-sidebar__nav-link.is-active {
  grid-template-columns: 70px 1fr !important;
  padding: 14px 14px !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: var(--hub-color, #00532A) !important;
}
.product-sidebar__nav-link.is-active .product-sidebar__nav-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px;
}
.product-sidebar__nav-link.is-active .product-sidebar__nav-icon .mm-icon {
  width: 46px !important;
  height: 46px !important;
}
.product-sidebar__nav-link.is-active .product-sidebar__nav-icon > svg {
  width: 46px !important;
  height: 46px !important;
}
.product-sidebar__nav-link.is-active .mm-icon[style*="moto.svg"],
.product-sidebar__nav-link.is-active .mm-icon[style*="agroseguro.svg"] {
  width: 50px !important;
  height: 50px !important;
  margin-top: 8px !important;
}
.product-sidebar__nav-link.is-active .mm-icon[style*="plan-de-pensiones.svg"],
.product-sidebar__nav-link.is-active .mm-icon[style*="responsabilidad-civil.svg"] {
  width: 52px !important;
  height: 52px !important;
}

/* ============================================================
 * BREADCRUMB — color del hub pero clarito (no el verde corp duro)
 * ============================================================ */
body.product--particulares .breadcrumb,
body.hub--particulares .breadcrumb {
  background: #e6f5ec !important;
  color: #00532A !important;
}
body.product--particulares .breadcrumb__link,
body.product--particulares .breadcrumb__current,
body.product--particulares .breadcrumb__sep,
body.hub--particulares .breadcrumb__link,
body.hub--particulares .breadcrumb__current,
body.hub--particulares .breadcrumb__sep {
  color: #00532A !important;
  opacity: 1 !important;
}

body.product--autonomos .breadcrumb,
body.hub--autonomos .breadcrumb {
  background: #fbe5e7 !important;
  color: #b8050f !important;
}
body.product--autonomos .breadcrumb__link,
body.product--autonomos .breadcrumb__current,
body.product--autonomos .breadcrumb__sep,
body.hub--autonomos .breadcrumb__link,
body.hub--autonomos .breadcrumb__current,
body.hub--autonomos .breadcrumb__sep {
  color: #b8050f !important;
  opacity: 1 !important;
}

body.product--empresas .breadcrumb,
body.hub--empresas .breadcrumb {
  background: #e5ebf3 !important;
  color: #002663 !important;
}
body.product--empresas .breadcrumb__link,
body.product--empresas .breadcrumb__current,
body.product--empresas .breadcrumb__sep,
body.hub--empresas .breadcrumb__link,
body.hub--empresas .breadcrumb__current,
body.hub--empresas .breadcrumb__sep {
  color: #002663 !important;
  opacity: 1 !important;
}

/* ============================================================
 * Prensa — quitar la etiqueta "admin" de cada miniatura
 * ============================================================ */
.press-card__author { display: none !important; }
.news-featured__author,
.news-item__author { display: none !important; }

/* ============================================================
 * TRABAJA CON NOSOTROS — seccion "Listo para dar el paso?"
 *     + formulario rediseñado, tipo "card" elegante con shadow
 * ============================================================ */

/* Seccion: fondo con tinte verde corporativo + padding generoso */
.careers {
  background:
    radial-gradient(900px 480px at 10% 10%, rgba(0,168,107,.10) 0%, transparent 60%),
    radial-gradient(700px 420px at 95% 95%, rgba(135,197,64,.10) 0%, transparent 65%),
    linear-gradient(180deg, #f5faf6 0%, #ffffff 100%) !important;
  padding: 72px 0 96px !important;
  position: relative;
}

.careers__container {
  gap: 64px !important;
  align-items: stretch !important;
}

/* Lado izquierdo (intro) — mas elegante */
.careers__intro {
  padding-top: 8px !important;
}
.careers__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(0,168,107,.14);
  color: #00532A !important;
  border-radius: 999px;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.careers__form-headline {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  font-weight: 800 !important;
  color: #00321a !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px !important;
}
.careers__form-sub {
  font-size: 1.05rem !important;
  color: #4a5a52 !important;
  line-height: 1.65 !important;
  margin: 0 0 28px !important;
}

/* Lista de "compromisos" — checks en circulo verde */
.careers__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.careers__features li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid rgba(0,168,107,.14);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,40,20,.04);
  font-weight: 600;
  color: #2a3a32;
  transition: transform .25s var(--rd-ease), box-shadow .25s var(--rd-ease), border-color .25s var(--rd-ease);
}
.careers__features li:hover {
  transform: translateX(4px);
  border-color: rgba(0,168,107,.40);
  box-shadow: 0 6px 18px rgba(0,40,20,.08);
}
.careers__features svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 5px;
  background: linear-gradient(135deg, #00a86b 0%, #00532A 100%);
  color: #ffffff;
  border-radius: 50%;
  stroke: #ffffff !important;
  stroke-width: 3.5 !important;
}

/* Formulario — tarjeta con shadow */
.careers__form {
  background: #ffffff;
  border-radius: 22px;
  padding: 36px 36px 32px !important;
  box-shadow:
    0 24px 60px rgba(0,40,20,.10),
    0 2px 8px rgba(0,40,20,.04);
  border: 1px solid rgba(0,168,107,.10);
  position: relative;
}
.careers__form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, #00532A 0%, #00a86b 50%, #c5f04b 100%);
}
.careers__form-title {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #00321a !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 24px !important;
  padding-top: 6px;
}

/* Inputs */
.careers__form .form__row { margin-bottom: 16px !important; }
.careers__form .form__label {
  display: block;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a5a52 !important;
  margin-bottom: 8px !important;
}
.careers__form .form__input {
  width: 100%;
  border: 1.5px solid #d6e0d8 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.98rem !important;
  font-family: inherit !important;
  background: #fbfdfc !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.careers__form .form__input:focus {
  outline: none !important;
  border-color: #00a86b !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(0,168,107,.15);
}

/* File upload — button bonito */
.form__file {
  display: block;
  margin: 4px 0 18px;
  cursor: pointer;
}
.form__file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form__file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border: 2px dashed rgba(0,168,107,.45);
  border-radius: 12px;
  color: #00532A;
  font-weight: 700;
  background: rgba(0,168,107,.06);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.form__file-button::before {
  content: "📎";
  font-size: 1.1em;
}
.form__file:hover .form__file-button {
  border-color: #00a86b;
  background: rgba(0,168,107,.14);
  transform: translateY(-2px);
}

/* Legal y check */
.careers__form .form__legal {
  font-size: 0.78rem !important;
  color: #6b7771 !important;
  line-height: 1.55 !important;
  margin: 14px 0 !important;
}
.careers__form .form__legal a { color: #00a86b; font-weight: 600; }
.careers__form .form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 22px;
  font-size: 0.88rem;
  color: #2a3a32;
}
.careers__form .form__check input { margin-top: 3px; accent-color: #00a86b; }

/* Submit */
.careers__form .form__submit {
  width: 100%;
  padding: 14px 28px !important;
  background: linear-gradient(135deg, #00532A 0%, #003a1d 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 28px -10px rgba(0,83,42,.55) !important;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease, color .25s ease;
}
.careers__form .form__submit:hover {
  transform: scale(1.03);
  color: #c5f04b !important;
  box-shadow: 0 18px 36px -10px rgba(0,83,42,.65) !important;
}

/* Status / feedback (form.js inyecta esto) */
.form__status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
}
.form__status--loading { background: rgba(0,168,107,.08); color: #00532A; }
.form__status--success { background: rgba(0,168,107,.18); color: #00532A; border: 1px solid rgba(0,168,107,.32); }
.form__status--error   { background: #fbe5e7; color: #8b0510; border: 1px solid #f4b8be; }

@media (max-width: 1023px) {
  .careers__container { gap: 36px !important; }
  .careers__form { padding: 28px 22px 26px !important; }
}

/* Compatibilidad hacia atras: si quedara algun img.megamenu__item-icon-img */
.megamenu__item-icon-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}
.megamenu__item:hover .megamenu__item-icon-img {
  filter: brightness(0) invert(1);
}

/* ============================================================
 * 27. STATS — quitar TODAS las barritas finas
 *   - ::after del label (puntito/dash bajo el texto)
 *   - ::after del número (barra verde corta bajo cada cifra)
 *   - ::before del item siguiente (línea vertical entre stats)
 * ============================================================ */
.stats__item::after,
.stats__number::after,
.stats__item + .stats__item::before {
  display: none !important;
  content: none !important;
}
.stats__item { padding-bottom: 0 !important; }
.stats__number { padding-bottom: 0 !important; }

/* ============================================================
 * 28. RESPONSIVE — refuerzos para móvil
 * ============================================================ */
@media (max-width: 900px) {
  /* Hero apila bien y el vídeo ocupa todo el ancho */
  .hero__container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .hero__media { order: -1; }

  /* Stats en 2x2 sin separadores raros */
  .stats__container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 24px !important;
  }

  /* Footer cols: 4 → 2 ya está; aseguramos que CTA no descuadre */
  .site-footer__cta-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 18px !important;
  }
  .site-footer__cta-actions {
    flex-direction: column !important;
    width: 100%;
    max-width: 320px;
  }
  .site-footer__cta-actions > a { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .hero__title { font-size: clamp(1.6rem, 6.4vw, 2rem) !important; }
  .stats__container { grid-template-columns: 1fr !important; }
  .news__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
 * §28 BANNER "VOLVER AL FORMULARIO" en paginas legales
 * ------------------------------------------------------------
 * Aparece anclado debajo de la top bar fija (104px desktop /
 * 92px mobile). Cuando el usuario llega a una pagina legal
 * desde un formulario via clic en su enlace, le ofrecemos
 * volver y conservamos los datos que ya hubiera escrito.
 * ============================================================ */
.return-form-bar {
  position: fixed;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 850;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #00532A 0%, #00a86b 100%);
  color: #ffffff;
  text-decoration: none;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px -10px rgba(0,30,15,0.45);
  transition: filter .2s ease, transform .25s ease;
  animation: returnBarIn .42s cubic-bezier(.34, 1.4, .64, 1);
}
/* Fuerza color blanco en hover/focus/visited: hay una regla generica
 * en style.css (`a:hover { color: var(--color-primary) }` = verde oscuro)
 * que tiene mas especificidad que `.return-form-bar` por incluir un
 * pseudo-elemento. Sin esto, al pasar el raton sobre el banner el texto
 * se volvia verde oscuro sobre fondo verde oscuro = invisible. */
.return-form-bar,
.return-form-bar:hover,
.return-form-bar:focus,
.return-form-bar:visited,
.return-form-bar:active { color: #ffffff !important; }
.return-form-bar:hover { filter: brightness(1.08); }
.return-form-bar:active { transform: translateY(1px); }
.return-form-bar__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: transform .25s ease, background .25s ease;
}
.return-form-bar:hover .return-form-bar__arrow {
  transform: translateX(-4px);
  background: rgba(255,255,255,0.30);
}
.return-form-bar__main { font-weight: 800; }
.return-form-bar__sub {
  margin-left: auto;
  font-weight: 500;
  font-size: 0.86rem;
  opacity: 0.88;
}

/* Cuando el banner esta visible, empujamos el contenido para
 * que no quede tapado debajo (sumamos su altura al padding-top). */
body.has-return-form-bar { padding-top: calc(104px + 60px); }
body.has-return-form-bar .site-header { /* la top bar no se mueve */ }

@keyframes returnBarIn {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .return-form-bar {
    top: 92px;
    padding: 11px 16px;
    gap: 10px;
    font-size: 0.88rem;
  }
  .return-form-bar__arrow { width: 26px; height: 26px; font-size: 1rem; }
  .return-form-bar__sub { display: none; }
  body.has-return-form-bar { padding-top: calc(92px + 52px); }
}


/* ============================================================
 * §29 TABLA LEGAL (Politica de Cookies)
 * ============================================================ */
.legal-table-wrap {
  overflow-x: auto;
  margin: 18px 0 24px;
  border: 1px solid #e2e8e4;
  border-radius: 12px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #ffffff;
}
.legal-table thead th {
  background: linear-gradient(135deg, #e8f7ef 0%, #d3eedd 100%);
  color: #00532A;
  font-weight: 800;
  text-align: left;
  padding: 11px 14px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid #00a86b;
}
.legal-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #eaf0ec;
  vertical-align: top;
  line-height: 1.45;
}
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table tbody tr:hover { background: #fbfdfc; }
.legal-table code {
  background: rgba(0,168,107,.10);
  color: #00532A;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
}
@media (max-width: 720px) {
  .legal-table { font-size: 0.84rem; }
  .legal-table thead th, .legal-table tbody td { padding: 9px 10px; }
}

/* ============================================================
 * YouTube facade — miniatura clicable con play overlay
 * (el iframe real lo carga news-carousel.js solo al hacer clic)
 * ============================================================ */
.news-article__video--yt .news-article__video-link {
  cursor: pointer;
}
.news-article__video--yt .news-article__video-thumb {
  transition: transform .5s var(--rd-ease), filter .25s var(--rd-ease);
}
.news-article__video--yt:hover .news-article__video-thumb,
.news-article__video--yt:focus-within .news-article__video-thumb {
  transform: scale(1.04);
  filter: brightness(.78);
}
.news-article__video--yt .news-article__video-play {
  transition: transform .2s var(--rd-ease), filter .2s var(--rd-ease);
}
.news-article__video--yt:hover .news-article__video-play,
.news-article__video--yt:focus-within .news-article__video-play {
  transform: translate(-50%, -50%) scale(1.12) !important;
  filter: drop-shadow(0 6px 22px rgba(255,0,0,.55)) !important;
}


/* ============================================================
 * MOBILE RESPONSIVE OVERRIDES (added 2026-05-27)
 * Rediseño completo del comportamiento en móviles. Estas reglas
 * sobreescriben las de style.css cuando el viewport es < 768px.
 * ============================================================ */

@media (max-width: 768px) {

  /* ===== HEADER compacto ===== */
  .site-header__container {
    padding: 8px 14px !important;
    gap: 6px !important;
    min-height: 56px;
  }
  .site-header__logo-caesa  { height: 34px !important; }
  .site-header__logo-mapfre { height: 48px !important; }
  [data-include="header"]:empty { min-height: 56px; }

  /* ===== HAMBURGER más prominente y accesible ===== */
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    gap: 4px !important;
    margin-left: auto;
    border-radius: 6px;
  }
  .hamburger:hover { background: rgba(0,0,0,.04); }
  .hamburger__bar {
    height: 2.5px !important;
    background: var(--rd-accent, #00532A) !important;
    border-radius: 2px;
  }

  /* ===== LANG SWITCHER compacto ===== */
  .lang-switcher__current {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  .lang-flag svg { width: 22px !important; height: auto !important; }
  .lang-switcher__caret { width: 9px !important; height: 6px !important; }

  /* El dropdown de idiomas debe abrirse POR ENCIMA del overlay del
     mobile-menu (z-index: 200). Subimos el contenedor a 300 para que
     forme su propio stacking context por encima. */
  .lang-switcher { position: relative; z-index: 300 !important; }
  .lang-switcher__list { z-index: 300 !important; }

  /* ===== MOBILE MENU full-screen overlay ===== */
  .mobile-menu {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: none !important;
    background: #fff !important;
    z-index: 200;
    padding-bottom: 40px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu__link {
    padding: 18px 22px !important;
    font-size: 0.95rem !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    border-top: 1px solid #ecf0ee !important;
    min-height: 56px;
  }
  .mobile-menu__link[aria-expanded="true"] { color: #00532A !important; background: #f7faf8; }
  .mobile-menu__sub {
    background: #f7faf8 !important;
    padding: 4px 22px 14px !important;
  }
  .mobile-menu__sub a {
    padding: 12px 0 !important;
    font-size: 0.92rem !important;
    border-bottom: 1px solid #e8ede9;
    min-height: 44px;
  }
  .mobile-menu__sub a:last-child { border-bottom: none; }
  .mobile-menu__sub strong {
    padding: 16px 0 6px !important;
    font-size: 0.72rem !important;
    color: #6b7771 !important;
  }

  /* ===== TYPOGRAFIA general ===== */
  /* Evita zoom automático en iOS al hacer focus en inputs */
  input, textarea, select { font-size: 16px !important; }

  /* Heroes más compactos */
  .hero, .hero-redesign, .hero-section, .hero-redesigned {
    padding: 32px 16px !important;
    min-height: auto !important;
  }
  .hero__title, .hero-redesign__title, .hero-section__title {
    font-size: 1.7rem !important;
    line-height: 1.18 !important;
    margin-bottom: 12px !important;
  }
  .hero__subtitle, .hero-redesign__subtitle {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  h1 { font-size: 1.85rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.4rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1.18rem !important; line-height: 1.3 !important; }

  /* Sections menos padding vertical */
  .section, section { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* ===== GRIDS de tarjetas: 1 columna ===== */
  .press__grid,
  .product-grid,
  .value-grid,
  .stats-grid,
  .team-grid,
  .features-grid,
  .news-grid,
  .product-cards {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* ===== Contenedores: padding ===== */
  .container, .press__container, .breadcrumb__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ===== Botones: touch target 44px mínimo ===== */
  .btn, .button, .cta-btn, .site-footer__cta-btn {
    min-height: 44px;
    padding: 12px 18px !important;
    font-size: 0.92rem !important;
  }

  /* ===== Tablas: scroll horizontal si no caben ===== */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ===== Imágenes: nunca desbordan ===== */
  img { max-width: 100%; height: auto; }

  /* ===== Footer compacto ===== */
  .site-footer__columns {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .site-footer__cta {
    padding: 24px 18px !important;
    text-align: center !important;
  }
  .site-footer__cta-title { font-size: 1.2rem !important; }

  /* ===== Press filter chips: scroll horizontal ===== */
  .press-filter__chips {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .press-filter__chips::-webkit-scrollbar { display: none; }
  .press-filter__chip { flex-shrink: 0; }

  /* ===== News article: padding y tamaños ===== */
  .news-article__hero { padding: 60px 16px 30px !important; min-height: auto !important; }
  .news-article__hero-title { font-size: 1.55rem !important; line-height: 1.2 !important; }
  .news-article__layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .news-article__sidebar { padding: 16px !important; }
  .news-article__body { font-size: 16px !important; }
  .news-article__breadcrumb-bar { padding: 12px 16px !important; }
  .news-article__breadcrumb-title { display: none; }
  .news-article__main { padding: 20px 16px !important; }

  /* ===== Modales (admin no aplica pero por si acaso en público) ===== */
  .modal__card { width: 96vw !important; max-width: 96vw !important; max-height: 92vh !important; }

}

/* Pantallas muy pequeñas (móviles antiguos / 360px) */
@media (max-width: 380px) {
  .site-header__logo-caesa  { height: 28px !important; }
  .site-header__logo-mapfre { height: 40px !important; }
  .hero__title, .hero-redesign__title { font-size: 1.45rem !important; }
  h1 { font-size: 1.55rem !important; }
}

/* ============================================================
 * MOBILE MENU — Productos 2-niveles (Particulares/Autonomos/Empresas)
 * ============================================================ */
.mobile-menu__sub-group {
  border-bottom: 1px solid #ecf0ee;
}
.mobile-menu__sub-group:last-child { border-bottom: none; }

.mobile-menu__sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 22px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  min-height: 48px;
  letter-spacing: 0.01em;
}
.mobile-menu__sub-link:hover,
.mobile-menu__sub-link[aria-expanded="true"] {
  background: #eef5f0;
  color: #00532A;
}
.mobile-menu__sub-link--toggle[aria-expanded="true"] .mobile-menu__caret {
  transform: rotate(180deg);
}
.mobile-menu__sub-deep {
  list-style: none;
  margin: 0;
  padding: 4px 0 12px 0;
  background: #fff;
  border-top: 1px solid #ecf0ee;
}
.mobile-menu__sub-deep[hidden] { display: none; }
.mobile-menu__sub-deep li { margin: 0; }
.mobile-menu__sub-deep a {
  display: block;
  padding: 11px 22px 11px 40px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #303030;
  text-decoration: none;
  border-bottom: 1px solid #f3f6f4;
  min-height: 44px;
}
.mobile-menu__sub-deep li:last-child a { border-bottom: none; }
.mobile-menu__sub-deep a:hover,
.mobile-menu__sub-deep a:active { background: #f3f9f5; color: #00532A; }

/* ============================================================
 * MOBILE FIXES adicionales (hero video, stats, news, etc.)
 * ============================================================ */
@media (max-width: 768px) {

  /* HERO VIDEO: rectangular más ancho que alto */
  .hero__media {
    aspect-ratio: 16 / 9 !important;
    max-height: 200px !important;
    border-radius: 8px !important;
  }
  .hero__video {
    object-fit: cover !important;   /* recorta si el video es vertical */
  }

  /* HERO container: menos padding vertical */
  .hero {
    padding: 18px 0 24px !important;
  }
  .hero__container {
    gap: 18px !important;
  }
  .hero__content {
    padding: 0 16px !important;
  }
  .hero__subtitle {
    font-size: 0.95rem !important;
  }

  /* STATS: 2x2 con divisores claros y números más compactos */
  .stats {
    padding: 28px 12px !important;
  }
  .stats__container {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 8px !important;
  }
  .stats__item {
    padding: 18px 8px !important;
  }
  .stats__number {
    font-size: 2.2rem !important;
    padding-bottom: 8px !important;
  }
  .stats__number::after {
    width: 32px !important;
    height: 2.5px !important;
  }
  .stats__label {
    font-size: 0.82rem !important;
    text-align: center;
    line-height: 1.3 !important;
  }
  /* Divisor vertical entre par de columnas */
  .stats__item + .stats__item::before {
    top: 14% !important;
    bottom: 14% !important;
    display: block !important;
  }
  /* Divisor horizontal entre las dos filas (encima del item 3 y 4) */
  .stats__item:nth-child(3),
  .stats__item:nth-child(4) {
    border-top: 1px solid var(--color-border, #e0e6e3);
    padding-top: 22px !important;
  }

  /* NEWS: featured + lista de 4 abajo en mobile, ambas visibles */
  .news {
    padding: 32px 0 !important;
  }
  .news__container {
    padding: 0 16px !important;
  }
  .news__title {
    font-size: 1.4rem !important;
    margin-bottom: 20px !important;
  }
  .news__grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .news-featured__image {
    aspect-ratio: 16 / 10 !important;
    margin-bottom: 14px !important;
  }
  .news-featured__title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  .news-featured__excerpt {
    font-size: 0.92rem !important;
  }
  /* Lista de 4 noticias pequeñas: cards horizontales con thumb */
  .news-list {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .news-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  .news-item__link {
    grid-template-columns: 110px 1fr !important;
    gap: 12px !important;
    padding: 10px !important;
    align-items: center !important;
  }
  .news-item__image {
    width: 110px !important;
    height: 80px !important;
    border-radius: 6px !important;
  }
  .news-item__title {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
  }
  .news-item__meta {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 380px) {
  /* News-item: thumb más pequeño en pantallas muy estrechas */
  .news-item__link {
    grid-template-columns: 90px 1fr !important;
  }
  .news-item__image {
    width: 90px !important;
    height: 68px !important;
  }
  .stats__number { font-size: 1.85rem !important; }
}

/* ============================================================
 * MOBILE FIXES v2 — feedback usuario
 *   1) Hero video: rectángulo completo (sin recortar)
 *   2) Mobile menu: color por categoría + logo a la derecha en cada seguro
 *   3) Press filter: barra horizontal scrollable en mobile
 *   4) Carrusel noticia: botones bajo la imagen en mobile
 * ============================================================ */
@media (max-width: 768px) {

  /* 1. HERO VIDEO — rellenar el rectángulo completo (sin huecos) */
  .hero__media {
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    min-height: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--rd-shadow-md) !important;
  }
  .hero__video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;          /* el video llena todo el rectángulo */
    object-position: center !important;
    border-radius: 12px !important;
    background: #000 !important;
    box-shadow: none !important;
  }

  /* 2. MOBILE MENU — color por categoría + icono del seguro a la derecha */

  /* Particulares (verde corporativo) */
  .mobile-menu__sub-group:nth-child(1) .mobile-menu__sub-link {
    background: linear-gradient(90deg, #eaf6ee 0%, #ffffff 100%);
    color: #00532A;
    border-left: 4px solid #00a86b;
  }
  .mobile-menu__sub-group:nth-child(1) .mobile-menu__sub-link[aria-expanded="true"] {
    background: #d9efe1;
  }

  /* Autónomos (rojo Mapfre) */
  .mobile-menu__sub-group:nth-child(2) .mobile-menu__sub-link {
    background: linear-gradient(90deg, #fce8ea 0%, #ffffff 100%);
    color: #a8121e;
    border-left: 4px solid #d12530;
  }
  .mobile-menu__sub-group:nth-child(2) .mobile-menu__sub-link[aria-expanded="true"] {
    background: #f8d2d6;
  }

  /* Empresas (azul) */
  .mobile-menu__sub-group:nth-child(3) .mobile-menu__sub-link {
    background: linear-gradient(90deg, #e8f1fb 0%, #ffffff 100%);
    color: #14467a;
    border-left: 4px solid #2974c8;
  }
  .mobile-menu__sub-group:nth-child(3) .mobile-menu__sub-link[aria-expanded="true"] {
    background: #d0e3f5;
  }

  /* Items dentro del submenú: hacer hueco al icono a la derecha */
  .mobile-menu__sub-deep a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 22px 12px 40px !important;
    gap: 14px !important;
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 26px 26px;
    padding-right: 58px !important;       /* espacio para el logo */
  }

  /* Iconos para cada seguro — usa el SVG correspondiente del directorio /svg/ */
  .mobile-menu__sub-deep a[href*="seguros-de-coche"]              { background-image: url('/svg/coche.svg'); }
  .mobile-menu__sub-deep a[href*="seguro-de-moto"]                { background-image: url('/svg/moto.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-de-hogar"]              { background-image: url('/svg/hogar.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-de-viaje"]              { background-image: url('/svg/viajes.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-de-mascotas"]           { background-image: url('/svg/mascotas.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-de-vida"]               { background-image: url('/svg/vida.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-dental"]                { background-image: url('/svg/dental.svg'); }
  .mobile-menu__sub-deep a[href*="seguro-embarcaciones"]          { background-image: url('/svg/embarcaciones.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-de-decesos"]            { background-image: url('/svg/decesos.svg'); }

  .mobile-menu__sub-deep a[href*="seguros-de-salud"]              { background-image: url('/svg/salud.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-de-vida-autonomos"]     { background-image: url('/svg/vida-autonomos.svg'); }
  .mobile-menu__sub-deep a[href*="plan-de-pensiones"]             { background-image: url('/svg/plan-de-pensiones.svg'); }
  .mobile-menu__sub-deep a[href*="seguro-de-responsabilidad-civil"] { background-image: url('/svg/responsabilidad-civil.svg'); }

  .mobile-menu__sub-deep a[href*="seguros-para-comercios"]        { background-image: url('/svg/comercios.svg'); }
  .mobile-menu__sub-deep a[href*="seguro-industrial"]             { background-image: url('/svg/industrial.svg'); }
  .mobile-menu__sub-deep a[href*="seguros-para-equipos-electronicos"] { background-image: url('/svg/equipos-electronicos.svg'); }
  .mobile-menu__sub-deep a[href*="agroseguro"]                    { background-image: url('/svg/agroseguro.svg'); }
  .mobile-menu__sub-deep a[href*="seguro-de-construccion"]        { background-image: url('/svg/construccion.svg'); }

  /* 3. PRESS FILTER — barra horizontal scrollable en mobile */
  .press-filter {
    margin: 0 -16px 22px !important;
    padding: 0 !important;
  }
  .press-filter__chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    padding: 4px 16px 12px !important;
    gap: 8px !important;
    scroll-snap-type: x proximity;
  }
  .press-filter__chips::-webkit-scrollbar { display: none; }
  .press-filter__chip {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
    font-size: 0.86rem !important;
    padding: 8px 14px !important;
  }

  /* 4. CARRUSEL NOTICIA — botones debajo de la imagen en mobile */
  .news-carousel {
    overflow: visible !important;        /* deja salir los botones bajo el track */
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 56px !important;     /* hueco para los botones */
  }
  .news-carousel__track {
    border-radius: var(--rd-radius);
    overflow-x: auto;
    box-shadow: var(--rd-shadow-md);
    background: #000;
  }
  .news-carousel__track img {
    height: 240px !important;            /* algo más bajo en mobile */
  }
  /* Flechas: salen del track, se pegan abajo y a los lados centradas */
  .news-carousel__arrow {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    background: #00532A !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  }
  .news-carousel__arrow:hover {
    background: #00a86b !important;
    color: #fff !important;
    transform: none !important;
  }
  .news-carousel__arrow--prev { left: 8px !important; right: auto !important; }
  .news-carousel__arrow--next { right: 8px !important; left: auto !important; }

  /* Dots: centrados entre los dos botones */
  .news-carousel__dots {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  .news-carousel__dot {
    background: #c8d4cf !important;
  }
  .news-carousel__dot.is-active {
    background: #00532A !important;
  }
  /* Contador: lo dejamos sobre la imagen, esquina superior */
  .news-carousel__counter {
    top: 10px !important;
    right: 10px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
  }

  /* 5. BRAND-BAR (logos CAESA/ATHOS/EMAX): más grandes en móvil */
  .brand-bar {
    padding: 18px 0 22px !important;
  }
  .brand-bar__image {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  /* 6. PRESS FILTER: indicador visual de scroll horizontal */
  .press-filter {
    position: relative !important;
  }
  /* Gradiente derecho: hint visual de que hay más a la derecha */
  .press-filter::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px;
    right: 0;
    width: 32px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 80%);
    pointer-events: none;
    z-index: 2;
  }
  /* Barra fina de scroll bajo los chips: indica que se puede deslizar */
  .press-filter__chips {
    scrollbar-width: thin;
    scrollbar-color: #00532A #e0e6e3;
  }
  .press-filter__chips::-webkit-scrollbar {
    display: block !important;
    height: 4px;
  }
  .press-filter__chips::-webkit-scrollbar-track {
    background: #e0e6e3;
    border-radius: 2px;
    margin: 0 16px;
  }
  .press-filter__chips::-webkit-scrollbar-thumb {
    background: #00532A;
    border-radius: 2px;
  }

  /* 7. SOBRE NOSOTROS: foto principal en proporción retrato sensata */
  .about-principles__media {
    aspect-ratio: 4 / 5 !important;     /* portrait, encaja con la foto */
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .about-principles__media-frame img {
    object-position: center 25% !important;  /* enfoca cara, no recorta cabeza */
  }
}