/* ============================================
   tuAppbogado — Archivo principal de estilos
   ============================================ */

/* Base */

/* === base/variables.css === */
/* ============================================
   Variables de Diseño (Design Tokens)
   ============================================ */
:root {
  /* Colores */
  --color-primary: #0D7BC5;
  --color-primary-dark: #0A6AAE;
  --color-primary-light: #E8F4FD;
  --color-navy: #1B2A4A;
  --color-navy-deep: #111827;
  --color-green: #28A745;
  --color-green-dark: #218838;
  --color-white: #FFFFFF;
  --color-gray-lightest: #F5F7FA;
  --color-gray-light: #E8ECF1;
  --color-gray: #6C757D;
  --color-gray-dark: #343A40;
  --color-text-heading: #1B2A4A;
  --color-badge-orange: #F7931E;

  /* Tipografía */
  --font-primary: 'Montserrat', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.5rem;
  --font-size-hero: 3rem;

  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  --spacing-section: 5rem;

  /* Layout */
  --container-max-width: 1200px;
  --container-padding: 1rem;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 50%;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.15);

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ============================================
   Responsive - Variables
   ============================================ */
@media (max-width: 992px) {
  :root {
    --font-size-hero: 2.5rem;
    --font-size-xxl: 2rem;
    --font-size-xl: 1.75rem;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-hero: 1.75rem;
    --font-size-xxl: 1.5rem;
    --font-size-xl: 1.25rem;
    --font-size-lg: 1.125rem;
    --spacing-section: 3rem;
  }
}


/* === base/reset.css === */
/* ============================================
   Reset y Base
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-dark);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

ul, ol {
  list-style: none;
}

input,
textarea,
button,
select {
  font-family: inherit;
  font-size: inherit;
}


/* === base/tipografia.css === */
/* ============================================
   Tipografía
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

p {
  margin-bottom: var(--spacing-sm);
}

.texto-centro { text-align: center; }
.texto-blanco { color: var(--color-white); }
.texto-principal { color: var(--color-primary); }
.texto-mayusculas { text-transform: uppercase; }


/* === base/utilidades.css === */
/* ============================================
   Utilidades de Layout
   ============================================ */
.contenedor {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.seccion {
  padding: var(--spacing-section) 0;
}

.seccion--oscura {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}

.seccion--marino {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.seccion--azul {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.seccion--gris {
  background-color: var(--color-gray-lightest);
}

.rejilla {
  display: grid;
  gap: var(--spacing-md);
}

.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--5 { grid-template-columns: repeat(5, 1fr); }
.rejilla--6 { grid-template-columns: repeat(6, 1fr); }

.flex {
  display: flex;
}

.flex--centro {
  align-items: center;
  justify-content: center;
}

.flex--entre {
  align-items: center;
  justify-content: space-between;
}

.flex--columna {
  flex-direction: column;
}

.flex--envolver {
  flex-wrap: wrap;
}

.flex--hueco-sm { gap: var(--spacing-sm); }
.flex--hueco-md { gap: var(--spacing-md); }
.flex--hueco-lg { gap: var(--spacing-lg); }

/* ============================================
   Responsive - Utilidades
   ============================================ */
@media (max-width: 992px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--5 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .rejilla--2 { grid-template-columns: 1fr; }
  .rejilla--3 { grid-template-columns: 1fr; }
}


/* Componentes */

/* === componentes/botones.css === */
/* ============================================
   Componentes - Botones
   ============================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1;
}

.boton--principal {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.boton--principal:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.boton--verde {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.boton--verde:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.boton--borde {
  background-color: transparent;
  border: 2px solid var(--color-gray-dark);
  color: var(--color-gray-dark);
}

.boton--borde:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.boton--borde-blanco {
  background-color: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

.boton--borde-blanco:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.boton--lg {
  padding: 1rem 2.5rem;
  font-size: var(--font-size-base);
}

.boton--completo {
  width: 100%;
}

.boton--sm {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-xs);
}

.boton--contactar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background-color: #5DADE2;
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.boton--contactar:hover {
  background-color: #3498DB;
  color: var(--color-white);
}

/* ============================================
   Responsive - Botones
   ============================================ */
@media (max-width: 768px) {
  .boton--contactar {
    padding: 12px 24px;
    font-size: 1rem;
  }
}


/* === componentes/formularios.css === */
/* ============================================
   Componentes - Formularios
   ============================================ */
.grupo-campo {
  margin-bottom: var(--spacing-sm);
}

.grupo-campo label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-gray-dark);
}

.campo {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  transition: border-color var(--transition-fast);
  background-color: var(--color-white);
}

.campo:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 123, 197, 0.1);
}

.campo::placeholder {
  color: var(--color-gray);
}

textarea.campo {
  resize: vertical;
  min-height: 100px;
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.campo-checkbox input[type="checkbox"] {
  margin-top: 3px;
}

/* Campo con icono */
.campo-icono {
  position: relative;
}

.campo-icono__icono {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray);
}

.campo-icono__icono svg {
  width: 20px;
  height: 20px;
}

.campo-icono .campo {
  padding-left: 3rem;
}


/* === componentes/insignias.css === */
/* ============================================
   Componentes - Insignias (Badge / Pill)
   ============================================ */
.insignia {
  display: inline-block;
  padding: 2px 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 20px;
  line-height: 1.5;
}

.insignia--principal {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.insignia--naranja {
  background-color: var(--color-badge-orange);
  color: var(--color-white);
}

.insignia--blanca {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}


/* === componentes/tarjetas.css === */
/* ============================================
   Componentes - Tarjeta de Servicio
   ============================================ */
.tarjeta-servicio {
  padding: var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-md);
  text-align: center;
}

.tarjeta-servicio__titulo {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xs);
}

.tarjeta-servicio__subtitulo {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.tarjeta-servicio__desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

/* ============================================
   Componentes - Tarjeta de Precio
   ============================================ */
.tarjeta-precio {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--transition-fast);
}

.tarjeta-precio:hover {
  transform: translateY(-4px);
}

.tarjeta-precio__cabecera {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-md);
}

.tarjeta-precio__nombre {
  font-size: var(--font-size-md);
  font-weight: 700;
  text-transform: uppercase;
}

.tarjeta-precio__precio {
  padding: var(--spacing-md);
}

.tarjeta-precio__cantidad {
  font-size: var(--font-size-xxl);
  font-weight: 800;
  color: var(--color-primary);
}

.tarjeta-precio__periodo {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.tarjeta-precio__caracteristicas {
  padding: 0 var(--spacing-md) var(--spacing-md);
}

.tarjeta-precio__caracteristicas ul li {
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-gray-lightest);
}

.tarjeta-precio__pie {
  padding: var(--spacing-md);
}


/* === componentes/paginacion.css === */
/* ============================================
   Componente: Paginación
   BEM: .paginacion, .paginacion__btn, etc.
   ============================================ */

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: var(--spacing-lg) 0 var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* ── Botones de paginación ── */
.paginacion__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.625rem;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
  color: var(--color-gray-dark);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.paginacion__btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Página actual */
.paginacion__btn--actual {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  cursor: default;
  pointer-events: none;
}

/* Botón deshabilitado (prev/next cuando no aplica) */
.paginacion__btn--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Anterior y siguiente */
.paginacion__btn--prev,
.paginacion__btn--next {
  font-weight: 700;
  font-size: var(--font-size-base);
}

/* ── Elipsis ── */
.paginacion__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2.5rem;
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  user-select: none;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .paginacion {
    gap: 0.25rem;
  }

  .paginacion__btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.375rem;
    font-size: var(--font-size-xs);
  }

  .paginacion__gap {
    min-width: 1.5rem;
    height: 2rem;
  }
}


/* Módulos */

/* === modulos/cabecera.css === */
/* ============================================
   Módulo: Cabecera (Header / Navbar)
   Origen: styles.css líneas 240-346
   ============================================ */

/* Por defecto (páginas SIN hero): fondo azul corporativo y contenido en blanco */
.cabecera {
  background-color: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--container-padding);
  min-height: 70px;
}

.cabecera__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.cabecera__nav a {
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: opacity var(--transition-fast);
}

.cabecera__nav a:hover {
  opacity: 0.75;
}

.cabecera__nav a.cabecera__nav-boton {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
}

.cabecera__nav a.cabecera__nav-boton:hover {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

.cabecera__telefono {
  text-align: right;
  font-size: var(--font-size-sm);
}

.cabecera__telefono span {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-xs);
}

.cabecera__telefono a {
  color: var(--color-white);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.cabecera__menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-white);
  padding: var(--spacing-xs);
}

/* ── Sobre el hero (home y listados): transparente y superpuesta ──────────
   La cabecera flota sobre la imagen del hero, sea cual sea. */
.pagina-inicio .cabecera,
.pagina-directorio .cabecera,
.pagina-para-abogados .cabecera {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  transition: background-color var(--transition-normal);
}

/* Al hacer scroll: se vuelve azul y fija (patrón típico) */
.pagina-inicio .cabecera.cabecera--fija,
.pagina-directorio .cabecera.cabecera--fija,
.pagina-para-abogados .cabecera.cabecera--fija {
  position: fixed;
  background-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  animation: cabecera-bajar var(--transition-normal) ease;
}

