/**
 * CompliaPyme — estilos propios del sitio
 * =====================================================================
 * Va aparte de styles.css a propósito: aquel son casi 6.000 líneas
 * heredadas del CMS, con restos de tres clientes distintos. Todo lo que
 * sea de ESTE producto vive aquí, para que dentro de un año se sepa qué
 * es propio y qué es herencia.
 *
 * Convención: prefijo `cp-` en todas las clases, igual que en la
 * aplicación. Los colores salen de las variables de marca definidas en
 * styles.css (:root), que a su vez salen del logo.
 * =====================================================================
 */

:root {
    /* Azul medio del logo, oscurecido para TEXTO PEQUEÑO.
       =================================================================
       El #2E86AB de marca se queda en 4,11:1 sobre blanco y 3,90:1 sobre
       el gris de las secciones claras. Para texto pequeño WCAG AA pide
       4,5:1, así que en antetítulos y etiquetas —que van a 12-13 px— no
       llegaba.

       #29799A es el mismo tono un 10 % más oscuro: 4,89:1 y 4,64:1.
       A simple vista es el mismo azul; la diferencia solo la nota quien
       la necesita.

       El #2E86AB original se sigue usando donde no es texto: iconos
       grandes, bordes y fondos suaves. */
    --cp-azul-texto: #29799A;
}

/* =====================================================================
   1. SECCIONES
   ===================================================================== */

.cp-seccion {
    padding: 72px 0;
}

.cp-seccion--claro {
    background: var(--gray-100);
}

.cp-seccion--oscuro {
    background: var(--brand-primary);
    color: var(--white);
}

.cp-seccion--oscuro .cp-seccion-titulo {
    color: var(--white);
}

/* Sobre azul oscuro, el gris de siempre no llega: se aclara.
   #D6DEE8 sobre #1E3A5F da 8,5:1, muy por encima del 4,5:1 de AA. */
.cp-seccion--oscuro .cp-seccion-entrada,
.cp-seccion--oscuro .cp-parrafo {
    color: #D6DEE8;
}

/* Tarjetas dentro de una banda oscura: fondo translúcido en vez de
   blanco. Un bloque blanco puro sobre azul corta demasiado y el ojo
   salta de una tarjeta a otra sin leer la sección como un conjunto. */
.cp-seccion--oscuro .cp-card {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}

.cp-seccion--oscuro .cp-card-titulo {
    color: var(--white);
}

.cp-seccion--oscuro .cp-card-texto {
    color: #D6DEE8;
}

.cp-seccion--oscuro .cp-card-icono {
    background: rgba(244, 162, 97, 0.16);
    color: var(--brand-accent);
}

.cp-seccion--oscuro .cp-lista-check li {
    color: #D6DEE8;
}

.cp-seccion--oscuro .cp-lista-check li::before {
    color: var(--brand-accent);
}

.cp-seccion--oscuro .cp-lista-check strong {
    color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
    .cp-seccion--oscuro .cp-card:hover {
        border-color: var(--brand-accent);
        box-shadow: none;
    }
}

/* Cabecera de sección: título y entrada, centrados y con ancho acotado.
   El límite de 62ch no es estético: una línea de texto más larga que eso
   obliga al ojo a buscar el principio del renglón siguiente y se pierde. */
.cp-seccion-cabecera {
    max-width: 62ch;
    margin: 0 auto 48px;
    text-align: center;
}

.cp-seccion-titulo {
    font-family: var(--font-primary);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 14px;
    line-height: 1.25;
}

.cp-seccion-entrada {
    font-size: 1.1rem;
    color: var(--gray-700);
    margin-bottom: 0;
    line-height: 1.65;
}

/* Variante para secciones a dos columnas, donde la cabecera no va
   centrada sino alineada con su columna. */
