/* Subocol — hoja de estilos generada desde el diseño original. */
/* Montserrat es la tipografía corporativa de Subocol (Manual de imagen, p.22).
   Fuentes servidas localmente desde assets/fonts.
   Bebas Neue y Raleway son tipografías complementarias autorizadas (p.23).
   Morganite (también listada en el manual) NO está en Google Fonts: pendiente de archivo. */
/* latin-ext */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/f01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/f02.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f03.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f04.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f05.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f06.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f07.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/f12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f13.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f18.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f19.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f20.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f21.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../assets/fonts/f22.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  /* ---- Primarios institucionales (Manual p.19) ---- */
  --subocol-teal:#00767f;          /* Azul turquesa · confianza técnica */
  --subocol-petroleo:#0d4d64;      /* Azul oscuro · autoridad institucional */
  --subocol-grafito:#4c4c4c;       /* Gris oscuro · solidez técnica */

  /* ---- Secundarios (Manual p.20) ---- */
  --subocol-ocre:#c37c48;          /* Acento humano */
  --subocol-acero:#3a7c90;         /* Jerarquías y capas técnicas */
  --subocol-piedra:#7a8c91;        /* Equilibrio y limpieza */

  /* ---- Extendidos de aplicación (deck y piezas RRSS) ---- */
  --subocol-navy:#003e65;          /* Fondo profundo de portadas */
  --subocol-tinta:#12283a;         /* Casi negro azulado, texto sobre claro */
  --subocol-petroleo-pieza:#134d64;/* Petróleo tal como se imprime en piezas RRSS */
  --subocol-aqua:#3ea5b3;          /* Acento luminoso sobre fondos oscuros */
  --subocol-aqua-alt:#40a5b5;
  --subocol-teal-alt:#007c82;
  --subocol-bruma:#bfdddf;         /* Teal pálido, textos y filetes sobre oscuro */

  /* ---- Neutros fríos ---- */
  --neutral-0:#ffffff;
  --neutral-50:#f4f7fa;
  --neutral-100:#ececf0;
  --neutral-150:#dce4ec;
  --neutral-200:#c9d6e4;
  --neutral-400:#8a9aa0;
  --neutral-500:#6b7a8c;
  --neutral-700:#4c4c4c;
  --neutral-900:#24313f;

  /* ---- Papel AURA (fondo real de las piezas gráficas) ---- */
  --papel-aura:#ddddda;
  --papel-aura-luz:#e7e7eb;
  --papel-aura-sombra:#cdcdcb;

  /* ---- Semánticos ---- */
  --surface-page:var(--neutral-0);
  --surface-page-alt:var(--neutral-50);
  --surface-aura:var(--papel-aura);
  --surface-card:var(--neutral-0);
  --surface-card-alt:var(--neutral-50);
  --surface-invert:var(--subocol-petroleo);
  --surface-invert-deep:var(--subocol-navy);

  --text-strong:var(--subocol-tinta);
  --text-body:var(--subocol-grafito);
  --text-muted:var(--neutral-500);
  --text-brand:var(--subocol-petroleo);
  --text-on-invert:var(--neutral-0);
  --text-on-invert-muted:var(--subocol-bruma);

  --accent-primary:var(--subocol-teal);
  --accent-secondary:var(--subocol-aqua);
  --accent-human:var(--subocol-ocre);

  --border-subtle:var(--neutral-150);
  --border-strong:var(--neutral-200);
  --border-brand:var(--subocol-petroleo);
  --border-on-invert:rgba(255,255,255,.28);

  --focus-ring:var(--subocol-aqua);
}

