/* =====================================================================
   MV Aseguradores — rediseno de la portada
   Agosto 2026.

   TODO cuelga de .home-premium: ni una regla puede alcanzar al resto del
   sitio. Mobile first: el bloque base es movil y los @media solo amplian.

   Paleta: la corporativa real (css/color.css)
     #b02d30 rojo · #842e30 rojo profundo · #2a2b37 carbon
   Tipografia: las que el sitio ya carga (Montserrat + la serif del tema).
   No se anaden fuentes nuevas: el salto se da en escala, peso y aire.
   ===================================================================== */

.home-premium {
  --ph-red: #b02d30;
  --ph-red-deep: #842e30;
  --ph-carbon: #2a2b37;
  --ph-carbon-2: #1e1f28;
  --ph-ink: #23242e;
  --ph-body: #4a4c5a;
  --ph-muted: #7a7d8c;
  --ph-line: #e4e5ea;
  --ph-paper: #ffffff;
  --ph-wash: #f7f8f7;
  --ph-gold: #c9a227;

  --ph-shadow-s: 0 1px 2px rgba(42,43,55,.06), 0 2px 8px rgba(42,43,55,.05);
  --ph-shadow-m: 0 2px 4px rgba(42,43,55,.06), 0 12px 28px rgba(42,43,55,.09);
  --ph-shadow-l: 0 4px 8px rgba(42,43,55,.07), 0 24px 56px rgba(42,43,55,.13);

  --ph-r: 14px;
  --ph-r-s: 10px;
  --ph-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   1. HERO / SLIDER
   Los dos recuadros grises translucidos se sustituyen por un degradado
   que deja respirar la foto, con la jerarquia alineada a la izquierda.
   --------------------------------------------------------------- */

/* Mismo fallo que en las fichas: el slider va en z-index negativo y
   deja su contenido sin recibir clics. */
.home-premium .site-slider { z-index: auto !important; }

.home-premium .carousel-caption {
  padding: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  top: 0;
  align-items: center !important;
  /* Velo del hero. Sep-2026: el cliente pedia mas luminosidad en las fotos.
     No se baja la opacidad a lo bruto (el titular ya iba justo de contraste
     sobre los cielos claros de dos de los cuatro slides): se REPARTE. El
     tercio inferior, donde en movil no hay mas que los indicadores, pasa de
     .92 a .64; la franja donde cae el titular sube un poco. Medido sobre las
     cuatro fotos: en la zona de texto el velo resultante es igual o mayor que
     el anterior en todo el recorrido salvo ~.04 al final del titular, que se
     compensa con la sombra de texto corta de mas abajo.
     En escritorio esto se sustituye por un velo lateral (ver @media 992px). */
  background: linear-gradient(
    to bottom,
    rgba(24,25,32,.26) 0%,
    rgba(24,25,32,.52) 42%,
    rgba(24,25,32,.60) 74%,
    rgba(24,25,32,.64) 100%
  );
}

.home-premium .carousel-caption > div {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem !important;
  text-align: left !important;
}

/* Eyebrow: el "Seguro de hogar" que antes iba en una caja gris */
.home-premium .carousel-caption-header {
  display: inline-block;
  background: none !important;
  padding: 0 !important;
  margin-bottom: .55rem;
  color: #e8c65a !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Dos sombras: una corta y opaca que dibuja el borde de la letra (es lo que
     de verdad sostiene la lectura cuando se baja el velo) y la difusa de antes,
     que solo asienta el bloque. */
  text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 1px 12px rgba(0,0,0,.75);
}

.home-premium .carousel-caption-header small {
  font-size: .72rem;
  letter-spacing: inherit;
}

/* Titular */
.home-premium .carousel-caption-body {
  background: none !important;
  padding: 0 !important;
  font-size: clamp(1.45rem, 5vw, 2.7rem) !important;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 24px rgba(0,0,0,.5);
  max-width: 21ch;
  text-wrap: balance;
}

/* Entrada escalonada de los elementos del slide activo */
.home-premium .carousel-item.active .carousel-caption-header { animation: ph-rise .6s var(--ph-ease) .05s both; }
.home-premium .carousel-item.active .carousel-caption-body   { animation: ph-rise .6s var(--ph-ease) .14s both; }
.home-premium .carousel-item.active .carousel-caption a,
.home-premium .carousel-item.active .carousel-caption .btn   { animation: ph-rise .6s var(--ph-ease) .24s both; }

