/* =========================================================================
   custom.css — estilos propios de Circulo Contable
   Se carga DESPUES de main.css (el CSS del template comercial, 390 KB).
   Regla: nunca editar main.css. Todo ajuste propio va aqui, asi el template
   se puede reemplazar sin perder el trabajo hecho.
   ========================================================================= */

/* =========================================================================
   SISTEMA DE DISENO
   Medido sobre la pagina renderizada, no elegido a mano. Lo que habia:
     - 8 colores oscuros distintos para el mismo trabajo: #212529 (el gris de
       Bootstrap, 632 usos), #040404, #000, #3d3d42, #0c3a30 y #032530 (verde y
       teal, restos de la paleta original de la plantilla), #50514e y #5a5b5b.
     - 2 azules: #1c74bc y #0d6efd (Bootstrap).
     - h2 con 3 tamanos, h3 con 4, parrafos con 4 (uno con line-height igual al
       font-size).
   Aqui se colapsa a un sistema unico. Los tokens --cc-* originales se
   repuntan a la paleta real en vez de mantener una segunda paleta paralela.
   ========================================================================= */

:root {
    /* Marca */
    /* El naranja original de la plantilla era #ec4c1c: con texto blanco encima
       da 3.74:1, bajo el minimo AA de 4.5, y lo usa el CTA principal del sitio.
       Este tono da 5.2:1 manteniendo el mismo caracter. Es un solo token: si se
       prefiere el original, se cambia aqui y vuelve todo. */
    --cc-naranja: #c2410c;          /* accion: botones, cuadros de icono */
    --cc-naranja-tenue: rgba(194, 65, 12, 0.10);
    --cc-azul-tenue: rgba(28, 116, 188, 0.10);
    /* Variantes oscurecidas SOLO para texto sobre fondo claro. El naranja de
       marca da 3.74:1 sobre blanco y el azul 4.03:1 sobre su propio tinte:
       ambos por debajo del minimo AA de 4.5. Los tonos de marca se siguen
       usando tal cual donde son fondo. */
    --cc-naranja-texto: #b83c0f;
    --cc-azul-texto: #12558c;
    --cc-azul: #1c74bc;             /* enlaces y acentos secundarios */

    /* Texto */
    --cc-titulo: #101828;           /* un negro con algo de azul, no #040404 plano */
    --cc-cuerpo: #55585f;
    --cc-suave: #7a7d85;

    /* Superficies */
    --cc-fondo: #ffffff;
    --cc-fondo-alt: #f7f7f5;
    --cc-borde: rgba(16, 24, 40, 0.10);

    /* Tipografia: escala modular ~1.25 sobre 16 px */
    --cc-t-xs: 13px;
    --cc-t-sm: 15px;
    --cc-t-base: 16px;
    --cc-t-md: 20px;
    --cc-t-lg: 26px;
    --cc-t-xl: 34px;
    --cc-t-2xl: 42px;
    --cc-t-3xl: 54px;

    /* Ritmo vertical */
    --cc-sp-1: 8px;
    --cc-sp-2: 16px;
    --cc-sp-3: 24px;
    --cc-sp-4: 40px;
    --cc-sp-5: 64px;
    --cc-sp-6: 96px;

    /* Alias hacia atras: los usan las reglas de foco y vinetas ya escritas.
       Antes apuntaban a #1a4d8f y #f5a623, que no existian en el diseno. */
    --cc-primario: var(--cc-azul);
    --cc-acento: var(--cc-naranja);
    --cc-texto: var(--cc-cuerpo);
    --cc-foco: var(--cc-azul);
    --cc-tpl-naranja: var(--cc-naranja);
    --cc-tpl-azul: var(--cc-azul);
    --cc-tpl-titulo: var(--cc-titulo);
    --cc-tpl-parrafo: var(--cc-cuerpo);
}

/* -------------------------------------------------------------------------
   1. Accesibilidad
   El template suprime el foco del teclado en varios componentes. Esto lo
   devuelve: sin foco visible el sitio es inusable sin mouse.
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--cc-foco);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Enlace para saltar al contenido, visible solo al tabular */
.cc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #ffffff;
    color: var(--cc-primario);
    font-weight: 600;
    border-radius: 0 0 6px 0;
}

.cc-skip-link:focus {
    left: 0;
}

/* -------------------------------------------------------------------------
   2. Vinetas de listas
   El template aplica `ul li { list-style: none }` de forma global, por lo que
   el diseno original usaba emojis como vineta. Se reemplazan por un marcador
   CSS: mismo peso visual, sin ruido tipografico.
   ------------------------------------------------------------------------- */