@keyframes cabecera-bajar {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* ── Cabecera Simple (contacto): hereda el azul de base ── */
.cabecera--simple {
  background-color: var(--color-primary);
}

/* ── Cabecera B2B: se mantiene clara sobre fondo blanco (logo azul propio) ── */
.cabecera--b2b {
  background-color: var(--color-white);
  border-top: 3px solid var(--color-primary);
  box-shadow: var(--shadow-card);
}

/* ── Responsive ── */

@media (max-width: 768px) {
  /* En móvil, la cabecera de páginas con hero pasa a sticky con fondo azul
     porque el hero ahora tiene fondo blanco y el texto blanco no se vería */
  .pagina-inicio .cabecera,
  .pagina-directorio .cabecera {
    position: sticky;
    background-color: var(--color-primary);
  }

  .cabecera__nav {
    display: none;
  }

  .cabecera__menu-toggle {
    display: block;
  }

  /* Menú móvil desplegable (azul para mantener el texto blanco legible) */
  .cabecera__nav.esta-abierto {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary);
    box-shadow: var(--shadow-elevated);
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    z-index: 999;
  }

  .cabecera__telefono span {
    display: none;
  }
}


/* === modulos/pie.css === */
/* ============================================
   Módulo: Pie (Footer)
   Diseño 2026 — 4 columnas
   ============================================ */
.pie {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  padding: var(--spacing-xxl) 0 var(--spacing-md);
}

.pie__columnas {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr 1.1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

/* ── Cabeceras de columna ── */
.pie__columna h4 {
  color: var(--color-white);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.pie__titulo-guias {
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-align: center;
}

/* ── Listas de enlaces ── */
.pie__columna ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pie__columna ul li {
  margin-bottom: var(--spacing-xs);
}

.pie__columna ul li a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.pie__columna ul li a:hover {
  color: var(--color-white);
}

/* ── Columna de guías centrada ── */
.pie__columna--guias {
  text-align: center;
}

/* ── Columna de contacto centrada ── */
.pie__columna--contacto {
  text-align: center;
}

.pie__columna--contacto h4 {
  text-align: center;
}

/* ── Info de contacto (teléfono y email) ── */
.pie__info-contacto {
  margin-bottom: var(--spacing-md);
}

.pie__info-contacto p {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-size-sm);
  margin: 0 0 0.25rem 0;
}

.pie__info-contacto a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.pie__info-contacto a:hover {
  color: var(--color-white);
}

/* ── Iconos sociales / contacto ── */
.pie__redes {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  justify-content: center;
}

.pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.pie__redes a:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

.pie__redes a img {
  width: 36px;
  height: 36px;
  display: block;
}

/* ── Logo ── */
.pie__logo {
  margin-top: var(--spacing-md);
  text-align: center;
}

.pie__logo img {
  height: 50px;
  margin-bottom: 0.25rem;
  display: inline-block;
}

.pie__logo span {
  display: block;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

/* ── Banda inferior ── */
.pie__inferior {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.55);
}

.pie__inferior p {
  margin: 0;
}

.pie__inferior a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.pie__inferior a:hover {
  color: var(--color-white);
}

/* ── Pie Simple ── */
.pie--simple {
  padding: var(--spacing-lg) 0;
}

.pie--simple .pie__columnas {
  grid-template-columns: 1fr;
  text-align: center;
}

/* ============================================
   Responsive
   ============================================ */

/* Tablet: 2 columnas */
@media (max-width: 992px) {
  .pie__columnas {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }

  .pie__columna {
    text-align: center;
  }

  .pie__columna h4 {
    text-align: center;
  }
}

/* Móvil: 1 columna */
@media (max-width: 600px) {
  .pie__columnas {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .pie__redes {
    justify-content: center;
  }

  .pie__logo {
    text-align: center;
  }

  .pie__logo img {
    margin: 0 auto 0.25rem;
  }
}


/* === modulos/hero.css === */
/* ============================================
   Módulo: Hero
   Origen: styles.css líneas 466-619
   Nota: La clase .hero se mantiene SIN traducir
   ============================================ */
.hero {
  position: relative;
  /* background-image eliminado: ahora se usa <img class="hero__fondo">
     con fetchpriority="high" para optimizar el LCP */
  color: var(--color-white);
  min-height: 780px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Imagen hero como fondo: reemplaza background-image para mejor LCP */
.hero__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  z-index: 0;
}

.hero__capa {
  /* La imagen fondo2026B ya lleva el tono azulado integrado:
     no aplicamos degradado para no oscurecerla en exceso. */
  display: none;
}

.hero__interior {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-xxl) 0;
}

.hero__contenido {
  text-align: center;
  max-width: 580px;
  width: 100%;
}

.hero__pretitulo {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: var(--spacing-xs);
  color: var(--color-white);
  text-transform: uppercase;
}

.hero__titulo {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--spacing-lg);
  line-height: 1.3;
}

.hero__subtitulo {
  font-size: var(--font-size-lg);
  font-weight: 400;
  margin-bottom: var(--spacing-lg);
  opacity: 0.95;
  line-height: 1.4;
}

/* Hero Formulario */
.hero__formulario {
  max-width: 500px;
  margin: 0 20px 0.7rem;
}

.hero__grupo-campo {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}

.hero__icono-campo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem 0 1rem;
  background: var(--color-white);
}

.hero__icono-campo svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  stroke: var(--color-primary);
}

.hero__campo {
  flex: 1;
  padding: 0.875rem 0.75rem;
  border: none;
  outline: none;
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  min-width: 0;
}

.hero__campo::placeholder {
  color: var(--color-gray);
}

.hero__enviar {
  border-radius: 0;
  padding: 0.875rem 1.5rem;
  white-space: nowrap;
  font-size: var(--font-size-sm);
}

/* Hero Error */
.hero__error {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(220, 53, 69, 0.9);
  border-radius: var(--border-radius-sm);
  color: #fff;
  font-size: var(--font-size-xs);
  text-align: center;
}

.hero__error p {
  margin: 0;
}

/* Hero campo con error */
.hero__campo--error {
  box-shadow: inset 0 0 0 2px #dc3545;
}

/* Hero Búsqueda (legacy) */
.hero__busqueda {
  display: flex;
  max-width: 500px;
  margin: 0 auto var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}

.hero__busqueda .boton {
  border-radius: 0;
  padding: var(--spacing-sm) var(--spacing-lg);
}

.hero__aviso {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--spacing-md);
}

.hero__aviso a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}

.hero__insignia {
  display: inline-block;
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.hero__insignia strong {
  font-size: var(--font-size-xl);
  display: block;
}

/* ── Responsive ── */

@media (max-width: 992px) {
  .hero__interior {
    justify-content: center;
  }

  .hero__contenido {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero {
    background-color: var(--color-white);
    color: var(--color-gray-dark);
  }

  .hero__fondo {
    display: none;
  }

  .hero__pretitulo {
    font-size: var(--font-size-lg);
    color: var(--color-gray-dark);
  }

  .hero__titulo {
    font-size: var(--font-size-md);
    color: var(--color-gray-dark);
  }

  .hero__subtitulo {
    color: var(--color-gray);
  }

  .hero__insignia {
    color: var(--color-gray-dark);
  }

  .hero__insignia strong {
    font-size: var(--font-size-lg);
  }

  .hero__aviso {
    color: rgba(0, 0, 0, 0.5);
  }

  .hero__aviso a {
    color: var(--color-primary);
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 400px;
  }

  .hero__grupo-campo {
    flex-direction: column;
  }

  .hero__enviar {
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    width: 100%;
  }

  .hero__icono-campo {
    display: none;
  }

  .hero__busqueda {
    flex-direction: column;
  }

  .hero__busqueda .boton {
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  }
}


/* === modulos/buscador.css === */
/* ============================================
   Módulo: Buscador (Búsqueda)
   Origen: styles.css líneas 621-672
   ============================================ */
.seccion-busqueda {
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.seccion-busqueda__titulo {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
}

.barra-busqueda {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  border: 2px solid var(--color-gray-light);
  border-radius: var(--border-radius-md);
  overflow: visible;
  transition: border-color var(--transition-fast);
  position: relative;
  flex-wrap: wrap;
}

.barra-busqueda:focus-within {
  border-color: var(--color-primary);
}

.barra-busqueda__campo {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  outline: none;
  font-size: var(--font-size-base);
}

.barra-busqueda__boton {
  background: none;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  color: var(--color-gray);
  transition: color var(--transition-fast);
}

.barra-busqueda__boton:hover {
  color: var(--color-primary);
}

.barra-busqueda__boton svg {
  width: 20px;
  height: 20px;
}

/* ── Autocomplete dropdown ────────────────── */
.barra-busqueda__lista {
  display: none;
  position: absolute;
  top: 100%;
  left: -2px;
  right: -2px;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-top: 1px solid #e8ecf1;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.barra-busqueda__lista.esta-visible {
  display: block;
}

.barra-busqueda__item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  transition: background-color 0.15s ease;
  text-align: left;
}

.barra-busqueda__item:hover {
  background-color: #f0f7ff;
}

.barra-busqueda__item small {
  color: var(--color-gray);
  font-size: var(--font-size-xs);
}

.barra-busqueda__vacio {
  padding: 1rem;
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  text-align: center;
}


/* === modulos/rejilla-especialidades.css === */
/* ============================================
   Módulo: Rejilla de Especialidades
   Origen: styles.css líneas 1267-1348
   ============================================ */
.rejilla-especialidades {
  padding: var(--spacing-section) 0;
}

.rejilla-especialidades__titulo {
  text-align: center;
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
}

.rejilla-especialidades__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg) var(--spacing-md);
  max-width: 900px;
  margin: 0 auto;
}

.rejilla-especialidades__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.rejilla-especialidades__item:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
}

.rejilla-especialidades__item::before {
  display: none;
}

.rejilla-especialidades__icono {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--spacing-xs);
}

