*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO — OSCAR COMUNICACIÓN
   Construido sobre 5 pilares:
     1. Colores primitivos + semánticos + overlays
     2. Escala tipográfica con clamp() fluido
     3. Espaciado base-4
     4. Radios, sombras y z-index
     5. Animaciones y timing functions
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── 1. COLORES ─────────────────────────────────────────────── */

  /* Primitivos de marca */
  --p-50:  #f0f0fc;   /* fondo hover, tarjetas muy suaves       */
  --p-100: #e8e8f8;   /* fondo sección alterna                  */
  --p-200: #c8c8ee;   /* borde suave, badge claro               */
  --p-300: #7070cc;   /* borde focus, input activo              */
  --p-500: #3535b0;   /* enlace activo, texto secundario fuerte */
  --p-700: #1a1a80;   /* hover de botón primario                */
  --p-900: #010050;   /* color de marca principal               */

  /* Primitivos de acento (amarillo dorado — complementario) */
  --accent-300: #ffe066;
  --accent-400: #ffc000;   /* CTA principal                     */
  --accent-600: #e6ac00;   /* CTA hover                         */
  --accent-900: #5a3e00;   /* texto sobre acento                 */

  /* Primitivos secundarios (cyan — análogo) */
  --cyan-400: #01b0f1;     /* enlaces, highlights, tags          */
  --cyan-600: #0090a8;     /* cyan hover                         */
  --cyan-50:  #e6f4fb;     /* fondo badge cyan                   */

  /* Escala de grises */
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #4a6080;     /* muted — texto secundario           */
  --gray-700: #404040;
  --gray-900: #111111;

  /* ── Semánticos de color (apuntan a primitivos) ── */
  --color-brand:        var(--p-900);
  --color-brand-hover:  var(--p-700);
  --color-brand-light:  var(--p-50);
  --color-cta:          var(--accent-400);
  --color-cta-hover:    var(--accent-600);
  --color-cta-text:     var(--accent-900);
  --color-link:         var(--cyan-400);
  --color-link-hover:   var(--cyan-600);
  --color-surface:      var(--p-50);
  --color-surface-alt:  var(--p-100);
  --color-background:   #ffffff;
  --color-text:         var(--gray-900);
  --color-text-muted:   var(--gray-600);
  --color-text-subtle:  var(--gray-500);
  --color-border:       var(--p-200);
  --color-border-soft:  var(--p-100);

  /* ── Overlays purple (rgba de --p-900 = rgb(1,0,80)) ── */
  --purple-07:  rgba(1,0,80,0.07);
  --purple-08:  rgba(1,0,80,0.08);
  --purple-1:   rgba(1,0,80,0.1);
  --purple-12:  rgba(1,0,80,0.12);
  --purple-13:  rgba(1,0,80,0.13);
  --purple-14:  rgba(1,0,80,0.14);
  --purple-18:  rgba(1,0,80,0.18);
  --purple-22:  rgba(1,0,80,0.22);
  --purple-3:   rgba(1,0,80,0.3);
  --purple-4:   rgba(1,0,80,0.4);
  --purple-42:  rgba(1,0,80,0.42);
  --purple-45:  rgba(1,0,80,0.45);
  --purple-5:   rgba(1,0,80,0.5);
  --purple-55:  rgba(1,0,80,0.55);
  --purple-6:   rgba(1,0,80,0.6);
  --purple-62:  rgba(1,0,80,0.62);
  --purple-65:  rgba(1,0,80,0.65);
  --purple-7:   rgba(1,0,80,0.7);
  --purple-8:   rgba(1,0,80,0.8);
  --purple-82:  rgba(1,0,80,0.82);
  --purple-85:  rgba(1,0,80,0.85);
  --purple-88:  rgba(1,0,80,0.88);
  --purple-9:   rgba(1,0,80,0.9);
  --purple-95:  rgba(1,0,80,0.95);
  --purple-1x:  rgba(1,0,80,1);

  /* ── Overlays oscuros ── */
  --dark-overlay-1:   rgba(13,27,75,0.1);
  --dark-overlay-55:  rgba(13,27,75,0.55);
  --dark-overlay-65:  rgba(13,27,75,0.65);
  --ink-60:           rgba(10,5,40,0.6);
  --ink-88:           rgba(10,5,30,0.88);
  --ink-92:           rgba(10,5,30,0.92);
  --black-50:         rgba(0,0,0,0.5);
  --black:            #000000;
  --deep-black:       #06040f;

  /* ── Overlays blancos ── */
  --white-08:  rgba(255,255,255,0.08);
  --white-1:   rgba(255,255,255,0.1);
  --white-12:  rgba(255,255,255,0.12);
  --white-14:  rgba(255,255,255,0.14);
  --white-15:  rgba(255,255,255,0.15);
  --white-18:  rgba(255,255,255,0.18);
  --white-25:  rgba(255,255,255,0.25);
  --white-3:   rgba(255,255,255,0.3);
  --white-35:  rgba(255,255,255,0.35);
  --white-45:  rgba(255,255,255,0.45);
  --white-5:   rgba(255,255,255,0.5);
  --white-65:  rgba(255,255,255,0.65);
  --white-7:   rgba(255,255,255,0.7);
  --white-72:  rgba(255,255,255,0.72);
  --white-75:  rgba(255,255,255,0.75);
  --white-78:  rgba(255,255,255,0.78);
  --white-85:  rgba(255,255,255,0.85);
  --white-88:  rgba(255,255,255,0.88);
  --white-9:   rgba(255,255,255,0.9);

  /* ── Overlays secundarios ── */
  --secondary-15:     rgba(0,184,217,0.15);
  --lavender-1:       rgba(86,54,209,0.1);
  --lavender-2:       rgba(86,54,209,0.2);
  --lavender-4:       rgba(86,54,209,0.4);
  --lavender-ring-35: rgba(195,185,255,0.35);
  --lavender-ring-50: rgba(195,185,255,0.5);

  /* ── Alias de compatibilidad (no usar en código nuevo) ── */
  --purple:        var(--p-900);
  --purple-dark:   var(--p-700);
  --purple-light:  var(--p-100);
  --secondary:     var(--cyan-400);
  --secondary-dark:var(--cyan-600);
  --navy:          var(--gray-900);
  --text:          var(--color-text);
  --muted:         var(--color-text-muted);
  --light-bg:      var(--gray-50);
  --white:         var(--color-background);
  --border:        var(--color-border);
  --amber:         #f5a623;
  --gray-light:    #cccccc;
  --lavender-soft: #c4b5fd;
  --ink-dark:      #1a1535;
  --surface:       var(--p-50);
  --surface-soft:  #f8f9fc;
  --surface-mid:   #f4f7ff;
  --surface-sub:   #eef0f8;
  --surface-alt:   #f5f7ff;
  --border-soft:   var(--p-100);
  --border-subtle: #e0e3ef;
  --border-dropdown: #e8eaf2;
  --border-mid:    #dde3f0;
  --text-dark:     #333333;
  --text-mid:      #444444;
  --text-subtle:   #555555;
  --text-gray:     #666666;
  --text-light:    #888888;


  /* ── 2. TIPOGRAFÍA ──────────────────────────────────────────── */

  /* Fuentes */
  --font-body:    'Poppins', sans-serif;
  --font-heading: 'Poppins', sans-serif;   /* cambiar a serif si se desea */
  --font-mono:    'Courier New', monospace;

  /* Escala de tamaños — fluida con clamp() donde aplica */
  --fs-xs:   0.75rem;                       /*  12px — labels, metadatos     */
  --fs-sm:   0.875rem;                      /*  14px — nav, subtexto         */
  --fs-base: 1rem;                          /*  16px — cuerpo principal      */
  --fs-md:   1.125rem;                      /*  18px — intro, tagline        */
  --fs-lg:   1.375rem;                      /*  22px — H3, títulos de tarjeta*/
  --fs-xl:   clamp(1.5rem, 3vw, 2rem);      /*  24–32px — H2, section-title  */
  --fs-2xl:  clamp(2rem, 5vw, 3.5rem);      /*  32–56px — H1, hero           */

  /* Line-height — siempre sin unidades */
  --lh-tight:   1.15;    /* títulos grandes H1               */
  --lh-snug:    1.35;    /* subtítulos H2/H3, UI             */
  --lh-normal:  1.65;    /* cuerpo de texto — reemplaza 36px */
  --lh-relaxed: 1.85;    /* texto largo, hero p              */

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Alias de compatibilidad tipográfica */
  --text-xs:          var(--fs-xs);
  --text-sm:          var(--fs-sm);
  --text-base:        var(--fs-base);
  --text-md:          var(--fs-md);
  --text-lg:          var(--fs-xl);
  --text-xl:          var(--fs-2xl);
  --weight-regular:   var(--fw-regular);
  --weight-semibold:  var(--fw-semibold);
  --weight-bold:      var(--fw-bold);


  /* ── 3. ESPACIADO (base 4px) ────────────────────────────────── */

  --space-1:  0.25rem;   /*  4px — separación mínima              */
  --space-2:  0.5rem;    /*  8px — gap iconos, label-input        */
  --space-3:  0.75rem;   /* 12px — padding badge, pill            */
  --space-4:  1rem;      /* 16px — padding card, gap grid         */
  --space-6:  1.5rem;    /* 24px — margen entre bloques internos  */
  --space-8:  2rem;      /* 32px — padding sección, gap grande    */
  --space-12: 3rem;      /* 48px — espaciado entre bloques        */
  --space-16: 4rem;      /* 64px — padding sección completa       */
  --space-24: 6rem;      /* 96px — hero, márgenes de página       */


  /* ── 4. LAYOUT, RADIOS Y SOMBRAS ────────────────────────────── */

  /* Contenedor */
  --max: 1400px;
  --container-padding: clamp(1rem, 4vw, 3rem);

  /* Alturas de nav — usadas en calc() */
  --nav-h:        96px;   /* desktop                               */
  --nav-h-mobile: 64px;   /* se sobreescribe en @media             */

  /* Radios */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;    /* pills, badges                         */
  --radius-full: 9999px;  /* círculos                              */

  /* Sombras — todas usando overlay purple para coherencia de marca */
  --shadow-xs: 0 1px 3px var(--purple-08);
  --shadow-sm: 0 2px 8px var(--purple-1);
  --shadow-md: 0 4px 16px var(--purple-12), 0 1px 4px var(--purple-08);
  --shadow-lg: 0 8px 32px var(--purple-18), 0 2px 8px var(--purple-1);
  --shadow-xl: 0 16px 48px var(--purple-22), 0 4px 12px var(--purple-12);

  /* Z-index — escala semántica */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-nav:     300;
  --z-modal:   400;
  --z-toast:   500;


  /* ── 5. ANIMACIONES Y TRANSICIONES ──────────────────────────── */

  /* Duraciones */
  --duration-instant: 100ms;   /* micro-feedback (click, focus)    */
  --duration-fast:    150ms;   /* hover de botón, color            */
  --duration-base:    220ms;   /* hover de card, dropdown          */
  --duration-slow:    400ms;   /* fade-in, slide de panel          */
  --duration-xslow:  600ms;    /* modales, transiciones de página  */

  /* Curvas de animación */
  --ease-default:  ease;
  --ease-out:      ease-out;
  --ease-in-out:   ease-in-out;
  --ease-linear:   linear;
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* rebote suave    */
  --ease-snappy:   cubic-bezier(0.2, 0, 0, 1);          /* Google Material */
  --ease-back:     cubic-bezier(0.36, 0.07, 0.19, 0.97);/* tiembla-error  */

  /* Breakpoints — solo documentación, no usables en media queries */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}

/* ── Nav height en móvil ── */
@media (max-width: 900px) {
  :root { --nav-h: var(--nav-h-mobile); }
}

/* ═══════════════════════════════════════════════════════════════
   ESTILOS BASE GLOBALES
   ═══════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  font-family: var(--font-body);
  font-size:   var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color:       var(--color-text);
  background:  var(--color-background);
}

/* ── Tipografía base ── */
h1 {
  font-family:    var(--font-heading);
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: -0.02em;
}

h2 {
  font-family:    var(--font-heading);
  font-size:      var(--fs-xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-snug);
  letter-spacing: -0.02em;
}

h3 {
  font-size:      var(--fs-lg);
  font-weight:    var(--fw-semibold);
  line-height:    var(--lh-snug);
  letter-spacing: -0.01em;
}