@keyframes ph-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Boton del slide: pieza premium con borde animado */
.home-premium .carousel-caption .btn,
.home-premium .carousel-caption a.btn-primary {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
  margin-top: 1.15rem;
  padding: .85rem 1.6rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-weight: 700;
  font-size: .95rem !important;
  letter-spacing: .01em;
  text-transform: none !important;
  background: linear-gradient(135deg, var(--ph-red) 0%, var(--ph-red-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(176,45,48,.42);
  isolation: isolate;
  transition: transform .25s var(--ph-ease), box-shadow .25s var(--ph-ease);
}

/* El anillo con destello, comun a los dos botones rojos de la portada:
   el "Leer mas" del hero y el "Que os llame" del bloque editorial.

   ANTES: un conic-gradient que giraba animando --ph-angle, registrada con
   @property. Es la tecnica de moda para esto, pero es fragil: depende de que
   el navegador registre la propiedad Y de que repinte el degradado en cada
   tick. En la practica el anillo se quedaba quieto.
   AHORA: el destello es un linear-gradient que recorre el anillo movido con
   background-position, una propiedad animable de toda la vida. No necesita
   @property ni registro de nada y el navegador la repinta como cualquier
   otra, asi que no puede quedarse parada.

   El anillo mide 3 px: a 2 px, con el box-shadow rojo del boton alrededor, se
   leia como un borde fijo. El destello ocupa un 20 % del degradado, asi que
   entra, cruza y sale en vez de iluminar el borde entero. */
.home-premium .carousel-caption .btn::before,
.home-premium .bgsep .llamadme::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background-image: linear-gradient(
    100deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.18) 40%,
    rgba(255,255,255,1) 47%,
    var(--ph-gold) 53%,
    rgba(255,255,255,.18) 60%,
    rgba(255,255,255,.18) 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: ph-sheen 2.8s linear infinite;
  z-index: -1;
}

/* De 140 % a -40 %: el destello entra por un lado, cruza y sale por el otro.
   Con 0-100 % se quedaria dentro y pareceria que rebota. */
@keyframes ph-sheen {
  from { background-position: 140% 50%; }
  to   { background-position: -40% 50%; }
}

.home-premium .carousel-caption .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(176,45,48,.55);
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-premium .carousel-caption .btn::before,
  .home-premium .bgsep .llamadme::before { animation: none; background-position: 50% 50%; }
}

/* Flechas: discretas hasta que se pasa el cursor */
.home-premium .carousel-control-prev,
.home-premium .carousel-control-next {
  width: 8%;
  opacity: .55;
  transition: opacity .3s var(--ph-ease);
}

.home-premium .site-slider:hover .carousel-control-prev,
.home-premium .site-slider:hover .carousel-control-next { opacity: 1; }

/* El contenedor del boton llevaba un fondo blanco al 50 % (bg-white-rgba) que
   sobre el degradado se veia como una banda gris cruzando la foto. */
.home-premium .carousel-caption-footer {
  background: none !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

/* Indicadores como barras finas, no puntos.
   Bootstrap los estiliza con .carousel-indicators li, asi que hace falta
   subir especificidad para ganarle. */
.home-premium .site-slider .carousel-indicators {
  bottom: .9rem;
  margin: 0 auto;
  gap: .35rem;
  justify-content: center;
  align-items: center;
}

.home-premium .site-slider .carousel-indicators li {
  width: 26px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.45) !important;
  border: 0 !important;
  opacity: 1 !important;
  text-indent: 0;
  transition: background .3s var(--ph-ease), width .3s var(--ph-ease);
}

.home-premium .site-slider .carousel-indicators li.active {
  background: #fff !important;
  width: 40px !important;
}

/* Sellos de confianza del hero, iguales que en las fichas de seguro.
   Van fuera del carrusel: son fijos y no rotan con los slides. */
.home-premium .ph-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  list-style: none;
  margin: 0;
  padding: .9rem 1.25rem 1.15rem;
  background: rgba(24,25,32,.92);
}

.home-premium .ph-trust li {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: .32rem .7rem;
}