.rejilla-especialidades__icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-fast);
}

.rejilla-especialidades__item:hover .rejilla-especialidades__icono img {
  transform: scale(1.06);
}

.rejilla-especialidades__etiqueta {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-dark);
  line-height: 1.3;
}

.rejilla-especialidades__item:hover .rejilla-especialidades__etiqueta {
  color: var(--color-primary);
}

.rejilla-especialidades__cta {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* ── Responsive ── */

@media (max-width: 992px) {
  .rejilla-especialidades__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .rejilla-especialidades__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .rejilla-especialidades__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .rejilla-especialidades__icono {
    width: 110px;
    height: 110px;
  }
}


/* === modulos/rejilla-enlaces.css === */
/* ============================================
   Módulo: Rejilla de Enlaces (Link Grid)
   ============================================ */
.rejilla-enlaces {
  padding: var(--spacing-section) 0;
}

.rejilla-enlaces__titulo {
  text-align: center;
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xl);
}

/* Multicolumna: los enlaces fluyen en orden por columnas (bajando) */
.rejilla-enlaces__columnas {
  column-count: 3;
  column-gap: var(--spacing-xl);
  max-width: 1100px;
  margin: 0 auto;
}

.rejilla-enlaces__item {
  display: block;
  break-inside: avoid;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  padding: 5px 0;
  transition: color var(--transition-fast);
}

.rejilla-enlaces__item:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ── Ver todas ── */
.rejilla-enlaces__ver-todas {
  text-align: center;
  margin-top: var(--spacing-lg);
}

.rejilla-enlaces__enlace-todas {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rejilla-enlaces__enlace-todas:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .rejilla-enlaces__columnas {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .rejilla-enlaces__columnas {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .rejilla-enlaces__columnas {
    column-count: 1;
  }
}


/* === modulos/listado-abogados.css === */
/* ============================================
   Módulo: Listado de Abogados
   Fuente: styles.css secciones 10 (attorney-card),
           23 (Directorio) y promo-banner-inline
   ============================================ */

/* --- Contenedor del listado --- */
.listado-abogados {
  padding: var(--spacing-lg) 0;
}

.listado-abogados__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.listado-abogados__items .tarjeta-abogado:last-child {
  border-bottom: none;
}

/* --- Tarjeta de Abogado --- */
.tarjeta-abogado {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-md);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
  transition: background-color var(--transition-fast);
}

.tarjeta-abogado:hover {
  background-color: var(--color-gray-lightest);
}

.tarjeta-abogado__foto-wrap {
  flex-shrink: 0;
}

.tarjeta-abogado__foto {
  width: 120px;
  height: 120px;
  border-radius: var(--border-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-gray-light);
}

.tarjeta-abogado__info {
  flex: 1;
  min-width: 0;
}

.tarjeta-abogado__cabecera {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.tarjeta-abogado__nombre {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-dark);
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.tarjeta-abogado__nombre a {
  color: inherit;
}

.tarjeta-abogado__nombre a:hover {
  text-decoration: underline;
  color: var(--color-primary);
}

.tarjeta-abogado__estado {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.tarjeta-abogado__verificado {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-primary);
  font-weight: 500;
}

.tarjeta-abogado__verificado svg {
  flex-shrink: 0;
}

.tarjeta-abogado__en-linea {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-green);
  font-weight: 500;
}

.tarjeta-abogado__punto-en-linea {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-green);
}

.tarjeta-abogado__ubicacion {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  margin-bottom: 4px;
  font-weight: 500;
}

.tarjeta-abogado__icono-pin {
  flex-shrink: 0;
}

.tarjeta-abogado__categorias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-gray-dark);
}

.tarjeta-abogado__cat-sep {
  margin: 0 3px;
  color: var(--color-gray);
  font-weight: 400;
}

.tarjeta-abogado__cat-mas {
  color: var(--color-primary);
  font-weight: 500;
  margin-left: 4px;
}

.tarjeta-abogado__cat-mas:hover {
  text-decoration: underline;
}

.tarjeta-abogado__desc {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.tarjeta-abogado__meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  line-height: 1.4;
  margin-bottom: 0;
}

.tarjeta-abogado__meta strong {
  color: var(--color-gray-dark);
}

.tarjeta-abogado__accion {
  flex-shrink: 0;
  align-self: center;
}

/* --- Banner Promo Inline --- */
.banner-promo {
  background-color: #248DCE;
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md) var(--spacing-xxl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  color: var(--color-white);
  margin: var(--spacing-lg) 0;
  overflow: hidden;
}

.banner-promo__contenido {
  flex: 1;
  text-align: center;
}

.banner-promo__logo {
  display: block;
  height: 28px;
  width: auto;
  margin: 0 auto var(--spacing-md);
}

.banner-promo__titulo {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--spacing-xs);
}

.banner-promo__subtitulo {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-lg);
  letter-spacing: 0.5px;
}

.banner-promo__boton {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--border-radius-md);
  transition: opacity var(--transition-fast);
}

.banner-promo__boton:hover {
  opacity: 0.9;
}

.banner-promo__imagen {
  flex-shrink: 0;
  align-self: flex-end;
}

.banner-promo__imagen img {
  display: block;
  height: 230px;
  width: auto;
  margin-bottom: calc(-1 * var(--spacing-md));
  vertical-align: bottom;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .tarjeta-abogado {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: var(--spacing-md);
  }

  .tarjeta-abogado__cabecera {
    justify-content: center;
  }

  .tarjeta-abogado__ubicacion {
    justify-content: center;
  }

  .tarjeta-abogado__categorias {
    justify-content: center;
  }

  .tarjeta-abogado__foto {
    width: 90px;
    height: 90px;
  }

  .tarjeta-abogado__accion {
    align-self: center;
    margin-top: var(--spacing-sm);
  }

  .banner-promo {
    flex-direction: column;
    text-align: center;
  }

  .banner-promo__imagen {
    align-self: center;
  }

  .banner-promo__imagen img {
    height: 200px;
    margin-bottom: 0;
  }
}


/* === modulos/perfil-abogado.css === */
/* ============================================
   Módulo: Perfil de Abogado (Detalle)
   Cabecera con banner + ficha a 3 columnas
   (lateral · central · CTA de contacto)
   ============================================ */

.perfil-cabecera {
  position: relative;
  background-color: var(--color-white);
  padding-bottom: var(--spacing-xxl);
}

/* --- Banner azul con patrón de flechas --- */
.perfil-cabecera__banner {
  height: 180px;
  background-image: url('/img/cabecera-abogado.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Rejilla de la ficha (3 columnas) --- */
.perfil-cabecera__interior {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: var(--spacing-lg);
  align-items: start;
}

/* ============================================
   Columna lateral (foto, nombre, especialidades)
   ============================================ */
.perfil-lateral {
  margin-top: -120px;
  text-align: center;
}

.perfil-lateral__foto {
  width: 100%;
  max-width: 220px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  border: 4px solid var(--color-white);
  box-shadow: var(--shadow-elevated);
  background-color: var(--color-white);
}

.perfil-lateral__nombre {
  font-size: var(--font-size-lg);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin: var(--spacing-sm) 0 var(--spacing-xs);
}

/* --- Estados: Verificado / Online --- */
.perfil-lateral__estados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.perfil-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.perfil-estado svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.perfil-estado--verificado {
  color: var(--color-primary);
}

.perfil-estado--online {
  color: var(--color-green);
}

.perfil-estado__punto {
  width: 9px;
  height: 9px;
  border-radius: var(--border-radius-full);
  background-color: var(--color-green);
}

/* --- Ubicación --- */
.perfil-lateral__ubicacion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  margin-bottom: var(--spacing-xs);
}

.perfil-lateral__ubicacion svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #E0344B;
}

.perfil-lateral__ciudad {
  color: #E0344B;
  font-weight: 700;
}

/* --- Número de colegiado --- */
.perfil-lateral__colegiado {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-gray-dark);
  margin-bottom: var(--spacing-md);
}

.perfil-lateral__colegiado strong {
  color: var(--color-text-heading);
  font-weight: 700;
}

/* --- Especialidades --- */
.perfil-lateral__especialidades {
  border-top: 1px solid var(--color-gray-light);
  padding-top: var(--spacing-sm);
}

.perfil-lateral__especialidades-titulo {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-gray);
  margin-bottom: var(--spacing-xs);
}

.perfil-lateral__especialidades-lista {
  font-size: var(--font-size-sm);
  line-height: 1.9;
  color: var(--color-gray-dark);
}

.perfil-lateral__especialidad {
  color: var(--color-primary);
  text-decoration: none;
}

.perfil-lateral__especialidad:hover {
  text-decoration: underline;
}

.perfil-lateral__separador {
  color: var(--color-gray-light);
}

/* ============================================
   Columna central (migas, contacto, bio, mapa)
   ============================================ */
.perfil-central {
  min-width: 0;
  padding-top: var(--spacing-sm);
}

/* La barra de migas se reutiliza desde el partial, pero aquí
   va integrada en la columna (sin contenedor ni relleno propio) */
.perfil-central .migas-de-pan {
  padding: 0 0 var(--spacing-sm);
}

.perfil-central .migas-de-pan .contenedor {
  max-width: none;
  padding: 0;
}

/* --- Lista de contacto --- */
.perfil-central__contacto {
  list-style: none;
  margin: 0 0 var(--spacing-md);
  padding: 0 0 var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-light);
}

.perfil-central__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
}

.perfil-central__item:last-child {
  margin-bottom: 0;
}

.perfil-central__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.perfil-central__enlace {
  color: var(--color-gray);
  text-decoration: underline;
}