.cc-lista-check li,
.cc-lista-punto li {
    position: relative;
    padding-left: 1.6em;
    text-align: left;
}

.cc-lista-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.85em;
    height: 0.5em;
    border-left: 2px solid var(--cc-acento);
    border-bottom: 2px solid var(--cc-acento);
    transform: rotate(-45deg);
}

.cc-lista-punto li::before {
    content: "";
    position: absolute;
    left: 0.15em;
    top: 0.6em;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: var(--cc-acento);
}

/* -------------------------------------------------------------------------
   3. Formulario de contacto
   Estados de error y exito, que antes solo existian como alert() del navegador.
   ------------------------------------------------------------------------- */

.cc-campo-error {
    border: 1px solid #d93025 !important;
}

.cc-error-texto {
    display: block;
    margin-top: 6px;
    color: #d93025;
    font-size: 0.85rem;
    line-height: 1.3;
}

.cc-alerta {
    margin-top: 15px;
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.4;
}

.cc-alerta-exito {
    background: #e6f4ea;
    color: #137333;
    border: 1px solid #a8dab5;
}

.cc-alerta-error {
    background: #fce8e6;
    color: #c5221f;
    border: 1px solid #f5b5b1;
}

/* Etiqueta accesible para lectores de pantalla, sin cambiar el diseno */
.cc-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Boton deshabilitado mientras se envia */
button[disabled],
.vl-btn5[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   4. Ajustes de layout
   ------------------------------------------------------------------------- */

/* Evita el salto de layout mientras cargan las imagenes con width/height */
img {
    max-width: 100%;
    height: auto;
}

/* La pagina de contacto quedo con 2 de 3 columnas al ocultar la direccion:
   se centra el bloque para que no quede el hueco a la derecha. */
.contact-inner-area .row {
    justify-content: center;
}

/* -------------------------------------------------------------------------
   5. Capa de entrada por necesidad (components/necesidades.blade.php)
   Va antes de la grilla de servicios. Se apoya en las clases de la plantilla
   para el encabezado (heading5) y define solo la tarjeta.
   ------------------------------------------------------------------------- */

.cc-necesidades {
    background: #f7f7f5;
}

.cc-necesidades .row > [class*="col-"] {
    margin-bottom: 24px;
}

.cc-necesidad {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--cc-borde);
    border-top: 3px solid var(--cc-tpl-naranja);
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cc-necesidad:hover,
.cc-necesidad:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

.cc-necesidad-titulo {
    display: block;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--cc-tpl-titulo);
}

.cc-necesidad-texto {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    line-height: 24px;
    color: var(--cc-tpl-parrafo);
}

/* margin-top:auto pega el CTA abajo, asi queda alineado entre tarjetas de
   distinto largo de texto. */
.cc-necesidad-cta {
    display: block;
    margin-top: auto;
    padding-top: 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cc-naranja-texto);
}

.cc-necesidad-cta i {
    margin-left: 6px;
    font-size: 13px;
}

.cc-necesidades-pie {
    font-size: 15px;
    color: var(--cc-tpl-parrafo);
}

.cc-necesidades-pie a {
    color: var(--cc-tpl-azul);
    font-weight: 600;
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   6. Credenciales del equipo (components/credenciales.blade.php)
   ------------------------------------------------------------------------- */

.cc-credenciales .row > [class*="col-"] {
    margin-bottom: 24px;
}

.cc-credencial {
    height: 100%;
    padding: 32px;
    background: #ffffff;
    border: 1px solid var(--cc-borde);
    border-radius: 8px;
}

.cc-credencial-nombre {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--cc-tpl-titulo);
}

.cc-credencial-cargo {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--cc-tpl-azul);
}

.cc-credencial-lista {
    margin-top: 20px;
}

.cc-credencial-lista li {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 24px;
    color: var(--cc-tpl-parrafo);
}

/* -------------------------------------------------------------------------
   7. Titulos de paso en el proceso (process.blade.php)
   Antes eran <a href="project-single.html">, que daba 404. Al pasarlos a <h3>
   perdieron el estilo que la plantilla aplica a `.conten-area a`; esto lo
   reproduce.
   ------------------------------------------------------------------------- */

.cc-paso-titulo {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--cc-tpl-titulo);
}

/* Resumen de una linea en las tarjetas del catalogo de servicios. */
.cc-servicio-resumen {
    font-size: 15px;
    line-height: 24px;
    color: var(--cc-tpl-parrafo);
    text-align: left;
}

/* Las tarjetas de servicio quedaban con distinto alto segun cuanto ocupara el
   resumen, dejando las filas dentadas. */
.service3-section-area .row > [class*="col-"] {
    margin-bottom: 24px;
}