h4, h5, h6 {
  font-size:   var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p {
  line-height:   var(--lh-normal);
  margin-bottom: var(--space-4);
  max-width:     68ch;
}

p strong { color: var(--gray-900); }
span { font-family: var(--font-body); }

p:last-child { margin-bottom: 0; }

button,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

a{
  text-decoration:none;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

a:hover{
  text-decoration:none;
  outline:none;
}


/* ── Accesibilidad — siempre al final de los estilos base ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
  }
}

/* ── NAVBAR ─────────────────────────────────────────── */
.header-top {
  position: relative;
  width: 100%;
  background: #212226;
}

.main-header {
  position: relative;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 999;
  width: 100%;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.auto-container {
  position: static;
  max-width: 1320px;
  padding: 0px 15px;
  margin: 0 auto;
}

.header-top .top-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-top .top-inner .left-column {
  position: relative;
  display: flex;
  align-items: center;
}

.header-top .top-inner .left-column .info {
  margin-right: 60px;
}

.header-top .info li {
  position: relative;
  display: inline-block;
  float: left;
  font-size: 16px;
  line-height: 24px;
  color: #BCBDBE;
  font-weight: 500;
  margin-right: 25px;
  padding-left: 27px;
}

.header-top .info li i {
  position: absolute;
  left: 0px;
  top: 2px;
  font-size: 18px;
}

.icon-1::before {
  content: "\e900";
}

.header-top .info li a {
  display: inline-block;
  color: #BCBDBE;
}

.header-top .social-links li {
  position: relative;
  display: inline-block;
  float: left;
  margin-right: 30px;
}

.header-top .btn-box a {
  background: #ffc000;
}

.header-top .social-links li a {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
}



.header-top .btn-box a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 18px;
  line-height: 23px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: #fff;
  padding: 24px 43px 23px 44px;
  z-index: 1;
}

.header-top .social-links {
  position: relative;
}

/* ── Header-top responsive ───────────────────────────── */
@media (max-width: 1150px) {
  /* Ocultar botón Contactar cuando aparece el hamburger */
  .header-top .right-column { display: none; }
}

@media (max-width: 768px) {
  /* Reducir padding y fuente en pantallas medianas */
  .header-top .info li {
    font-size: 13px;
    margin-right: 12px;
    padding-left: 22px;
  }
  .header-top .info li i { font-size: 14px; }
  .header-top .top-inner .left-column .info { margin-right: 20px; }
}

@media (max-width: 480px) {
  /* Solo mostrar el icono social, ocultar el correo */
  .header-top .info { display: none; }
  .header-top .top-inner .left-column .info { margin-right: 0; }
}


nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
nav.nav-scrolled {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}



.nav-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-decoration: none;
  letter-spacing: 1px;
  margin-left: 0;
  flex-shrink: 0;
}

.logo span { color: var(--purple); }

.logo img {
  filter: none;
  transition: filter 0.35s ease;
}


.nav-links {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #1a1a2e;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  position: relative;
  transition: color 0.25s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffc000;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.nav-links a:hover {
  color: #ffc000;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* ── Active nav link ── */
.nav-links a.nav-active {
  color: #ffc000;
}
.nav-links a.nav-active::after {
  transform: scaleX(1);
}

/* ── NAV DROPDOWN ─────────────────────────────────── */
.nav-dropdown-wrap {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.nav-chevron {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
}

.nav-dropdown-wrap:hover .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #0b0b1c;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  list-style: none;
  min-width: 230px;
  z-index: 200;
  padding: 0.4rem 0;
  margin-top: 0;
}

.nav-dropdown-wrap.open .nav-dropdown { display: block; }

.nav-dropdown li { border-bottom: none; }

.nav-dropdown li a {
  display: block;
  padding: 0.75rem 1.4rem;
  color: rgba(255,255,255,0.75) !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: color 0.2s, border-left-color 0.2s, padding-left 0.2s;
}

.nav-dropdown li:first-child a {
  color: #fff !important;
  font-weight: 700;
  border-bottom: none;
}

.nav-dropdown li a:hover {
  color: #ffc000 !important;
  border-left-color: rgba(255,192,0,0.5);
  padding-left: 1.75rem;
  background: rgba(255,255,255,0.04);
}

/* ── Sub-dropdown (Talleres / Cursos) ── */
.nav-sub-wrap {
  position: relative;
}

.nav-sub-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nav-sub-chevron {
  font-size: 0.55rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.nav-subdropdown {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: #13122a;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  list-style: none;
  min-width: 260px;
  z-index: 201;
  padding: 0.4rem 0;
}

.nav-sub-wrap.open .nav-subdropdown { display: block; }
.nav-sub-wrap.open .nav-sub-chevron { transform: rotate(90deg); }

.nav-subdropdown li { border-bottom: none; }

.nav-subdropdown li a {
  display: block;
  padding: 0.75rem 1.4rem;
  color: rgba(255,255,255,0.7) !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: color 0.2s, border-left-color 0.2s, padding-left 0.2s;
}

.nav-subdropdown li a:hover {
  color: #ffc000 !important;
  border-left-color: rgba(255,192,0,0.5);
  padding-left: 1.75rem;
  background: rgba(255,255,255,0.04);
}

/* Móvil: dropdown inline */
@media (max-width: 900px) {
  .nav-dropdown-wrap::after { display: none !important; }

  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border-top: none;
    border-left: 3px solid #ffc000;
    background: #f8f9fc;
    padding: 0.25rem 0;
    min-width: unset;
    width: 100%;
    display: none;
    margin-top: 0;
  }

  .nav-dropdown-wrap.open .nav-dropdown { display: block; }
  .nav-dropdown-wrap.open .nav-chevron { transform: rotate(180deg); }

  .nav-dropdown li a {
    padding: 0.5rem 1.2rem;
    font-size: 0.78rem;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  /* Sub-dropdown móvil */
  .nav-subdropdown {
    position: static;
    box-shadow: none;
    border-top: none;
    border-left: 3px solid #01b0f1;
    background: #eef0f8;
    padding: 0.2rem 0;
    min-width: unset;
    width: 100%;
    display: none;
  }

  .nav-sub-wrap.open .nav-subdropdown { display: block; }
  .nav-sub-wrap.open .nav-sub-chevron { transform: rotate(90deg); }

  .nav-subdropdown li a {
    padding: 0.45rem 1.6rem;
    font-size: 0.75rem;
  }

  .nav-sub-toggle {
    width: 100%;
  }
}

/* Botón Contacto — mismo estilo que los demás links */
.nav-contact-btn {
  background: transparent !important;
  color: #1a1a2e !important;
  padding: 0 !important;
  border-radius: 0;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}
.nav-contact-btn:hover {
  background: transparent !important;
  color: #ffc000 !important;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
}

.lang-sep {
  color: #ccc;
  font-size: var(--text-sm);
}

.lang-btn {
  background: none;
  border: none;
  padding: 2px 3px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
}

.lang-btn.active {
  opacity: 1;
  transform: scale(1.15);
}

.lang-btn:hover {
  opacity: 0.85;
  transform: scale(1.1);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all .3s;
}

/* ── HERO ────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #f0f2f8;
  position: relative;
  overflow: hidden;
  margin-top: 0;
}

.hero-main-row {
  display: flex;
  align-items: stretch;
  flex: 1;
  position: relative;
  min-height: 100vh;
}
.hero .custom-shape-divider-bottom-hero {
  z-index: 10;
}

/* ── Wave at the bottom of the hero ── */
.hero-wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 10;
  pointer-events: none;
}
.hero-wave-bottom svg {
  display: block;
  width: 100%;
  height: 90px;
}

/* ── Typewriter cursor ───────────────────────────────── */
@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.tw-cursor {
  display: inline-block;
  font-style: normal;
  font-weight: 300;
  color: #ffc000;
  animation: twBlink 0.75s step-end infinite;
  margin-left: 1px;
  user-select: none;
}

.hero-carousel .hc-slide::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: #000;
  top: 0px;
  right: 0px;
  z-index: 1;
  opacity: 0.45;
}

/* Clients bar inside hero */
.hero-clients-bar {
  width: 100%;
  border-top: 1px solid rgba(1,0,80,0.1);
  padding-top: 1.5rem;
  padding-bottom: 5rem; /* espacio sobre la curva inferior */
  position: relative;
  z-index: 1;
}
.hero-clients-label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: rgba(1,0,80,0.55);
  text-align: center;
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── VIDEO BUTTONS ANIMATION ─────────────────────────── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

#intro-play-video {
  transition: none;
}

#intro-play-video:hover {
  transform: none;
  animation: none;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.hero-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.hero h1 {
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
  color: #fff;
}

.hero p {
  color: #555;
  font-weight: var(--weight-regular);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 480px;
}

.theme-btn-one {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-background);
  text-align: center;
  padding: 19px 38px 18px 37px;
  text-transform: capitalize;
  z-index: 1;
  box-shadow: 0px 20px 40px rgba(255, 192, 0, 0.25);
  transition: all 500ms ease;
  border: none;
  cursor: pointer;
}

.theme-btn-one:before {
  position: absolute;
  content: '';
  width: 0%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  background: #010050;
  transition: all 500ms ease;
}

.theme-btn-one:hover:before{
  width: 100%;
}



.theme-btn-one {
  background: #ffc000;
}


.btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 14px 32px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all .25s, gap .25s;
  overflow: hidden;
}

.btn::after {
  content: '\f061';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  max-width: 0;
  opacity: 0;
  transition: max-width .3s ease, opacity .3s ease, margin .3s ease;
  margin-left: 0;
  white-space: nowrap;
  font-size: var(--text-sm);
}

:not(#home) .btn:hover::after {
  max-width: 2rem;
  opacity: 1;
  margin-left: 8px;
}

.btn-primary {
  background: var(--purple);
  color: #fff;
}

.btn-primary:hover {
  background: var(--purple-dark);
}

.btn-outline {
  background: transparent;
  color: var(--purple);
  box-shadow: inset 0 0 0 2px var(--purple);
}

.btn-outline:hover {
  background: var(--purple);
  color: #fff;
}

/* ── BANNER SECTION ──────────────────────────────────── */
#banner-section {
  min-height: 35vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('Images/upscalemedia-transformed(1).png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
}

#banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 75, 0.55);
}

.banner-section-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  padding: 1.5rem 2rem;
}

.banner-section-inner h2 {
  font: normal normal 600 74px/100px 'Poppins', sans-serif;
  color: #fff;
  margin-bottom: 1.2rem;
}

.banner-section-inner p {
  font-family: 'Poppins', sans-serif;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
}

/* ── INTRO SPLIT ─────────────────────────────────────── */
#intro-split {
  background-color: #ffffff;
  padding: 2rem 3rem 0;
  position: relative;
  overflow: visible;
  z-index: 2;
}

.intro-split-img {
  flex-shrink: 0;
  width: 580px;
  align-self: flex-end;
  position: relative;
  margin-top: -300px;
  z-index: 3;
}

.intro-split-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  position: relative;
  z-index: 3;
}

@media (max-width: 900px) {
  .intro-split-img { display: none; }
}

.intro-split-grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 3rem;
  justify-content: center;
  max-width: var(--max);
  margin: 0 auto;
}

.intro-split-text-wrap {
  max-width: 980px;
  flex: 1;
  margin-right: 5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.intro-split-text {
  padding: 2.5rem 3rem;
}

.intro-split-text .btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.intro-split-text .section-tag {
  margin-bottom: 0.8rem;
  color: var(--purple);
}

.intro-split-text p {
  line-height: 1.9;
  margin-bottom: 1.2rem;
}

@media (max-width: 900px) {
  .intro-split-text { max-width: 100%; margin-right: 0; }
}

/* ── CLIENTS ─────────────────────────────────────────── */
.clients {
  background: #3d3d3d;
  padding: 0;
  position: relative;
  z-index: 5;
}

.clients-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4rem var(--container-padding) 4.5rem;
  text-align: center;
}
.clients-inner > p {
  text-align: center;
  margin: 0 auto 2.5rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.clients-label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: #fff;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.2;
}

.clients-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logo img {
  max-height: 50px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: opacity .3s;
}

.client-logo img:hover {
  opacity: 1;
}

.client-logo--bg img {
  mix-blend-mode: normal;
}


/* ── PHOTO STRIP CAROUSEL ────────────────────────────── */
.photo-strip-section {
  padding: 2.5rem 0;
  background: #f0f2f5;
  position: relative;
}
.photo-strip-wrap {
  overflow: hidden;
}
.photo-strip-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: photo-strip-scroll 70s linear infinite;
}
@keyframes photo-strip-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.photo-strip-item {
  flex: 0 0 480px;
  overflow: hidden;
  height: 370px;
}
.photo-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .photo-strip-item { flex: 0 0 240px; height: 220px; }
}
@media (max-width: 480px) {
  .photo-strip-item { flex: 0 0 180px; height: 180px; }
}

/* ── SERVICIOS ALTERNOS ──────────────────────────────── */
.svc-alt-section {
  position: relative;
  background: #f4f5f7;
  padding: 5rem 0;
  overflow: hidden;
}

/* Decorativos de cruces */
.svc-alt-dots {
  position: absolute;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(circle, #c8cfe0 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.6;
  pointer-events: none;
}
.svc-alt-dots--tl { top: 40px; left: 40px; }
.svc-alt-dots--br { bottom: 40px; right: 40px; }

.svc-alt-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.svc-alt-head {
  text-align: left;
  margin-bottom: 4rem;
}

/* ── Zigzag alineación de títulos ── */
/* Intro split → centro */
.intro-split-heading .section-title { text-align: center; }
.intro-split-heading .section-tag   { display: block; text-align: center; }

/* Servicios → izquierda (por defecto) */

/* Metodología → izquierda (manejado por .met-tl-head-text) */
#metodologias .section-title        { text-align: left !important; }
#metodologias .section-tag          { display: block; text-align: left !important; }

/* Testimonios → centrado */
#testimonials .section-title        { text-align: center; }
#testimonials .section-tag          { display: block; text-align: center; }

/* Empresas → centro */
.clients-label                      { text-align: center; }

/* Filas alternas */
.svc-alt-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
  border-radius: 12px;
  overflow: hidden;
}
.svc-alt-row--rev { flex-direction: row-reverse; }

/* Imagen */
.svc-alt-img {
  flex: 0 0 55%;
  overflow: hidden;
}
.svc-alt-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.svc-alt-row:hover .svc-alt-img img {
  transform: scale(1.04);
}

/* Tarjeta de texto */
.svc-alt-card {
  flex: 1;
  background: #fff;
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.svc-alt-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--p-900);
  line-height: 1.2;
  margin: 0;
}
.svc-alt-card h3 span {
  color: var(--accent-400);
}
.svc-alt-sub {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: var(--fs-md);
  color: #C59D5F;
  margin: 0;
}
.svc-alt-card p {
  color: #555;
  line-height: 1.75;
  font-size: var(--fs-base);
  margin: 0;
}
.svc-alt-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.75rem 2rem;
  background: #C59D5F;
  color: #fff;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  align-self: flex-start;
}
.svc-alt-btn:hover {
  background: var(--p-900);
  transform: translateY(-2px);
}

/* Cuadrícula 3×2 */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.svc-grid-card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-grid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.13);
}

.svc-grid-img {
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.svc-grid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.svc-grid-card:hover .svc-grid-img img {
  transform: scale(1.06);
}

.svc-grid-body {
  padding: 1.75rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.svc-grid-body h3 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #111;
  margin: 0;
  line-height: 1.2;
}
.svc-grid-body h3 span {
  color: #111;
}
.svc-grid-body p {
  font-size: var(--fs-base);
  color: #555;
  line-height: 1.7;
  margin: 0;
}
.svc-grid-body .svc-alt-btn,
.svc-grid-body .theme-btn-one {
  margin-top: auto;
  padding-top: 1rem;
  align-self: flex-start;
  width: fit-content;
}

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid-img { height: 200px; }
}

/* ── SECTION COMMONS ─────────────────────────────────── */
section { padding: 6rem 3rem; }

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.section-tag {
  display: inline-block;
  color: #01b0f1;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.section-title {
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-snug);
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
  text-align: left;
}

.section-header {
  text-align: left !important;
  margin-bottom: 2.5rem;
}

h2 .accent { color: var(--purple); }
.cta-section h2 .accent { color: #ffc000; }


.section-sub {
  color: var(--muted);
  font-size: var(--text-base);
  max-width: 560px;
  line-height: 1.8;
}

.divider {
  width: 50px;
  height: 3px;
  background: var(--purple);
  border-radius: 2px;
  margin: 1.5rem 0;
}

/* ── TESTIMONIALS ────────────────────────────────────── */
#testimonials {
  --section-bg: #ffffff;
  background-color: #ffffff;
  color: var(--navy);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.tc-main-title {
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: -0.02em;
  color: #010050;
  text-align: center;
  margin-bottom: 0.6rem;
}

.tc-main-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: 3rem;
}

.tc-stage-wrap {
  position: relative;
}

.tc-stage {
  position: relative;
}