.cp-seccion-cabecera--izq {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.cp-seccion-titulo--izq {
    text-align: left;
}

/* Párrafo de cuerpo dentro de una sección.
   Existe como clase y no como estilo en línea porque este contenido se
   edita desde el admin: un `style=""` escrito a mano sobrevive a la
   edición pero se queda fuera de cualquier cambio de paleta o de tamaño
   que se haga después en la hoja de estilos. */
.cp-parrafo {
    color: var(--gray-700);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
}

.cp-parrafo:last-child {
    margin-bottom: 0;
}

/* Antetítulo: la etiqueta pequeña sobre el título. Ayuda a situar la
   sección de un vistazo cuando se hace scroll rápido. */
.cp-antetitulo {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Variante oscurecida: a 12,8 px hace falta 4,5:1 y el azul de marca
       se queda en 4,11:1. Ver la nota de :root. */
    color: var(--cp-azul-texto);
    margin-bottom: 10px;
}

.cp-seccion--oscuro .cp-antetitulo {
    color: var(--brand-accent);
}

/* =====================================================================
   2. TARJETAS
   ===================================================================== */

.cp-card {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 28px 26px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* El hover solo se aplica donde hay puntero fino (ratón).
   En táctil, :hover se queda "pegado" tras tocar y la tarjeta se queda
   levantada hasta que tocas otra cosa. */
@media (hover: hover) and (pointer: fine) {
    .cp-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(30, 58, 95, 0.10);
        border-color: var(--brand-secondary);
    }
}

.cp-card-icono {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(46, 134, 171, 0.12);
    color: var(--brand-secondary);
    margin-bottom: 18px;
}

.cp-card-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 10px;
}

.cp-card-texto {
    color: var(--gray-700);
    line-height: 1.65;
    margin-bottom: 0;
    font-size: 0.98rem;
}

/* =====================================================================
   3. PASOS NUMERADOS
   ===================================================================== */

.cp-paso {
    height: 100%;
    padding: 24px 20px 24px 0;
    position: relative;
}

.cp-paso-numero {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.cp-paso-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 8px;
}

.cp-paso-texto {
    color: var(--gray-700);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* =====================================================================
   4. TARJETAS DE PÚBLICO (las dos grandes)
   ===================================================================== */

.cp-publico {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 16px;
    padding: 34px 32px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .cp-publico:hover {
        border-color: var(--brand-secondary);
        box-shadow: 0 14px 32px rgba(30, 58, 95, 0.10);
    }
}

.cp-publico-etiqueta {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Misma razón que en .cp-antetitulo: texto pequeño, azul oscurecido. */
    color: var(--cp-azul-texto);
    margin-bottom: 8px;
}

.cp-publico-titulo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 14px;
}

.cp-publico-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.cp-publico-lista li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 11px;
    color: var(--gray-700);
    line-height: 1.55;
}

.cp-publico-lista li::before {
    content: '\F26E'; /* bi-check-lg */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--brand-secondary);
    font-weight: 700;
}

/* mt-auto: empuja el botón al fondo para que las dos tarjetas tengan el
   botón a la misma altura aunque sus listas midan distinto. */
.cp-publico-accion {
    margin-top: auto;
}

/* =====================================================================
   5. MATERIAS (las píldoras de normativa)
   ===================================================================== */

.cp-materias {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.cp-materia {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--gray-300);
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 0.94rem;
}

.cp-materia i {
    color: var(--brand-secondary);
    font-size: 1.05rem;
}

/* =====================================================================
   6. BLOQUE DESTACADO (la nota sobre la IA)
   ===================================================================== */

.cp-destacado {
    background: var(--white);
    border-left: 4px solid var(--brand-accent);
    border-radius: 0 12px 12px 0;
    padding: 28px 30px;
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.07);
}

.cp-destacado-titulo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cp-destacado-titulo i {
    color: var(--brand-accent);
}

.cp-destacado p {
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 0;
}

/* =====================================================================
   7. LLAMADA A LA ACCIÓN FINAL
   ===================================================================== */

.cp-cta {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: var(--white);
    padding: 66px 0;
    text-align: center;
}

.cp-cta-titulo {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--white);
}

.cp-cta-texto {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 58ch;
    margin: 0 auto 30px;
    line-height: 1.65;
}

/* =====================================================================
   8. BOTONES
   ===================================================================== */

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    /* 44 px de alto mínimo: el objetivo táctil cómodo de WCAG 2.5.5. */
    min-height: 44px;
}

/* Naranja sobre azul oscuro: ahí sí luce y contrasta.
   Sobre blanco no se usa como fondo de botón con texto blanco, porque el
   naranja de marca es claro y el texto se perdería. */
.cp-btn--principal {
    background: var(--brand-accent);
    color: var(--brand-primary-dark);
    border-color: var(--brand-accent);
}