.home-premium .ph-trust i { color: #e8c65a; font-size: .78rem; }

/* ---------------------------------------------------------------
   1b. FORMULARIO DEL HERO
   El panel va FUERA del carrusel (ver index.php) para que no rote con los
   slides. En movil se apila debajo del hero: superpuesto seria inusable.
   La altura se reserva a mano porque el formulario es un iframe de JotForm
   (tipo CARD, 640 px iniciales) y sin reserva provocaria CLS, que es
   justo el peor Core Web Vital del sitio.
   --------------------------------------------------------------- */
/* MOVIL: alto que reporta el propio embed de JotForm. Aqui solo se reserva
   sitio (min-height) para no provocar CLS; el iframe puede crecer.
   ESCRITORIO: los dos valores se recortan dentro del @media de 992px para que
   el hero entero quepa por encima de la linea de flotacion (ver alli). */
.home-premium { --ph-form-h: 640px; --ph-hero-h: 680px; }

.home-premium .ph-hero { position: relative; }

/* El panel del formulario.
   NO se le fija alto: JotForm mide el CARD y escribe el alto real en el
   iframe por postMessage. Antes se forzaba a 539 px con overflow:hidden y
   eso recortaba 101 px del formulario, dejando fuera de vista los ultimos
   campos de los pasos mas largos. */
.home-premium .ph-hero-form {
  background: var(--ph-paper);
  border-radius: var(--ph-r);
  box-shadow: var(--ph-shadow-l);
  overflow: hidden;            /* solo para redondear las esquinas del iframe */
  margin: -2.5rem 1rem 1.5rem;
  position: relative;
  z-index: 3;
}

/* min-height (no height): reserva sitio desde el primer pintado para que no
   haya salto de CLS, pero deja crecer al iframe si JotForm pide mas. */
.home-premium .ph-hero-form iframe {
  display: block;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: var(--ph-form-h);
  border: 0 !important;
}

@media (min-width: 992px) {
  /* --- El hero, entero y sin scroll ---------------------------------
     Objetivo: que no quede NADA del hero por debajo de la linea de
     flotacion. El presupuesto vertical es el alto de ventana menos la
     cabecera, que son dos barras apiladas y ocupa 143 px:
       viewport util tipico de portatil (1080p al 125-135%) ~= 628 px
       628 - 143 = 485 px para el hero
     Se deja margen y el hero se queda en 444 px (acaba a 587 px) con el
     formulario dentro a 420 px y 12 px de aire arriba y abajo.
     (Los 143 px de cabecera son con la barra superior en UNA sola fila;
     ver la regla .topbar-social en inc/header1-1.php. Si esa barra
     volviera a partirse en dos filas creceria 24 px y el hero se comeria
     el margen.)

     El CARD de JotForm NO necesita los 640 px que pide: es responsive y
     recompone la tarjeta al alto que le des (el paso mas alto del
     formulario -el textarea- mide 383 px de contenido, asi que en 420 px
     entra con holgura). Lo que pasaba antes es que el embed handler
     escribe height:640px EN LINEA sobre el iframe al recibir el
     postMessage, y por eso hay que ganarle con !important desde aqui.
     (El intento anterior de recortarlo fallo porque se hizo con
     overflow:hidden en el panel en vez de redimensionar el iframe: eso
     si tapaba los ultimos campos.)

     El hero no tiene alto propio: hereda el del atributo height de la
     imagen que sirve cada breakpoint (360 px entre 992 y 1199, 576 px a
     partir de 1200), asi que se le fija a mano y la foto pasa a
     object-fit:cover para rellenarlo.
     De paso se corrige una deformacion que ya venia de serie: la imagen
     tenia object-fit:fill, width:100% y height del atributo, asi que a
     1396 px de ancho se pintaba un 1920x576 achatado.
     ------------------------------------------------------------------ */
  .home-premium { --ph-form-h: 420px; --ph-hero-h: 444px; }

  /* Alto fijo, no min-height: aqui el limite manda sobre lo que pida el
     embed. Los tres !important son para ganarle al height en linea que
     escribe jotformEmbedHandler. */
  .home-premium .ph-hero-form iframe {
    height: var(--ph-form-h) !important;
    min-height: var(--ph-form-h) !important;
    max-height: var(--ph-form-h) !important;
  }

  .home-premium .ph-hero .carousel-item img {
    height: var(--ph-hero-h) !important;
    object-fit: cover;
    object-position: center 45%;
  }

  /* Panel anclado ARRIBA, no centrado: centrandolo se salia por arriba y
     se metia bajo la cabecera. */
  .home-premium .ph-hero-form {
    position: absolute;
    top: .75rem;
    right: max(1.5rem, calc((100% - 1140px) / 2));
    transform: none;
    width: 355px;
    margin: 0;
  }

  /* El texto del slide se retira para no quedar debajo del panel */
  .home-premium .carousel-caption > div { padding-right: 25rem !important; }
  .home-premium .carousel-caption-body { max-width: 15ch; }

  /* Los sellos se superponen abajo a la izquierda del hero, como en las
     fichas, en vez de ocupar una franja propia */
  .home-premium .ph-trust {
    position: absolute;
    left: max(1.25rem, calc((100% - 1140px) / 2));
    bottom: 2.25rem;
    background: none;
    padding: 0;
    /* Ancho suficiente para que los tres sellos entren en UNA linea: con
       30rem se partian en dos y se comian 32 px de un hero que ahora va
       justo. El hueco libre a la izquierda del panel es de ~750 px. */
    max-width: 44rem;
    z-index: 2;
  }

  /* El contenido del slide sube para dejar sitio a los sellos y que el CTA
     entre en pantalla sin tener que hacer scroll */
  .home-premium .carousel-caption { align-items: flex-start !important; }
  .home-premium .carousel-caption > div { padding-top: 2.25rem !important; }

  /* --- Velo lateral en vez de velo de arriba abajo ------------------
     Aqui TODO el texto vive en la columna izquierda (medido: el titular
     ocupa del 14 % al 46 % del ancho, los sellos del 9 % al 51 %), y del
     72 % a la derecha manda el panel blanco del formulario. Un velo
     horizontal concentra la oscuridad donde hace falta y le devuelve la
     foto entera a la franja central, que es la que se veia apagada.
     Las dos capas se multiplican: alfa = 1-(1-lateral)(1-vertical).
       titular  -> .73 a la izquierda, .46 al final de la linea mas larga
                   (antes .41 plano: no baja en ningun punto)
       centro   -> .10 (antes .48)   franja inferior derecha -> .28 (antes .92)
     El leve velo vertical que queda es solo para asentar los indicadores
     y que la cabecera roja no corte a hueso contra la foto. */
  .home-premium .carousel-caption {
    background:
      linear-gradient(
        to right,
        rgba(24,25,32,.74) 0%,
        rgba(24,25,32,.66) 30%,
        rgba(24,25,32,.24) 54%,
        rgba(24,25,32,0)   70%
      ),
      linear-gradient(
        to bottom,
        rgba(24,25,32,.16) 0%,
        rgba(24,25,32,.10) 50%,
        rgba(24,25,32,.28) 100%
      );
  }

  /* Los sellos flotan sobre la foto (el contenedor pierde su banda oscura
     unas reglas mas arriba) y con el velo repartido el tercero cae ya fuera
     de la zona oscura. Se les da fondo propio para que no dependan del
     degradado: sobre el peor de los cuatro slides el texto blanco pasa de
     3,6:1 (por debajo del 4,5:1 que pide un 11 px) a ~8:1. */
  .home-premium .ph-trust li {
    background: rgba(24,25,32,.45);
    border-color: rgba(255,255,255,.28);
  }
}

@media (min-width: 1200px) {
  .home-premium .ph-hero-form { width: 385px; }
}

/* ---------------------------------------------------------------
   2. FRANJA DE CREDENCIALES
   Va justo debajo del hero. El contenido sale de datos que ya
   estaban en el sitio (clave DGSFP, companias, trato directo).
   --------------------------------------------------------------- */
.home-premium .ph-credenciales {
  background: var(--ph-carbon);
  color: #fff;
}

.home-premium .ph-credenciales ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1140px;
}

