/* ══════════════════════════════════════════════════════════════════════════
   COBERTURAS — el estilo de las tarjetas de "Qué cubre" de las landings
   ══════════════════════════════════════════════════════════════════════════
   Un solo archivo para las tres landings, así un cambio de acá se ve en todas:

     · RUS Salud             → components/salud_cotizador.php
     · Asistencia al viajero → components/vista_travel.php
     · Las de ./l/[SLUG]     → routes/landing.php, bloque de coberturas en su
                                variante "Cards"

   Lo cargan index.php (y con eso lo tienen las tres, que salen del mismo
   layout) y las pantallas del armador de landings del admin
   (admin/routes/landings_new.php y landings_edit.php), que dibujan la misma
   vista previa con assets/js/landings_builder.js y no cargan style.css.
   El puntero a este archivo quedó en style.css, donde va el resto del estilo
   global del sitio.

   El estilo es el de la landing de salud, que es el que se tomó como base.

   Las medidas y los colores salen de variables, así que para ajustar algo
   alcanza con tocar la variable. Y si alguna landing necesita otro tinte de
   ícono, se pisan --cob-ico-fondo y --cob-ico-color en su contenedor.

   Los valores van escritos acá y no tomados de las variables de style.css: la
   vista previa del admin no la carga, y su propio :root define algunas de esas
   variables con otros valores (ver la nota de los textos más abajo). */

:root {
  /* Tarjeta */
  --cob-card-fondo: #fff;
  --cob-card-borde: 1px solid #e9ecef;
  --cob-card-radio: var(--bs-border-radius, 0.375rem);
  --cob-card-padding: 30px 28px;

  /* Chip del ícono: el de salud, durazno claro con el ícono naranja */
  --cob-ico-medida: 48px;
  --cob-ico-radio: 14px;
  --cob-ico-icono: 24px;
  --cob-ico-fondo: #fdeae5;
  --cob-ico-color: #e34926;

  /* Textos. Son los valores de --primary-dark, --gray-900 y --gray-200 de
     style.css, pero escritos derecho y no con var(): el :root del admin
     (admin/assets/css/custom.css) trae otro --primary-dark, así que con la
     variable la vista previa del armador mostraría los títulos de un color y
     la landing publicada de otro. */
  --cob-titulo-color: #1f1e48;
  --cob-texto-color: #212529;
}

.cob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* La familia se declara aunque las tres landings ya hereden Montserrat (el
   sitio por --font-family y las de ./l/ por su propia --sans): así la tarjeta
   se ve igual esté donde esté, incluida la vista previa del armador. */
.cob-card {
  font-family: var(--font-family, "Montserrat", sans-serif);
  background: var(--cob-card-fondo);
  border: var(--cob-card-borde);
  border-radius: var(--cob-card-radio) !important;
  padding: var(--cob-card-padding);
  transition: transform 0.25s, box-shadow 0.25s;
}

.cob-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px rgba(15, 27, 61, 0.22);
}

.cob-card__ico {
  width: var(--cob-ico-medida);
  height: var(--cob-ico-medida);
  border-radius: var(--cob-ico-radio);
  background: var(--cob-ico-fondo);
  color: var(--cob-ico-color);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  /* En las landings de ./l/ el ícono puede ser un caracter (✓) y no un SVG */
  font-size: 20px;
  line-height: 1;
}

.cob-card__ico svg,
.cob-card__ico img {
  width: var(--cob-ico-icono);
  height: var(--cob-ico-icono);
}

.cob-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cob-titulo-color);
  margin: 0 0 6px;
}

/* El monto de la cobertura. Sólo lo usan salud y viajero: las landings de ./l/
   no tienen dónde cargarlo. */
.cob-card__amt {
  font-size: 14px;
  font-weight: 600;
  color: var(--cob-titulo-color);
  margin: 0 0 8px;
}

.cob-card__text {
  font-size: 14px;
  color: var(--cob-texto-color);
  margin: 0;
  line-height: 1.5;
}