/* Comilla de apertura — decorativa, posición absoluta */
.tc-big-quote {
  position: absolute;
  top: -1.5rem;
  left: -0.5rem;
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.tc-big-quote img {
  width: 120px;
  height: auto;
  display: block;
}

/* Comilla de cierre — espejo abajo derecha */
.tc-close-quote {
  position: absolute;
  bottom: -3rem;
  right: -0.5rem;
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  transform: rotate(180deg);
}
.tc-close-quote img {
  width: 120px;
  height: auto;
  display: block;
}

.testimonials-carousel {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

/* Fila de navegación: flechas + dots */
.tc-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.8rem;
  width: 100%;
  position: relative;
}

/* Línea de fondo que atraviesa todo */
.tc-nav-row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #d0d5e8;
  transform: translateY(-50%);
  z-index: 0;
}

.tc-arrow {
  background: #fff;
  color: #010050;
  border: 1.5px solid #d0d5e8;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, color .2s;
  position: relative;
  z-index: 1;
}
.tc-arrow:hover {
  background: #010050;
  border-color: #010050;
  color: #fff;
}

.tc-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  background: #ffffff;
}
.tc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0d5e8;
  cursor: pointer;
  transition: background .2s, transform .2s;
  position: relative;
  z-index: 1;
}
.tc-dot:hover { background: #888; }
.tc-dot.active {
  background: #010050;
  transform: scale(1.35);
}

.testimonial-card {
  position: absolute;
  inset: 0;
  text-align: center;
  padding: 2.5rem 3rem 2rem;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonial-card.active {
  opacity: 1;
  pointer-events: auto;
}

.testimonial-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: #010050;
  margin-bottom: 1rem;
  line-height: 1.35;
}

.testimonial-card p {
  font-size:   var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  font-style:  italic;
  color: #555;
  font-style: italic;
  margin: 0;
}
.testimonial-card p strong { color: #010050; font-style: normal; }

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.author-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #010050, #01b0f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.author-info strong {
  display: block;
  font-size: var(--text-sm);
  color: #010050;
}
.author-info span {
  font-size: var(--text-sm);
  color: #888;
}

/* Avatares en la tira inferior */
.tc-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.tc-av {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform .2s;
}
.tc-av .author-avatar {
  opacity: 0.35;
  transition: opacity .3s, transform .3s;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}
.tc-av.active .author-avatar {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 0 3px #ffc000;
}

/* Info de autor — solo visible en el activo */
.tc-av-info {
  display: flex;
  flex-direction: column;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-width 0.4s ease;
}
.tc-av.active .tc-av-info {
  opacity: 1;
  max-width: 300px;
}
.tc-av-info strong {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #010050;
  white-space: nowrap;
}
.tc-av-info span {
  font-size: var(--text-xs);
  color: #888;
  white-space: nowrap;
}

/* ── TESTIMONIALS — Two-column Ticrou-style layout ─── */

#testimonials { padding: 6rem 2rem 7rem !important; overflow: hidden; }

/* ── TESTIMONIALS — LAYOUT CENTRADO ─────────────────────── */
.tcs-center-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.tcs-center-inner .section-tag  { display: block; text-align: center; }
.tcs-center-inner .section-title { text-align: center; margin-bottom: 0; }

/* Fila slider: flechas + carrusel */
.tcs-slider-wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3.5rem;
}
.tcs-slider-wrap .testimonials-carousel {
  flex: 1;
  position: relative;
  min-height: 460px;
}

/* Cards centradas */
.tcs-slider-wrap .testimonial-card {
  text-align: center !important;
  padding: 1.5rem 1rem !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
.tcs-slider-wrap .testimonial-card p {
  text-align: center !important;
  font-size: 1rem !important;
  color: #444;
  line-height: 1.8;
  margin: 0.75rem 0 !important;
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Avatar circular centrado */
.tcs-card-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.5rem;
  border: 3px solid #f0f0f0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.tcs-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quote badge dentro de cada card */
.tcs-slider-wrap .tcs-quote-badge {
  margin: 0.5rem auto 0;
  width: 90px;
  height: 90px;
  font-size: 3.8rem;
}

/* Meta: estrellas + nombre + rol */
.tcs-card-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.tcs-card-meta .tcs-stars {
  justify-content: center;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.tcs-card-meta strong {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  display: block;
}
.tcs-card-meta span {
  font-size: 0.85rem;
  color: #888;
}

/* Flechas en los laterales */
.tcs-slider-wrap .tc-arrow {
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .tcs-slider-wrap { gap: 0.75rem; }
  .tcs-slider-wrap .testimonials-carousel { min-height: 520px; }
  .tcs-card-avatar { width: 80px; height: 80px; }
  .tcs-slider-wrap .tcs-quote-badge { width: 64px; height: 64px; font-size: 2.6rem; }
}
@media (max-width: 480px) {
  #testimonials { padding: 4rem 1rem 5rem !important; }
  .tcs-slider-wrap { gap: 0.4rem; }
  .tcs-slider-wrap .testimonials-carousel { min-height: 560px; }
}

.tcs-wrap {
  display: flex;
  flex-direction: row;
  min-height: 700px;
}

/* Left: tall image column */
.tcs-img-col {
  flex: 0 0 40%;
  position: relative;
  overflow: hidden;
}
.tcs-img-col > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Decorative dots (bottom-right corner of the image) */
.tcs-dots-deco {
  position: absolute;
  bottom: 2.5rem;
  right: -2rem;
  width: 160px;
  height: 160px;
  background-image: radial-gradient(circle, rgba(255,192,0,0.85) 2px, transparent 2px);
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 2;
}

/* Right: content column */
.tcs-content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5rem 4rem 4.5rem 5rem;
  background: #fff;
}

/* Gold accent word in the h2 */
.tcs-accent { color: var(--accent-400); }

/* Gold circle with opening quotation mark */
.tcs-quote-badge {
  width: 90px;
  height: 90px;
  background: var(--accent-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.8rem;
  color: #fff;
  line-height: 1;
  margin: 1.5rem 0 1rem;
  flex-shrink: 0;
  user-select: none;
}

/* Carousel: altura suficiente para avatar + texto + meta */
#testimonials .testimonials-carousel { min-height: 380px; }

/* Card: centrada, columna */
#testimonials .testimonial-card {
  text-align: center;
  padding: 1.5rem 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}
#testimonials .testimonial-card p {
  font-size: 1rem;
  color: #444;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Thumbnail nav strip: small horizontal row */
#testimonials .tc-avatars {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

/* Inactive thumbnail: dimmed */
#testimonials .tc-av {
  gap: 0;
  opacity: 0.35;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
#testimonials .tc-av.active { opacity: 1; }

/* Thumbnail avatar size */
#testimonials .tc-av .author-avatar {
  opacity: 1;
  width: 44px;
  height: 44px;
}
#testimonials .tc-av.active .author-avatar {
  transform: none;
  box-shadow: 0 0 0 3px var(--accent-400);
}

/* Author row: avatar + info side by side */
.tcs-author-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Author info block */
.tcs-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.tcs-stars {
  color: var(--accent-400);
  font-size: 0.68rem;
  display: flex;
  gap: 0.1rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}
.tcs-author-info strong {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #010050;
  line-height: 1.2;
  display: block;
}
.tcs-author-info span {
  font-size: 0.74rem;
  color: #888;
}

/* Nav arrows: left-aligned, no center line */
#testimonials .tc-nav-row {
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
#testimonials .tc-nav-row::before { display: none; }

/* Responsive: stack columns below 900px */
@media (max-width: 900px) {
  .tcs-wrap { flex-direction: column; min-height: auto; }
  .tcs-img-col {
    flex: 0 0 auto;
    height: 340px;
    width: 100%;
  }
  .tcs-content-col {
    padding: 3rem 2rem;
  }
  #testimonials .tc-avatars {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
@media (max-width: 600px) {
  .tcs-img-col { height: 260px; }
  .tcs-content-col { padding: 2.5rem 1.25rem; }
}

/* ── SERVICIOS (HOME) ───────────────────────────────── */
#servicios {
  background: #fff;
}




.custom-shape-divider-bottom-1775327571 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1775327571 svg {
    position: relative;
    display: block;
    width: calc(196% + 1.3px);
    height: 150px;
}

.custom-shape-divider-bottom-1775327571 .shape-fill {
    fill: #FFFFFF;
}

.custom-shape-divider-bottom-1775327359 svg {
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}
#servicios .section-header {
  text-align: left;
  margin-bottom: 2rem;
}
.services-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  color: #555;
  max-width: 680px;
  line-height: 1.7;
  margin-top: 0.5rem;
}

/* Accordion cards */
/* ── Servicios tabs + panel ── */
.svc-tabs {
  display: flex;
  border-bottom: 2px solid #e0e3ef;
  margin-bottom: 1.5rem;
  gap: 0;
}
.svc-tab {
  padding: 0.75rem 1.6rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: #666;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.svc-tab:hover { color: #010050; }
.svc-tab.active {
  color: #010050;
  border-bottom-color: #010050;
  font-weight: var(--weight-semibold);
}
.svc-panel {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: background-image 0.4s ease;
}
.svc-panel-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 2.5rem;
  background: linear-gradient(to top, rgba(1,0,80,0.9) 0%, rgba(1,0,80,0.5) 60%, transparent 100%);
  color: #fff;
}
.svc-panel-overlay h3 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 0.5rem;
}
.svc-panel-overlay p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  margin: 0 0 1rem;
  max-width: 640px;
}
.svc-panel-link {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #ffc000;
  text-decoration: none;
}
.svc-panel-link i { margin-left: 5px; }
.svc-panel-link:hover { color: #fff; }

/* ── SERVICIOS MÓVIL ─────────────────────────────────── */
.svc-mobile-list {
  display: none;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.svc-mobile-card {
  display: block;
  text-decoration: none;
  position: relative;
  height: 220px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.svc-mobile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1,0,80,0.88) 40%, rgba(1,0,80,0.3) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem 1.2rem;
  gap: 0.4rem;
}

.svc-mobile-overlay h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.svc-mobile-overlay p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .svc-tabs,
  .svc-panel,
  .svc-desktop-btn {
    display: none !important;
  }
  .svc-mobile-list {
    display: flex;
    padding: 0;
  }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.service-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: transform 0.25s, box-shadow 0.25s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.service-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-lg);
}
.service-card h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--dark);
}
.service-card p {
  color: #555;
  flex: 1;
}

@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
}

.incompany-quote {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
}

.incompany-quote p {
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: var(--purple);
  margin: 0;
}

/* ── CLUB DE ORATORIA ────────────────────────────────── */
#club-oratoria {
  position: relative;
  padding: 48px 3rem;
}
#club-oratoria .section-inner { position: relative; z-index: 1; }
.club-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-md);
  color: rgba(255,255,255,0.85);
  font-style: italic;
  margin: 0.6rem 0 1.2rem;
}
.club-pillars {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  color: #c4b5fd;
  margin: 0.3rem 0;
  letter-spacing: 0.03em;
}
#club-oratoria .section-title,
#club-oratoria .section-tag { color: #fff; }
#club-oratoria .club-text p { color: rgba(255,255,255,0.88); }
#club-oratoria .club-subtitle { color: rgba(255,255,255,0.9); }

.club-header { text-align: center; margin-bottom: 2.5rem; }

/* ── CLUB GRID ───────────────────────────────────────── */
.club-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

.club-card-wide {
  grid-column: 1 / 3;
}

.club-card-inner {
  padding: 2rem 2.5rem;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 768px) {
  .club-grid {
    grid-template-columns: 1fr;
  }
  .club-card-wide {
    grid-column: 1 / 2;
    overflow: visible;
  }
  .club-card-wide ul {
    grid-template-columns: 1fr !important;
  }
  .club-card-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .club-header div[style*="height:160px"] {
    height: 100px !important;
  }
  .club-header div[style*="height:160px"] img {
    height: 280px !important;
  }
}

.club-text {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.club-text p {
  font-family: 'Poppins', sans-serif;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 1rem;
}

/* ── SECTION DIVIDER ─────────────────────────────────── */
.section-divider {
  pointer-events: none;
  display: block;
  width: 100%;
  margin-top: -1px;
}
.section-divider-auto {
  height: auto;
}
.section-divider path {
  fill: var(--section-bg);
}

/* ── SHAPE DIVIDER HEROES ────────────────────────────── */
.custom-shape-divider-bottom-hero {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-bottom-hero svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px;
}

/* ── METODOLOGÍAS — Timeline Ticrou ─────────────────── */
#metodologias,
.met-tl-section {
  background: var(--p-900);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Divisores SVG diagonales — ancho 100% de pantalla */
.met-divider {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}
.met-divider svg   { display: block; width: 100%; height: 100%; }
.met-divider--top  { top: 0; }
.met-divider--bottom { bottom: 0; }

.met-tl-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem var(--container-padding) 4rem;
}

/* Header row: solo texto */
.met-tl-head {
  margin-bottom: 2.5rem;
}
.met-tl-head-text { flex: 1; }
.met-tl-head-text .section-tag   { color: var(--accent-400); }
.met-tl-head-text .section-title { color: #fff; text-align: left !important; }
.met-tl-accent { color: var(--accent-400); }
.met-tl-head-text p { color: rgba(255,255,255,0.6); font-size: 0.95rem; margin-top: 0.5rem; max-width: 1000px; }

/* Navigation arrows */
.met-tl-nav {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  width: 100%;
}
.met-tl-arrow {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.met-tl-arrow:hover {
  background: var(--accent-400);
  border-color: var(--accent-400);
  color: var(--p-900);
}

/* Viewport — llega hasta el borde derecho de la pantalla */
.met-tl-viewport {
  overflow: hidden;
  position: relative;
  /* Elimina el padding derecho del inner Y los márgenes automáticos del centrado */
  margin-right: calc(
    -1 * var(--container-padding)
    - max(0px, (100vw - var(--max)) / 2)
  );
}
.met-tl-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 6rem;
  position: relative;
  will-change: transform;
}

/* Connecting line — hidden on the moving track; drawn via viewport pseudo-element */
.met-tl-line { display: none; }

/* Fixed horizontal line at dot level, stays put while cards slide */
.met-tl-viewport::before {
  content: '';
  position: absolute;
  top: 58px;   /* label chip height (~30px) + gap + half dot (14px) */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.22);
  z-index: 2;
  pointer-events: none;
}

/* Each step item — 4 visible at once; duplicates extend the loop */
.met-tl-item {
  flex: 0 0 calc(25% - 4.5rem); /* (100% - 3×6rem) / 4 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  padding: 0;
}

/* Step number label — chip style */
.met-tl-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.85rem;
  display: inline-block;
  line-height: 1;
}

/* Dot */
.met-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-400);
  border: 2px solid var(--accent-400);
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