.home-premium .ph-credenciales li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.25rem;
  font-size: .84rem;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.home-premium .ph-credenciales li:last-child { border-bottom: 0; }

.home-premium .ph-credenciales i {
  color: var(--ph-gold);
  font-size: 1.05rem;
  flex: 0 0 1.2rem;
  text-align: center;
}

.home-premium .ph-credenciales b {
  display: block;
  font-weight: 700;
  letter-spacing: normal;
}

.home-premium .ph-credenciales span {
  color: rgba(255,255,255,.62);
  font-size: .78rem;
}

/* ---------------------------------------------------------------
   3. APERTURA EDITORIAL (bgsep)
   --------------------------------------------------------------- */
.home-premium .bgsep {
  background: var(--ph-paper) !important;
  padding-top: .5rem;
}

.home-premium .bgsep h1 {
  font-size: clamp(1.55rem, 5.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ph-ink);
  margin-bottom: .9rem;
  text-wrap: balance;
}

.home-premium .bgsep h2 {
  font-size: clamp(1rem, 3.4vw, 1.3rem) !important;
  line-height: 1.55;
  color: var(--ph-body);
  max-width: 44ch !important;
  margin-bottom: 1.5rem !important;
}

.home-premium .bgsep h2 .text-primary { color: var(--ph-red) !important; font-weight: 600; }

/* El texto en dos columnas se lee fatal en pantalla: una sola columna */
.home-premium .introindex {
  column-count: 1 !important;
  max-width: 68ch;
  margin: 0 auto 1.6rem !important;
}

.home-premium .introindex p {
  color: var(--ph-body);
  line-height: 1.72;
  margin-bottom: .9rem;
}

/* El sitio aplica letter-spacing:-2px a strong/b. En la lista de ventajas de la
   portada las palabras salian pegadas ("Correduriadesegurosdeconfianza"). */
.home-premium .introindex strong,
.home-premium .introindex b,
.home-premium .bgsep strong,
.home-premium .bgsep b,
.home-premium .bgsep2 strong,
.home-premium .site-products strong,
.home-premium .site-modules strong {
  letter-spacing: normal !important;
}