.cp-btn--principal:hover,
.cp-btn--principal:focus-visible {
    background: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
    color: var(--brand-primary-dark);
}

.cp-btn--solido {
    background: var(--brand-primary);
    color: var(--white);
    border-color: var(--brand-primary);
}

.cp-btn--solido:hover,
.cp-btn--solido:focus-visible {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--white);
}

.cp-btn--linea {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.cp-btn--linea:hover,
.cp-btn--linea:focus-visible {
    background: var(--brand-primary);
    color: var(--white);
}

.cp-btn--claro {
    background: var(--white);
    color: var(--brand-primary);
    border-color: var(--white);
}

.cp-btn--claro:hover,
.cp-btn--claro:focus-visible {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

/* =====================================================================
   9. LISTA DE COMPROBACIÓN
   ===================================================================== */

.cp-lista-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cp-lista-check li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
    color: var(--gray-700);
    line-height: 1.6;
}

.cp-lista-check li::before {
    content: '\F26E'; /* bi-check-lg */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-secondary);
    font-weight: 700;
    font-size: 1.05rem;
}

.cp-lista-check strong {
    color: var(--brand-primary);
}

/* =====================================================================
   10. PREGUNTAS FRECUENTES
   =====================================================================
   Con <details>/<summary> nativos: se abren y cierran sin una línea de
   JavaScript, funcionan con teclado desde el primer día y el buscador ve
   el texto de las respuestas aunque estén plegadas. Un acordeón hecho a
   mano suele fallar en las tres cosas.
   ===================================================================== */

.cp-faq {
    max-width: 46rem;
    margin: 0 auto;
}

