/*!
Theme Name: Lettery Child
Theme URI: https://bslthemes.com/
Author: bslthemes
Author URI: https://themeforest.net/user/bslthemes
Description: Lettery - Creative Digital Agency WordPress Theme
Version: 1.0.3
License: General Public License
License URI: http://www.gnu.org/licenses/gpl.html
Template: lettery
Text Domain: lettery-child
Tags: full-width-template, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, theme-options
*/


/* ==========================================================================
   BOCETO — TIPOGRAFIA GLOBAL (DM Sans)
   --------------------------------------------------------------------------
   Fuentes de verdad de la tipografia del sitio:
   1. Lettery Options > Styling > Typography  (body, H1-H6, botones, preloader)
   2. Elementor > Ajustes del sitio > Fuentes globales (Principal / Secundario / Texto / Enfasis)
   3. Este bloque: SOLO para los selectores del theme padre (lettery/style.css)
      que tienen "Outfit" hardcodeado y NO respetan los puntos 1 y 2.
   No agregar aca reglas de paginas individuales.
   Revision: 2026-08-25
   ========================================================================== */

.mil-link,
.mil-link-hover,
.mil-link-arrow,
.mil-button,
.mil-badge,
.mil-price-card .mil-price-number,
span.logotype__title,
.fancybox-infobar,
.form-comment .mil-group-input textarea,
.mil-first-letter::first-letter,
.mil-content-frame + .single-post-text > p:first-child::first-letter {
    font-family: "DM Sans", sans-serif;
}

/* Elementos nativos del navegador: que hereden la tipografia del documento */
input,
select,
textarea,
button,
optgroup {
    font-family: inherit;
}

/* Fallback de sistema por si DM Sans no alcanza a cargar */
body {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Foco visible por teclado (accesibilidad).
   El theme padre anula los outlines nativos; esto los devuelve solo para
   navegacion por teclado, sin afectar el click con mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ==========================================================================
   HEADER GLOBAL  (wrapper .mil-top-panel del theme + plantilla Elementor #2289)
   --------------------------------------------------------------------------
   La plantilla de Elementor define el fondo blanco del header, pero el theme
   igual le aplica su modo "nav invertida": pinta de blanco el boton de menu y
   los iconos sociales, que sobre ese fondo quedan invisibles.
   Estas reglas devuelven esos elementos al color del sistema.
   Es el unico lugar donde se corrige el header: no repetir por pagina.
   ========================================================================== */

.mil-top-panel.mil-transparent-nav .mil-menu-btn span,
.mil-top-panel.mil-transparent-nav .mil-menu-btn span::before,
.mil-top-panel.mil-transparent-nav .mil-menu-btn span::after,
.mil-top-panel.mil-invert-nav .mil-menu-btn span,
.mil-top-panel.mil-invert-nav .mil-menu-btn span::before,
.mil-top-panel.mil-invert-nav .mil-menu-btn span::after {
    background-color: #263238;
}

.mil-top-panel.mil-transparent-nav .mil-social a svg path,
.mil-top-panel.mil-invert-nav .mil-social a svg path {
    fill: #949494;
}

.mil-top-panel.mil-transparent-nav .mil-social a:hover svg path,
.mil-top-panel.mil-invert-nav .mil-social a:hover svg path {
    fill: #008BA9;
}

.mil-top-panel.mil-transparent-nav,
.mil-top-panel.mil-invert-nav {
    border-bottom: solid 1px rgba(38, 50, 56, .08);
}

/* El item padre del dropdown no lleva enlace: que se lea como control. */
.mil-top-panel .mil-has-children > a { cursor: pointer; }

/* Menu mobile: agrandar el area tactil sin mover nada de sitio. */
.mil-mobile-dropdown li > a {
    padding: 14px 12px;
    margin: -14px -12px;
}

/* ==========================================================================
   MENU MOBILE — CONTRASTE AA
   --------------------------------------------------------------------------
   El panel mobile se pinta sobre el celeste de marca (#88C8D4). El theme deja
   los items de primer nivel en #555 (4.40:1) y los del submenu en blanco
   (1.69:1): los dos por debajo de AA. Se llevan al gris oscuro de la marca
   (#263238 = 7.77:1) sin tocar fondo ni tipografia.
   Lleva !important porque el blanco lo impone el CSS que Elementor genera
   para la plantilla de header, que carga despues del child theme.
   ========================================================================== */
@media screen and (max-width: 1200px) {

    .mil-top-panel .mil-mobile-dropdown ul li a.mil-link,
    .mil-top-panel .mil-mobile-dropdown ul ul li a.mil-link {
        color: #263238 !important;
    }

    .mil-top-panel .mil-mobile-dropdown ul li a.mil-link:hover,
    .mil-top-panel .mil-mobile-dropdown ul li a.mil-link.mil-active {
        color: #004E5E !important;
    }

    /* El submenu anidado hereda el teal #008BA9 del header de Elementor:
       con texto #263238 da 3.3:1. Se lleva a un tinte claro del mismo teal
       (11.7:1) para que se lea como nivel anidado sin salir de la paleta. */
    .mil-top-panel .mil-mobile-dropdown ul li ul {
        background-color: #E6F4F7 !important;
    }

    /* En mobile el submenu se abre por altura, no por opacidad.
       Sin estas propiedades el toggle marca aria-expanded pero no se ve. */
    .mil-top-panel .mil-mobile-dropdown ul li.mil-open > ul {
        opacity: 1;
        max-height: 370px;
        margin-bottom: 30px;
        overflow: auto;
    }

    /* El "+" del item con submenu es un indicador de UI: minimo 3:1 */
    .mil-top-panel .mil-mobile-dropdown ul li.mil-has-children > a::before,
    .mil-top-panel .mil-mobile-dropdown ul li.menu-item-has-children > a::before {
        color: #263238 !important;
    }
}

/* ==========================================================================
   DROPDOWN "SERVICIOS" — ACCESIBILIDAD POR TECLADO
   --------------------------------------------------------------------------
   El theme solo abre el submenu con :hover y el item padre es un <a> sin href
   (no enfocable). El JS del child theme lo convierte en control con
   role=button + aria-expanded y alterna .mil-open. Estas reglas replican el
   estado :hover para teclado y para tap en mobile. Solucion global: no
   duplicar por pagina.
   ========================================================================== */
.mil-top-panel .mil-mobile-dropdown ul li.mil-open > ul {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0px);
}

.mil-top-panel .mil-has-children > a[role="button"],
.mil-top-panel .mil-menu-btn[role="button"] {
    cursor: pointer;
}

/* ==========================================================================
   PORTFOLIO — CASE STUDY: ESCALA DE TITULOS
   --------------------------------------------------------------------------
   Los bloques del case study usan <h2> (jerarquia H1 > H2) con la escala
   visual de h5 del theme, aplicada por la clase mil-h5 del widget. Cubre
   tambien los campos de ficha (Cliente / Pais / Anio), que son <div> porque
   son metadatos y no titulos de seccion.
   ========================================================================== */
.elementor-widget-heading.mil-h5 .elementor-heading-title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 500;
    color: #263238;
}