/* Los checks de la lista, alineados con su texto */
.home-premium .introindex li,
.home-premium .introindex p:has(strong) { line-height: 1.6; }

/* El boton de "que me llamen" */
.home-premium .bgsep .llamadme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px !important;
  padding: .85rem 1.7rem !important;
  font-weight: 700;
  font-size: .95rem !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--ph-red) 0%, var(--ph-red-deep) 100%) !important;
  box-shadow: 0 4px 16px rgba(176,45,48,.36);
  isolation: isolate;
  transition: transform .25s var(--ph-ease), box-shadow .25s var(--ph-ease);
}

/* Su ::before va arriba, compartido con el CTA del hero. */

.home-premium .bgsep .llamadme:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(176,45,48,.5);
}

/* ---------------------------------------------------------------
   4. SEGUROS DESTACADOS
   --------------------------------------------------------------- */
.home-premium .site-products {
  background-image: none !important;
  background: var(--ph-wash) !important;
}

.home-premium .site-products > .container { padding-top: 2rem !important; padding-bottom: 2rem !important; }

.home-premium .site-products h3.h4 {
  font-size: clamp(1.3rem, 4.6vw, 1.9rem) !important;
  font-weight: 700;
  color: var(--ph-ink);
  letter-spacing: -.015em;
  margin-bottom: .35rem;
}

/* Filete corto bajo el titulo de seccion */
.home-premium .site-products .text-center.mb-3::after,
.home-premium .site-products .text-center.mb-md-5::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: var(--ph-red);
  margin: .8rem auto 0;
}

.home-premium .site-products .row { margin-left: -.45rem; margin-right: -.45rem; }

.home-premium .site-products article {
  padding: 0 .45rem !important;
  margin-bottom: .9rem;
  flex: 0 0 100%;
  max-width: 100%;
}

.home-premium .site-products article.pb-5 { padding-bottom: 0 !important; }

.home-premium .site-products .article {
  position: relative;
  background: var(--ph-paper) !important;
  background-image: none !important;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r);
  padding: 1.5rem 1.2rem !important;
  overflow: hidden;
  box-shadow: var(--ph-shadow-s);
  transition: transform .3s var(--ph-ease), box-shadow .3s var(--ph-ease),
              border-color .3s var(--ph-ease);
}

/* El velo oscuro heredado sobra sin foto detras */
.home-premium .site-products .article::before { content: none !important; background: none !important; }

/* Barra de acento que se llena al pasar el cursor */
.home-premium .site-products .article::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ph-red), var(--ph-red-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ph-ease);
}

.home-premium .site-products .article:hover {
  transform: translateY(-5px);
  box-shadow: var(--ph-shadow-l);
  border-color: transparent;
}

.home-premium .site-products .article:hover::after { transform: scaleX(1); }

.home-premium .site-products figure {
  margin: 0 0 .9rem !important;
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ph-wash);
  transition: background .3s var(--ph-ease), transform .3s var(--ph-ease);
}

.home-premium .site-products .article:hover figure { background: #fbeceb; transform: scale(1.06); }
.home-premium .site-products figure img { width: 34px !important; height: 34px !important; filter: none !important; }

/* OJO: el titulo de la tarjeta tambien lleva clase .h4, igual que el titulo de
   seccion. Se distinguen por estar dentro de .article, no por la clase. */
.home-premium .site-products .article h3 {
  font-size: 1.05rem !important;
  line-height: 1.35;
  margin: 0 0 .3rem !important;
  color: var(--ph-ink) !important;
}

/* El letter-spacing:-2px del sitio tambien alcanza a los titulos .h4 y a los
   enlaces de las tarjetas: sin esto los nombres de seguro salen pegados. */
.home-premium .site-products h3,
.home-premium .site-products h3.h4,
.home-premium .site-products a { letter-spacing: normal !important; }

.home-premium .site-products h3 a {
  color: var(--ph-ink) !important;
  text-decoration: none !important;
  font-weight: 700;
  transition: color .2s var(--ph-ease);
}

.home-premium .site-products .article:hover h3 a { color: var(--ph-red) !important; }

.home-premium .site-products .flex-grow-1 p {
  font-size: .84rem;
  color: var(--ph-muted) !important;
  margin: .25rem 0 0 !important;
  line-height: 1.5;
}

.home-premium .site-products .flex-grow-1 p strong { letter-spacing: normal; color: var(--ph-red) !important; }

/* El enlace de la tarjeta era una frase larga subrayada ("Ir a seguros de
   Autocaravanas"). Se mantiene el texto, que describe el destino y ayuda en
   accesibilidad, pero como enlace compacto con flecha en vez de subrayado. */
.home-premium .site-products .article p:last-child { margin: .9rem 0 0 !important; }

.home-premium .site-products .article .text-underline,
.home-premium .site-products .article a.text-primary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ph-red) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  transition: gap .3s var(--ph-ease);
}