.cp-faq-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.cp-faq-item > summary {
    padding: 18px 22px;
    font-weight: 600;
    color: var(--brand-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* 44 px de alto: objetivo táctil cómodo. */
    min-height: 44px;
}

/* Fuera el triángulo por defecto, que cambia de dibujo en cada navegador. */
.cp-faq-item > summary::-webkit-details-marker {
    display: none;
}

.cp-faq-item > summary::after {
    content: '\F282'; /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    color: var(--brand-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cp-faq-item[open] > summary::after {
    transform: rotate(180deg);
}

.cp-faq-item[open] > summary {
    border-bottom: 1px solid var(--gray-200);
}

.cp-faq-respuesta {
    padding: 18px 22px;
    color: var(--gray-700);
    line-height: 1.7;
}

.cp-faq-respuesta p:last-child {
    margin-bottom: 0;
}

/* El foco se ve: quien navega con teclado tiene que saber en qué pregunta
   está antes de abrirla. */
.cp-faq-item > summary:focus-visible {
    outline: 3px solid var(--brand-secondary);
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .cp-faq-item > summary::after {
        transition: none;
    }
}

/* =====================================================================
   11. PÁGINAS LEGALES
   ===================================================================== */

/* Aviso de borrador. Deliberadamente feo: es una señal de trabajo
   pendiente, no un elemento de diseño. Debe desaparecer al publicar. */
.cp-legal-aviso {
    background: #FFF4E5;
    border: 1px solid var(--brand-accent);
    border-left-width: 5px;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 32px;
    color: #7A4A12;
    line-height: 1.6;
}

/* Un texto legal se lee mal en línea larga: el ojo pierde el renglón.
   66 caracteres es el ancho cómodo de lectura continuada. */
.page-body h2 + p,
.page-body h3 + p {
    margin-top: 0;
}

.page-body .cp-legal-fecha {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Los marcadores de contenido pendiente se ven a la legua, para que no
   se cuele uno al publicar. */
.page-body {
    --cp-pendiente: #C0392B;
}

/* =====================================================================
   12. MÓVIL
   ===================================================================== */

@media (max-width: 767px) {
    .cp-seccion {
        padding: 48px 0;
    }

    .cp-seccion-cabecera {
        margin-bottom: 32px;
    }

    .cp-seccion-titulo {
        font-size: 1.65rem;
    }

    .cp-cta {
        padding: 48px 0;
    }

    .cp-cta-titulo {
        font-size: 1.55rem;
    }

    .cp-publico,
    .cp-card {
        padding: 24px 20px;
    }

    /* El botón ocupa el ancho: en móvil es el elemento con el que se
       interactúa y no debe quedar como un enlace perdido. */
    .cp-cta .cp-btn,
    .cp-publico-accion .cp-btn {
        width: 100%;
    }
}

/* =====================================================================
   ACCESO Y ALTA EN LA APLICACIÓN
   =====================================================================
   Los dos botones que llevan a app.compliapyme.com. Se activan desde
   Ajustes → Barra superior, y se pintan en tres sitios: la topbar en
   escritorio, la cabecera móvil y el menú desplegable.

   Jerarquía deliberada: el alta es una píldora de color y el acceso un
   enlace de texto. Quien ya es cliente busca el acceso y lo encuentra;
   quien no lo es todavía tiene que tropezarse con el alta.
   ===================================================================== */

/* Dentro de una barra de alto FIJO (--topbar-height, 40 px): lo que crezca
   por encima de eso desborda, porque el header se coloca en
   `top: var(--topbar-height)` pase lo que pase. 32 px deja 4 px de aire
   arriba y abajo y supera de sobra el mínimo táctil de WCAG 2.2 (24 px,
   SC 2.5.8). */
.topbar .cp-topbar-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar .cp-topbar-cta .cp-cta-acceso {
    color: var(--topbar-text);
    font-size: 13.5px;
    font-weight: 500;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.topbar .cp-topbar-cta .cp-cta-acceso:hover,
.topbar .cp-topbar-cta .cp-cta-acceso:focus-visible {
    color: var(--brand-accent-dark);
}

/* Texto en azul marino sobre el naranja de marca, y NO blanco: blanco
   sobre #F4A261 se queda en 2,1:1 y no llega al 4,5:1 que pide WCAG
   1.4.3. El azul corporativo sobre ese naranja da 5,3:1. */
.topbar .cp-topbar-cta .cp-cta-alta {
    background: var(--brand-accent);
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    height: 32px;
    padding: 0 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: var(--transition);
}

/* En hover se invierte a azul con texto blanco (11,5:1). Oscurecer el
   naranja manteniendo el texto azul dejaba el contraste en 4,3:1, por
   debajo del mínimo. */
.topbar .cp-topbar-cta .cp-cta-alta:hover,
.topbar .cp-topbar-cta .cp-cta-alta:focus-visible {
    background: var(--brand-primary);
    color: var(--white);
}

/* Alta desde la cabecera móvil: el mismo icono redondo que sus vecinos,
   pero en el naranja de marca, que es lo que lo distingue de una utilidad
   más. Icono en azul marino, por el mismo contraste de arriba. */
.navbar-quick-icons .cp-quick-alta {
    background: var(--brand-accent);
    color: var(--brand-primary);
}

.navbar-quick-icons .cp-quick-alta:hover,
.navbar-quick-icons .cp-quick-alta:focus-visible {
    background: var(--brand-primary);
    color: var(--white);
}

/* Alta dentro del menú desplegable (solo móvil): ahí sí hay sitio para el
   texto, que es lo que de verdad explica el botón.
   Los `!important` no son un descuido y no se arreglan cargando este
   fichero después: `.header .navbar-nav .nav-link` de styles.css fija
   color y padding CON !important, y eso gana al orden. Sin ellos la
   píldora saldría con el texto azul de menú y el padding de un enlace. */
.header .navbar-nav .nav-item .cp-nav-alta {
    display: inline-flex;
    align-items: center;
    background: var(--brand-accent);
    color: var(--brand-primary) !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 18px !important;
    margin-top: 6px;
    transition: var(--transition);
}

/* Sin el subrayado animado del resto del menú: dentro de una píldora se
   ve como una raya suelta, no como un subrayado. */
.header .navbar-nav .nav-item .cp-nav-alta::before {
    display: none;
}

.header .navbar-nav .nav-item .cp-nav-alta:hover,
.header .navbar-nav .nav-item .cp-nav-alta:focus-visible {
    background: var(--brand-primary);
    color: var(--white) !important;
}

/* Quien haya pedido menos movimiento en su sistema no ve ninguno.
   WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
    .cp-card,
    .cp-publico,
    .cp-btn,
    .cp-cta-alta,
    .cp-quick-alta,
    .cp-nav-alta {
        transition: none;
    }

    .cp-card:hover,
    .cp-publico:hover {
        transform: none;
    }
}