/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites.
Version: 1.0.10
Template: astra
*/

:root {
    /* --- BRAND DESIGN TOKENS --- */
    --isla-red: #C40100;
    --isla-black: #0d0d0d;
    --isla-white: #ffffff;
    --isla-gray: #373737;
    --isla-dark: #1a1a1a;
    --isla-text-dim: #bbbbbb;
    --isla-text-muted: #666666;

    /* --- MENU SPECIFIC TOKENS (aliases) --- */
    --isla-menu-bg: var(--isla-black);
    --isla-menu-text: var(--isla-white);
    --isla-menu-accent: var(--isla-red);
    --isla-menu-text-muted: var(--isla-text-dim);

    /* --- ALIASES & COMPATIBILITY --- */
    --isla-primary: var(--isla-red);
    --isla-accent: var(--isla-red);
    --isla-transition: var(--isla-transit-smooth);

    /* --- ANIMATION TOKENS --- */
    --isla-transit-fast: 0.25s ease;
    --isla-transit-smooth: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    --isla-transit-slow: 0.85s cubic-bezier(0.23, 1, 0.32, 1);

    /* --- FLUID TYPOGRAPHY --- */
    --h1-size: clamp(42px, 5.3vw, 80px);
    --h1-size-alt: clamp(42px, 5.1vw, 68px);
    --h2-size: clamp(42px, 5vw, 80px);
    --h2-home-size: clamp(42px, 7vw, 120px);
    --banner-footer-size: clamp(42px, 7vw, 130px);
    --h2-acc-size: clamp(25px, 7vw, 110px);
    --h2-alt-size: clamp(28px, 3.6vw, 60px);
    --h3-size: clamp(30px, 2.9vw, 55px);
    --h3-alt-size: clamp(20px, 1.3vw, 25px);
    --num-list: clamp(50px, 4.3vw, 70px);
    --h4-size: clamp(20px, 1.9vw, 22px);

    /* --- BLOG TYPOGRAPHY SCALES --- */
    --h2-scale: 3vw;
    --h3-scale: 2.2vw;

}

/* ===============================
   UTILIDADES Y FIJADORES
   =============================== */

/* Color corporativo */
.isla-red-color,
.isl-red-color,
.txt-red {
    color: var(--isla-red);
}




/* ===== Global Variables ===== */

/* Prevent horizontal scrollbars and add smooth navigation */
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

/* ==========================================================================
   GLOBAL HEADINGS — Definitive Fluid Typography
   ========================================================================== */

h1 { font-size: var(--h1-size) !important; text-transform: uppercase !important; }
h2 { font-size: var(--h2-size) !important; line-height: 1em !important; }
h3 { font-size: var(--h3-size) !important; line-height: 1em !important; }
h4 { font-size: var(--h4-size) !important; }

/* --- Home Page Exception (legacy sizes) --- */
.page-id-877 h1, .page-id-1545 h1 { font-size: clamp(40px, 5vw, 78px) !important; }
.page-id-877 h2, .page-id-1545 h2 { font-size: clamp(32px, 5vw, 53px) !important; line-height: 1em !important; }
.page-id-877 h3, .page-id-1545 h3 { font-size: clamp(25px, 5vw, 28px) !important; line-height: 1em !important; }

/* --- Context-Specific Heading Overrides --- */
.page-id-4171 h2 { font-size: var(--h2-home-size) !important; }
.cust-h2 h2 { font-size: var(--h3-size) !important; }
.testim-txt, .testim-txt span { font-size: var(--h3-size) !important; line-height: 1em !important; }

#h2-acc h2 { font-size: var(--h2-acc-size) !important; letter-spacing: -0.05em; }
.h2-alt-2 h2, #h2-alt-2 h2 { font-size: var(--h1-size-alt) !important; }
#banner-footer h2 { font-size: var(--banner-footer-size) !important; font-weight: 700 !important; }

.int-text, .faqs-txt {
    font-size: var(--h2-alt-size) !important;
    line-height: 0.8em;
    color: var(--isla-black);
    font-weight: 500;
}

.num-list, .num-list h2 { font-size: var(--num-list) !important; }
.h2-alt h2 { font-size: var(--h2-alt-size) !important; font-weight: 500 !important; }
.h3-alt h3 { font-size: var(--h3-alt-size) !important; }

/* --- Logo Marquee --- */
.logo-marquee-wrap { width: 100%; overflow: hidden; position: relative; }
.logo-marquee { width: 100%; overflow: hidden; }

.logo-track {
    display: flex;
    align-items: center;
    gap: 140px;
    width: max-content;
    animation: logoScroll 50s linear infinite;
}

.logo-track img {
    display: block;
    height: 56px;
    width: auto;
    flex-shrink: 0;
    max-width: none;
}

.text-track {
    display: flex;
    align-items: center;
    gap: 0px;
    width: max-content;
    animation: logoScroll 90s linear infinite;
    height: auto;
    padding: 15px 0;
}

.about-us .text-track { height: auto; padding: 15px 0; }

@keyframes logoScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* --- Hero Video & SVG Styles --- */
.hero-video { position: relative; overflow: hidden; }
.band-holder { position: relative; z-index: 5; width: 100%; margin: 0; padding: 0; }
.cutout-rotating-wrap { width: 100%; }