.home-premium .site-products .article .text-underline::after {
  content: "\f054";           /* chevron-right de Font Awesome 5 */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .68rem;
}

.home-premium .site-products .article:hover .text-underline { gap: .7rem; }

/* Boton de tarjeta cuando existe (marcado de otras plantillas) */
.home-premium .site-products .btn-more {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--ph-red) !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

.home-premium .site-products .btn-more i {
  font-size: .85rem !important;
  margin: 0 !important;
  transition: transform .3s var(--ph-ease);
}

.home-premium .site-products .article:hover .btn-more i { transform: translateX(5px); }

/* ---------------------------------------------------------------
   5. BLOQUE DE MARCA (bgsep2)
   --------------------------------------------------------------- */
.home-premium .bgsep2,
.home-premium .bgsep2-v {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}

.home-premium .bgsep2::before,
.home-premium .bgsep2-v::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(24,25,32,.93) 0%, rgba(24,25,32,.74) 52%, rgba(24,25,32,.35) 100%);
}

.home-premium .bgsep2 > .container,
.home-premium .bgsep2-v > .container { position: relative; z-index: 1; }

.home-premium .bgsep2 h3.h2,
.home-premium .bgsep2-v h3.h2 {
  font-size: clamp(1.5rem, 5.4vw, 2.3rem) !important;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.02em;
}

/* Las tres lineas del logotipo van juntas, como una sola pieza */
.home-premium .bgsep2 h3.h2:first-of-type { margin-bottom: 0; }
.home-premium .bgsep2 h3.h2 + h3.h2 { margin-top: -.15rem; }
.home-premium .bgsep2 h3.h2:last-of-type { color: rgba(255,255,255,.72); margin-bottom: 1.1rem; }

.home-premium .bgsep2 .small,
.home-premium .bgsep2-v .small {
  font-size: .95rem !important;
  line-height: 1.72;
  color: rgba(255,255,255,.86);
  max-width: 54ch;
}

.home-premium .bgsep2 .llamadme {
  border-radius: 999px !important;
  padding: .8rem 1.6rem !important;
  font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  background: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s var(--ph-ease), border-color .25s var(--ph-ease), transform .25s var(--ph-ease);
}

.home-premium .bgsep2 .llamadme:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: #fff !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   6. ASEGURADORAS
   --------------------------------------------------------------- */
.home-premium .site-brands { background: var(--ph-paper); }

.home-premium .site-brands h2 {
  font-size: clamp(1.15rem, 4vw, 1.5rem) !important;
  font-weight: 700 !important;
  color: var(--ph-ink) !important;
  text-transform: none !important;
  letter-spacing: -.01em;
}

.home-premium .site-brands .lead { font-size: .95rem; color: var(--ph-muted); }

.home-premium .site-brands figure {
  margin-bottom: 1rem !important;
  padding: .85rem .5rem;
  border-radius: var(--ph-r-s);
  transition: background .3s var(--ph-ease), transform .3s var(--ph-ease);
}

.home-premium .site-brands figure:hover { background: var(--ph-wash); transform: translateY(-2px); }

/* Los logos en gris y a color al pasar: la parrilla deja de competir
   con el resto de la pagina */
.home-premium .site-brands figure img {
  filter: grayscale(1);
  opacity: .62;
  transition: filter .3s var(--ph-ease), opacity .3s var(--ph-ease);
  max-height: 46px;
  width: auto;
}

.home-premium .site-brands figure:hover img { filter: none; opacity: 1; }

/* ---------------------------------------------------------------
   7. PREGUNTAS FRECUENTES
   --------------------------------------------------------------- */
/* El fondo gris va como style inline en el HTML, asi que hace falta !important */
.home-premium .site-modules { background-color: var(--ph-wash) !important; }

.home-premium .site-modules h2 {
  font-size: clamp(1.3rem, 4.6vw, 1.9rem) !important;
  font-weight: 700;
  color: var(--ph-ink) !important;
  letter-spacing: -.015em;
  border: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* Cada pregunta es una tarjeta blanca; el conjunto deja de ser un bloque gris */
.home-premium .site-modules .acmod {
  background: var(--ph-paper);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-s) var(--ph-r-s) 0 0;
  margin: .55rem 0 0 !important;
  overflow: hidden;
  transition: box-shadow .25s var(--ph-ease), border-color .25s var(--ph-ease);
}

.home-premium .site-modules .acmod:hover {
  box-shadow: var(--ph-shadow-m);
  border-color: var(--ph-red);
}