:root{
  --font-core:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-condensed:"Bebas Neue","Montserrat",sans-serif; /* etiquetas y numerales */
  --font-alt:"Raleway","Montserrat",sans-serif;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;
  --weight-black:900;

  /* Escala tipográfica (piezas 1080px / slides 1280px) */
  --text-3xs:11px;
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:15px;
  --text-base:17px;
  --text-md:19px;
  --text-lg:24px;
  --text-xl:32px;
  --text-2xl:42px;
  --text-3xl:56px;
  --text-4xl:72px;
  --text-5xl:96px;

  --leading-tight:1.05;
  --leading-snug:1.15;
  --leading-normal:1.35;
  --leading-relaxed:1.5;

  /* Eyebrow / kicker: mayúsculas muy espaciadas, como en el manual y el deck */
  --tracking-eyebrow:.28em;
  --tracking-label:.12em;
  --tracking-tight:-.02em;
  --tracking-display:-.015em;
}

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* Márgenes de pieza: el manual pide "márgenes amplios" */
  --gutter-pieza:72px;   /* RRSS 1080x1350 */
  --gutter-slide:88px;   /* Slide 1280x720 */
  --gutter-doc:96px;     /* Documento carta 215x280mm */

  --measure-short:34ch;
  --measure-body:46ch;
  --measure-long:62ch;
}

:root{
  /* La forma "hoja": radio grande en dos esquinas opuestas, recto en las otras.
     Es la firma geométrica de las piezas RRSS de Subocol. */
  --radius-none:0;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;
  --radius-xl:48px;
  --radius-2xl:88px;
  --radius-pill:999px;

  --radius-hoja:88px 88px 0 0;            /* bloque superior de carrusel */
  --radius-hoja-inv:0 0 88px 88px;
  --radius-hoja-diag:88px 0 88px 0;       /* diagonal, marcos de foto */
  --radius-hoja-diag-inv:0 88px 0 88px;
  --radius-marco-foto:56px 0 56px 0;
}