.perfil-central__enlace:hover {
  color: var(--color-primary);
}

/* --- Descripción / biografía --- */
.perfil-central__descripcion {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-gray-dark);
  margin-bottom: var(--spacing-lg);
}

/* --- Mapa de ubicación --- */
.perfil-central__mapa {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  line-height: 0;
}

.perfil-central__mapa iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* --- Botón "Ver teléfono" (se reemplaza por enlace tel: vía JS) --- */
.ver-telefono {
  padding: 0;
  background: none;
  border: none;
  color: var(--color-gray);
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.ver-telefono:hover {
  color: var(--color-primary);
}

.perfil-cabecera__telefono-enlace {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ============================================
   Columna derecha: tarjeta CTA de contacto
   ============================================ */
.perfil-cta {
  margin-top: var(--spacing-lg);
  background-image: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-elevated);
  color: var(--color-white);
}

.perfil-cta__titulo {
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
}

.perfil-cta__titulo strong {
  font-weight: 800;
}

/* --- Ciudad (informativo) --- */
.perfil-cta__ciudad {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 10px 12px;
  margin-bottom: var(--spacing-sm);
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

.perfil-cta__ciudad svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.perfil-cta__ciudad strong {
  font-weight: 700;
}

/* --- Campo de teléfono --- */
.perfil-cta__campo {
  position: relative;
  margin-bottom: var(--spacing-sm);
}

.perfil-cta__campo svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.perfil-cta__campo input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: none;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-white);
  color: var(--color-gray-dark);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.perfil-cta__campo input::placeholder {
  color: var(--color-gray);
}

.perfil-cta__campo input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* --- Insignia "respuesta en menos de 5 minutos" --- */
.perfil-cta__insignia {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  margin-top: var(--spacing-md);
}

.perfil-cta__insignia strong {
  display: block;
  font-size: var(--font-size-md);
  font-weight: 800;
}

/* --- Aviso legal --- */
.perfil-cta__aviso {
  margin-top: var(--spacing-sm);
  font-size: 0.7rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0.85;
}

.perfil-cta__aviso a {
  color: var(--color-white);
  text-decoration: underline;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 992px) {
  .perfil-cabecera__interior {
    grid-template-columns: 1fr;
  }

  .perfil-central {
    padding-top: var(--spacing-md);
  }

  .perfil-cta {
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .perfil-cabecera__banner {
    height: 130px;
  }

  .perfil-lateral {
    margin-top: -100px;
  }

  .perfil-lateral__foto {
    max-width: 180px;
    height: 175px;
  }
}


/* === modulos/como-funciona.css === */
/* ============================================
   Módulo: Cómo Funciona
   Fuente: styles.css sección 22
   ============================================ */

.como-funciona {
  background-color: var(--color-gray-lightest);
  padding: var(--spacing-section) 0;
  text-align: center;
}

.como-funciona__titulo {
  margin-bottom: var(--spacing-xxl);
}

.como-funciona__pasos {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--spacing-xl);
  max-width: 1000px;
  margin: 0 auto;
}

/* Tarjeta de cada paso */
.como-funciona__paso {
  position: relative;
  flex: 1;
  max-width: 320px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
  padding: 70px var(--spacing-lg) var(--spacing-xl);
}

/* Insignia circular azul que sobresale por el borde superior */
.como-funciona__icono {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: var(--border-radius-full);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.como-funciona__icono img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.como-funciona__paso p {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  line-height: 1.6;
}

/* Bloque de texto descriptivo bajo las tarjetas */
.como-funciona__texto {
  max-width: 1000px;
  margin: var(--spacing-xxl) auto 0;
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-gray-dark);
}

.como-funciona__texto p {
  font-size: var(--font-size-base);
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.como-funciona__texto p:last-child {
  margin-bottom: 0;
}

/* CTA final integrada en la sección */
.como-funciona__cta {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.como-funciona__telefono {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.como-funciona__telefono a {
  color: var(--color-primary);
  font-weight: 700;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .como-funciona__pasos {
    flex-direction: column;
    align-items: center;
    gap: 70px;
  }

  .como-funciona__paso {
    max-width: 100%;
    width: 100%;
  }
}


/* === modulos/barra-prensa.css === */
/* ============================================
   Módulo: Barra de Prensa (Logos)
   Fuente: styles.css sección 14
   ============================================ */

.barra-prensa {
  background-color: var(--color-gray-lightest);
  padding: var(--spacing-sm) 0 var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-light);
}

.barra-prensa__interior {
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.barra-prensa__etiqueta {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  font-weight: 500;
}

.barra-prensa__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.barra-prensa__logo {
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.barra-prensa__logo:hover {
  opacity: 0.8;
}

.barra-prensa__logo--texto {
  color: #555;
  display: inline-block;
  line-height: 1;
}

.barra-prensa__banner {
  max-width: 100%;
  height: auto;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .barra-prensa__logos {
    gap: var(--spacing-md);
  }

  .barra-prensa__logo--texto {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .barra-prensa__logos {
    gap: var(--spacing-sm);
  }
}


/* === modulos/form-movil.css === */
/* ============================================
   Formulario Móvil "Plantea tu caso" 
   Solo visible en pantallas ≤ 768px
   Se ubica después de la barra de prensa (logotipos)
   ============================================ */

/* Oculto por defecto (desktop) */
.form-movil {
  display: none;
}

@media (max-width: 768px) {
  .form-movil {
    display: block;
    background-color: #3a3a3a;
    padding: var(--spacing-xl) 0;
  }

  .form-movil__interior {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
  }

  /* ── Cabecera ── */
  .form-movil__cabecera {
    text-align: center;
    margin-bottom: var(--spacing-lg);
  }

  .form-movil__telefono-linea {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm);
  }

  .form-movil__icono-tel {
    color: var(--color-white);
    flex-shrink: 0;
  }

  .form-movil__numero {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    letter-spacing: 0.5px;
  }

  .form-movil__numero:hover {
    text-decoration: underline;
  }

  .form-movil__titulo {
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
  }

  .form-movil__compromiso {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-white);
  }

  /* ── Formulario ── */
  .form-movil__formulario {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .form-movil__campo {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-gray-dark);
    background-color: var(--color-white);
    border: 1px solid #ddd;
    border-radius: var(--border-radius-sm);
    outline: none;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
  }

  .form-movil__campo::placeholder {
    color: #999;
  }

  .form-movil__campo:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(13, 123, 197, 0.15);
  }

  .form-movil__campo--textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
  }

  .form-movil__campo--error {
    border-color: #dc3545;
    animation: form-movil-shake 0.4s ease;
  }

  /* ── Botón enviar ── */
  .form-movil__enviar {
    width: auto;
    align-self: flex-start;
    padding: 0.875rem 2rem;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    letter-spacing: 0.5px;
    margin-top: var(--spacing-xs);
  }

  .form-movil__enviar:hover {
    background-color: var(--color-primary-dark);
  }

  .form-movil__enviar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  /* ── Error ── */
  .form-movil__error {
    background-color: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    text-align: center;
  }

  /* ── Legal ── */
  .form-movil__legal {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: #aaa;
    text-align: center;
    line-height: 1.4;
  }

  .form-movil__legal a {
    color: #ccc;
    text-decoration: underline;
  }

  .form-movil__legal a:hover {
    color: var(--color-white);
  }

  /* ── Animación shake para errores de validación ── */
  @keyframes form-movil-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
  }
}


/* === modulos/barra-estadisticas.css === */
/* ============================================
   Módulo: Barra de Estadísticas
   Fuente: styles.css sección 13
   ============================================ */

.barra-estadisticas {
  background-color: var(--color-gray-lightest);
  padding: var(--spacing-xl) 0;
}

.barra-estadisticas__interior {
  display: flex;
  justify-content: center;
  align-items: stretch;
  text-align: center;
}

.barra-estadisticas__item {
  padding: var(--spacing-md) var(--spacing-xl);
  border: 2px solid var(--color-gray-light);
  border-radius: var(--border-radius-md);
  margin: 0 var(--spacing-xs);
  flex: 1;
  max-width: 200px;
  background-color: var(--color-white);
}

.barra-estadisticas__numero {
  font-size: var(--font-size-xl);
  font-weight: 800;
  display: block;
  line-height: 1.2;
  color: var(--color-text-heading);
}

.barra-estadisticas__etiqueta {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--spacing-xs);
  display: block;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .barra-estadisticas__item {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .barra-estadisticas__interior {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .barra-estadisticas__item {
    flex: 0 0 calc(33.33% - 0.5rem);
    padding: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .barra-estadisticas__item {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: none;
  }

  .barra-estadisticas__numero {
    font-size: var(--font-size-lg);
  }
}


/* === modulos/faq.css === */
/* ============================================
   Módulo: FAQ Accordion
   Fuente: styles.css sección 12
   ============================================ */

.faq-seccion {
  padding: var(--spacing-section) 0;
}

.faq-seccion__icono {
  width: 64px;
  margin: 0 auto var(--spacing-md);
}

.faq-seccion__icono img {
  width: 100%;
  height: auto;
  display: block;
}

.faq-seccion__titulo {
  text-align: center;
  color: var(--color-primary);
  font-size: var(--font-size-xxl);
  font-weight: 400;
  margin-bottom: var(--spacing-xl);
}

.faq-lista {
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.faq-item__pregunta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-gray-lightest);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-heading);
  text-align: center;
}

.faq-item__pregunta:hover {
  color: var(--color-primary);
}

.faq-item__icono {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-lg);
  font-weight: 300;
  line-height: 1;
  color: var(--color-primary);
}