/* Image */
.met-tl-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.met-tl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.met-tl-item:hover .met-tl-img img { transform: scale(1.03); }

/* Title */
.met-tl-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

/* Description */
.met-tl-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
}
.met-tl-desc strong { color: rgba(255,255,255,0.9); font-weight: 600; }


/* Responsive */
@media (max-width: 900px) {
  .met-tl-viewport { margin-right: 0; }
  .met-tl-track    { gap: 1.5rem; }
  .met-tl-item     { flex: 0 0 calc(50% - 0.75rem); }
  .met-tl-viewport::before { display: none; }
}
@media (max-width: 600px) {
  .met-tl-item { flex: 0 0 85%; }   /* muestra 1 y pico para indicar que hay más */
  .met-tl-head { flex-direction: column; align-items: flex-start; }
}

.met-text-col {
  padding: 2rem 2.5rem 2rem 1.5rem;
}


.met-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--max);
  margin: 0 auto;
  padding-right: 1.5rem;
}

.met-col {
  padding: 2.5rem 2.5rem;
  position: relative;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-bottom: 3px solid transparent;
  align-items: center;
  background: #fff;
  box-shadow: 0 4px 20px rgba(1,0,80,0.08);
  border-radius: 4px;
  margin: 0.5rem;
}

/* Zigzag: columna derecha sube, efecto escalera */
.met-col:nth-child(2) { transform: translateY(-40px); }
.met-col:nth-child(4) { transform: translateY(-40px); }

/* Hover: sube la tarjeta y aparece línea dorada inferior */
.met-col:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 28px rgba(1,0,80,0.14);
  border-bottom-color: #ffc000;
}
.met-col:nth-child(2):hover { transform: translateY(calc(-40px - 6px)); }
.met-col:nth-child(4):hover { transform: translateY(calc(-40px - 6px)); }

.met-col:not(:last-child)::after {
  content: none;
  position: absolute;
  top: 10%;
  right: 0;
  height: 80%;
  width: 1px;
  background: var(--border);
}

.met-icon {
  width: 100px;
  height: 100px;
  background: #010050;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  color: #ffc000;
  font-size: var(--text-md);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.15);
}

.met-col h4 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: #010050;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.met-col p {
  font-family: 'Poppins', sans-serif;
  color: #333333;
  line-height: 1.8;
}

@media (max-width: 900px) {
  #metodologias .section-inner { flex-direction: column; }
  #metodologias .section-inner > div:first-child { flex: none; width: 100%; }
  .met-grid { grid-template-columns: 1fr 1fr; }
  .met-col:nth-child(2)::after { display: none; }
  .met-col:not(:last-child)::after { display: none; }
  .met-col { border-bottom: 1px solid var(--border); }
  .met-col:last-child { border-bottom: none; }
}

@media (max-width: 540px) {
  .met-grid { grid-template-columns: 1fr; }
}

/* ── QUIENES SOMOS ───────────────────────────────────── */
#quienes {
  padding: 5rem 3rem;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.qs-split {
  display: flex;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.qs-split--reverse .qs-split-img {
  margin-left: -2rem;
  margin-right: 0;
  order: 1;
}

.qs-split:not(.qs-split--reverse) .qs-split-img {
  order: -1;
  margin-left: 0;
  margin-right: -2rem;
}

.qs-split-card {
  padding: 2rem 2.2rem;
  flex: 0 0 44%;
  z-index: 2;
  position: relative;
}

.qs-split-card .section-tag {
  margin-bottom: 1rem;
  display: block;
}

.qs-split-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(var(--text-md), 1.8vw, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.qs-split-card p {
  color: #444;
  line-height: 1.75;
  margin-bottom: 0.7rem;
}

.qs-split-img {
  flex: 1;
  margin-left: -2rem;
  position: relative;
  height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.qs-split-img::before {
  content: '';
  position: absolute;
  inset: 10% 18% 10% 18%;
  background: var(--purple) url('Images/upscalemedia-transformed(1).png') center center / cover no-repeat;
  transform: skewX(-8deg);
  z-index: 0;
  border-radius: 2px;
}

.qs-split-img img {
  width: 115%;
  height: 96%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

@media (max-width: 900px) {
  .qs-split { flex-direction: column; }
  .qs-split-card { flex: none; }
  .qs-split-img { margin-left: 0; min-height: 340px; }
}

/* ── TESTIMONIOS VIDEO OVERLAY ───────────────────────── */
#testimonios-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10,5,30,0.88);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 2rem 1rem;
}
.tov-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
#overlay-close {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  background: var(--purple);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: var(--text-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9001;
}
.tov-title {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  font-size: var(--text-lg);
  margin-bottom: 1.5rem;
}
.tov-main {
  text-align: center;
  margin-bottom: 1.5rem;
}
#tov-main-video {
  width: 100%;
  max-height: 460px;
  border-radius: 12px;
  background: #000;
  display: block;
}
#tov-main-label {
  color: rgba(255,255,255,0.7);
  font-family: 'Poppins', sans-serif;
  margin-top: 0.6rem;
  font-size: var(--text-sm);
}
.tov-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tov-carousel {
  display: flex;
  gap: 0.8rem;
  overflow: hidden;
  flex: 1;
  scroll-behavior: smooth;
}
.tov-thumb {
  flex: 0 0 140px;
  background: rgba(255,255,255,0.08);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  padding: 0.8rem 0.6rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.tov-thumb:hover { background: rgba(255,255,255,0.14); }
.tov-thumb.active { border-color: var(--purple); background: rgba(86,54,209,0.2); }
.tov-thumb-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  color: #fff;
  font-size: var(--text-sm);
}
.tov-thumb span {
  color: rgba(255,255,255,0.85);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  display: block;
}
.tov-arrow {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--text-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.tov-arrow:hover { background: var(--purple); }

/* ── PRE-CONTACT BANNER ──────────────────────────────── */
.pre-contact-banner {
  min-height: 50vh;
  margin-top: 124px;
  padding: 5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('4.-FOTOS ORDENADAS/6A1A1827.JPG');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 20%;
  justify-content: center;
  position: relative;
}

.pre-contact-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(1, 0, 80, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pre-contact-title {
  font: normal normal 600 74px/100px 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  max-width: 680px;
  margin-bottom: 0;
}
.pre-contact-btn { margin-left: 12%; }

@media (max-width: 768px) {
  .pre-contact-banner {
    background-size: 130%;
    background-position: bottom center;
    padding: 4rem 2rem 75vw;
  }
}

/* ── VIDEO OVERLAY (hero) ────────────────────────────── */
#video-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(10,5,30,0.92);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
#video-overlay.open { display: flex; }
.vov-inner {
  position: relative;
  width: 90%;
  max-width: 900px;
}
#vov-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: var(--purple);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: var(--text-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#vov-player {
  width: 100%;
  border-radius: 12px;
  background: #000;
  display: block;
  max-height: 75vh;
}

/* ── CONTACT ─────────────────────────────────────────── */
.contact-intro-strip {
  background: #fafafa;
  padding: 5rem 0;
  text-align: center;
}
.contact-intro-strip p {
  font-family: 'Poppins', sans-serif;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

#contact { background: #fff; }

.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5rem;
}

.contact-info p { color: var(--muted); line-height: 1.8; margin-bottom: 2rem; }

.contact-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.contact-detail .icon {
  width: 50px;
  height: 50px;
  background: var(--purple);
  border-radius: 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.contact-detail .icon i {
  transform: none;
}

.contact-detail .text strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.contact-detail .text span { font-size: var(--text-sm); color: var(--muted); }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }

input, textarea, select {
  padding: 12px 16px;
  border: 1.5px solid #d0d5e8;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-shadow: 0 2px 6px rgba(1,0,80,0.06);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(86,54,209,.1);
}

textarea { resize: vertical; min-height: 120px; }

/* ── FOOTER ──────────────────────────────────────────── */
footer {
  background: #fff;
  color: #010050;
  padding: 5rem 3rem 2rem;
  box-shadow: 0 -4px 24px rgba(1,0,80,0.08);
}

.footer-inner { max-width: var(--max); margin: 0 auto; }

.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: start;
}

.footer-brand p {
  color: rgba(1,0,80,0.55);
  line-height: 1.7;
  margin: 1.2rem 0 1.8rem;
}

.footer-cta {
  background: #ffc000;
  color: #010050 !important;
  font-size: var(--text-sm);
  padding: 0.7rem 1.4rem;
  border-radius: 50px;
  white-space: nowrap;
}

.footer-cta:hover { background: #e6ac00; }

.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #010050;
  margin-bottom: 1.2rem;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col ul a { color: rgba(1,0,80,0.5); text-decoration: none; font-size: var(--text-sm); transition: color .2s; }
.footer-col ul a:hover { color: #010050; }

.footer-divider { border: none; border-top: 1px solid rgba(1,0,80,0.1); margin: 0 0 1.8rem; }

.social-links { display: flex; gap: 0.7rem; }

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(1,0,80,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(1,0,80,0.55);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: all .2s;
}

.social-link:hover { background: #ffc000; color: #010050; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-bottom p { color: rgba(1,0,80,0.4); }

.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: rgba(1,0,80,0.4); text-decoration: none; font-size: var(--text-sm); transition: color .2s; }
.footer-legal a:hover { color: #010050; }

/* ── SCROLL TOP ──────────────────────────────────────── */
#scrollTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  box-shadow: 0 4px 20px rgba(86,54,209,.4);
  z-index: 50;
}

#scrollTop.visible { opacity: 1; pointer-events: auto; }
#scrollTop:hover { background: var(--purple-dark); transform: translateY(-3px); }

/* ── FADE IN ─────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}

.fade-in.visible { opacity: 1; transform: translateY(0); }

.fade-in-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in-left.visible { opacity: 1; transform: translateX(0); }

.fade-in-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in-right.visible { opacity: 1; transform: translateX(0); }

.delay3 { transition-delay: 0.4s; }
.delay4 { transition-delay: 0.6s; }

/* ── SHOWUP ANIMATION ────────────────────────────────── */
.showup {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.showup.visible { opacity: 1; transform: translateY(0); }
.delay1 { transition-delay: 0s; }
.delay2 { transition-delay: 0.2s; }
.css-mes { font-family: 'Poppins', sans-serif; }
.css-mes-top { margin-bottom: 0; }

/* ── MOBILE MENU OVERLAY ─────────────────────────────── */
.mobile-menu-overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: #0b0b1c;
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* hidden state — slides off-screen to the right */
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.38s;
}
.mobile-menu-overlay.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s;
}

/* Desktop & tablet: right-side panel instead of full-screen */
@media (min-width: 901px) {
  .mobile-menu-overlay {
    left: auto;
    width: min(460px, 100vw);
    box-shadow: -12px 0 60px rgba(0,0,0,0.5);
  }
}

/* Dim backdrop (desktop only) */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.38s ease, visibility 0s linear 0.38s;
}
.mobile-menu-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.38s ease, visibility 0s;
}

body.menu-open { overflow: hidden; }

/* Top bar */
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.mobile-menu-logo img { height: 64px; width: auto; display: block; }
.mobile-menu-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.7rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  line-height: 1;
  transition: color 0.2s;
}
.mobile-menu-close:hover { color: #fff; }

/* Nav links list */
.mobile-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.mobile-menu-links > li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.mobile-menu-links > li > a,
.mobile-menu-links > li > .mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.4rem;
  color: rgba(255,255,255,0.88);
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, border-left-color 0.2s;
  border-left: 3px solid transparent;
}
.mobile-menu-links > li > a:hover,
.mobile-menu-links > li > .mobile-dropdown-toggle:hover {
  color: #ffc000;
  border-left-color: rgba(255,192,0,0.4);
}
.mobile-menu-links > li.mobile-active > a,
.mobile-menu-links > li.mobile-active > .mobile-dropdown-toggle {
  color: #ffc000;
  border-left-color: #ffc000;
}

/* Chevron for dropdown */
.mobile-chevron {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
  color: rgba(255,255,255,0.45);
}
.mobile-chevron.rotated { transform: rotate(180deg); }

/* Sub-menu */
.mobile-menu-sub {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(255,255,255,0.04);
}
.mobile-menu-sub.open { display: block; }
.mobile-menu-sub li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-menu-sub li:last-child { border-bottom: none; }
.mobile-menu-sub li a {
  display: block;
  padding: 0.8rem 1.4rem 0.8rem 2.2rem;
  color: rgba(255,255,255,0.65);
  font-family: 'Poppins', sans-serif;
  font-size: 0.83rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-menu-sub li a:hover { color: #ffc000; padding-left: 2.5rem; }

/* Lang switch inside mobile menu */
.mobile-lang-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.4rem;
}
.mobile-lang-switch .lang-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.mobile-lang-switch .lang-btn.active,
.mobile-lang-switch .lang-btn:hover {
  border-color: #ffc000;
  color: #ffc000;
}
.mobile-lang-switch .lang-sep { color: rgba(255,255,255,0.25); }

/* Bottom: contact + socials */
.mobile-menu-bottom {
  flex-shrink: 0;
  padding: 1.4rem 1.4rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mobile-menu-contact { margin-bottom: 1.2rem; }
.mobile-menu-contact h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin: 0 0 0.7rem;
}
.mobile-menu-contact p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mobile-menu-contact p i { color: #ffc000; font-size: 0.78rem; }
.mobile-menu-socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.mobile-menu-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.mobile-menu-socials a:hover {
  border-color: #ffc000;
  color: #ffc000;
  background: rgba(255,192,0,0.08);
}
.mobile-menu-cta {
  display: block;
  margin-top: 1.2rem;
  padding: 0.85rem 1.4rem;
  background: #ffc000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
}
.mobile-menu-cta:hover {
  background: #e6ac00;
  color: #fff;
  transform: translateY(-1px);
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .about-image { height: 250px; }
  .services-header { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .about-highlights { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── PAGE HERO (services, blog) ──────────────────────── */
.page-hero {
  padding: 4rem 3rem;
  min-height: 460px;
  margin-top: 96px;
  background-color: var(--navy);
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 0, 80, 0.65);
  z-index: 0;
}

.page-hero h1,
.page-hero p {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font: normal normal bold 44px/61px 'Poppins', sans-serif;
  color: #fff;
  margin-bottom: 1rem;
}

.page-hero p {
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}


/* ── SERVICE SECTION ARROW HEADERS ───────────────────── */
.svc-arrow-header {
  padding: 2rem 2rem 4rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px));
}
.sah-num {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.25);
  line-height: 1;
}
.sah-name {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: #fff;
  letter-spacing: 0.03em;
}

/* ── SERVICES PAGE ───────────────────────────────────── */
.services-section { background: var(--white); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.service-card {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  transition: box-shadow .3s, transform .3s;
}

.service-card:hover {
  box-shadow: 0 8px 32px rgba(0,184,217,0.15);
  transform: translateY(-4px);
}

.service-icon {
  width: 54px;
  height: 54px;
  background: var(--purple);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-md);
  margin-bottom: 1.4rem;
}

.service-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  margin-bottom: 0.9rem;
}