.service3-section-area .service3-single-boxarea {
    height: 100%;
}

/* Icono Font Awesome dentro del cuadro naranja de la tarjeta de servicio.
   Reemplaza al <img> SVG de 48x48 de la plantilla. */
.cc-servicio-icono {
    font-size: 30px;
    line-height: 48px;
    color: #ffffff;
}

/* -------------------------------------------------------------------------
   8. Targets tactiles
   El menu movil de la plantilla usa botones de 30-32 px. El minimo recomendado
   es 44x44: por debajo de eso el acierto al tocar cae de forma medible.
   Se agranda el area sensible sin mover el icono, con padding y flex.
   ------------------------------------------------------------------------- */

.vl-offcanvas-toggle,
.vl-offcanvas-close-toggle,
.vl-menu-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* -------------------------------------------------------------------------
   9. Boton flotante de WhatsApp
   Es `position: fixed`, asi que tapa lo que quede debajo en cada scroll. Con
   72 px en un viewport de 390 bloqueaba una franja ancha justo sobre los campos
   del formulario. Se reduce en movil, donde el problema existe.
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .floating-wpp .floating-wpp-button {
        width: 52px !important;
        height: 52px !important;
    }

    .floating-wpp .floating-wpp-button img,
    .floating-wpp .floating-wpp-button svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Desvanecido del boton de WhatsApp mientras el formulario esta a la vista.
   La clase la pone contacto.js; sin JS el boton se comporta como siempre. */
.floating-wpp.cc-wpp-desvanecible {
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.floating-wpp.cc-wpp-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   10. Tipografia
   La plantilla dejaba h2 con 3 tamanos, h3 con 4 y parrafos con 4, mezclando
   sus estilos con los de Bootstrap. Esto fija una escala unica.
   ------------------------------------------------------------------------- */

body {
    color: var(--cc-cuerpo);
    font-size: var(--cc-t-base);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cc-titulo);
    font-family: 'Outfit', system-ui, sans-serif;
    letter-spacing: -0.015em;
}

h1 { font-size: var(--cc-t-3xl); line-height: 1.12; font-weight: 600; }
h2 { font-size: var(--cc-t-2xl); line-height: 1.18; font-weight: 600; }
h3 { font-size: var(--cc-t-lg);  line-height: 1.30; font-weight: 600; }
h4 { font-size: var(--cc-t-md);  line-height: 1.35; font-weight: 600; }

/* Los parrafos tenian hasta 4 combinaciones distintas, una con line-height
   igual al font-size (texto pegado). */
p {
    font-size: var(--cc-t-base);
    line-height: 1.65;
    color: var(--cc-cuerpo);
}

/* La etiqueta sobre cada titulo era azul sobre un fondo naranja al 10%: dos
   familias de color chocando. Pasa a ser naranja sobre naranja, en versalitas. */
.heading1 h5,
.heading5 h5,
.heading5 > h5 {
    display: inline-block;
    font-size: var(--cc-t-xs);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    /* Azul sobre azul, no naranja: si la etiqueta tambien fuera naranja, todos
       los acentos del sitio serian el mismo color. Asi el naranja queda
       reservado para la accion y el azul marca categoria. */
    color: var(--cc-azul-texto);
    background: var(--cc-azul-tenue);
}