.cutout-rotating-svg { display: block; width: 100%; height: 220px; }
.cutout-rotating-svg text {
    font-family: "Inter", sans-serif;
    font-size: 120px;
    font-weight: 800;
    letter-spacing: -0.04em;
    dominant-baseline: middle;
    text-anchor: start;
    text-transform: uppercase;
}

/* --- Utilities & Colors --- */
.bg-red { background-color: var(--isla-red) !important; color: var(--isla-white) !important; }

.serv-carrusel-txt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: var(--h1-size) !important; line-height: 1.2 !important; font-weight: bold; margin-bottom: 0px !important; color: var(--isla-black); }
.about-us .serv-carrusel-txt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: var(--h1-size) !important; line-height: 1.2 !important; font-weight: bold; margin-bottom: 0px !important; color: var(--isla-white); }

/* --- Swap Cards --- */
.swap-cards { position: relative; width: 320px; height: 420px; margin: 0 auto; }
.swap-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 260px;
    height: 360px;
    border-radius: 10px;
    overflow: hidden;
    transition: transform var(--isla-transit-slow), z-index 0.85s ease, opacity 0.85s ease;
    transform-origin: center center;
}
.swap-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swap-card.card-front { z-index: 2; transform: translateX(-50%) rotate(0deg) scale(1); }
.swap-card.card-back { z-index: 1; transform: translateX(-38%) rotate(5deg) scale(0.98); opacity: 0.95; }

/* --- Numbered Accordion --- */
.accordion-numerado { counter-reset: accordion-item; }
.accordion-numerado .e-n-accordion-item { counter-increment: accordion-item; }
.accordion-numerado .e-n-accordion-item-title { position: relative; padding-left: 225px !important; }
.accordion-numerado .e-n-accordion-item-title::before {
    content: counter(accordion-item, decimal-leading-zero);
    position: absolute;
    left: 175px;
    top: 30%;
    letter-spacing: -2px;
    transform: translateY(-50%);
    color: var(--isla-red);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}


/* --- Elementor / Component Tweaks --- */
.blk-servicios:hover .elementor-button { border-color: white !important; }
.blk-servicios:hover .cont-servicios span { color: black !important; }
.blk-servicios:hover .cont-servicios h3, .blk-servicios:hover .cont-servicios p { color: white !important; }
.blk-servicios:hover .elementor-button {
    border: 1px solid white !important;
}

.blk-servicios:hover .cont-servicios .elementor-heading-title,
.blk-servicios:hover .cont-servicios p,
.blk-servicios:hover .elementor-icon-list-text {
    color: white !important;
}

.blk-servicios:hover .elementor-icon-list-icon svg {
    fill: white !important;
}
.acc-style .e-n-accordion-item:first-child .e-n-accordion-item-title { border-top: none !important; }
.acc-style h3 { font-weight: 500 !important; }

.proj-cont .elementor-flip-box__layer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.proj-cont .elementor-flip-box__layer__description {
    margin-top: auto;
}

/* Blog components (isla-table, isla-numbered-grid, isla-faq, isla-pdf-download)
   → moved to css/components/isla-blog.css */



/* ===== Isla Team Grid (4-Column Cards) ===== */

/* ==========================================================================
   RESPONSIVE DESIGN (UNIFIED)
   ========================================================================== */

/* --- Desktop & CLS (1025px+) --- */
@media (min-width: 1025px) {
    /* single-post CLS → isla-blog.css */
    body.home #page { min-height: 100vh; display: flex; flex-direction: column; }
    body.home #content.site-content { flex: 1; padding-top: 0 !important; margin-top: 0 !important; animation: none !important; transition: none !important; }
    header, .site-header, .ast-header-break-point { min-height: 80px; }
    .elementor-element-760dc9e, .elementor-element-b95b061, .elementor-widget-heading { transition: none !important; animation: none !important; }
    .home h1.elementor-heading-title, .elementor-element-b95b061 h1 { min-height: 80px; }
    .home h2.elementor-heading-title, .elementor-element-0161728 h2 { min-height: 60px; }
    .isla-rotating-phrases--hero { min-height: 1.25em; }
    .isla-menu-desktop-visible { display: block !important; }
    .isla-menu-main-nav:hover .isla-menu-link:not(:hover):not(.is-hovered):not(.is-active) { color: rgba(255,255,255,0.5) !important; }
    .isla-menu-grid:not(:hover) .isla-menu-link.is-active .isla-menu-indicator { opacity: 1; }
}

/* --- Mobile Standard (768px) --- */
@media (max-width: 768px) {
    /* isla-table + isla-faq responsive → isla-blog.css */
    .cutout-rotating-svg { height: 120px; }
    .cutout-rotating-svg text { font-size: 46px; letter-spacing: -0.03em; }
    .blq-resena { background-color: transparent !important; }
    .blq-resena p { color: black; }
	.accordion-numerado .e-n-accordion-item-title {
		padding-right: 5px!important;
	}
    .accordion-numerado .e-n-accordion-item-title::before { display: none !important; }
    #h2-acc .e-n-accordion-item-title { padding-left: 5px !important; }
    #h2-acc h2 { letter-spacing: -0.03em !important; }
    .logo-track { gap: 40px !important; }
    .text-track { animation: logoScroll 50s linear infinite; }
	.elementor-flip-box__layer__description {
		font-size: 17px!important;
		overflow-y: auto;
    	padding-right: 8px;
	}
}

.logo-track {
    height: 80px!important;
}


/* --- Small Mobile Standard (480px) --- */
@media (max-width: 480px) {
}