.service-card p {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.8;
  margin-bottom: 1.4rem;
}

.service-card a {
  color: var(--purple);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap .2s;
}

.service-card a:hover { gap: 0.7rem; }

/* ── CTA SECTION ─────────────────────────────────────── */
.cta-section {
  text-align: center;
  padding: 5rem 2rem;
  background: #010050;
  color: #fff;
}

.cta-section h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
  font-weight: var(--weight-semibold);
  margin-bottom: 1rem;
}

.cta-section p {
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin: 0 auto 2.5rem;
  line-height: 1.75;
}

/* ── BLOG PAGE ───────────────────────────────────────── */
.blog-section { background: var(--white); }

/* ── BLOG PREVIEW (index.html) ───────────────────────── */
#blog-preview {
  background: #ffffff;
}

.blog-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
  gap: 2rem;
}

.blog-preview-header-left {
  text-align: left;
}

.blog-preview-header .section-sub {
  color: var(--muted);
  font-size: var(--text-base);
  margin-top: 0.5rem;
}

.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--purple);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  margin-top: 1rem;
}

.blog-read-more:hover { color: var(--secondary); }

@media (max-width: 900px) {
  .blog-preview-grid { grid-template-columns: 1fr; }
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-card {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow .3s, transform .3s;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0,184,217,0.15);
  transform: translateY(-4px);
}

.blog-card-img {
  background: var(--navy);
  height: 260px;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  color: var(--purple);
}

.blog-card-body {
  padding: 1.8rem 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-tag {
  display: inline-block;
  background: var(--purple-light);
  color: var(--purple);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 0.9rem;
}

.blog-card-body h3 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

.blog-card-body p {
  color: var(--muted);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 1.2rem;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--muted);
}

.blog-meta a {
  color: var(--purple);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap .2s;
}

.blog-meta a:hover { gap: 0.7rem; }

@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .services-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* ── SERVICES STICKY SUB-NAV ───────────────────────── */
.srv-subnav {
  position: sticky;
  top: 96px;
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid #dde3f0;
  box-shadow: 0 2px 14px rgba(1,0,80,0.08);
}
.srv-subnav-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2rem;
}
.srv-subnav-inner::-webkit-scrollbar { display: none; }
.srv-subnav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.4rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.srv-subnav-item i {
  font-size: 0.9rem;
  flex-shrink: 0;
}
.srv-subnav-item:hover {
  color: #010050;
  background: #f5f7ff;
}
.srv-subnav-item.active {
  color: #010050;
  border-bottom-color: #01b0f1;
}

/* ── SERVICE DETAIL SECTIONS ────────────────────────── */
.service-detail {
  padding: 64px 3rem;
  background: var(--white);
}

.service-detail:nth-child(even) {
  background: var(--light-bg);
}

/* Per-section accent bars */
#talleres          { border-top: 5px solid #01b0f1; }
#cursos            { border-top: 5px solid #010050; background: #f4f7ff !important; }
#team-building     { border-top: 5px solid #ffc000; }
#formacion-incompany { border-top: 5px solid #010050; background: #f4f7ff !important; }
#club-oratoria     { border-top: 5px solid #ffc000; }

.service-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

#formacion-incompany .service-detail-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}

#formacion-incompany .btn {
  align-self: center;
  width: auto;
}

.service-detail--reverse .service-detail-grid {
  direction: rtl;
}

.service-detail--reverse .service-detail-grid > * {
  direction: ltr;
}

.service-detail-img {
  border-radius: 4px;
  overflow: hidden;
}

.service-detail-img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.service-detail-img:hover img {
  transform: scale(1.03);
}

.service-detail--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.service-detail--bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 75, 0.65);
  z-index: 1;
}

.service-detail--bg .service-detail-text h2,
.service-detail--bg .service-detail-text p,
.service-detail--bg .service-detail-list li {
  color: #fff;
}

.service-detail-tag-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.service-detail-tag-wrap::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--secondary);
  display: block;
}

.service-detail-tag {
  display: inline-block;
  background: var(--secondary);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 14px;
  flex-shrink: 0;
}

.service-detail-text h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.25;
}


.service-detail-list {
  list-style: none;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-detail-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.service-detail-list li i {
  color: var(--secondary);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* ── TEAM BUILDING VIDEOS ────────────────────────── */
.tb-videos {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 2.5rem;
  width: 100%;
}

.tb-videos video {
  flex: 1;
  min-width: 0;
  border-radius: 0;
  background: #000;
  height: 280px;
  width: 100%;
  object-fit: cover;
}

.tb-buttons {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .tb-videos {
    flex-direction: column;
  }
  .tb-videos video {
    height: auto;
    aspect-ratio: 16/9;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    direction: ltr;
  }
  .service-detail--reverse .service-detail-grid {
    direction: ltr;
  }
  .service-detail-grid .service-detail-text {
    order: 1;
  }
  .service-detail-grid .service-detail-img {
    order: 2;
  }
  .service-detail-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }
  .service-detail-img {
    width: 100%;
  }
  .incompany-img-wrap {
    height: auto !important;
    max-height: 280px !important;
  }
  /* Play button móvil */
  .intro-banner-left { max-width: 70%; }
  .intro-banner-play {
    width: 60px;
    height: 60px;
    font-size: 1rem;
    margin-top: 0;
  }
}
@media (max-width: 600px) {
  .intro-banner-left { max-width: 75%; }
  .intro-banner-play {
    width: 48px;
    height: 48px;
    font-size: 0.85rem;
  }
}
@media (max-width: 420px) {
  .intro-banner-left { max-width: 78%; }
  .intro-banner-play {
    width: 40px;
    height: 40px;
    font-size: 0.75rem;
  }
}

/* ── SUBSECTION CARDS ───────────────────────────────── */
.subsection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 380px));
  gap: 28px;
  margin-top: 50px;
  padding-top: 40px;
  justify-content: center;
}


.subsection-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 480px));
}

.subsection-card {
  background: var(--white);
  border: none;
  padding: 0;
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(13,27,75,0.1);
}

.subsection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13,27,75,0.1);
}

.subsection-icon {
  width: 52px;
  height: 52px;
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-md);
  flex-shrink: 0;
}

.subsection-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.subsection-card p {
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}

.subsection-card .service-detail-list {
  margin: 0;
}

.subsection-card .service-detail-list li {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.btn-outline {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid var(--purple);
  color: var(--purple);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background .2s, color .2s;
  border-radius: 0;
  letter-spacing: .04em;
  align-self: flex-start;
}

.btn-outline:hover {
  background: var(--purple);
  color: var(--white);
}

/* ══════════════════════════════════════════════════════
   1600px — Nav intermedio (1367–1600px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1600px) {
  .nav-inner { height: 90px; }
  .logo img { height: 70px !important; width: auto !important; }
  html { scroll-padding-top: 94px; }
  .nav-links { gap: 0.9rem; }
  .nav-links a { font-size: 0.82rem; white-space: nowrap; }
  .nav-contact-btn { padding: 0.5rem 1.2rem !important; font-size: 0.82rem !important; }
  .page-hero { margin-top: 90px; }
  .srv-subnav { top: 90px; }
}

/* ══════════════════════════════════════════════════════
   1366px — Tablets portátiles y pantallas pequeñas
   ══════════════════════════════════════════════════════ */
@media (max-width: 1366px) {

  /* ── Navigation ── */
  .nav-inner { height: 86px; }
  .logo img { height: 64px !important; width: auto !important; }
  html { scroll-padding-top: 90px; }
  .nav-links { gap: 0.7rem; }
  .nav-links a { font-size: 0.77rem; white-space: nowrap; }
  .nav-contact-btn { padding: 0.5rem 1rem !important; font-size: 0.77rem !important; }
  .srv-subnav { top: 86px; }

  /* ── Typography global ── */
  .section-title {
    font-size: 42px !important;
    line-height: 1.25 !important;
  }
  body, p {
    font-size: 17px;
    line-height: 1.8;
  }

  /* ── Hero ── */
  .hero-main-row { min-height: 100vh; }
  .hero-left {
    padding: 4rem 3rem 0;
    flex: 0 0 100%;
  }
  .hero h1 {
    font-size: 36px !important;
    line-height: 1.3;
    margin-bottom: 1rem;
  }
  .hero p { font-size: 16px; margin-bottom: 1.8rem; }
  .hero-badge { font-size: 0.7rem; }
  .hero-tagline { padding: 1.5rem 1.5rem 0; }

  /* ── Intro split (index) ── */
  .intro-split-heading { padding: 3rem 2rem 0; }
  .split-wrap { padding: 2rem 2rem 4.5rem; }

  /* ── Servicios (index) ── */
  .svc-tab {
    font-size: 16px;
    padding: 0.65rem 1.1rem;
  }
  .svc-panel { height: 500px; }

  /* ── Metodologías ── */
  #metodologias { padding: 3.5rem 2rem 6rem; }
  #metodologias div[style*="border-radius:50%"] {
    width: 140px !important;
    height: 140px !important;
  }

  /* ── CTA section ── */
  .cta-section { padding: 5rem 2rem; }

  /* ── Services page: service-detail ── */
  .service-detail { padding: 60px 2rem; }
  .service-detail-grid { gap: 40px; }
  .service-detail-text h2 { font-size: 1.5rem !important; }

  /* ── Quienes somos ── */
  .qs-split-card {
    padding: 1.5rem 2rem;
    flex: 0 0 46%;
  }
  .qs-split-img { height: 480px; }

  /* ── Club ComuniClub ── */
  .club-card-inner {
    padding: 1.5rem 1.8rem;
    gap: 2rem;
  }

  /* ── Contact page ── */
  .contact-grid { gap: 3rem; }

  /* ── Page hero (inner pages) ── */
  .page-hero { margin-top: 86px; }

  /* ── Footer ── */
  .footer-main { gap: 2rem; }
}

/* ══════════════════════════════════════════════════════
   1150px — Hamburger activa (libera espacio en tablets)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1150px) {

  /* Ocultar links, mostrar hamburger — overlay handles the menu */
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* Dropdowns inline dentro del menú */
  .nav-dropdown-wrap::after { display: none !important; }
  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border-top: none;
    border-left: 3px solid #ffc000;
    background: #f8f9fc;
    padding: 0.25rem 0;
    min-width: unset;
    width: 100%;
    display: none;
    margin-top: 0;
  }
  .nav-dropdown-wrap.open .nav-dropdown { display: block; }
  .nav-dropdown-wrap.open .nav-chevron { transform: rotate(180deg); }
  .nav-dropdown li a { padding: 0.5rem 1.2rem; font-size: 0.78rem; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav-subdropdown {
    position: static;
    box-shadow: none;
    border-top: none;
    border-left: 3px solid #01b0f1;
    background: #eef0f8;
    padding: 0.2rem 0;
    min-width: unset;
    width: 100%;
    display: none;
  }
  .nav-sub-wrap.open .nav-subdropdown { display: block; }
  .nav-sub-wrap.open .nav-sub-chevron { transform: rotate(90deg); }
  .nav-subdropdown li a { padding: 0.45rem 1.6rem; font-size: 0.75rem; }
  .nav-sub-toggle { width: 100%; }
}

@media (max-width: 1024px) {
  .subsection-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .subsection-grid,
  .subsection-grid--2col { grid-template-columns: 1fr; }
}

/* ── HERO & SPLIT LAYOUT ─────────────────────────────── */
.hero-panel-left {
  display: none;
}

.hero-panel-right {
  flex: 1;
  display: flex;
  align-self: stretch;
  justify-content: center;
}

.hero-left {
  flex: 0 0 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 6rem 0;
  position: relative;
  z-index: 3;
  pointer-events: none; /* let carousel arrow clicks pass through */
}
.hero-left * {
  pointer-events: auto; /* restore clicks for all children (links, buttons, etc.) */
}
.hero-left h1 span[style*="color:#010050"] {
  color: #fff !important;
}
.hero-left p {
  color: rgba(255,255,255,0.85);
}
.hero-left p strong {
  color: #ffc000;
}
.hero-right {
  position: absolute;
  inset: 0;
  padding: 0;
  z-index: 1;
}

/* Hero badge */
.hero-badge {
  display: inline-block;
  background: rgba(1,0,80,0.07);
  color: #010050;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  border: 1px solid rgba(1,0,80,0.12);
  margin-bottom: 1.5rem;
}

/* Hero label */
.hero-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #01b0f1;
  margin-bottom: 1.2rem;
  font-family: 'Poppins', sans-serif;
}

/* Hero CTA row */
.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Botón presentación — esquina inferior derecha del hero */
.hero-play-corner {
  position: absolute;
  bottom: 5.5rem;
  right: 4%;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 0.85rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.hero-play-corner:hover {
  background: #ffc000;
  border-color: #ffc000;
  color: #000;
}
.hero-play-corner i {
  font-size: 1.3rem;
}

/* Hero secondary CTA */
.hero-cta-secondary {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.65) !important;
  padding: 0.9rem 2rem;
  transition: background 0.25s, border-color 0.25s;
}
.hero-cta-secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #fff !important;
}

/* Hero CTA button */
.hero-cta {
  background: #ffc000;
  color: #010050 !important;
  padding: 1rem 2.2rem;
  transition: background 0.25s, color 0.25s;
}
.hero-cta:hover {
  background: #01b0f1;
  color: #fff !important;
}

