/* arquetipos.css — Componentes de las homes por arquetipo.
 *
 * Los pintan las secciones que escribe `_claude_build/20-paginas/38_homes_arquetipos.php` dentro de
 * widgets `html`, porque no existe widget de Elementor que haga ninguna de las dos cosas:
 *
 *   .uv-tarifas   la tabla de precios orientativos del arquetipo «comparador»
 *   .uv-portales  la rejilla de portales del hub (pespas.com)
 *
 * Todo se cuelga de las variables de marca (`--uv-blue`, `--uv-navy`, `--uv-amber`), que cada
 * dominio redefine en `assets/css/fronts/<slug>.css` sobre el `body`. Por eso aquí no hay ni un
 * hexadecimal de marca: el mismo componente se repinta solo en los trece dominios.
 */

/* ---------------------------------------------------------------------------
   Tabla de precios orientativos
   --------------------------------------------------------------------------- */

.uv-tarifas {
  width: 100%;
  /* La tabla desborda en móvil antes que cualquier otra cosa de la página. Scroll propio, no de la
     página: `overflow-x` en el body está prohibido aquí porque anula `position:sticky` (misma
     trampa que documentan la barra del buscador y el formulario de anuncio). */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.uv-tarifas table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  font-size: 15.5px;
}

.uv-tarifas thead th {
  background: var(--uv-navy, #0F172A);
  color: #fff;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 16px;
}

.uv-tarifas tbody td {
  padding: 14px 16px;
  border-top: 1px solid #EEF2F6;
  color: #475569;
  vertical-align: top;
}

.uv-tarifas tbody tr:first-child td { border-top: 0; }
.uv-tarifas tbody tr:nth-child(even) { background: #F8FAFC; }
.uv-tarifas tbody td strong { color: var(--uv-navy, #0F172A); }

.uv-tarifas .uv-precio {
  color: var(--uv-blue, #2563EB);
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
}

.uv-tarifas-nota {
  margin: 12px 2px 0;
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.5;
}
.uv-tarifas-nota i { color: var(--uv-amber, #F59E0B); margin-right: 6px; }

/* ---------------------------------------------------------------------------
   Rejilla de portales (hub)
   --------------------------------------------------------------------------- */

.uv-portales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  width: 100%;
}

/* `--p` lo inyecta cada tarjeta en línea con el color de SU portal: es el único sitio de todo el
   proyecto donde conviven trece marcas en la misma página, así que el color no puede venir del
   front que la sirve. */
.uv-portal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-top: 3px solid var(--p, var(--uv-blue, #2563EB));
  border-radius: 14px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.uv-portal:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
  border-color: var(--p, var(--uv-blue, #2563EB));
}

.uv-portal img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 6px;
}

/* El nombre se repite bajo el logotipo a propósito: el logotipo es un SVG y, si no carga o el
   usuario navega con imágenes desactivadas, la tarjeta se quedaría sin decir de quién es. */
.uv-portal-n {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--uv-navy, #0F172A);
  line-height: 1.25;
}

.uv-portal-l {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.5;
}

/* `.elementor-kit-4 a` es (0,2,0) y pinta de azul CUALQUIER enlace: sin ganarle, el nombre del
   portal sale azul sobre la tarjeta y el lema también. Clase + elemento = (0,2,1) y gana.
   Es la misma familia de trampa que documenta el módulo de seguimientos. */
.uv-portales a.uv-portal,
.uv-portales a.uv-portal:hover,
.uv-portales a.uv-portal:focus { color: inherit; }

@media (max-width: 480px) {
  .uv-portales { grid-template-columns: 1fr; }
  .uv-tarifas table { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------------
   Estructura mínima de los bloques nuevos de la portada

   `[ctop_gremios]` y `[ctop_planes]` los VISTE cada maquetación (la de Pespas en
   `core/maqueta-pespas.css`). Aquí solo está lo que impide que se vean rotos en
   un dominio que use el shortcode sin esa maquetación: que la rejilla sea
   rejilla y que las tarjetas no se solapen.

   Sin un solo hexadecimal de marca, igual que el resto de este fichero: todo
   cuelga de las variables `--uv-*` que cada front redefine.
   --------------------------------------------------------------------------- */

.ctop-gremios {
  display: grid;
  grid-template-columns: repeat(var(--ctop-gremios-cols, 4), minmax(0, 1fr));
  gap: 12px;
}
.ctop-gremio-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; text-decoration: none; color: inherit;
  border: 1px solid rgba(0, 0, 0, .1);
}
.ctop-gremio-card__marca { width: 10px; height: 10px; background: var(--uv-amber); display: block; }
.ctop-gremio-card__t { font-weight: 700; }
.ctop-gremio-card__d { font-size: 13px; line-height: 1.45; opacity: .75; }

.uv-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.uv-plan { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid rgba(0, 0, 0, .12); }
.uv-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.uv-plan__precio { display: flex; align-items: baseline; gap: 5px; }
.uv-plan__cta { margin-top: auto; text-align: center; padding: 14px; text-decoration: none; }

@media (max-width: 900px) {
  .ctop-gremios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uv-planes { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ctop-gremios { grid-template-columns: 1fr; } }

/* Estructura mínima de las cintas (`[ctop_gremios modo="marquesina"]` y
   `[ctop_destacados modo="marquesina"]`). La animación y el aspecto los pone
   cada maquetación; esto solo evita que en un dominio sin maquetación propia las
   tarjetas se apilen y desborden la página. Sin animación, la cinta se desplaza
   a mano, que es exactamente lo que se quiere en ese caso. */
.ctop-gremios-marq,
.ctop-dest-marq { display: flex; flex-direction: column; gap: 12px; overflow-x: auto; width: 100%; }
.ctop-gremios-marq__cinta,
.ctop-dest-marq__cinta { display: flex; gap: 12px; width: max-content; }
.ctop-gremios-marq .ctop-gremio-card { width: 250px; flex-shrink: 0; }
.ctop-dest-card {
  display: flex; gap: 16px; width: 340px; flex-shrink: 0;
  padding: 20px; border: 1px solid rgba(0, 0, 0, .1); text-decoration: none; color: inherit;
}
.ctop-dest-card__ini {
  width: 56px; height: 56px; flex-shrink: 0; background: var(--uv-ink, #0F172A); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.ctop-dest-card__cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctop-dest-card__nota { display: flex; align-items: center; gap: 8px; }
.ctop-dest-card__marca { width: 9px; height: 9px; background: var(--uv-amber, #F59E0B); }