@media (max-width: 991.98px) {
    h1 { font-size: 36px; }
    h2 { font-size: 30px; }
    h3 { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   11. Color
   Colapsa los 8 grises/negros y los 2 azules que convivian.
   Los verdes y teal (#0c3a30, #032530, #100235) son restos de la paleta
   original de la plantilla, que no tiene nada que ver con esta marca.
   ------------------------------------------------------------------------- */

.readmore,
.conten-area a,
.content a,
.team-boxarea a,
.testimonial2-boxarea .text a {
    color: var(--cc-titulo);
}

.readmore {
    font-size: var(--cc-t-sm);
    font-weight: 600;
    letter-spacing: 0;
}

.readmore:hover,
.content a:hover {
    color: var(--cc-naranja-texto);
}

/* El template pinta varios parrafos secundarios con grises sueltos. */
.testimonial2-boxarea p,
.work-single-boxarea p,
.service3-single-boxarea p,
.about-header p {
    color: var(--cc-cuerpo);
}

/* -------------------------------------------------------------------------
   12. Ritmo vertical
   `sp1` y `sp2` son las clases de padding de seccion de la plantilla y traian
   valores distintos entre si. Se igualan para que el pulso sea constante.
   ------------------------------------------------------------------------- */

.sp1, .sp2 {
    padding-top: var(--cc-sp-6);
    padding-bottom: var(--cc-sp-6);
}

.cc-necesidades,
.cc-credenciales {
    padding-top: var(--cc-sp-6);
    padding-bottom: var(--cc-sp-6);
}

.space-margin60 {
    margin-bottom: var(--cc-sp-4);
}

@media (max-width: 991.98px) {
    .sp1, .sp2,
    .cc-necesidades,
    .cc-credenciales {
        padding-top: var(--cc-sp-5);
        padding-bottom: var(--cc-sp-5);
    }
}

/* -------------------------------------------------------------------------
   13. Remapeo de las variables de la plantilla
   main.css no codifica colores: los toma de sus propias variables --ztc-*.
   Redefinirlas aqui corrige a todos sus consumidores de una vez, sin pelear
   especificidad ni usar !important.

   La plantilla era originalmente verde y amarilla, y la recolorearon a medias:
   seguian activos el verde #6E9419, los verdes oscuros #061D19 y #0C3A30, el
   teal #032530, el morado oscuro #100235 y un morado #2E0797. Todos hacian de
   "texto oscuro" o de acento en distintos componentes.
   ------------------------------------------------------------------------- */

:root {
    /* Los seis oscuros pasan a ser un solo color de titulo. */
    --ztc-text-text-2: var(--cc-titulo);
    --ztc-text-text-5: var(--cc-titulo);
    --ztc-text-text-8: var(--cc-titulo);
    --ztc-text-text-11: var(--cc-titulo);
    --ztc-text-text-13: var(--cc-titulo);
    --ztc-text-text-14: var(--cc-titulo);

    /* Los cuatro grises intermedios, a un solo color de cuerpo. */
    --ztc-text-text-3: var(--cc-cuerpo);
    --ztc-text-text-7: var(--cc-cuerpo);
    --ztc-text-text-10: var(--cc-cuerpo);
    --ztc-text-text-12: var(--cc-cuerpo);
    --ztc-text-text-15: var(--cc-cuerpo);

    /* El verde sobrante era el acento original de la plantilla. */
    --ztc-text-text-4: var(--cc-naranja);

    /* Azules: ya coincidian, se dejan atados al token para que no se separen. */
    --ztc-text-text-6: var(--cc-azul);
    --ztc-text-text-16: var(--cc-azul);

    /* Fondos oscuros, al mismo titulo. */
    --ztc-bg-bg-2: var(--cc-titulo);
    --ztc-bg-bg-8: var(--cc-titulo);
    --ztc-bg-bg-10: var(--cc-titulo);
    --ztc-bg-bg-9: linear-gradient(90deg, var(--cc-azul) 0%, var(--cc-titulo) 100%);

    /* Naranjas de accion, a un unico token. */
    --ztc-bg-bg-3: var(--cc-naranja);
    --ztc-bg-bg-4: var(--cc-naranja);
    --ztc-bg-bg-6: var(--cc-naranja);
    --ztc-bg-bg-11: var(--cc-naranja);

    --ztc-border-border-1: var(--cc-borde);
}

/* -------------------------------------------------------------------------
   14. Jerarquia de titulos donde la plantilla usa selectores mas especificos
   Se igualan a su especificidad en vez de subir la propia con !important.
   ------------------------------------------------------------------------- */

.heading1 h2,
.heading5 h2,
.about-header h2,
.hero3-heading h2 {
    font-size: var(--cc-t-2xl);
    line-height: 1.18;
}

/* El "Leer Mas" de las tarjetas venia a 18px/18px y en negrita: competia con
   el titulo de la propia tarjeta. */
.service3-section-area .service3-single-boxarea .content a.readmore {
    font-size: var(--cc-t-sm);
    line-height: 1.4;
    font-weight: 600;
    color: var(--cc-naranja-texto);
}

.service3-section-area .service3-single-boxarea .content a {
    font-size: var(--cc-t-md);
    line-height: 1.35;
}

/* Los contadores tenian el rotulo con line-height igual al font-size. */
.about5-section-area .counter-box .boxarea p {
    font-size: var(--cc-t-sm);
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .heading1 h2,
    .heading5 h2,
    .about-header h2,
    .hero3-heading h2 {
        font-size: 30px;
    }
}

/* Las dos cajas de contacto del banner CTA llevaban un velo blanco al 20 %
   sobre el naranja: el fondo se aclaraba y el texto blanco quedaba en 3.73:1.
   Con un velo oscuro el contraste sube y la caja se sigue distinguiendo. */
.cta5-section-area .cta-bg-area .cta-author-area {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.cta5-section-area .cta-bg-area .cta-author-area p {
    color: rgba(255, 255, 255, 0.92);
}