/* Hero video button (right side) */
.hero-video-btn {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  z-index: 10;
  background: rgba(1,0,80,0.55);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.4rem 0.75rem 0.9rem;
  cursor: pointer;
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.hero-video-btn:hover {
  background: rgba(1,0,80,0.8);
  border-color: #fff;
  transform: scale(1.04);
}
.hero-video-btn-icon {
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
  transition: color 0.2s;
}
.hero-video-btn:hover .hero-video-btn-icon { color: #01b0f1; }
.hero-video-btn-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hero tagline bottom */
.hero-tagline {
  max-width: 700px;
  margin: 0 auto 2.5rem;
  padding: 2rem 2rem 0;
  text-align: center;
}
.hero-tagline p {
  font-family: 'Poppins', sans-serif;
  color: #444;
  line-height: 1.7;
  margin: 2rem 0 0;
  font-style: italic;
}
.hero-tagline p strong {
  color: #010050;
  font-style: normal;
}

.hero-tagline-text {
  font-family: 'Poppins', sans-serif;
  color: #444;
  line-height: 1.7;
  font-style: italic;
  max-width: 700px;
  margin: 1.2rem auto 0;
  text-align: center;
}
.hero-tagline-text strong {
  color: #010050;
  font-style: normal;
}

/* Hero video card */
.hero-video-card {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 70vh;
  background: #06040f;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(1,0,80,0.22);
}
.hero-video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video-cover {
  position: absolute;
  inset: 0;
  background: rgba(1,0,80,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.35s ease;
}
.hero-video-card:hover .hero-video-cover {
  background: rgba(1,0,80,0.45);
}

/* ── Hero video custom controls ── */
.hvc-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: linear-gradient(to top, rgba(1,0,80,0.85), transparent);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 5;
}
.hero-video-card:hover .hvc-controls,
.hvc-controls.visible {
  opacity: 1;
}
.hvc-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: var(--text-base);
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.hvc-time, .hvc-duration {
  color: #fff;
  font-size: var(--text-xs);
  font-family: 'Poppins', sans-serif;
  flex-shrink: 0;
  min-width: 2.2rem;
}
.hvc-progress-wrap {
  flex: 1;
  cursor: pointer;
}
.hvc-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
}
.hvc-progress-fill {
  height: 100%;
  width: 0%;
  background: #ffc000;
  border-radius: 2px;
  transition: width 0.1s linear;
}
.hvc-volume {
  width: 60px;
  accent-color: #ffc000;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Hero Carousel ────────────────────────────────────── */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #06040f;
}
.hc-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.hc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  overflow: hidden;
  transition: opacity 1.1s ease;
}
.hc-slide.active {
  opacity: 1;
  z-index: 2;
}
.hc-slide.leaving {
  opacity: 0;
  z-index: 1;
  transition: opacity 1.1s ease;
}
.hc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}

/* Ken Burns keyframes */
@keyframes kbZoomIn {
  from { transform: scale(1);    }
  to   { transform: scale(1.09); }
}
@keyframes kbZoomOut {
  from { transform: scale(1.09); }
  to   { transform: scale(1);    }
}
.hc-slide[data-kb="in"].active  img { animation: kbZoomIn  6s ease-in-out forwards; }
.hc-slide[data-kb="out"].active img { animation: kbZoomOut 6s ease-in-out forwards; }
.hc-slide--video { cursor: pointer; }
.hc-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1,0,80,0.42);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  padding-right: 38%;
  color: #fff;
  transition: background 0.3s;
}
.hc-slide--video:hover .hc-video-overlay { background: rgba(1,0,80,0.6); }
.hc-play-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 4.5rem;
  cursor: pointer;
  line-height: 1;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
  transition: transform 0.2s, color 0.2s;
  padding: 0;
}
.hc-play-btn:hover { transform: scale(1.12); color: #01b0f1; }
.hc-video-overlay span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(1);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 50%;
  color: #222;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 300ms ease,
              color 300ms ease,
              box-shadow 300ms ease;
}
.hc-arrow:hover {
  background-color: #ffc000;
  color: #010050;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30);
  transform: translateY(-50%) scale(1.12);
}
.hc-arrow:active {
  transform: translateY(-50%) scale(0.92);
  transition: transform 100ms ease,
              background-color 100ms ease,
              box-shadow 100ms ease;
}
.hc-prev { left: clamp(2rem, 5vw, 5rem); }
.hc-next { right: clamp(2rem, 5vw, 5rem); }
.hc-dots {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  z-index: 10;
}
.hc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}
.hc-dot.active {
  background: #fff;
  transform: scale(1.35);
}

/* ── INTRO BANNER ────────────────────────────────────── */
.intro-banner {
  position: relative;
  width: 100%;
  height: clamp(320px, 45vw, 520px);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.intro-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.intro-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.58);
  z-index: 1;
}
.intro-banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.intro-banner-left { max-width: 55%; }
.intro-banner-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.intro-banner-tag {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffc000;
  display: block;
  margin-bottom: 1rem;
}
.intro-banner-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0;
}
.intro-banner-play {
  margin-top: 2rem;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  color: #ffc000;
  transition: transform 0.25s ease, background 0.25s ease,
              box-shadow 0.25s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.intro-banner-play:hover {
  transform: scale(1.1);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

/* ── INTRO SOBRE ÓSCAR ──────────────────────────────── */
.intro-about {
  background: #fff;
  padding: 6rem 0;
  overflow: hidden;
}
.intro-about-inner {
  display: flex;
  align-items: center;
  gap: 4rem;
}
/* Left column */
.intro-about-left {
  flex: 1;
  min-width: 0;
}
.intro-about-tag {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffc000;
  display: block;
  margin-bottom: 0.75rem;
}
.intro-about-title {
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 800;
  color: #111;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.intro-about-title em {
  font-style: normal;
  color: #ffc000;
}
.intro-about-left p {
  font-size: var(--fs-base);
  color: #555;
  line-height: 1.85;
  margin-bottom: 1rem;
}
.intro-about-sig {
  font-family: 'Dancing Script', Georgia, cursive;
  font-size: 2.2rem;
  color: #1a1535;
  margin: 1.5rem 0 1.75rem;
}
.intro-about-btn {
  display: inline-block;
  padding: 0.85rem 2.4rem;
  background: #ffc000;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.intro-about-btn:hover {
  background: #010050;
  color: #fff;
}
/* Right column */
.intro-about-right {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  position: relative;
}
.intro-about-img-wrap {
  position: absolute;
  inset: 0;
}
.intro-about-circle {
  position: absolute;
  bottom: -6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  aspect-ratio: 1;
  background: #010050;
  border-radius: 50%;
  z-index: 0;
}
.intro-about-photo {
  position: absolute;
  bottom: -6rem;
  left: 50%;
  transform: translateX(-50%);
  height: calc(100% + 6rem);
  width: auto;
  max-width: 140%;
  object-fit: contain;
  z-index: 1;
}
/* Responsive */
@media (max-width: 900px) {
  .intro-about-inner {
    flex-direction: column-reverse;
    gap: 2.5rem;
  }
  .intro-about-right {
    display: none;
  }
  .intro-about-circle,
  .intro-about-photo {
    display: none;
  }
}

/* ── legacy kept for other pages ── */
.intro-split-heading {
  background: #fff;
  text-align: center;
  padding: 4rem var(--container-padding) 0;
  max-width: var(--max);
  margin: 0 auto;
}
.split-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 3rem var(--container-padding) 6rem;
  gap: 3rem;
  max-width: var(--max);
  margin: 0 auto;
}
.split-right {
  width: 100%;
  max-width: 860px;
  display: flex;
  align-items: flex-start;
  background: #fff;
  padding: 1rem 0;
}

/* Video preview encima del texto */
.intro-video-preview {
  position: relative;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 0;
  box-shadow: 0 8px 32px rgba(1,0,80,0.18);
}
.intro-video-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-video-cover {
  position: absolute;
  inset: 0;
  background: rgba(1,0,80,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  transition: background 0.25s;
}
.intro-video-preview:hover .intro-video-cover {
  background: rgba(1,0,80,0.62);
}

/* Botón play (legacy, no longer used as standalone) */
.intro-play-btn {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: center;
  gap: 0.6rem;
  background: rgba(1,0,80,0.82);
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: 50px;
  padding: 0.6rem 1.2rem 0.6rem 0.8rem;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: background .25s, border-color .25s;
  z-index: 5;
}
.intro-play-btn:hover { background: rgba(1,0,80,1); border-color: #ffc000; }
.intro-play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffc000;
  color: #010050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  font-size: var(--text-lg);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.intro-video-preview:hover .intro-play-icon {
  transform: scale(1.1);
}
.intro-play-label {
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Gancho: pregunta destacada */
.intro-hook {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: #010050;
  margin-bottom: 1.2rem;
  letter-spacing: .02em;
}

/* Párrafos y negritas del intro-split */
.split-right p {
  font-family: 'Poppins', sans-serif;
  color: #333333;
  line-height: 1.8;
  margin-bottom: 0.9rem;
}
.split-right p strong {
  font-family: 'Poppins', sans-serif;
  color: #010050;
  font-weight: var(--weight-semibold);
}

/* CTA amarillo */
.intro-cta {
  background: #ffc000 !important;
  color: #010050 !important;
  border: none !important;
  margin-top: 1rem;
}

@media (max-width: 768px) {

  /* ── Services sub-nav ── */
  .srv-subnav { top: 68px; }
  .srv-subnav-inner { padding: 0 0.5rem; }
  .srv-subnav-item { padding: 0.85rem 0.9rem; font-size: 0.73rem; gap: 0.35rem; }
  .srv-subnav-item span { display: none; }
  .srv-subnav-item i { font-size: 1.05rem; }
  .srv-subnav-item.active i { color: #01b0f1; }

  /* ── Padding lateral global ── */
  .section-inner,
  .split-wrap,
  .intro-split-heading,
  #club-oratoria,
  #contact .section-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .intro-split-heading {
    padding-top: 3rem !important;
  }

  .service-detail {
    padding: 3rem 1.25rem !important;
  }

  #servicios {
    padding: 3.5rem 1.25rem !important;
  }

  #metodologias {
    padding: 3rem 1.25rem 4rem !important;
  }

  #testimonials {
    padding: 3rem 1.25rem !important;
  }

  #contact {
    padding: 2.5rem 1rem !important;
  }

  .hero { height: auto; }
  .hero-main-row { min-height: 100vw; }
  .hero-left {
    flex: 0 0 100%;
    width: 100%;
    padding: 7rem 1.5rem 0;
    background: transparent;
    align-items: center;
    text-align: center;
  }
  .hero-right {
    position: absolute;
    inset: 0;
  }
  .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hc-video-overlay { display: none; }
  #home { flex-direction: column; }

  /* Carrusel: botones más pequeños en móvil */
  .hc-arrow { width: 46px; height: 46px; font-size: 1rem; transform: translateY(-50%) scale(1); }
  .hc-prev { left: 1.25rem; }
  .hc-next { right: 1.25rem; }

  /* ── Intro split (sección encima de servicios) ── */
  .intro-split-heading {
    padding: 2.5rem 1.25rem 0 !important;
  }

  .intro-split-heading h2 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  .split-wrap {
    flex-direction: column !important;
    padding: 1.5rem 1.25rem 3rem !important;
    gap: 1.2rem;
  }

  .intro-video-preview {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 1.2rem !important;
  }

  .split-right {
    padding: 0 !important;
    flex-direction: column;
  }

  .split-right p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .split-right .btn.intro-cta {
    margin-top: 1rem !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }

  #intro-pres-oscar { width: 110px; height: 110px; }
  #intro-play-video { width: 100%; height: auto; aspect-ratio: 16/9; }

  /* Page hero responsive */
  .page-hero,
  .pre-contact-banner {
    margin-top: 68px;
    min-height: 320px;
    padding: 3rem 1.25rem;
  }

  .pre-contact-title {
    font-size: 2.2rem;
    line-height: 1.3;
  }

  /* Clients responsive */
  .clients-inner {
    flex-direction: column;
    min-height: unset;
    gap: 0;
  }

  .clients p {
    flex: none;
    width: 100%;
    text-align: center;
    padding: 0.9rem 1.25rem 0.5rem;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }

  .clients-row {
    gap: 2rem;
  }

  .client-logo img,
  .client-logo--bg img {
    max-height: 48px !important;
    max-width: 110px !important;
  }

  /* ── Servicios (home) ── */
  #servicios {
    padding: 3rem 1.25rem !important;
  }

  #servicios .fade-in[style*="text-align:center"] {
    margin-bottom: 1.5rem !important;
  }

  .svc-mobile-list {
    gap: 0.75rem !important;
  }

  .svc-mobile-card {
    height: 200px !important;
    border-radius: 4px;
  }

  .svc-mobile-overlay {
    padding: 1.1rem 1rem !important;
    gap: 0.3rem !important;
  }

  .svc-mobile-overlay h3 {
    font-size: 1rem !important;
  }

  .svc-mobile-overlay p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* ── Metodologías ── */
  #metodologias {
    padding: 0 !important;
  }

  /* Ocultar línea de fondo y flechas */
  #metodologias div[style*="position:absolute; top:90px"],
  #metodologias .section-inner > div:last-child > div[style*="flex:0 0 auto"] {
    display: none !important;
  }

  /* Timeline: apilar pasos en columna */
  #metodologias .section-inner > div:last-child {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  /* Cada paso: tarjeta blanca con sombra suave */
  #metodologias .section-inner > div:last-child > div[style*="flex:1"] {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 1.75rem 1.25rem !important;
    box-shadow: 0 3px 14px rgba(1,0,80,0.09) !important;
    gap: 0.6rem !important;
    flex: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Foto circular: más pequeña y sin margen inferior excesivo */
  #metodologias div[style*="border-radius:50%"] {
    width: 110px !important;
    height: 110px !important;
    flex-shrink: 0 !important;
    margin-bottom: 0.6rem !important;
  }

  /* Hero tagline */
  .hero-tagline {
    max-width: 100%;
    padding: 0.8rem 1rem 0;
  }

  /* Section titles responsive */
  .section-title,
  .tc-main-title {
    font-size: 2rem;
    line-height: 1.3;
  }

  /* Nav responsive */
  .nav-inner { height: 68px; }
  .logo { margin-left: 1rem; }
  .logo img { height: 60px !important; }
  /* Testimonials avatars */
  .tc-avatars { flex-wrap: wrap; }

  /* ── Footer responsive ── */
  footer {
    padding: 2.5rem 1.25rem 1.5rem !important;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer-brand img {
    height: 50px !important;
  }

  .footer-brand p {
    display: none;
  }

  .footer-cta {
    font-size: 12px !important;
    padding: 0.5rem 1.2rem !important;
    white-space: nowrap;
  }

  .footer-col h4 {
    font-size: 0.7rem !important;
    margin-bottom: 0.6rem !important;
  }

  .footer-col ul {
    gap: 0.4rem !important;
  }

  .footer-col ul a {
    font-size: 0.78rem !important;
  }

  .footer-divider {
    margin: 1rem 0 1rem !important;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem !important;
  }

  .footer-bottom p {
    font-size: 11px !important;
  }

  .social-links {
    gap: 0.5rem !important;
  }

  .social-link {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.75rem !important;
  }

  .footer-legal {
    gap: 1rem !important;
  }

  .footer-legal a {
    font-size: 11px !important;
  }

  /* ── Quienes Somos responsive ── */

  /* Section padding */
  .qs-equipo {
    padding: 3rem 1.25rem !important;
  }

  /* Ghost title "TEAM" - hide on mobile */
  .qs-equipo span[style*="font-size:clamp(5rem"] {
    display: none !important;
  }

  /* Header margin */
  .qs-equipo .section-inner > div:first-child {
    margin-bottom: 2rem !important;
  }

  /* Persona cards: stack vertically */
  .qs-equipo .section-inner > div[style*="display:flex"][style*="align-items:flex-start"] {
    flex-direction: column !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 2rem !important;
  }

  /* Reverse layout also stacks (Yaima) */
  .qs-equipo .section-inner > div[style*="flex-direction:row-reverse"] {
    flex-direction: column !important;
  }

  /* Image wrappers: full width */
  .qs-equipo .showup.delay1 {
    width: 100% !important;
  }

  /* Images: full width, natural proportions */
  .qs-equipo .showup.delay1 img {
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: top !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Text container: remove overlap, full width */
  .qs-equipo .showup.delay2 {
    margin-top: 0 !important;
    min-height: unset !important;
    padding: 1.8rem 1.2rem !important;
    font-size: 0.85rem !important;
  }

  /* ══════════════════════════════════════════════════════
     TYPOGRAPHY MOBILE — Todas las páginas
     ══════════════════════════════════════════════════════ */

  /* ── Base ── */
  body,
  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  p + p,
  p {
    margin-bottom: 0.4rem !important;
    margin-top: 0 !important;
  }

  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }

  h4 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  /* ── Hero (index) ── */
  .hero h1,
  .page-hero h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  .hero-left p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .hero-tagline p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ── Met text col ── */
  .met-text-col {
    padding: 0 !important;
  }

  /* ── Intro split ── */
  .intro-split-heading h2 {
    font-size: 1.5rem !important;
  }

  .intro-hook {
    font-size: 1rem !important;
  }

  .split-right p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ── Section titles ── */
  .section-title,
  .tc-main-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  .section-tag {
    font-size: 0.75rem !important;
  }

  /* ── Metodologías (index) ── */
  .met-intro {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  #metodologias p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  #metodologias h4 {
    font-size: 0.9rem !important;
  }

  #metodologias div[style*="border-radius:50%"] {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
  }

  #metodologias div[style*="border-radius:20px"] {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
  }

  #metodologias div[style*="border-radius:50%"] {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
  }

  #metodologias div[style*="border-radius:20px"] {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
  }

  /* ── Testimonios ── */

  #testimonials {
    padding: 2.5rem 1rem !important;
  }

  /* Título */
  #testimonials .section-title {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  /* Comillas decorativas: más pequeñas y sin desbordarse */
  .tc-big-quote img,
  .tc-close-quote img {
    width: 40px !important;
  }

  .tc-big-quote {
    top: -0.5rem !important;
    left: 0 !important;
  }

  .tc-close-quote {
    bottom: -1rem !important;
    right: 0 !important;
  }

  /* Stage: padding reducido */
  .tc-stage {
    padding: 1.2rem 0.75rem !important;
  }

  /* Carousel: altura automática según contenido */
  .testimonials-carousel {
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Cards: layout estático, sin animación de slide */
  .testimonial-card {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    padding: 0.5rem 0.5rem 1rem !important;
    transform: none !important;
    transition: none !important;
    display: none;
    opacity: 1 !important;
  }

  .testimonial-card.active {
    display: flex !important;
  }

  .testimonial-card p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }

  /* Flechas: más pequeñas */
  .tc-arrow {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.85rem !important;
  }

  /* Nav row */
  .tc-nav-row {
    margin-top: 1rem !important;
  }

  /* Avatares: más pequeños y con wrap */
  .tc-avatars {
    flex-wrap: wrap;
    gap: 0.6rem !important;
    margin-top: 1.2rem !important;
    justify-content: center;
  }

  .tc-av .author-avatar {
    width: 46px !important;
    height: 46px !important;
    font-size: 0.75rem !important;
  }

  .tc-av {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .tc-av-info {
    display: flex !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .tc-av-info span {
    display: none !important;
  }

  .tc-av-info strong {
    font-size: 0.6rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .tc-av:not(.active) .tc-av-info {
    opacity: 0 !important;
  }

  /* CTA inferior */
  #testimonials div[style*="text-align:center"] p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ── Services page: detail sections ── */
  .service-detail-text h2 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  .service-detail-text p,
  .service-detail-list li {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .service-detail-list svg {
    width: 18px !important;
    height: 18px !important;
  }

  blockquote {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ── Services page: Club de Oratoria ── */
  #club-oratoria h2 {
    font-size: 1.35rem !important;
  }

  #club-oratoria h3 {
    font-size: 1.1rem !important;
  }

  #club-oratoria p,
  #club-oratoria li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .club-subtitle {
    font-size: 14px !important;
  }

  .club-card-inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }

  /* ── Services page: Formación In Company ── */
  #formacion-incompany p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ── Quiénes Somos ── */
  .qs-equipo h2 {
    font-size: 1.5rem !important;
  }

  .qs-equipo .showup.delay2 {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .qs-equipo .showup.delay2 h3 {
    font-size: 1.2rem !important;
  }

  /* ── Contacto ── */
  .pre-contact-banner {
    min-height: 22vh !important;
    padding: 2.5rem 1rem !important;
  }

  .pre-contact-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  #contact {
    padding: 2rem 1rem !important;
  }

  #contact .section-title {
    font-size: 1.3rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Tarjetas info: una por fila, layout horizontal icono+texto */
  #contact div[style*="display:flex; gap:1rem"] {
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-bottom: 1.5rem !important;
  }

  #contact div[style*="min-width:180px"] {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0.85rem 1rem !important;
    min-width: 0 !important;
    flex: unset !important;
    width: 100% !important;
    border-radius: 10px !important;
    gap: 1rem !important;
  }

  /* Iconos — tamaño natural preservado */
  #contact div[style*="min-width:180px"] > div[style*="width:72px"] {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  #contact div[style*="min-width:180px"] > div[style*="width:72px"] i {
    font-size: 1.1rem !important;
  }

  #contact div[style*="min-width:180px"] p {
    font-size: 0.7rem !important;
    margin: 0 0 0.15rem !important;
  }

  #contact div[style*="min-width:180px"] a,
  #contact div[style*="min-width:180px"] span {
    font-size: 0.85rem !important;
    word-break: break-all;
  }

  /* Formulario contenedor */
  #contact div[style*="padding:4rem 3rem"] {
    padding: 1.5rem 1rem !important;
    border-radius: 12px !important;
  }

  #contact div[style*="margin-bottom:2rem"] {
    margin-bottom: 1rem !important;
  }

  #contact label {
    font-size: 13px !important;
  }

  #contact input,
  #contact textarea {
    font-size: 16px !important;
    padding: 0.6rem 0.8rem !important;
  }

  #contact textarea {
    min-height: 100px !important;
  }

  #contact p[style*="color:var(--muted)"] {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Botón enviar: ancho completo */
  #cf-btn {
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    font-size: 14px !important;
    margin-top: 1rem !important;
  }

  /* ── CTA section (todas las páginas) ── */
  .cta-section {
    padding: 3rem 1.25rem;
  }

  .cta-section h2 {
    font-size: 1.5rem !important;
  }

  .cta-section p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ── Botones (todas las páginas) ── */
  .btn,
  .btn.hero-cta,
  .btn.intro-cta,
  .btn.btn-primary {
    font-size: 14px !important;
    padding: 0.75rem 1.75rem !important;
  }

  /* ── Incompany quotes ── */
  .incompany-quote p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

