/* tokens/colors.css */
:root{
--color-primary:#00C100;
--color-primary-hover:#10AE09;
--color-primary-active:#1D7714;
--color-primary-tint-100:#EFFAEB;
--color-primary-tint-200:#DEF5D7;
--color-primary-tint-300:#CEF0C3;
--color-primary-tint-400:#BDEAAF;
--color-primary-tint-500:#ABE59B;
--color-primary-tint-600:#99DF87;
--color-primary-tint-700:#86D973;
--color-primary-tint-800:#71D35E;
--color-primary-tint-900:#5ACD48;
--color-primary-tint-950:#3EC72F;
--color-black-950:#0D0D0D;
--color-gray-50:#FCFCFC;
--color-gray-100:#E4E4E4;
--color-gray-200:#CDCDCD;
--color-gray-300:#B5B5B5;
--color-gray-400:#9D9D9D;
--color-gray-500:#858585;
--color-gray-600:#6D6D6D;
--color-gray-700:#555555;
--color-gray-800:#3D3D3D;
--color-gray-900:#252525;
--color-gray-950:#0D0D0D;
--color-white-50:#FCFCFC;
--color-sector-agronomia:#00C100;
--color-sector-agronomia-text:#007A00;
--color-sector-agronomia-tint:#F1FCEE;
--color-sector-oilgas:#1E7FE0;
--color-sector-oilgas-text:#1A69BC;
--color-sector-oilgas-tint:#EEF5FD;
--color-sector-mineria:#D2691E;
--color-sector-mineria-text:#A34F17;
--color-sector-mineria-tint:#FDF5EF;
--color-sector-construccion:#EDCD00;
--color-sector-construccion-text:#736400;
--color-sector-construccion-tint:#FDFAE6;
--color-sector-otros:#75726C;
--color-sector-otros-text:#4A4843;
--color-sector-otros-tint:#F2F1EF;
--color-error:#C10000;
--color-warning:#EDCD00;
--color-success:#00C100;
--surface-page:var(--color-white-50);
--surface-inverse:var(--color-black-950);
--surface-card:#FFFFFF;
--surface-sunken:var(--color-gray-50);
--text-primary:var(--color-black-950);
--text-secondary:var(--color-gray-600);
--text-inverse:var(--color-white-50);
--text-on-primary:var(--color-white-50);
--border-default:var(--color-gray-200);
--border-strong:var(--color-gray-400);
--focus-ring:var(--color-primary);
--border-subtle:#EFEFEF;
--surface-search:#FAFAFA;
--color-surface-dark:#04250A;
--field-height:41px;
}

/* tokens/typography.css */
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/spacegrotesk-variable.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-variable.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-italic-variable.woff2") format("woff2-variations");font-weight:100 900;font-style:italic;font-display:swap;}
:root{
--font-display:"Space Grotesk",sans-serif;
--font-body:"Inter",sans-serif;
--tracking-tight:-3.5%;
--lh-title:1.05; /* @kind other */
--lh-body:1.1; /* @kind other */
--text-h1-size:72px;
--text-h1-weight:400;
--text-h2-size:60px;
--text-h2-weight:400;
--text-h3-size:40px;
--text-h3-weight:400;
--text-h4-size:30px;
--text-h4-weight:400;
--text-h5-size:18px;
--text-h5-weight:400;
--text-label-size:12px;
--text-label-weight:500;
--text-paragraph-size:16px;
--text-paragraph-weight:400;
--text-quote-size:30px;
--text-quote-weight:400;
}
.text-h1{font-family:var(--font-display);font-weight:var(--text-h1-weight);font-size:var(--text-h1-size);line-height:var(--lh-title);letter-spacing:var(--tracking-tight);}
.text-h2{font-family:var(--font-display);font-weight:var(--text-h2-weight);font-size:var(--text-h2-size);line-height:var(--lh-title);letter-spacing:var(--tracking-tight);}
.text-h3{font-family:var(--font-display);font-weight:var(--text-h3-weight);font-size:var(--text-h3-size);line-height:var(--lh-title);letter-spacing:var(--tracking-tight);}
.text-h4{font-family:var(--font-display);font-weight:var(--text-h4-weight);font-size:var(--text-h4-size);line-height:var(--lh-title);letter-spacing:var(--tracking-tight);}
.text-h5{font-family:var(--font-display);font-weight:var(--text-h5-weight);font-size:var(--text-h5-size);line-height:var(--lh-title);letter-spacing:var(--tracking-tight);}
.text-label{font-family:var(--font-display);font-weight:var(--text-label-weight);font-size:var(--text-label-size);line-height:var(--lh-body);letter-spacing:var(--tracking-tight);}
.text-paragraph{font-family:var(--font-body);font-weight:var(--text-paragraph-weight);font-size:var(--text-paragraph-size);line-height:var(--lh-body);}
.text-quote{font-family:var(--font-body);font-weight:var(--text-quote-weight);font-size:var(--text-quote-size);line-height:var(--lh-body);}
body{font-family:var(--font-body);}