.faq-item__icono::before {
  content: '+';
}

.faq-item.esta-activo .faq-item__icono::before {
  /* signo menos (−) cuando la pregunta está abierta */
  content: '\2212';
}

.faq-item__respuesta {
  display: none;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  line-height: 1.7;
  text-align: center;
}

.faq-item.esta-activo .faq-item__respuesta {
  display: block;
}


/* === modulos/cta-banner.css === */
/* ============================================
   Módulo: CTA Banner
   ============================================ */

.cta-banner {
  background: var(--color-white);
  padding: var(--spacing-xxl) 0;
}

.cta-banner__caja {
  position: relative;
  border: 1px solid rgba(13, 123, 197, 0.25);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xxl) var(--spacing-xl) var(--spacing-xl);
  text-align: center;
}

/* Logo a color, a caballo del borde superior de la caja */
.cta-banner__logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 66px;
  width: auto;
  background: var(--color-white);
  padding: 0 var(--spacing-md);
}

.cta-banner__titulo {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 5px;
  text-transform: uppercase;
}

.cta-banner__subtitulo {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-gray-dark);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
}

.cta-banner__subtitulo strong {
  font-weight: 800;
}

.cta-banner__desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
  letter-spacing: 0.5px;
}

.cta-banner__telefono {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-gray);
}

.cta-banner__telefono a {
  color: var(--color-gray);
  font-weight: 600;
}


/* === modulos/cta-banner-app.css === */
/* ============================================
   Módulo: CTA Banner App
   ============================================ */

.cta-banner-app {
  background-color: #248DCE;
  color: var(--color-white);
  overflow: hidden;
}

.cta-banner-app__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  min-height: 280px;
}

.cta-banner-app__contenido {
  flex: 1;
  padding: var(--spacing-lg) 0;
}

.cta-banner-app__titulo {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin-bottom: var(--spacing-xs);
}

.cta-banner-app__subtitulo {
  font-size: var(--font-size-md);
  font-weight: 400;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-lg);
  opacity: 0.92;
}

.cta-banner-app__tiendas {
  display: flex;
  gap: var(--spacing-md);
}

.cta-banner-app__tiendas img {
  height: 50px;
  width: auto;
  display: block;
}

.cta-banner-app__imagen {
  flex-shrink: 0;
  align-self: flex-end;
}

.cta-banner-app__imagen img {
  display: block;
  height: 250px;
  width: auto;
  vertical-align: bottom;
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 768px) {
  .cta-banner-app__interior {
    flex-direction: column;
    text-align: center;
    min-height: 0;
    padding: var(--spacing-xl) 0;
    gap: var(--spacing-lg);
  }

  .cta-banner-app__contenido {
    padding: 0;
  }

  .cta-banner-app__tiendas {
    justify-content: center;
  }

  .cta-banner-app__imagen {
    align-self: center;
  }

  .cta-banner-app__imagen img {
    height: 240px;
  }
}


/* === modulos/promo-app.css === */
/* ============================================
   Módulo: Promo App
   ============================================ */

.promo-app {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  padding: var(--spacing-xxl) 0;
  overflow: hidden;
}

.promo-app__interior {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
}

.promo-app__telefonos img {
  max-height: 350px;
  width: auto;
}

.promo-app__contenido {
  text-align: center;
  max-width: 400px;
}