/* ══════════════════════════════════════════════════════
   BREAKPOINT 360–430px — Pantallas pequeñas
   ══════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* ── Tipografía base ── */
  body, p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  h1, .hero h1, .page-hero h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  h2, .section-title, .tc-main-title {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  h4 {
    font-size: 0.95rem !important;
  }

  /* ── Nav ── */
  .logo img { height: 50px !important; }
  .nav-inner { padding: 0 0.75rem; }

  /* ── Hero ── */
  .hero-left {
    padding: 5rem 1rem 0 !important;
  }

  .hero-tagline {
    padding: 0.75rem 1rem 0 !important;
  }

  .hero-tagline p {
    font-size: 14px !important;
  }

  /* ── Intro split ── */
  .intro-split-heading {
    padding: 2rem 1rem 0 !important;
  }

  .intro-split-heading h2 {
    font-size: 1.2rem !important;
  }

  .split-wrap {
    padding: 1.5rem 1rem !important;
  }

  /* ── Secciones ── */
  .section-inner,
  .split-wrap,
  .intro-split-heading,
  #club-oratoria,
  #contact .section-inner {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .service-detail {
    padding: 2rem 0.875rem !important;
  }

  #servicios {
    padding: 2.5rem 0.875rem !important;
  }

  #metodologias {
    padding: 0 !important;
  }

  #testimonials {
    padding: 2.5rem 0.875rem !important;
  }

  #contact {
    padding: 2rem 0.875rem !important;
  }

  /* ── Clients 430px ── */
  .clients p {
    font-size: 0.7rem !important;
    padding: 0.75rem 1rem 0.4rem !important;
  }

  .client-logo img,
  .client-logo--bg img {
    max-height: 40px !important;
    max-width: 90px !important;
  }

  .clients-row {
    gap: 1.5rem;
  }


  /* ── Servicios (home) 430px ── */
  #servicios {
    padding: 2.5rem 0.875rem !important;
  }

  .svc-mobile-card {
    height: 185px !important;
  }

  .svc-mobile-overlay h3 {
    font-size: 0.95rem !important;
  }

  .svc-mobile-overlay p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ── Metodologías 430px ── */
  #metodologias {
    padding: 0 !important;
  }

  #metodologias div[style*="border-radius:50%"] {
    width: 90px !important;
    height: 90px !important;
  }

  #metodologias p {
    font-size: 13px !important;
  }

  /* ── Testimonios ── */
  .testimonial-card p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .tc-stage {
    padding: 1rem 0.5rem !important;
  }

  .tc-arrow {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.8rem !important;
  }

  .tc-nav-row {
    gap: 0.4rem !important;
  }

  .tc-av .author-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .tc-dot {
    width: 7px !important;
    height: 7px !important;
  }

  /* ── Services detail ── */
  .service-detail-text h2 {
    font-size: 1.2rem !important;
  }

  .service-detail-text p,
  .service-detail-list li {
    font-size: 14px !important;
  }

  .service-detail-grid {
    gap: 1.5rem !important;
  }

  /* ── Club oratoria ── */
  #club-oratoria h2 {
    font-size: 1.2rem !important;
  }

  #club-oratoria p,
  #club-oratoria li {
    font-size: 13px !important;
  }

  .club-card-inner {
    padding: 1rem !important;
    gap: 1rem !important;
  }

  /* ── Quiénes Somos ── */
  .qs-equipo {
    padding: 2rem 0.875rem !important;
  }

  .qs-equipo .showup.delay1 img {
    max-height: 320px !important;
  }

  .qs-equipo .showup.delay2 {
    padding: 1.25rem 1rem !important;
  }

  /* ── Contacto ── */
  .pre-contact-title {
    font-size: 1.6rem !important;
  }

  #contact .section-title {
    font-size: 1.15rem !important;
  }

  #contact div[style*="min-width:180px"] {
    padding: 0.75rem 0.875rem !important;
  }

  #contact div[style*="min-width:180px"] > div[style*="width:72px"] {
    width: 40px !important;
    height: 40px !important;
  }

  #contact div[style*="min-width:180px"] > div[style*="width:72px"] i {
    font-size: 1rem !important;
  }

  #contact div[style*="min-width:180px"] a,
  #contact div[style*="min-width:180px"] span {
    font-size: 0.8rem !important;
  }

  #contact div[style*="padding:4rem 3rem"] {
    padding: 1.25rem 0.875rem !important;
  }

  #cf-btn {
    font-size: 13px !important;
  }

  /* ── CTA ── */
  .cta-section {
    padding: 2.5rem 1rem !important;
  }

  .cta-section h2 {
    font-size: 1.3rem !important;
  }

  /* ── Botones ── */
  .btn,
  .btn.hero-cta,
  .btn.intro-cta,
  .btn.btn-primary {
    font-size: 13px !important;
    padding: 0.7rem 1.5rem !important;
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
  }

  /* ── Footer ── */
  footer {
    padding: 2rem 1rem 1.25rem !important;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }

  .footer-brand {
    gap: 0.75rem !important;
  }

  .footer-brand img {
    height: 44px !important;
  }

  .footer-col h4 {
    font-size: 0.65rem !important;
  }

  .footer-col ul a {
    font-size: 0.72rem !important;
  }

  .footer-bottom p,
  .footer-legal a {
    font-size: 10px !important;
  }

  /* ── Page hero ── */
  .page-hero,
  .pre-contact-banner {
    min-height: 260px !important;
    padding: 2.5rem 1rem !important;
  }
}

/* ── Video mute toggle button ───────────────────────── */
.video-mute-container {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 30;
}

.video-mute-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.18),
    0 0 0 8px rgba(195, 185, 255, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.video-mute-btn:hover {
  transform: scale(1.1);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.22),
    0 0 0 10px rgba(195, 185, 255, 0.5);
}

.video-mute-btn i {
  font-size: 1.1rem;
  color: #1a1535;
  pointer-events: none;
}

.video-mute-label {
  background: rgba(10, 5, 40, 0.6);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.32rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ═══════════════════════════════════════════════════════
   CONTACT PAGE (contacto.html)
═══════════════════════════════════════════════════════ */

/* ── Hero ── */
.ct-hero {
  min-height: 460px;
  margin-top: 124px;
  background-image: url('4.-FOTOS ORDENADAS/6A1A1827.JPG');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ct-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.ct-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 3rem 2rem;
}
.ct-hero-inner h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin: 0 0 0.75rem;
  line-height: 1.15;
  color: #fff;
}
.ct-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
}
.ct-breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s;
}
.ct-breadcrumb a:hover { color: #fff; }

/* ── Body ── */
.ct-body {
  padding: 7rem var(--container-padding);
  background: var(--gray-100);
}
.ct-container {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start;
}

/* ── Info card ── */
.ct-info-card {
  background: #fff;
  padding: 2.5rem 2.2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.ct-info-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--gray-900);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}
.ct-info-desc {
  color: var(--gray-400);
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: 0 0 2rem;
}
.ct-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.ct-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ct-icon {
  color: #555;
  font-size: var(--fs-md);
  flex-shrink: 0;
  margin-top: 3px;
  width: 20px;
  text-align: center;
}
.ct-detail strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--p-900);
  margin-bottom: 4px;
}
.ct-detail a,
.ct-detail span {
  font-size: var(--fs-base);
  color: #444;
  text-decoration: none;
  word-break: break-word;
  line-height: 1.5;
}
.ct-detail a:hover { text-decoration: underline; }