.home-premium .site-modules .acmod button {
  padding: 1rem 1.15rem !important;
  font-weight: 700 !important;
  font-size: .97rem !important;
  color: var(--ph-ink) !important;
  text-align: left;
  text-decoration: none !important;
  letter-spacing: normal !important;
  white-space: normal;
  gap: 1rem;
  transition: color .2s var(--ph-ease);
}

.home-premium .site-modules .acmod button:hover { color: var(--ph-red) !important; }

/* Las respuestas alternaban fondo rojo y azul con texto blanco. Todas iguales,
   sobre blanco, que es lo que se lee bien en un bloque de preguntas. */
.home-premium .site-modules .bg-lr,
.home-premium .site-modules .bg-lb {
  background: var(--ph-paper) !important;
  color: var(--ph-body) !important;
  border: 1px solid var(--ph-line);
  border-top: 0;
  border-radius: 0 0 var(--ph-r-s) var(--ph-r-s);
  text-align: left !important;
  line-height: 1.72;
  font-size: .93rem;
  padding: 0 1.15rem 1.1rem !important;
}

.home-premium .site-modules .bg-lb *,
.home-premium .site-modules .bg-lr * { color: var(--ph-body) !important; }
.home-premium .site-modules .bg-lb a,
.home-premium .site-modules .bg-lr a { color: var(--ph-red) !important; }

/* ---------------------------------------------------------------
   8. AMPLIACIONES POR TAMANO (mobile first: solo suman)
   --------------------------------------------------------------- */
@media (min-width: 576px) {
  .home-premium .ph-credenciales ul { grid-template-columns: repeat(2, 1fr); }
  .home-premium .ph-credenciales li:nth-last-child(2) { border-bottom: 0; }
  .home-premium .site-products article { flex: 0 0 50%; max-width: 50%; }
  .home-premium .carousel-caption > div { padding-bottom: 3rem !important; }
}

@media (min-width: 768px) {
  .home-premium .introindex { column-count: 2 !important; column-gap: 2.75rem; max-width: none; }
  .home-premium .site-brands figure img { max-height: 54px; }
}