:root{
  /* ---------------------------------------------------------------
     AURA — concepto central del sistema visual (KEY VISUAL RRSS).
     "La sombra, estela o degradado aplicado en el fondo de cada pieza."
     Genera profundidad; nunca compite con el mensaje.
     --------------------------------------------------------------- */

  /* Aura clara: arranca en blanco puro y desciende hasta el gris Subocol.
     Es la más luminosa del sistema: el papel de las piezas editoriales. */
  --aura-clara:linear-gradient(158deg,#ffffff 0%,#f7f7f6 34%,#ebebe9 68%,var(--papel-aura) 100%);

  /* Aura halo: turquesa verde luminoso irradiando desde el centro hacia
     petróleo en los bordes. Es el aura de fondos de marca y pantallas de espera:
     el punto de luz marca dónde está el mensaje. */
  --aura-halo:radial-gradient(70% 62% at 50% 50%, #0e8f92 0%, #0c7a83 34%, #10646f 66%, #0f4f5e 100%); /* @kind color */

  /* Aura petróleo: casi plana, para fondos sólidos con profundidad mínima */
  --aura-petroleo:
    radial-gradient(110% 80% at 78% 8%, rgba(62,165,179,.32) 0%, rgba(62,165,179,0) 60%),
    linear-gradient(170deg,#155571 0%,var(--subocol-petroleo) 55%,#0a3d50 100%);

  /* Estela: sombra suave y difusa que "acompaña" al elemento, no lo encierra */
  --aura-estela:0 40px 90px -30px rgba(13,77,100,.35);
  --aura-estela-sutil:0 18px 40px -18px rgba(13,77,100,.22);
  --aura-estela-oscura:0 50px 120px -40px rgba(0,0,0,.55);

  /* Bloque de lectura: obligatorio cuando hay texto largo sobre aura */
  --aura-bloque-lectura:rgba(13,77,100,.86);
  --aura-bloque-lectura-claro:rgba(255,255,255,.9);
  --aura-blur-bloque:blur(14px); /* @kind other */
}

:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(18,40,58,.06);
  --shadow-sm:0 2px 8px rgba(18,40,58,.08);
  --shadow-md:0 10px 24px -8px rgba(18,40,58,.16);
  --shadow-lg:0 24px 56px -20px rgba(18,40,58,.24);
  --shadow-inset-line:inset 0 0 0 1px var(--border-subtle);
  --shadow-foco:0 0 0 3px rgba(62,165,179,.45);

  --border-width-hairline:1px;
  --border-width-marco:2px;   /* filete de los marcos de foto */
  --border-width-acento:4px;
}

:root{
  /* Movimiento sobrio: el aura "acompaña", no salta. Sin bounce, sin overshoot. */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-salida:cubic-bezier(.4,0,1,1); /* @kind other */
  --ease-entrada:cubic-bezier(0,0,.2,1); /* @kind other */
  --duration-instant:80ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-normal:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-aura:1200ms; /* @kind other */  /* deriva lenta de degradados */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
}

body{font-family:var(--font-core);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--subocol-teal);text-decoration:none;border-bottom:1px solid rgba(0,118,127,.35);transition:var(--transition-control)}
a:hover{color:var(--subocol-petroleo);border-bottom-color:var(--subocol-petroleo)}
::selection{background:var(--subocol-bruma);color:var(--subocol-petroleo)}



    html { scroll-behavior: smooth; }
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font-family: var(--font-core); color: #4c4c4c; background: #fff; }
    a { color: var(--subocol-teal); text-decoration: none; border-bottom: none !important; }
    a:hover { color: var(--subocol-petroleo); }
    @keyframes repPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
    input, textarea { font-family: inherit; }
    input:not([data-plain]):focus, textarea:focus { outline: none; box-shadow: var(--shadow-foco); border-color: var(--subocol-teal) !important; }
  
/* estilos de componentes */
.s0{position: fixed; z-index: 90; left: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); display: flex; align-items: center; gap: 14px; padding: 10px 28px 10px 10px; border-radius: 999px; background: var(--subocol-teal); color: #fff; box-shadow: 0 18px 40px -14px rgba(13,77,100,.55); transition: background 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s1{position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center}
.s2{position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: repPulse 1.8s cubic-bezier(.4,0,.2,1) infinite}
.s3{display: flex; flex-direction: column; line-height: 1.1}
.s4{font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #fff}
.s5{font-size: 17px; font-weight: 900; letter-spacing: -.01em; color: #fff; white-space: nowrap}
.s6{min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip}
.s7{position: sticky; top: 0; z-index: 30; height: 0; overflow: visible}
.s8{position: absolute; left: 0; right: 0; top: 0; padding: 18px clamp(12px, 3vw, 32px) 0; display: flex; justify-content: center; pointer-events: none; transition: padding 420ms cubic-bezier(.4,0,.2,1)}
.s9{pointer-events: auto; width: 100%; max-width: 1180px; background: #fff; border-radius: 999px; box-shadow: 0 40px 90px -30px rgba(13,77,100,.35), 0 0 0 1px rgba(13,77,100,.05); padding: 8px 8px 8px clamp(18px, 2.4vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: max-width 420ms cubic-bezier(.4,0,.2,1), box-shadow 420ms cubic-bezier(.4,0,.2,1)}
.s10{display: flex; flex: 0 0 auto}
.s11{height: 34px; width: auto; display: block; transition: height 420ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s12{display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); font-size: 15px}
.s13{position: relative; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: #f4f7fa}
.s14{position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0px; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -8px rgba(13,77,100,.45), 0 0 0 1px rgba(0,118,127,.18); transition: left 420ms cubic-bezier(.4,0,.2,1), width 420ms cubic-bezier(.4,0,.2,1)}
.s15{position: relative; padding: 10px clamp(14px, 2vw, 22px); border-radius: 999px; font-weight: 700; color: var(--subocol-petroleo); transition: color 160ms}
.s16{position: relative; padding: 10px clamp(14px, 2vw, 22px); border-radius: 999px; font-weight: 500; color: #4c4c4c; transition: color 160ms}
.s17{font-size: 15px; font-weight: 600; color: #fff; background: var(--subocol-teal); border-radius: 999px; padding: 13px 22px; white-space: nowrap; transition: background 240ms cubic-bezier(.4,0,.2,1)}
.s18{position: relative}
.s19{font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--subocol-petroleo); border: none; border-radius: 999px; padding: 13px 22px; cursor: pointer; display: flex; align-items: center; gap: 10px; white-space: nowrap; transition: background 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms cubic-bezier(.4,0,.2,1)}
.s20{transform: none; transition: transform 240ms}
.s21{position: absolute; right: 0; top: calc(100% + 14px); width: min(240px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #fff; border: 1px solid rgba(13,77,100,.12); border-radius: 28px; box-shadow: 0 24px 50px -20px rgba(13,77,100,.28)}
.s22{display: flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 999px; background: var(--subocol-teal); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .02em; transition: background 160ms cubic-bezier(.4,0,.2,1)}
.s23{position: relative; overflow: hidden; background: linear-gradient(158deg, #ffffff 0%, #f3f3f1 55%, #ddddda 100%)}
.s24{position: relative; max-width: 1320px; margin: 0 auto; padding: calc(clamp(40px, 6vw, 72px) + 96px) clamp(20px, 5vw, 64px) clamp(64px, 7vw, 104px); display: flex; flex-direction: column; align-items: center}
.s25{margin: 0; text-align: center; font-size: clamp(36px, 5.4vw, 78px); line-height: 1.02; font-weight: 900; letter-spacing: -.025em; color: var(--subocol-petroleo); text-wrap: balance}
.s26{color: var(--subocol-teal)}
.s27{position: relative; width: 100%; max-width: 1240px; margin-top: clamp(8px, 2vw, 24px)}
.s28{width: 100%; max-width: 1080px; margin-top: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px}
.s29{margin: 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; font-weight: 700; color: var(--subocol-petroleo); text-wrap: pretty; font-size: clamp(20px, 1.9vw, 26px)}
.s30{margin: 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: #4c4c4c; text-wrap: balance; max-width: 1040px}
.s31{margin-top: 14px; display: flex}
.s32{display: inline-flex; align-items: center; justify-content: center; padding: 26px 72px; border-radius: 999px; background: var(--subocol-petroleo); color: #fff; font-size: clamp(19px, 1.6vw, 23px); font-weight: 900; letter-spacing: .01em; transition: background 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s33{background: #fff}
.s34{display: flex; flex-wrap: wrap}
.s35{flex: 1 1 320px; min-width: 0; max-width: 100%; padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 64px); background: #f4f7fa; display: flex; justify-content: center; align-items: flex-start}
.s36{position: sticky; top: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 3vw, 36px)}
.s37{margin: 0; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; font-weight: 900; letter-spacing: -.02em; color: var(--subocol-petroleo)}
.s38{display: inline-flex; align-items: center; justify-content: center; padding: 16px 30px; border-radius: 999px; background: var(--subocol-petroleo); color: #fff; font-size: clamp(15px, 1.2vw, 17px); font-weight: 900; white-space: nowrap; letter-spacing: .01em; transition: background 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s39{flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; padding: clamp(80px, 14vw, 200px) 0}
.s40{display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(40px, 5vw, 64px) clamp(24px, 8vw, 104px); border-bottom: 1px solid rgba(13,77,100,.14); transition: background 420ms cubic-bezier(.4,0,.2,1)}
.s41{flex: 0 0 auto; min-width: clamp(220px, 22vw, 320px); display: flex; flex-direction: column; gap: 6px}
.s42{font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; color: #4c4c4c}
.s43{display: flex; align-items: baseline; color: var(--subocol-teal); font-weight: 900; letter-spacing: -.04em; line-height: .86}
.s44{font-size: clamp(96px, 10vw, 156px); font-variant-numeric: tabular-nums}
.s45{font-size: clamp(40px, 4vw, 60px); margin-left: 6px; letter-spacing: 0}
.s46{flex: 1 1 260px; margin: 0; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; font-weight: 700; color: #4c4c4c; text-wrap: pretty}
.s47{display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(40px, 5vw, 64px) clamp(24px, 8vw, 104px); border-bottom: 1px solid transparent; transition: background 420ms cubic-bezier(.4,0,.2,1)}
.s48{background: #fff; padding: clamp(80px, 10vw, 130px) 0 clamp(48px, 6vw, 80px)}
.s49{margin: 0 0 clamp(48px, 7vw, 96px); padding: 0 20px; text-align: center; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.1; font-weight: 300; color: #4c4c4c}
.s50{max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 64px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px)}
.s51{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; padding: clamp(28px, 4.5vw, 64px); border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse 45% 55% at 25% 90%, #e2e2e0 0%, rgba(255,255,255,0) 70%), linear-gradient(90deg, #f3f3f2 0%, #fff 55%)}
.s52{position: relative; aspect-ratio: 1 / 1.05; max-width: 600px; width: 100%; justify-self: center}
.s53{position: absolute; left: 0; bottom: 4%; width: 46%; height: 42%; background: var(--subocol-petroleo); border-radius: 88px 0 88px 0}
.s54{position: absolute; right: 0; top: 0; width: 70%; height: 80%; background: linear-gradient(158deg, #3ea5b3 0%, #00767f 55%, #0d4d64 100%); border-radius: 0 88px 0 88px}
.s55{position: absolute; left: 10%; top: 9%; width: 74%; height: 78%; border-radius: 32px; overflow: hidden; border: 6px solid #fff}
.s56{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms cubic-bezier(.4,0,.2,1)}
.s57{display: flex; flex-direction: column; gap: 18px; min-width: 0}
.s58{margin: 0; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.04; font-weight: 900; letter-spacing: -.02em; color: var(--subocol-petroleo)}
.s59{margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: #4c4c4c; max-width: 58ch; text-wrap: pretty}
.s60{display: flex; flex-direction: column; margin-top: 6px; border-bottom: 1px solid rgba(13,77,100,.16)}
.s61{display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(13,77,100,.16); transition: transform 240ms cubic-bezier(.4,0,.2,1)}
.s62{flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center}
.s63{margin: 0; font-size: 15px; line-height: 1.45; color: #4c4c4c; text-wrap: pretty}
.s64{font-weight: 800; color: var(--subocol-petroleo)}
.s65{display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); padding: clamp(28px, 4.5vw, 64px); border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse 45% 55% at 75% 90%, #e2e2e0 0%, rgba(255,255,255,0) 70%), linear-gradient(270deg, #f3f3f2 0%, #fff 55%)}
.s66{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(20px, 4vw, 64px); align-items: end}
.s67{margin: 0; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.04; font-weight: 900; letter-spacing: -.02em; color: var(--subocol-petroleo)}
.s68{margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: #4c4c4c; text-wrap: pretty}
.s69{position: relative; width: 100%; isolation: isolate; padding: clamp(8px, 2vw, 24px) 0}
.s70{position: absolute; z-index: -1; right: 4%; top: 6%; width: 52%; height: 70%; background: linear-gradient(158deg, #3ea5b3 0%, #00767f 55%, #0d4d64 100%); border-radius: 0 88px 0 88px}
.s71{position: absolute; z-index: -1; left: 8%; bottom: 4%; width: 30%; height: 40%; background: var(--subocol-petroleo); border-radius: 88px 0 88px 0}
.s72{display: flex; flex-wrap: wrap; justify-content: center; row-gap: clamp(32px, 4vw, 52px); padding-top: 8px}
.s73{min-width: 0; padding: 8px clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; transition: transform 300ms cubic-bezier(.4,0,.2,1)}
.s74{font-size: 16px; line-height: 1.3; font-weight: 800; color: var(--subocol-petroleo)}
.s75{margin: -6px 0 0; max-width: 28ch; font-size: 14.5px; line-height: 1.5; color: #4c4c4c; text-wrap: balance}
.s76{position: absolute; right: 0; bottom: 4%; width: 46%; height: 42%; background: var(--subocol-petroleo); border-radius: 0 88px 0 88px}
.s77{position: absolute; left: 0; top: 0; width: 70%; height: 80%; background: linear-gradient(202deg, #3ea5b3 0%, #00767f 55%, #0d4d64 100%); border-radius: 88px 0 88px 0}
.s78{position: absolute; right: 10%; top: 9%; width: 74%; height: 78%; border-radius: 32px; overflow: hidden; border: 6px solid #fff}
.s79{position: relative; overflow: hidden; background: radial-gradient(60% 70% at 78% 50%, rgba(62,165,179,.32) 0%, rgba(62,165,179,0) 65%), linear-gradient(160deg, #0d4d64 0%, #0a3d50 100%); color: #fff}
.s80{max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 40px); align-items: center}
.s81{flex: 1 1 380px; display: flex; flex-direction: column; gap: 24px; min-width: 0}
.s82{margin: 0; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.04; font-weight: 900; letter-spacing: -.02em; color: #fff; text-wrap: balance}
.s83{color: #3ea5b3}
.s84{margin: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; font-weight: 600; color: #fff; max-width: 48ch; text-wrap: pretty}
.s85{margin: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; font-weight: 400; color: #fff; max-width: 48ch; text-wrap: pretty}
.s86{display: flex; margin-top: 8px}
.s87{display: inline-flex; align-items: center; justify-content: center; padding: 20px 52px; border-radius: 999px; background: #fff; color: var(--subocol-petroleo); font-size: 19px; font-weight: 900; letter-spacing: .01em; transition: background 240ms cubic-bezier(.4,0,.2,1), color 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s88{flex: 1.5 1 520px; min-width: 0; margin: clamp(-60px, -4vw, 0px) clamp(-48px, -3vw, 0px) clamp(-60px, -4vw, 0px) 0}
.s89{max-width: 1480px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 3vw, 48px)}
.s90{flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px, 3vw, 40px)}
.s91{margin: 0; font-size: clamp(44px, 5.6vw, 84px); line-height: 1; font-weight: 900; letter-spacing: -.025em; color: var(--subocol-petroleo)}
.s92{display: inline-flex; align-items: center; justify-content: center; padding: 20px 52px; border-radius: 999px; background: var(--subocol-petroleo); color: #fff; font-size: 19px; font-weight: 900; letter-spacing: .01em; white-space: nowrap; transition: background 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s93{flex: 1 1 600px; min-width: 0}
.s94{max-width: 1240px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px}
.s95{width: 100%; max-width: 420px; margin-bottom: 4px}
.s96{width: 100%; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); row-gap: 48px; margin-top: 12px}
.s97{margin-left: -1px; border-left: 1px solid rgba(255,255,255,.2); padding: 8px clamp(20px, 3vw, 48px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px}
.s98{margin: 0; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.04; font-weight: 900; letter-spacing: -.025em; color: #fff; text-wrap: balance}
.s99{margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; font-weight: 600; color: #fff; max-width: 46ch; text-wrap: pretty}
.s100{display: flex; justify-content: center; margin-top: auto; padding-top: 8px}
.s101{display: inline-flex; align-items: center; justify-content: center; padding: 20px 48px; border-radius: 999px; background: #fff; color: var(--subocol-petroleo); font-size: 18px; font-weight: 900; letter-spacing: .01em; white-space: nowrap; transition: background 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s102{margin: 0; scroll-margin-top: 140px; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.04; font-weight: 900; letter-spacing: -.025em; color: #fff; text-wrap: balance}
.s103{margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; font-weight: 600; color: #fff; max-width: 34ch; text-wrap: pretty}
.s104{max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 4vw, 48px)}
.s105{margin: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 300; color: var(--subocol-petroleo)}
.s106{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(48px, 9vw, 140px)}
.s107{height: clamp(56px, 6vw, 88px); width: auto; display: block; transition: transform 240ms cubic-bezier(.4,0,.2,1)}
.s108{height: clamp(80px, 8.6vw, 128px); width: auto; display: block; transition: transform 240ms cubic-bezier(.4,0,.2,1)}
.s109{max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) clamp(16px, 4vw, 64px)}
.s110{display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: flex-start; padding: clamp(28px, 4.5vw, 64px); border-radius: 24px; background: radial-gradient(ellipse 45% 55% at 25% 90%, #e2e2e0 0%, rgba(243,243,242,0) 70%), linear-gradient(90deg, #f3f3f2 0%, #fff 55%); box-shadow: 0 -28px 50px -24px rgba(13,77,100,.28)}
.s111{flex: 1 1 320px; min-width: 0; align-self: stretch}
.s112{position: sticky; top: 110px; margin: 0; font-size: clamp(40px, 4.4vw, 66px); line-height: 1; font-weight: 900; letter-spacing: -.025em; color: var(--subocol-petroleo)}
.s113{flex: 1.4 1 440px; min-width: 0; background: #fff; border: 1px solid #c9d3dc; border-radius: 24px; padding: clamp(28px, 4vw, 48px)}
.s114{border: 1px solid #dce4ec; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 8px}
.s115{font-size: 20px; color: var(--subocol-petroleo)}
.s116{font-size: 15px}
.s117{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px 18px}
.s118{grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; gap: 10px}
.s119{font-size: 15px; font-weight: 700}
.s120{display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 1px solid #c9d3dc; border-radius: 10px; background: #fff; padding: 12px 16px; font-family: inherit; font-size: 15px; font-weight: 600; color: #7a8c91; text-align: left; cursor: pointer; transition: border-color 160ms cubic-bezier(.4,0,.2,1)}
.s121{flex: none; transform: none; transition: transform 240ms cubic-bezier(.4,0,.2,1)}
.s122{position: absolute; left: 16px; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none}
.s123{position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff; border: 1px solid rgba(13,77,100,.12); border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(13,77,100,.28)}
.s124{display: flex; align-items: center; width: 100%; padding: 12px 18px; border: none; border-radius: 999px; background: transparent; color: var(--subocol-petroleo); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: background 160ms cubic-bezier(.4,0,.2,1)}
.s125{display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 700}
.s126{border: 1px solid #c9d3dc; border-radius: 10px; background: #fff; padding: 12px 14px; font-size: 15px; color: #4c4c4c; transition: border-color 160ms, box-shadow 160ms}
.s127{grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 700}
.s128{border: 1px solid #c9d3dc; border-radius: 10px; background: #fff; padding: 12px 14px; font-size: 15px; color: #4c4c4c; transition: border-color 160ms, box-shadow 160ms; font-family: inherit; appearance: auto; cursor: pointer}
.s129{display: flex; align-items: stretch; border: 1px solid #c9d3dc; border-radius: 10px; background: #fff; overflow: hidden}
.s130{flex: none; border: none; border-right: 1px solid #c9d3dc; background: #f4f7fa; padding: 0 10px 0 12px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--subocol-petroleo); cursor: pointer; appearance: auto}
.s131{flex: 1; min-width: 0; border: none; padding: 12px 14px; font-size: 15px; color: #4c4c4c; background: transparent}
.s132{border: 1px solid #c9d3dc; border-radius: 10px; background: #fff; padding: 12px 14px; font-size: 15px; resize: vertical; color: #4c4c4c; transition: border-color 160ms, box-shadow 160ms}
.s133{grid-column: 1 / -1; font-family: inherit; font-size: 18px; font-weight: 900; color: #fff; background: var(--subocol-petroleo); border: none; border-radius: 999px; padding: 18px; cursor: pointer; transition: background 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms cubic-bezier(.4,0,.2,1)}
.s134{max-width: 1152px; margin: 0 auto; height: 1px; background: rgba(13,77,100,.16)}
.s135{margin: 0; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.02; font-weight: 900; letter-spacing: -.025em; color: var(--subocol-petroleo)}
.s136{margin: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; font-weight: 600; color: #4c4c4c; max-width: 82ch; text-wrap: pretty}
.s137{display: flex; justify-content: center; margin-top: 8px}
.s138{display: inline-flex; align-items: center; justify-content: center; padding: 20px 48px; border-radius: 999px; background: var(--subocol-petroleo); color: #fff; font-size: 18px; font-weight: 900; letter-spacing: .01em; white-space: nowrap; transition: background 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
.s139{background: var(--subocol-petroleo); color: #fff}
.s140{max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 64px) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(32px, 5vw, 64px)}
.s141{flex: 1 1 260px; display: flex; flex-direction: column; gap: 20px}
.s142{height: 40px; width: auto; align-self: flex-start; display: block}
.s143{flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; color: #fff}
.s144{flex: 0 1 160px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 600}
.s145{color: #fff; transition: color 160ms}
.s146{max-width: 1280px; margin: 0 auto; padding: 24px clamp(20px, 5vw, 64px) 32px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: #bfdddf}
.s147{position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 40; width: 60px; height: 60px; border: none; cursor: pointer; border-radius: 50%; background: var(--subocol-petroleo); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1)}
/* hover */
.h5c7275:hover{background: var(--subocol-petroleo) !important;color: #fff !important;transform: translateY(-3px) !important}
.he0d73e:hover{transform: scale(1.05) !important}
.h3fb980:hover{color: var(--subocol-teal) !important}
.hf2a7d6:hover{background: var(--subocol-petroleo) !important;color: #fff !important}
.hd91023:hover{background: #0a3d50 !important}
.h0a3624:hover{background: var(--subocol-petroleo) !important}
.h1b6c10:hover{background: #0a3d50 !important;color: #fff !important;transform: translateY(-2px) !important}
.h3d46ec:hover{background: #f4f7fa !important}
.he66ca9:hover{transform: translateX(4px) !important}
.hc2ff26:hover{transform: translateY(-4px) !important}
.hf1e23b:hover{background: #3ea5b3 !important;color: #fff !important;transform: translateY(-2px) !important}
.h5a2e0d:hover{transform: scale(1.06) !important}
.h89b988:hover{border-color: var(--subocol-teal) !important}
.h37df74:hover{background: #e3f1f2 !important}
.h772b6e:hover{color: #3ea5b3 !important}
.ha36860:hover{background: #0a3d50 !important;transform: translateY(-3px) !important}
/* ---------- ajustes de la versión estática ---------- */
[hidden]{display:none !important}

/* Grilla de funcionalidades Suite Orbika: 1 / 2 / 4 columnas */
.feat{flex:0 0 100%;border-left:1px solid transparent}
@media (min-width:620px){
  .feat{flex-basis:50%}
  .feat:nth-child(2n){border-left-color:rgba(13,77,100,.16)}
}
@media (min-width:1100px){
  .feat{flex-basis:25%}
  .feat:nth-child(n){border-left-color:rgba(13,77,100,.16)}
  .feat:nth-child(4n+1){border-left-color:transparent}
}

/* Menú móvil */
#hdr-pill{position:relative}
#menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:999px;
  background:var(--subocol-petroleo);color:#fff;cursor:pointer;flex:none}
#menu-btn:focus-visible,#mobile-menu a:focus-visible{outline:3px solid var(--subocol-aqua);outline-offset:2px}
#mobile-menu{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border-radius:24px;
  box-shadow:0 24px 56px -20px rgba(13,77,100,.45),0 0 0 1px rgba(13,77,100,.06);padding:10px;display:flex;flex-direction:column}
#mobile-menu a{display:block;padding:14px 16px;border-radius:14px;font-size:16px;font-weight:600;color:var(--subocol-petroleo)}
#mobile-menu a:hover{background:#f4f7fa}
#mobile-menu .mm-label{margin:8px 16px 2px;padding-top:12px;border-top:1px solid rgba(13,77,100,.12);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7a8c91}
@media (max-width:720px){
  #hdr-pill nav > :not(#menu-btn){display:none !important}
  #menu-btn{display:flex}
}
@media (min-width:721px){ #mobile-menu{display:none !important} }

/* Botones flotantes en celular: más compactos para no tapar contenido */
@media (max-width:640px){
  #fab-repuesto{left:12px !important;bottom:14px !important;padding:6px 16px 6px 6px !important;gap:10px !important}
  #fab-repuesto > span:first-child{width:40px !important;height:40px !important}
  #fab-repuesto > span:last-child > span:first-child{display:none !important}
  #fab-repuesto > span:last-child > span:last-child{font-size:14px !important}
  #fab-wa{right:12px !important;bottom:14px !important;width:52px !important;height:52px !important}
}

/* Formulario */
#form-error{grid-column:1 / -1;margin:0;padding:12px 16px;border-radius:10px;background:#fdecea;color:#8a1c12;font-size:15px;font-weight:600}
[aria-invalid="true"]{border-color:#c0392b !important}
#ok-link{display:inline-block;margin-top:12px;font-size:15px;font-weight:700;text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* teléfono del footer (enlace a WhatsApp) legible sobre fondo oscuro */
#footer-wa{color:inherit;text-decoration:underline;text-underline-offset:3px}
#footer-wa:hover{color:#fff}