@media screen and (max-width: 768px) {
    .elementor-widget-heading.mil-h5 .elementor-heading-title {
        font-size: 18px;
    }
}


/* ==========================================================================
   BOCETO — SANEO DE CONTENIDO INCOMPLETO (staging)
   --------------------------------------------------------------------------
   Mientras se cargan las imagenes e iconos definitivos, ningun <img> sin src
   debe renderizar el icono de imagen rota. La estructura del componente se
   mantiene: al cargar la imagen vuelve a mostrarse sola, sin tocar nada mas.
   ========================================================================== */

img[src=""] {
    display: none !important;
}

/* ==========================================================================
   BOCETO - FOOTER: AREA TACTIL Y QUIEBRE DE TEXTO
   --------------------------------------------------------------------------
   1) Los enlaces del footer miden 11px de alto: por debajo del minimo de
      24x24 de WCAG 2.5.8. Se agranda el area clickeable con padding y se
      compensa con margin negativo, asi el diseno queda pixel a pixel igual.
   2) El mail lleva letter-spacing 2px y no puede cortarse: a partir de
      ~1024px se desborda de su columna. Se permite el quiebre.
   ========================================================================== */

.mil-footer-1 a,
.mil-footer a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: -7px;
    margin-bottom: -7px;
}

.mil-footer-1 a[href^="mailto"],
.mil-footer a[href^="mailto"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mil-footer-1 .mil-social-icons a,
.mil-footer .mil-social-icons a,
.mil-footer-1 a:has(> i),
.mil-footer a:has(> i) {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   BOCETO - MOVIMIENTO REDUCIDO (prefers-reduced-motion)
   --------------------------------------------------------------------------
   El theme no contempla la preferencia del sistema y el sitio tiene muchas
   animaciones de entrada, carruseles y cursor personalizado. Con la
   preferencia activada se corta el movimiento pero el contenido queda
   visible: las entradas animadas se fuerzan a su estado final.
   Solo aplica a quien lo pidio en su sistema: el resto ve el sitio igual.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    .mil-appearance,
    .mil-up,
    .mil-scale-img {
        opacity: 1 !important;
        transform: none !important;
    }

    .mil-cursor {
        display: none !important;
    }
}