@media (min-width: 992px) {
  .home-premium .ph-credenciales ul { grid-template-columns: repeat(4, 1fr); }
  .home-premium .ph-credenciales li { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.09); }
  .home-premium .ph-credenciales li:last-child { border-right: 0; }
  .home-premium .site-products article { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .home-premium .carousel-caption > div { padding-bottom: 4rem !important; }
  .home-premium .site-products .article { padding: 1.9rem 1.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .home-premium .carousel-caption .btn::before,
  .home-premium .bgsep .llamadme::before { animation: none; }
  .home-premium .carousel-item.active .carousel-caption-header,
  .home-premium .carousel-item.active .carousel-caption-body,
  .home-premium .carousel-item.active .carousel-caption a { animation: none; }
  .home-premium * { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------
   9. AFINADO PREMIUM — segunda vuelta
   Solo CSS, y solo con los tokens --ph-* que ya estaban declarados arriba:
   ni un color nuevo ni un texto tocado. Va al final del fichero a proposito,
   para ganar en cascada a las reglas de las secciones anteriores sin tener
   que subir especificidad a base de !important.
   --------------------------------------------------------------- */

/* 9.1 LISTA DE VENTAJAS (.introindex)
   Los ocho puntos salen del WYSIWYG como <p><strong>. El check es un ::before
   de Font Awesome (U+F00C) en display:inline y SIN margen, asi que se pegaba
   al texto ("✔Correduria de seguros de confianza") y, cuando el punto ocupaba
   dos lineas, la segunda se metia DEBAJO del check en vez de sangrar.
   Pasando el <p> a flex, el ::before se convierte en un item propio: hay hueco
   real entre icono y texto y el sangrado sale solo. El circulo de fondo es el
   mismo recurso que ya usan los iconos de las tarjetas de seguros, para que la
   portada hable un solo idioma visual. */
/* Sangria francesa, no flex. Con display:flex cada nodo suelto del <p> se
   convierte en un item propio y, como los items no se envuelven, en cuanto
   alguien edite ese texto desde el admin y meta un enlace o parta la frase, la
   linea se desbordaria. El par padding-left / text-indent negativo hace lo
   mismo visualmente y le da igual lo que haya dentro del parrafo.
   2,15rem = 1,5rem de circulo + 0,65rem de hueco. */
.home-premium .introindex p {
  padding-left: 2.15rem;
  text-indent: -2.15rem;
  margin-bottom: .55rem !important;
  /* Que un punto no se parta entre las dos columnas del bloque */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
}

.home-premium .introindex p::before {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .65rem;
  vertical-align: -.32rem;
  text-indent: 0;
  font-size: .72rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 50%;
  background: var(--ph-wash);
  color: var(--ph-red);
}

/* El texto de cada punto: el <strong> de serie va a 700 y con el mismo tamano
   que un parrafo normal, y ocho seguidos en negrita se leen como un muro. */
.home-premium .introindex p strong,
.home-premium .introindex p strong strong {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ph-body);
}

/* 9.2 PREGUNTAS FRECUENTES
   Las preguntas alternaban rojo corporativo y carbon (text-primary /
   text-bluecorp, una si y otra no, desde el HTML). Leido de corrido parece un
   error, no un ritmo: se unifican en carbon y el color queda para el hover,
   que es donde aporta informacion. */
.home-premium .site-modules .acmod button span { color: var(--ph-ink) !important; }
.home-premium .site-modules .acmod button:hover span { color: var(--ph-red) !important; }

/* El +/- era un glifo suelto perdido en el margen derecho. Como pastilla
   redonda se lee como lo que es: el control que abre y cierra. */
.home-premium .site-modules .acmod button i {
  flex: 0 0 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
  border-radius: 50%;
  background: var(--ph-wash);
  color: var(--ph-red) !important;
  font-size: .75rem;
  margin: 0 !important;
  transition: background .25s var(--ph-ease), color .25s var(--ph-ease);
}

.home-premium .site-modules .acmod button:hover i {
  background: var(--ph-red);
  color: var(--ph-paper) !important;
}

/* El contenedor del bloque lleva .alert-danger de Bootstrap, que ademas del
   fondo (ya pisado por un style inline) trae color de texto y borde rojizos.
   Se neutraliza: el bloque es una tarjeta blanca, no una alerta. */
.home-premium .site-modules .alert-danger {
  color: var(--ph-body) !important;
  border-color: var(--ph-line) !important;
  box-shadow: var(--ph-shadow-s);
}

.home-premium .site-modules .alert-danger > p {
  color: var(--ph-muted);
  font-size: .93rem;
  margin-bottom: 1.25rem;
}

/* 9.3 ASEGURADORAS
   37 logos ocupaban 830 px de alto. El bloque es respaldo, no protagonista:
   se compacta sin quitar ni un logo. */
.home-premium .site-brands figure {
  margin-bottom: .35rem !important;
  padding: .6rem .4rem;
}

.home-premium .site-brands figure img { max-height: 38px; }

/* 9.4 RITMO VERTICAL
   Cada seccion traia su propio padding heredado de plantilla y la pagina
   avanzaba a saltos. Se iguala el aire entre bloques. */
.home-premium .site-brands > .container { padding-top: 1.75rem; padding-bottom: 1.75rem; }

/* 9.5 TITULARES DE SECCION
   El filete rojo corto bajo el titulo ya existia en "Destacados". Se extiende
   a las otras dos cabeceras de seccion para que las tres se reconozcan como
   piezas del mismo sistema. */
.home-premium .site-brands header,
.home-premium .site-modules > .container > header { position: relative; }

.home-premium .site-brands header::after,
.home-premium .site-modules > .container > header::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: var(--ph-red);
  margin: .8rem 0 0;
}

.home-premium .site-brands header::after { margin-left: auto; margin-right: auto; }

/* 9.6 SELECCION DE TEXTO
   Detalle pequeno y barato: seleccionar texto en la portada devolvia el azul
   del sistema. */
.home-premium ::selection { background: rgba(176,45,48,.16); color: var(--ph-ink); }

@media (min-width: 768px) {
  .home-premium .introindex p { margin-bottom: .7rem !important; }
  .home-premium .site-brands > .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* 9.7 BLOQUE DE MARCA: la mitad derecha
   El texto ocupa la mitad izquierda y la derecha se quedaba en un rojo plano
   sin nada que mirar. Un foco de luz suave da profundidad y hace que el hueco
   parezca decidido y no sobrante. Es blanco a muy baja opacidad: no entra
   ningun color nuevo. */
.home-premium .bgsep2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    62% 78% at 82% 42%,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.05) 45%,
    rgba(255,255,255,0) 72%
  );
}

/* 9.8 FOCO DE TECLADO
   El sitio no marcaba el foco en ninguna parte: quien navega con el tabulador
   se quedaba sin saber donde esta. :focus-visible solo lo pinta cuando el foco
   viene del teclado, asi que no aparece al hacer clic con el raton. */
.home-premium a:focus-visible,
.home-premium button:focus-visible,
.home-premium .btn:focus-visible,
.home-premium [tabindex]:focus-visible {
  outline: 2px solid var(--ph-red);
  outline-offset: 3px;
  border-radius: var(--ph-r-s);
}

.home-premium .bgsep2 a:focus-visible,
.home-premium .bgsep2 button:focus-visible { outline-color: var(--ph-paper); }