/* tokens/spacing.css */
:root{
--space-xs:4px;
--space-sm:8px;
--space-md:16px;
--space-lg:24px;
--space-xl:32px;
--space-2xl:48px;
--radius-none:0px;
--radius-sm:100px;
--radius-md:4px;
}

/* tokens/effects.css */
:root{
--shadow-card:0 1px 2px rgba(13,13,13,0.06),0 2px 8px rgba(13,13,13,0.06);
--shadow-elevated:0 4px 16px rgba(13,13,13,0.10);
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:180ms; /* @kind other */
--ease-emphasized:cubic-bezier(.2,.8,.2,1); /* @kind other */
--opacity-disabled:0.4; /* @kind other */
}

/* tokens/icons.css */
/* Material Symbols Outlined — set de íconos del sistema (fuente variable local, ver readme › Iconografía). */
@font-face{font-family:"Material Symbols Outlined";src:url("../assets/fonts/materialsymbolsoutlined.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block;}
:root{--font-icon:"Material Symbols Outlined","Material Icons",var(--font-display),sans-serif;--icon-size-sm:16px;--icon-size-md:20px;--icon-size-lg:28px;}
.mi{font-family:var(--font-icon);font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none;flex-shrink:0;}

/* tokens/responsive.css */
/* Escalas responsive: los componentes leen estas variables (con fallback al valor
   desktop). Se reescriben por breakpoint real (<=900px).
   --pad-x-servicios es una excepción propia del sitio (no del export de diseño):
   Servicios mantiene 120px de margen lateral en desktop a pedido, en vez de los
   48px de --pad-x que usan el resto de las secciones. */
:root{
--pad-x:48px;
--pad-x-servicios:120px;
--footer-pad-x:64px;
--section-gap:120px;
--split-gap:56px;
--split-gap-services:48px;
--row-gap:calc(60px * var(--rhythm, 1));
--band-gap:48px;
--band-icon:48px;
--search-max:420px;
--form-pad:40px;
--form-pad-bottom:40px;
--cols-split:minmax(0,0.44fr) minmax(0,0.56fr);
--cols-split-services:repeat(2,minmax(0,1fr));
--service-img-h:300px;
--cols-split-narrow:minmax(0,0.42fr) minmax(0,0.58fr);
--cols-3:repeat(3,minmax(0,1fr));
--cols-2:minmax(0,1fr) minmax(0,1fr);
--cols-footer:1.2fr 1fr 1fr 1fr;
--card-h:380px;
--hero-pad:0 40px 36px;
--footer-claim:56px;
--quote-size:24px;
--size-h1:clamp(44px, 5.6vw, 72px);
--size-h2:60px;
--size-h3:40px;
--size-h4:30px;
--size-h3-compact:34px;
--size-h3-mini:30px;
--hero-h-home:420px;
--hero-h-section:300px;
}
.text-h1{font-size:var(--size-h1)}.text-h2{font-size:var(--size-h2)}.text-h3{font-size:var(--size-h3)}.text-h4{font-size:var(--size-h4)}
.ds-nav-desktop{display:flex}
.ds-nav-burger{display:none}
/* Ícono + título de Servicios: apilado (ícono arriba) en desktop siempre.
   En mobile pasan a estar en fila, lado a lado, salvo los títulos marcados
   con titleStackMobile (muy largos, se irían a 3+ líneas en fila). */
.svc-icon-title{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
@media (max-width:900px){
.svc-icon-title.svc-icon-title--row-mobile{flex-direction:row;align-items:center;gap:16px;}
}
@media (max-width:900px){
:root{
--pad-x:24px;
--pad-x-servicios:24px;
--footer-pad-x:24px;
--section-gap:64px;
--split-gap:24px;
--split-gap-services:24px;
--row-gap:40px;
--band-gap:32px;
--band-icon:48px;
--search-max:100%;
--form-pad:18px;
--form-pad-bottom:24px;
--cols-split:minmax(0,1fr);
--cols-split-services:minmax(0,1fr);
--service-img-h:auto;
--cols-split-narrow:minmax(0,1fr);
--cols-3:minmax(0,1fr);
--cols-2:minmax(0,1fr);
--cols-footer:minmax(0,1fr);
--card-h:auto;
--hero-pad:0 24px 28px;
--footer-claim:34px;
--quote-size:18px;
--size-h1:40px;
--size-h2:32px;
--size-h3:28px;
--size-h4:22px;
--size-h3-compact:28px;
--size-h3-mini:26px;
--hero-h-home:240px;
--hero-h-section:180px;
}
.ds-nav-desktop{display:none}
.ds-nav-burger{display:inline-flex}
}
/* Bloque de texto + formulario (Inicio): lado a lado desde 768px, con el
   texto en "Fill" (ocupa el espacio libre) y el formulario sin encogerse,
   separados 64px. Breakpoint propio, distinto del resto del sitio (900px). */
.contact-split{display:flex;flex-direction:column;gap:var(--split-gap,56px);align-items:stretch;}
/* Ancho del formulario fijado por la pantalla, no por su contenido: así no
   cambia al pasar entre las pestañas Servicios y Productos. */
.contact-form-box{min-width:0;}
@media (min-width:768px){
.contact-split{flex-direction:row;align-items:flex-start;gap:64px;}
.contact-form-box{flex:0 0 min(656px, 60%);}
}

/* tokens/carousel.css */
/* Carrusel de servicios (Inicio). Medidas tal como vienen del prototipo de
   Figma — a propósito no reusa los tokens responsive del resto del sitio. */
:root{
--carousel-card-w:480px;
--carousel-gap:32px;
--carousel-block-gap:48px;
}
@media (max-width:767px){
:root{
--carousel-card-w:300px;
--carousel-gap:24px;
--carousel-block-gap:32px;
}
/* Reserva siempre 2 líneas de título (el largo de "DJI Matrice 4D Series +
   Dock 3"), así el bloque blanco mide lo mismo en las 3 cards y, como la
   card tiene alto fijo, la foto también queda igual de alta en las 3. */
.pc-carousel-title{
min-height:calc(var(--size-h4) * var(--lh-title) * 2);
}
}
.svc-carousel-cta{
display:inline-flex;align-items:center;gap:4px;align-self:flex-end;
height:36px;padding:8px 10px 8px 16px;box-sizing:border-box;
border-radius:var(--radius-md,4px);
border:1px solid #ffffff;background:transparent;color:#ffffff;
font-family:var(--font-display);font-weight:var(--text-label-weight,500);
font-size:12px;line-height:15px;letter-spacing:var(--tracking-tight);
cursor:pointer;transition:background 150ms ease,color 150ms ease;
}
.svc-carousel-cta:hover{background:#ffffff;color:#000000;}
.svc-carousel-cta:active{background:#E4E4E4;color:#000000;}

.svc-carousel-cta-light{
display:inline-flex;align-items:center;gap:4px;align-self:flex-end;
height:36px;padding:8px 10px 8px 16px;box-sizing:border-box;
border-radius:var(--radius-md,4px);
border:1px solid #000000;background:#000000;color:#ffffff;
font-family:var(--font-display);font-weight:var(--text-label-weight,500);
font-size:12px;line-height:15px;letter-spacing:var(--tracking-tight);
cursor:pointer;transition:background 150ms ease,color 150ms ease;
}
.svc-carousel-cta-light:hover{background:#ffffff;color:#000000;}
.svc-carousel-cta-light:active{background:#E4E4E4;color:#000000;}

.svc-carousel-arrow{
width:48px;height:48px;border-radius:50%;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
background:transparent;border:none;padding:0;cursor:pointer;
transition:background 150ms ease;
}
.svc-carousel-arrow:hover{background:#E4E4E4;}
.svc-carousel-arrow:active{background:#CDCDCD;}