/* Social buttons */
.ct-socials {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ct-social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-base);
  transition: opacity 0.2s, transform 0.2s;
}
.ct-social-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.ct-linkedin { background: #0077b5; }

/* ── Form card ── */
.ct-form-card {
  background: #fff;
  padding: 3rem 3.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.ct-form-card h3 {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--gray-900);
  margin: 0 0 2.5rem;
  line-height: 1.35;
}
.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.ct-group {
  margin-bottom: 1.25rem;
}

/* Los inputs heredan los estilos globales de input/textarea.
   Solo ajustamos el foco para usar el dorado de esta página. */
.ct-form input:focus,
.ct-form textarea:focus {
  border-color: #ffc000 !important;
  box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.15) !important;
}
.ct-form textarea {
  min-height: 150px;
}

/* Submit button */
.ct-submit-btn {
  display: inline-block;
  background: #C59D5F;
  color: #fff;
  border: none;
  padding: 14px 40px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  margin-top: 0.75rem;
  box-shadow: 0 4px 18px rgba(197, 157, 95, 0.4);
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  letter-spacing: 0.3px;
}
.ct-submit-btn:hover {
  background: #b08040;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(197, 157, 95, 0.5);
}
.ct-submit-btn:active { transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ct-container {
    grid-template-columns: 280px 1fr;
    gap: 3rem;
  }
}
@media (max-width: 900px) {
  .ct-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ct-body {
    padding: 5rem 4%;
  }
  .ct-form-card {
    padding: 2.5rem 2rem;
  }
}
@media (max-width: 768px) {
  .ct-hero {
    margin-top: 68px;
    min-height: 320px;
  }
  .ct-hero-inner h1 {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }
  .ct-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ct-body {
    padding: 3.5rem 1.5rem;
  }
  .ct-form-card {
    padding: 2rem 1.5rem;
  }
  .ct-info-card {
    padding: 2rem 1.5rem;
  }
}
@media (max-width: 480px) {
  .ct-hero {
    min-height: 260px;
  }
  .ct-body {
    padding: 2.5rem 1.25rem;
  }
  .ct-form-card {
    padding: 1.75rem 1.25rem;
  }
  .ct-info-card {
    padding: 1.75rem 1.25rem;
  }
}

.video-mute-label.hidden {
  opacity: 0;
}

/* ══════════════════════════════════════════════════════
   ÚLTIMOS TALLERES
   ══════════════════════════════════════════════════════ */
/* La sección reutiliza .service-detail-grid y .service-detail--reverse
   igual que el resto de servicios.
   Solo necesitamos colapsar el bloque de 3 columnas del "¿Por qué?" en móvil. */

@media (max-width: 768px) {
  /* "¿Por qué un taller...?" — 3 columnas → 1 columna */
  #ul-cogitise-2025 div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Quitar padding lateral del bloque "Por qué" */
  #ul-cogitise-2025 div[style*="border-left:4px solid #01b0f1"] {
    padding: 1.75rem 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   METODOLOGÍA PAGE (metodologia.html)
═══════════════════════════════════════════════════════ */

.met-section {
  padding: 5rem var(--container-padding);
  background: #fff;
}
.met-section-alt {
  background: var(--gray-100);
}
.met-container {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── Encabezado de sección ── */
.met-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.met-intro-p {
  font-size: var(--fs-base);
  color: var(--gray-600);
  line-height: 1.8;
  margin-top: 1rem;
}
.met-principles-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--p-900);
  margin-top: 1.75rem;
}

/* ── 2 tarjetas superiores ── */
.met-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.met-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(0,0,0,0.09);
  display: flex;
  flex-direction: column;
}
.met-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.met-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.met-card:hover .met-card-img { transform: scale(1.04); }
.met-card-body {
  padding: 2rem 2.25rem 2.5rem;
  flex: 1;
}
.met-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--p-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.met-card-icon i {
  color: var(--accent-400);
  font-size: var(--fs-md);
}
.met-card-body h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--p-900);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.met-card-body p {
  font-size: var(--fs-sm);
  color: var(--gray-600);
  line-height: 1.8;
}

/* ── Tarjeta ancha con CTA ── */
.met-wide-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  background: var(--accent-400);
  box-shadow: 0 6px 32px rgba(0,0,0,0.12);
  min-height: 340px;
}
.met-wide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.met-wide-body {
  padding: 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}
.met-wide-body h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--p-900);
  line-height: 1.25;
}
.met-wide-body p {
  font-size: var(--fs-base);
  color: var(--p-900);
  line-height: 1.75;
  opacity: 0.88;
}
.met-wide-btn {
  display: inline-block;
  background: var(--p-900);
  color: #fff;
  padding: 13px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  align-self: flex-start;
  transition: background 0.25s, transform 0.2s;
}
.met-wide-btn:hover {
  background: var(--p-700);
  transform: translateY(-2px);
}

/* ── 3 principios ── */
.met-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.met-principle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.met-principle--center {
  transform: none;
}
.met-principle-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  flex-shrink: 0;
}
.met-principle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.met-principle-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent-400);
  color: var(--p-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(255,192,0,0.45);
}
.met-principle-badge--alt {
  background: var(--p-900);
  color: var(--accent-400);
  box-shadow: 0 4px 14px rgba(1,0,80,0.22);
}
.met-principle h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--p-900);
  margin-bottom: 0.75rem;
}
.met-principle p {
  font-size: var(--fs-sm);
  color: var(--gray-600);
  line-height: 1.8;
  max-width: 300px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .met-wide-body { padding: 2.5rem 2rem; }
}
@media (max-width: 900px) {
  .met-cards-grid { grid-template-columns: 1fr; }
  .met-wide-card  { grid-template-columns: 1fr; }
  .met-wide-img   { height: 280px; }
  .met-principles-grid { grid-template-columns: 1fr; gap: 2rem; }
  .met-principle--center { transform: none; }
}
@media (max-width: 768px) {
  .met-section { padding: 3.5rem 1.25rem; }
  .met-wide-body { padding: 2rem 1.5rem; }
  .met-principle-photo { width: 160px; height: 160px; }
}

/* ═══════════════════════════════════════════════════════
   FOOTER OSCURO (footer.html)
═══════════════════════════════════════════════════════ */

.footer-dark {
  position: relative;
  background: #1e1e1e;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-body);
  overflow: hidden;
  margin-top: -2px; /* elimina el pixel de hueco con la ola */
}

/* ── Ola superior ── */
.footer-wave {
  position: relative;
  height: 90px;
  margin-top: -1px;
  line-height: 0;
}
.footer-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Cuerpo (3 columnas) ── */
.footer-dark-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem var(--container-padding) 4rem;
  display: grid;
  grid-template-columns: 1fr 1px 1.4fr 1px 1fr;
  gap: 0 3rem;
  align-items: start;
}

/* Separadores punteados */
.footer-dark-sep {
  width: 1px;
  height: 100%;
  min-height: 260px;
  border-left: 1px dashed rgba(255, 255, 255, 0.18);
  justify-self: center;
}

/* ── Títulos de columna ── */
.footer-dark-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

/* ── Listas de links ── */
.footer-dark-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-dark-list a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color 0.2s;
}
.footer-dark-list a:hover { color: #C59D5F; }

/* ── Columna central: brand ── */
.footer-dark-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
}
.footer-dark-logo {
  height: 80px;
  width: auto;
  display: block;
}
.footer-dark-brand p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
  max-width: 320px;
}

/* ── Redes sociales (círculos) ── */
.footer-dark-socials {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.footer-soc-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.footer-soc-btn:hover {
  background: #C59D5F;
  color: #fff;
}
.footer-cta-btn {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.75rem 2rem;
  background: #ffc000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
}
.footer-cta-btn:hover {
  background: #e6ac00;
  color: #fff;
  transform: translateY(-1px);
}

/* ── Columna derecha: info de contacto ── */
.footer-dark-col--right .footer-dark-title {
  margin-bottom: 1.5rem;
}
.footer-dark-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.1rem;
}
.footer-dark-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: #C59D5F;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-dark-info a,
.footer-dark-info span {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  word-break: break-word;
  line-height: 1.5;
}
.footer-dark-info a:hover { color: #C59D5F; }

/* ── Barra de copyright ── */
.footer-dark-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-dark-bottom p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
.footer-dark-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-dark-legal a {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-dark-legal a:hover { color: #C59D5F; }

/* ── Botón scroll al inicio ── */
.footer-scroll-top-btn {
  position: absolute;
  right: 1.5rem;
  bottom: 3.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-scroll-top-btn span {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C59D5F;
  transition: opacity 0.2s;
  padding-left: 0.5rem;
  border-left: 2px solid #C59D5F;
}
.footer-scroll-top-btn:hover span { opacity: 0.75; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .footer-dark-body {
    grid-template-columns: 1fr 1px 1.2fr 1px 1fr;
    gap: 0 2rem;
  }
}
@media (max-width: 768px) {
  .footer-dark-body {
    grid-template-columns: 1fr;
    gap: 2.5rem 0;
    padding: 2.5rem 1.25rem 3.5rem;
  }
  .footer-dark-sep { display: none; }
  .footer-dark-brand { align-items: flex-start; text-align: left; }
  .footer-dark-socials { justify-content: flex-start; }
  .footer-scroll-top-btn { right: 1rem; bottom: 2rem; }
  .footer-dark-bottom {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════
   PRE-FOOTER FORM SECTION
═══════════════════════════════════════════════════════ */

.pfooter-section {
  position: relative;
  background: #010050;
  padding-top: 5rem;
  padding-bottom: 120px;
  /* sin overflow:hidden aquí — se gestiona en pfooter-deco-wrap */
}

/* Wrapper de decorativos: aísla el clipping para no cortar la tarjeta */
.pfooter-deco-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ── Arcos decorativos punteados ── */
.pfooter-arc {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 0, 0, 0.14);
  pointer-events: none;
}
.pfooter-arc--tl { top: -240px; left: -160px; }
.pfooter-arc--tr { top: -280px; right: -180px; }
.pfooter-arc--br { bottom: 40px;  right: -200px; }

/* ── Grid de + ── */


/* ── Encabezado ── */
.pfooter-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.pfooter-tag,
.pfooter-title {
  text-align: center;
}
.pfooter-tag {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffc000;
  margin-bottom: 0.75rem;
  display: block;
}
.pfooter-title {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 2.5rem;
}

/* ── Tarjeta del formulario ── */
.pfooter-card {
  background: #fff;
  border-radius: 0;
  padding: 3rem 3.5rem 7rem; /* extra padding inferior para extenderse */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.07);
  position: relative;
  z-index: 1; /* queda por detrás de la ola */
  text-align: left;
}
.pfooter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
  margin-bottom: 0.5rem;
}
.pfooter-group {
  margin-bottom: 1.5rem;
}
.pfooter-group--full {
  grid-column: 1 / -1;
}

/* Inputs: solo línea inferior, sin caja */
.pfooter-card input,
.pfooter-card textarea {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid #ddd !important;
  border-radius: 0 !important;
  padding: 0.7rem 0 !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  color: #333 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-bottom-color 0.25s !important;
}
.pfooter-card input::placeholder,
.pfooter-card textarea::placeholder {
  color: #aaa !important;
  font-size: var(--fs-sm) !important;
}
.pfooter-card input:focus,
.pfooter-card textarea:focus {
  border-bottom-color: #ffc000 !important;
  box-shadow: none !important;
}
.pfooter-card textarea {
  min-height: 90px !important;
  resize: none !important;
}

/* ── Estado del formulario ── */
.pfooter-status {
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 1rem;
}

/* ── Botón pill ── */
.pfooter-btn-wrap {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}
.pfooter-btn {
  position: relative;
  overflow: hidden;
  background: #ffc000;
  color: #fff;
  border: none;
  padding: 19px 38px 18px;
  border-radius: 0;
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(255, 192, 0, 0.3);
  transition: box-shadow 0.25s, transform 0.2s;
  z-index: 1;
}
.pfooter-btn::before {
  content: '';
  position: absolute;
  width: 0%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background: #010050;
  transition: width 500ms ease;
}
.pfooter-btn:hover::before { width: 100%; }
.pfooter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 192, 0, 0.4);
}
.pfooter-btn:active  { transform: translateY(0); }
.pfooter-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* ── Ola inferior oscura ── */
.pfooter-wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}
.pfooter-wave-bottom svg {
  display: block;
  width: 100%;
  height: 120px; /* ola más alta para más dramatismo */
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pfooter-card { padding: 2.5rem 2rem 3.5rem; }
}
@media (max-width: 768px) {
  .pfooter-section { padding: 3.5rem 1.25rem 0; }
  .pfooter-row { grid-template-columns: 1fr; gap: 0; }
  .pfooter-arc  { display: none; }
  .pfooter-card { padding: 2rem 1.5rem 3rem; }
  .pfooter-section { padding-bottom: 100px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE – Secciones principales index.html
════════════════════════════════════════════════════════ */

/* ── 1ª sección: Intro sobre Óscar ── */
@media (max-width: 900px) {
  .intro-about { padding: 3.5rem 0; }
  .intro-about-left p { font-size: 0.95rem; }
}
@media (max-width: 480px) {
  .intro-about { padding: 2.5rem 0; }
}

/* ── Servicios ── */
@media (max-width: 900px) {
  .svc-alt-section { padding: 3.5rem 0; }
  .svc-alt-head { margin-bottom: 2rem; }
}
@media (max-width: 560px) {
  .svc-alt-section { padding: 2.5rem 0; }
  .svc-alt-head { margin-bottom: 1.5rem; }
}

/* ── Logos de clientes ── */
@media (max-width: 768px) {
  .clients-inner { padding: 2.5rem 1.5rem 3rem; }
  .clients-row { gap: 2rem; }
  .client-logo img { max-height: 38px; max-width: 110px; }
}
@media (max-width: 480px) {
  .clients-row { gap: 1.25rem; }
  .client-logo img { max-height: 30px; max-width: 90px; }
}

/* ── Metodologías: carrusel responsive ── */
@media (max-width: 900px) {
  .met-tl-inner { padding: 3.5rem var(--container-padding) 3rem; }
  .met-tl-head { margin-bottom: 1.5rem; }
  .met-tl-nav { margin-bottom: 1rem !important; }
  .met-tl-arrow { width: 52px; height: 52px; font-size: 1rem; }
  .met-tl-track { gap: 2rem; }
  .met-tl-item { flex: 0 0 calc(50% - 1rem); }
}
@media (max-width: 560px) {
  .met-tl-inner { padding: 2.5rem 1.25rem 2.5rem; }
  .met-tl-track { gap: 1.25rem; }
  .met-tl-item { flex: 0 0 85vw; }
  .met-tl-viewport {
    margin-right: calc(-1 * 1.25rem);
  }
}