.promo-app__contenido h3 {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.promo-app__contenido p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.promo-app__tiendas {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

.promo-app__tiendas img {
  height: 40px;
  width: auto;
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 768px) {
  .promo-app__interior {
    flex-direction: column;
  }

  .promo-app__telefonos:last-child {
    display: none;
  }
}


/* === modulos/popup-caso.css === */
/* ============================================
   Módulo: Popup Multi-Paso — Plantea tu Caso
   ============================================ */

/* ── Modal Overlay & Container ────────────── */
.modal-caso {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-caso[aria-hidden="false"] {
  display: flex;
}

.modal-caso__capa {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: casoFadeIn 0.25s ease;
}

.modal-caso__contenedor {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  width: 95%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: casoSlideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* ── Top Bar ──────────────────────────────── */
.modal-caso__barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #f5f7fa;
  border-bottom: 1px solid #e8ecf1;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
}

.modal-caso__volver,
.modal-caso__cerrar {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: #6c757d;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-caso__volver:hover,
.modal-caso__cerrar:hover {
  color: #343a40;
}

/* ── Progress Bar ─────────────────────────── */
.modal-caso__progreso {
  flex: 1;
  height: 4px;
  background: #e8ecf1;
  border-radius: 2px;
  margin: 0 1rem;
  overflow: hidden;
}

.modal-caso__barra-progreso {
  height: 100%;
  background: #0D7BC5;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── Body ─────────────────────────────────── */
.modal-caso__cuerpo {
  padding: 2rem 2.5rem 2.5rem;
  overflow-y: auto;
  flex: 1;
}

/* ── Paso genérico ────────────────────────── */
.paso-caso {
  text-align: center;
}

.paso-caso__titulo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1B2A4A;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.paso-caso__subtitulo {
  font-size: 0.95rem;
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.paso-caso__boton {
  margin-top: 1.5rem;
  min-width: 200px;
}

.paso-caso__boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.paso-caso__enlace {
  background: none;
  border: none;
  color: #0D7BC5;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}

.paso-caso__enlace:hover {
  color: #0A6AAE;
}

/* ── Paso 1: Autocomplete ─────────────────── */
.paso-caso__campo {
  max-width: 500px;
  margin: 0 auto;
}

.autocomplete-caso {
  position: relative;
}

.autocomplete-caso__campo {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 2px solid #e8ecf1;
  border-radius: 25px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.autocomplete-caso__campo:focus {
  outline: none;
  border-color: #0D7BC5;
  box-shadow: 0 0 0 4px rgba(13, 123, 197, 0.1);
}

.autocomplete-caso__lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}

.autocomplete-caso__lista.esta-visible {
  display: block;
}

.autocomplete-caso__item {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: #343a40;
  transition: background-color 0.15s;
  border-bottom: 1px solid #f5f7fa;
}

.autocomplete-caso__item:last-child {
  border-bottom: none;
}

.autocomplete-caso__item:hover,
.autocomplete-caso__item.esta-activo {
  background-color: #e8f4fd;
  color: #0D7BC5;
}

.autocomplete-caso__item small {
  color: #6c757d;
  font-size: 0.8rem;
}

.autocomplete-caso__vacio {
  padding: 1rem 1.25rem;
  color: #6c757d;
  font-size: 0.9rem;
  text-align: center;
}

/* ── Paso 2: Grid de categorías ───────────── */
.paso-caso__categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: left;
  margin: 1rem 0;
  max-height: 55vh;
  overflow-y: auto;
}

.item-categoria-caso {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #0D7BC5;
  transition: all 0.15s;
  border-radius: 4px;
}

.item-categoria-caso:hover {
  background-color: #e8f4fd;
  color: #0A6AAE;
}

/* ── Paso 3: Textarea ─────────────────────── */
.paso-caso__textarea-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.paso-caso__icono-textarea {
  flex-shrink: 0;
  margin-top: 0.5rem;
}

.paso-caso__icono-textarea svg {
  width: 48px;
  height: 48px;
}

.paso-caso__textarea {
  flex: 1;
  min-height: 180px;
  padding: 1rem;
  border: 2px solid #e8ecf1;
  border-radius: 8px;
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color 0.2s;
}

.paso-caso__textarea:focus {
  outline: none;
  border-color: #0D7BC5;
  box-shadow: 0 0 0 4px rgba(13, 123, 197, 0.1);
}

/* ── Paso 4: Contacto ─────────────────────── */
.paso-caso__campos-contacto {
  max-width: 500px;
  margin: 0 auto;
}

.paso-caso__fila-contacto {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.paso-caso__icono-contacto {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.paso-caso__icono-contacto svg {
  width: 48px;
  height: 48px;
}

.paso-caso__fila-contacto .campo {
  flex: 1;
  padding: 0.875rem 1rem;
  border: 2px solid #e8ecf1;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.paso-caso__fila-contacto .campo:focus {
  outline: none;
  border-color: #0D7BC5;
  box-shadow: 0 0 0 4px rgba(13, 123, 197, 0.1);
}

.paso-caso__legal {
  max-width: 500px;
  margin: 1rem auto 0;
  text-align: left;
}

.paso-caso__legal .campo-checkbox {
  justify-content: center;
}

.paso-caso__caja-info {
  max-width: 500px;
  margin: 1.5rem auto 0;
  background: #e8f4fd;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  text-align: center;
}

.paso-caso__titulo-info {
  font-weight: 700;
  color: #0D7BC5;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.paso-caso__caja-info p {
  font-size: 0.9rem;
  color: #343a40;
  margin: 0;
}

.paso-caso__privacidad {
  max-width: 600px;
  margin: 1.5rem auto 0;
  font-size: 0.75rem;
  color: #999;
  line-height: 1.5;
  text-align: center;
}

/* ── Paso 5: Gracias ──────────────────────── */
.paso-caso__gracias {
  padding: 2rem 0;
}

.paso-caso__icono-gracias {
  margin-bottom: 1.5rem;
}

.paso-caso__gracias .paso-caso__titulo {
  color: #28A745;
  font-size: 2rem;
}

.paso-caso__gracias .paso-caso__subtitulo {
  font-size: 1rem;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Loader ───────────────────────────────── */
.paso-caso__cargando {
  text-align: center;
  padding: 3rem 0;
}

.paso-caso__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e8ecf1;
  border-top-color: #0D7BC5;
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: casoSpin 0.7s linear infinite;
}

.paso-caso__cargando p {
  color: #6c757d;
  font-size: 1rem;
}

/* ── Animations ───────────────────────────── */
@keyframes casoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes casoSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes casoSpin {
  to { transform: rotate(360deg); }
}

/* ── Form input error state ───────────────── */
.campo.esta-error {
  border-color: #dc3545 !important;
}

.paso-caso__error {
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 768px) {
  .modal-caso__cuerpo {
    padding: 1.5rem 1.25rem 2rem;
  }

  .paso-caso__titulo {
    font-size: 1.2rem;
  }

  .paso-caso__categorias {
    grid-template-columns: repeat(2, 1fr);
    max-height: 50vh;
  }

  .paso-caso__textarea-wrap {
    flex-direction: column;
    align-items: center;
  }

  .paso-caso__icono-textarea {
    margin-top: 0;
  }

  .paso-caso__icono-contacto {
    display: none;
  }

  .paso-caso__fila-contacto {
    gap: 0;
  }
}

@media (max-width: 480px) {
  .modal-caso__contenedor {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }

  .modal-caso__barra-superior {
    border-radius: 0;
  }

  .paso-caso__categorias {
    grid-template-columns: 1fr 1fr;
    font-size: 0.85rem;
  }

  .item-categoria-caso {
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
  }
}


/* === modulos/popup-exit.css === */
/* ============================================
   Módulo: Popup Exit Intent — Solicitud de llamada
   ============================================ */

/* ── Modal Overlay & Container ────────────── */
.modal-exit {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-exit[aria-hidden="false"] {
  display: flex;
}

.modal-exit__capa {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: exitFadeIn 0.25s ease;
}

.modal-exit__contenedor {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  width: 92%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: exitSlideDown 0.35s ease;
  padding: 2rem 2rem 2.5rem;
  text-align: center;
}

/* ── Botón cerrar ─────────────────────────── */
.modal-exit__cerrar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: #6c757d;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.modal-exit__cerrar:hover {
  color: #343a40;
}

/* ── Cuerpo: imagen + info ────────────────── */
.modal-exit__cuerpo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Imagen circular con borde azul ──────── */
.modal-exit__imagen {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--color-primary, #0D7BC5);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(13, 123, 197, 0.2);
}

.modal-exit__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Info: logo + textos ─────────────────── */
.modal-exit__info {
  text-align: left;
}

.modal-exit__logo {
  margin-bottom: 0.25rem;
  text-align: center;
}

.modal-exit__titulo {
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-navy, #1B2A4A);
  margin: 0;
  line-height: 1.2;
}

.modal-exit__subtitulo {
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary, #0D7BC5);
  margin: 0.25rem 0 0;
  letter-spacing: 0.5px;
}

/* ── CTA text ─────────────────────────────── */
.modal-exit__cta {
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-navy, #1B2A4A);
  margin: 0 0 1.5rem;
  line-height: 1.3;
}

.modal-exit__cta strong {
  font-weight: 900;
  color: var(--color-primary, #0D7BC5);
}

/* ── Formulario ───────────────────────────── */
.modal-exit__formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 360px;
  margin: 0 auto;
}

.modal-exit__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-size: 1rem;
  color: #1B2A4A;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-exit__input:focus {
  outline: none;
  border-color: var(--color-primary, #0D7BC5);
  box-shadow: 0 0 0 3px rgba(13, 123, 197, 0.12);
}

.modal-exit__input::placeholder {
  color: #9ca3af;
}

.modal-exit__boton {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--color-primary, #0D7BC5);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.3px;
}

.modal-exit__boton:hover {
  background: var(--color-primary-dark, #0A6AAE);
  transform: translateY(-1px);
}

.modal-exit__boton:active {
  transform: translateY(0);
}

.modal-exit__boton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ── Mensaje de éxito ─────────────────────── */
.modal-exit__exito {
  padding: 1.5rem 0;
}

.modal-exit__exito svg {
  margin-bottom: 0.75rem;
}

.modal-exit__exito h3 {
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #28A745;
  margin: 0 0 0.5rem;
}

.modal-exit__exito p {
  font-size: 1rem;
  color: var(--color-gray, #6c757d);
  margin: 0;
}

/* ── Mensaje de error ─────────────────────── */
.modal-exit__error {
  padding: 0.75rem;
  background: #fff3f3;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  margin-top: 0.75rem;
}

.modal-exit__error p {
  color: #dc3545;
  font-size: 0.9rem;
  margin: 0;
}

/* ── Animaciones ──────────────────────────── */
@keyframes exitFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes exitSlideDown {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 600px) {
  .modal-exit__contenedor {
    width: 95%;
    padding: 1.5rem 1.25rem 2rem;
  }

  .modal-exit__cuerpo {
    flex-direction: column;
    gap: 1rem;
  }

  .modal-exit__imagen {
    width: 100px;
    height: 100px;
  }

  .modal-exit__info {
    text-align: center;
  }

  .modal-exit__titulo {
    font-size: 1.4rem;
  }

  .modal-exit__subtitulo {
    font-size: 1rem;
  }

  .modal-exit__cta {
    font-size: 1.1rem;
  }
}


/* === modulos/chat-burbuja.css === */
/* ============================================
   Módulo: Burbuja de chat (lazy-load Zendesk)
   ============================================ */

.chat-burbuja {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  pointer-events: none;
}

.chat-burbuja > * {
  pointer-events: auto;
}

.chat-burbuja--oculto {
  display: none;
}

/* ── Botón flotante ─────────────────────────── */
.chat-burbuja__boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #0D7BC5;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(13, 123, 197, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.chat-burbuja__boton:hover,
.chat-burbuja__boton:focus-visible {
  background: #0A6AAE;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(13, 123, 197, 0.42), 0 4px 8px rgba(0, 0, 0, 0.18);
  outline: none;
}

.chat-burbuja__boton:focus-visible {
  box-shadow: 0 0 0 4px rgba(13, 123, 197, 0.25), 0 8px 24px rgba(13, 123, 197, 0.35);
}

.chat-burbuja__icono {
  display: block;
}

/* ── Indicador online (punto) ───────────────── */
.chat-burbuja__indicador {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9aa4ad;
  border: 2px solid #fff;
  transition: background-color 0.2s ease;
}

.chat-burbuja[data-estado="online"] .chat-burbuja__indicador {
  background: #28A745;
}

.chat-burbuja[data-estado="online"] .chat-burbuja__boton::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(13, 123, 197, 0.45);
  animation: chatBurbujaPulso 2s ease-out infinite;
  pointer-events: none;
}

/* ── Saludo emergente ───────────────────────── */
.chat-burbuja__saludo {
  position: relative;
  max-width: 280px;
  padding: 0.9rem 2.25rem 0.9rem 1.1rem;
  background: #fff;
  color: #1B2A4A;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
  line-height: 1.4;
  animation: chatBurbujaAparecer 0.3s ease;
}

.chat-burbuja__saludo[hidden] {
  display: none;
}

.chat-burbuja__saludo::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.04);
}

.chat-burbuja__saludo-titulo {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.chat-burbuja__saludo-texto {
  margin: 0;
  color: #4a5568;
  font-size: 0.85rem;
}

.chat-burbuja__cerrar-saludo {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #6c757d;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chat-burbuja__cerrar-saludo:hover,
.chat-burbuja__cerrar-saludo:focus-visible {
  background: #f0f3f7;
  color: #1B2A4A;
  outline: none;
}

/* ── Animaciones ────────────────────────────── */
@keyframes chatBurbujaPulso {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.25); opacity: 0;   }
  100% { transform: scale(1.25); opacity: 0;   }
}

@keyframes chatBurbujaAparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .chat-burbuja {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .chat-burbuja__boton {
    width: 56px;
    height: 56px;
  }

  /* En móvil el saludo desperdicia pantalla: lo ocultamos siempre */
  .chat-burbuja__saludo {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-burbuja__boton,
  .chat-burbuja__saludo {
    animation: none;
    transition: none;
  }

  .chat-burbuja[data-estado="online"] .chat-burbuja__boton::before {
    animation: none;
    display: none;
  }
}


/* === modulos/texto-categoria.css === */
/* ============================================
   Módulo: Texto Categoría / Subcategoría
   Sección con título, texto truncado y botón "Leer más"
   ============================================ */

.seccion-texto-categoria {
  padding: var(--spacing-lg, 3rem) 0;
  background: #f8f9fa;
}

.seccion-texto-categoria__contenido {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.seccion-texto-categoria__contenido h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark, #1a1a2e);
  margin-bottom: 1.25rem;
  line-height: 1.3;
  text-transform: uppercase;
}

.seccion-texto-categoria__contenido p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
  margin: 0 0 1rem;
}

/* Texto oculto (span inline dentro del párrafo) */
.seccion-texto-categoria__texto-oculto {
  display: none;
}

.seccion-texto-categoria__texto-oculto.esta-visible {
  display: inline;
}

/* Puntos suspensivos que desaparecen al expandir */
.seccion-texto-categoria__puntos {
  display: inline;
}

.seccion-texto-categoria__puntos.esta-oculto {
  display: none;
}

.seccion-texto-categoria__btn-leer-mas {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.seccion-texto-categoria__btn-leer-mas:hover {
  background: var(--color-primary-dark, #1d4ed8);
  transform: translateY(-1px);
}

.seccion-texto-categoria__btn-leer-mas:active {
  transform: translateY(0);
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 768px) {
  .seccion-texto-categoria__contenido {
    padding: 1.5rem;
  }

  .seccion-texto-categoria__contenido h2 {
    font-size: 1.2rem;
  }

  .seccion-texto-categoria__contenido p {
    font-size: 0.95rem;
  }
}


/* === modulos/migas-de-pan.css === */
/* ============================================
   Migas de pan (Breadcrumbs)
   ============================================ */

.migas-de-pan {
  padding: 40px 0;
}

.migas-de-pan__lista {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.migas-de-pan__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.migas-de-pan__item:not(:last-child)::after {
  content: "›";
  margin: 0 0.5rem;
  color: var(--color-gris-400, #adb5bd);
  font-size: 1rem;
  line-height: 1;
}

.migas-de-pan__enlace {
  color: var(--color-primario, #1a73e8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.migas-de-pan__enlace:hover {
  color: var(--color-primario-oscuro, #1557b0);
  text-decoration: underline;
}

.migas-de-pan__actual {
  color: var(--color-gris-600, #6c757d);
}

.migas-de-pan__item--activo {
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .migas-de-pan {
    padding: 30px 0;
  }

  .migas-de-pan__lista {
    font-size: 0.8rem;
    flex-wrap: wrap;
  }

  .migas-de-pan__item {
    white-space: normal;
  }

  .migas-de-pan__item:not(:last-child)::after {
    margin: 0 0.35rem;
  }
}


/* === modulos/por-que-elegirnos.css === */
/* ============================================
   Módulo: ¿Por qué elegir tuAppbogado?
   ============================================ */

.por-que-elegirnos {
  padding: var(--spacing-section) 0;
  
  /*background-color: var(--color-gray-lightest);*/
}

.por-que-elegirnos__interior {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.por-que-elegirnos__titulo {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-lg);
}

.por-que-elegirnos__texto {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-gray-dark);
  margin-bottom: var(--spacing-md);
}

.por-que-elegirnos__texto:last-child {
  margin-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .por-que-elegirnos {
    padding: var(--spacing-xl) 0;
  }

  .por-que-elegirnos__titulo {
    font-size: var(--font-size-lg);
  }

}


/* Páginas */

/* === paginas/b2b.css === */
/* ============================================
   Página: Para Abogados (B2B)
   ============================================ */

/* ── Hero ─────────────────────────────────── */
.b2b-hero {
  position: relative;
  background-image: url('/img/b2b-hero.jpg');
  background-size: cover;
  background-position: center right;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.b2b-hero__capa {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(20, 40, 70, 0.92) 0%,
    rgba(20, 40, 70, 0.72) 45%,
    rgba(20, 40, 70, 0.15) 100%);
}

.b2b-hero__interior {
  position: relative;
  z-index: 1;
  padding: var(--spacing-xxl) 0;
}

.b2b-hero__texto {
  max-width: 560px;
  color: var(--color-white);
}

.b2b-hero__titulo {
  font-size: var(--font-size-hero);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

.b2b-hero__titulo strong {
  font-weight: 800;
}

.b2b-hero__subtitulo {
  font-size: var(--font-size-md);
  opacity: 0.95;
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.b2b-hero__pregunta {
  font-size: var(--font-size-md);
  opacity: 0.95;
  margin-bottom: var(--spacing-lg);
}

/* ── Bloque App "Lleva el despacho en el bolsillo" ── */
.b2b-app {
  padding: var(--spacing-section) 0;
  background-color: var(--color-white);
}

.b2b-app__interior {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

.b2b-app__titulo {
  font-size: var(--font-size-xxl);
  font-weight: 800;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xs);
}

.b2b-app__subtitulo {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

.b2b-app__texto {
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
}

.b2b-app__tiendas {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
}

.b2b-app__badge img {
  height: 48px;
  width: auto;
  display: block;
}

.b2b-app__imagen {
  text-align: center;
}

.b2b-app__imagen img {
  max-width: 100%;
  max-height: 360px;
  width: auto;
  object-fit: contain;
}

/* ── Bloques de características (iMac) ──────── */
.b2b-feature {
  padding: var(--spacing-section) 0;
  background-color: var(--color-white);
}

.b2b-feature--gris {
  background-color: var(--color-gray-lightest);
}

.b2b-feature__interior {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

.b2b-feature--invertido .b2b-feature__imagen {
  order: 2;
}

.b2b-feature__imagen {
  text-align: center;
}

.b2b-feature__imagen img {
  max-width: 100%;
  height: auto;
}

.b2b-feature__titulo {
  font-size: var(--font-size-xl);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: 1.25;
  margin-bottom: var(--spacing-sm);
}

.b2b-feature__marca {
  color: var(--color-primary);
}

.b2b-feature__subtitulo {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-heading);
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

.b2b-feature__cuerpo {
  color: var(--color-gray);
  line-height: 1.7;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-lg);
}

.b2b-feature__boton {
  display: inline-block;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.7rem 1.5rem;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.b2b-feature__boton:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ── Planes profesionales ─────────────────── */
.b2b-precios {
  padding: var(--spacing-section) 0;
  text-align: center;
  display: none;
}

.b2b-precios__titulo {
  color: var(--color-gray);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xs);
}

.b2b-precios__subtitulo {
  color: var(--color-text-heading);
  font-weight: 700;
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-md);
}

.b2b-precios__intro {
  max-width: 820px;
  margin: 0 auto var(--spacing-xl);
  color: var(--color-gray);
  line-height: 1.6;
}

.b2b-precios__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  align-items: stretch;
}

.tarjeta-plan {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.tarjeta-plan__cabecera {
  position: relative;
  background-color: var(--color-primary);
  padding: var(--spacing-md) var(--spacing-sm) 48px;
}

.tarjeta-plan__nombre {
  color: var(--color-white);
  font-size: var(--font-size-md);
  font-weight: 800;
  text-transform: uppercase;
}

.tarjeta-plan__precio {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 78px;
  border-radius: var(--border-radius-full);
  background: var(--color-white);
  border: 3px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
}

.tarjeta-plan__cuerpo {
  flex: 1;
  padding: 48px var(--spacing-md) var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  line-height: 1.6;
}

.tarjeta-plan__boton {
  display: inline-block;
  margin: 0 var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: 0.7rem 1.5rem;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
}

.tarjeta-plan__boton:hover {
  background-color: var(--color-primary-dark);
}

.tarjeta-plan__iva {
  font-size: 11px;
  color: var(--color-gray);
  margin: var(--spacing-sm) 0 var(--spacing-md);
}

.tarjeta-plan__cinta {
  position: absolute;
  top: 16px;
  right: -42px;
  width: 160px;
  transform: rotate(45deg);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-white);
  padding: 4px 0;
  z-index: 2;
}

.tarjeta-plan__cinta--verde {
  background-color: var(--color-green);
}

.tarjeta-plan__cinta--rojo {
  background-color: #E0322B;
}

/* ── Bloque CTA + Contacto (fondo foto) ───── */
.b2b-contacto {
  position: relative;
  background-image: url('/img/b2b-contacto.jpg');
  background-size: cover;
  background-position: center;
  padding: var(--spacing-section) 0;
}

.b2b-contacto__capa {
  position: absolute;
  inset: 0;
  background: rgba(238, 244, 250, 0.92);
}

.b2b-contacto__interior {
  position: relative;
  z-index: 1;
  text-align: center;
}

.b2b-contacto__cta {
  max-width: 820px;
  margin: 0 auto var(--spacing-xxl);
}

.b2b-contacto__titulo-cta {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-md);
}

.b2b-contacto__cta p {
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
}

.b2b-contacto__titulo {
  font-size: var(--font-size-xl);
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-sm);
}

.b2b-contacto__texto {
  color: var(--color-gray);
  max-width: 700px;
  margin: 0 auto var(--spacing-sm);
}

.b2b-contacto__texto a {
  color: var(--color-primary);
  font-weight: 700;
}

.b2b-contacto__claim {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-lg);
}

.b2b-contacto__formulario {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.b2b-contacto__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.b2b-contacto__mensaje {
  width: 100%;
  margin-bottom: var(--spacing-sm);
  resize: vertical;
}

.b2b-contacto__formulario .campo-checkbox {
  margin-bottom: var(--spacing-md);
}

.b2b-contacto__formulario .boton {
  display: block;
  width: 100%;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 992px) {
  .b2b-app__interior,
  .b2b-feature__interior {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .b2b-feature--invertido .b2b-feature__imagen {
    order: 0;
  }

  .b2b-precios__rejilla {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl) var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .b2b-hero__titulo {
    font-size: var(--font-size-xxl);
  }
}

@media (max-width: 600px) {
  .b2b-precios__rejilla {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
  }

  .b2b-contacto__campos {
    grid-template-columns: 1fr;
  }
}


/* === paginas/descargar-app.css === */
/* ============================================
   Página: Descargar App
   ============================================ */

/* ── App Intro ────────────────────────────── */
.app-intro {
  padding: var(--spacing-section) 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
}

.app-intro__interior {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
  align-items: center;
}

.app-intro__titulo {
  font-size: var(--font-size-xxl);
  font-weight: 800;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-md);
}

.app-intro__texto {
  color: var(--color-gray);
  line-height: 1.7;
  font-size: var(--font-size-md);
}

.app-intro__imagen {
  text-align: center;
}

.app-intro__imagen img {
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
}

/* ── App Pasos ────────────────────────────── */
.app-pasos {
  padding: var(--spacing-section) 0;
  background-color: var(--color-gray-lightest);
}

.app-pasos__cabecera {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.app-pasos__pretitulo {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.app-pasos__titulo {
  font-size: var(--font-size-xxl);
  font-weight: 800;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-xs);
}

.app-pasos__sin-compromiso {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gray);
  text-transform: uppercase;
}

.app-pasos__interior {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-xxl);
  align-items: center;
}

.app-pasos__lista {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.app-paso {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.app-paso__imagen {
  flex-shrink: 0;
  width: 70px;
  text-align: center;
}

.app-paso__imagen img {
  width: 60px;
  height: auto;
}

.app-paso__num {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.app-paso__contenido p {
  color: var(--color-gray);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.app-pasos__telefono {
  text-align: center;
}

.app-pasos__telefono img {
  max-height: 460px;
  width: auto;
}

/* ── App Banner (override subtítulo) ─────── */
.app-banner__texto {
  margin-bottom: var(--spacing-lg);
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ── App Hero ─────────────────────────────── */
.app-hero {
  position: relative;
  background-image: url('/img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: var(--spacing-xxl) 0;
}

.app-hero__capa {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
}

.app-hero__contenido {
  position: relative;
  z-index: 1;
}

.app-hero__titulo {
  font-size: var(--font-size-hero);
  font-weight: 800;
  font-style: italic;
  margin-bottom: var(--spacing-sm);
}

.app-hero__desc {
  color: var(--color-gray);
  margin-bottom: var(--spacing-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.app-hero__telefonos img {
  max-height: 400px;
  margin: 0 auto;
}

/* ── App Banner ───────────────────────────── */
.app-banner {
  background-color: var(--color-white);
  padding: var(--spacing-section) 0;
  text-align: center;
}

.app-banner__titulo {
  font-size: var(--font-size-xl);
  font-weight: 400;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-lg);
  line-height: 1.3;
}

.app-banner__subtitulo {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-sm);
}

.app-banner__tiendas {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-md);
}

.app-banner__tiendas img {
  height: 48px;
  width: auto;
}

/* ── App Características ──────────────────── */
.app-caracteristicas {
  padding: var(--spacing-section) 0;
}

.app-caracteristicas__interior {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.app-caracteristicas__columna {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.app-caracteristica {
  text-align: center;
}

.app-caracteristica__icono {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-full);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
}

.app-caracteristica__icono svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.app-caracteristica__titulo {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: 4px;
}

.app-caracteristica__desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.app-caracteristicas__telefono img {
  max-height: 500px;
  width: auto;
}

/* ── App CTA Descarga ─────────────────────── */
.app-cta-descarga {
  text-align: center;
  padding: var(--spacing-xl) 0 var(--spacing-section);
}

.app-cta-descarga__titulo {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

.app-cta-descarga__tiendas {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

.app-cta-descarga__tiendas img {
  height: 45px;
  width: auto;
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 992px) {
  .app-intro__interior {
    grid-template-columns: 1fr;
  }

  .app-intro__imagen {
    display: none;
  }

  .app-pasos__interior {
    grid-template-columns: 1fr;
  }

  .app-pasos__telefono {
    display: none;
  }

  .app-caracteristicas__interior {
    grid-template-columns: 1fr;
  }

  .app-caracteristicas__telefono {
    order: -1;
  }
}

@media (max-width: 480px) {
  .app-banner__tiendas {
    flex-direction: column;
    align-items: center;
  }
}


/* === paginas/contacto.css === */
/* ============================================
   Página: Contacto
   ============================================ */

.pagina-contacto {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 70px);
  padding: var(--spacing-xl);
  background-color: var(--color-white);
}

.pagina-contacto__interior {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.pagina-contacto__titulo {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-lg);
  line-height: 1.4;
}

.pagina-contacto__titulo strong {
  color: var(--color-primary);
}

.pagina-contacto__formulario {
  margin-bottom: var(--spacing-md);
}

.pagina-contacto__grupo-campo {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--border-radius-sm);
  padding: 0.5rem 1rem;
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-xs);
}

.pagina-contacto__grupo-campo svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.pagina-contacto__grupo-campo input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.5rem;
  font-size: var(--font-size-base);
}

.pagina-contacto__insignia {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gray-dark);
  margin-top: var(--spacing-md);
}

.pagina-contacto__aviso {
  font-size: var(--font-size-xs);
  color: var(--color-gray);
  margin-top: var(--spacing-md);
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 480px) {
  .pagina-contacto {
    padding: var(--spacing-md);
  }
}


/* === paginas/condiciones.css === */
/* ============================================
   Página: Condiciones / Legal
   ============================================ */

.contenido-legal {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-xxl) var(--container-padding);
}

.contenido-legal h1 {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-xl);
}

.contenido-legal h2 {
  font-size: var(--font-size-md);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.contenido-legal p {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-gray);
  margin-bottom: var(--spacing-sm);
}

.contenido-legal ol,
.contenido-legal ul {
  list-style: decimal;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.contenido-legal li {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-gray);
  margin-bottom: var(--spacing-xs);
}

/* Enlaces dentro del texto legal */
.contenido-legal a {
  color: var(--color-primary);
  word-break: break-word;
}

/* Tablas (política de cookies, etc.) */
.contenido-legal .tabla-legal {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.contenido-legal .tabla-legal th,
.contenido-legal .tabla-legal td {
  border: 1px solid var(--color-gray-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  color: var(--color-gray);
}

.contenido-legal .tabla-legal th {
  background-color: var(--color-gray-lightest);
  color: var(--color-text-heading);
  font-weight: 700;
}

/* En móvil la tabla se desplaza horizontalmente */
@media (max-width: 768px) {
  .contenido-legal .tabla-legal {
    display: block;
    overflow-x: auto;
  }
}


/* === paginas/gracias.css === */
/* ============================================
   Página: Gracias (casoenviado / formulario-casoenviado /
                    solicitud-llamada-enviada)
   ============================================ */

/* ── Hero con imagen de fondo ─────────────── */
.gracias-hero {
  position: relative;
  background-image: url('/img/tuappbogado_abogados.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
  padding: var(--spacing-xxl) 0 var(--spacing-lg);
  text-align: center;
  overflow: hidden;
}

.gracias-hero__capa {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.gracias-hero__contenido {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.gracias-hero__titulo {
  font-size: var(--font-size-hero);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 auto var(--spacing-xl);
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.gracias-hero__titulo br:first-of-type + * {
  /* nada — solo placeholder para mantener especificidad si se necesita */
}

/* Caja azul translúcida con el mensaje principal */
.gracias-hero__mensaje {
  display: block;
  max-width: 760px;
  margin: 0 auto var(--spacing-xxl);
  background-color: rgba(27, 65, 110, 0.7);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
}

.gracias-hero__mensaje--corto {
  max-width: 640px;
  padding: var(--spacing-md) var(--spacing-xl);
}

/* Caja gris translúcida con el teléfono */
.gracias-hero__telefono {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.18);
  padding: var(--spacing-sm) var(--spacing-xl);
  font-size: var(--font-size-md);
  line-height: 1.5;
  margin-bottom: var(--spacing-xxl);
  color: var(--color-white);
}

.gracias-hero__telefono strong {
  font-weight: 600;
  white-space: nowrap;
}

/* Aviso final pequeño */
.gracias-hero__aviso {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 1);
  margin: 0 auto;
  max-width: 1100px;
  line-height: 1.5;
}

/* ── Sección "Descarga la App" ───────────── */
.gracias-app {
  background-color: var(--color-white);
  padding: var(--spacing-xxl) 0;
}

.gracias-app__interior {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.gracias-app__telefono {
  text-align: center;
}

.gracias-app__telefono img {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gracias-app__contenido {
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
}

.gracias-app__titulo {
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-text-heading);
  line-height: 1.4;
  margin-bottom: var(--spacing-md);
}

.gracias-app__titulo strong {
  font-weight: 700;
}

.gracias-app__texto {
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.gracias-app__tiendas {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-md);
}

.gracias-app__tiendas a {
  display: inline-block;
}

.gracias-app__tiendas img {
  height: 42px;
  width: auto;
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 992px) {
  .gracias-hero__titulo {
    font-size: var(--font-size-xxl);
  }

  .gracias-app__interior {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .gracias-app__telefono img {
    max-height: 340px;
  }

  /* En móvil mostramos un único teléfono (el android) para simplificar */
  .gracias-app__telefono--ios, .gracias-app__telefono--android {
    display: none;
  }

  .gracias-app__contenido {
    order: -1;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .gracias-hero {
    padding: var(--spacing-xl) 0 var(--spacing-md);
  }

  .gracias-hero__titulo {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
  }

  .gracias-hero__mensaje {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xl);
  }

  .gracias-hero__telefono {
    font-size: var(--font-size-base);
    padding: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-xl);
  }

  .gracias-hero__aviso {
    font-size: 0.7rem;
  }

  .gracias-app__tiendas img {
    height: 38px;
  }
}


/* === paginas/info-subcategoria.css === */
/* ============================================
   Página: Info Subcategoría (Pregunta / Respuesta)
   ============================================ */

.info-subcategoria {
  padding: var(--spacing-lg) 0;
  background: #f8f9fa;
}

.info-subcategoria__tarjeta {
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  max-width: 900px;
  margin: 0 auto;
}

.info-subcategoria__pregunta {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark, #1a1a2e);
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.info-subcategoria__respuesta {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #444;
}

.info-subcategoria__respuesta p {
  margin: 0;
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 768px) {
  .info-subcategoria__tarjeta {
    padding: 1.5rem;
  }

  .info-subcategoria__pregunta {
    font-size: 1.2rem;
  }

  .info-subcategoria__respuesta {
    font-size: 0.95rem;
  }
}