/*
Theme Name: Ojo Digital · Divi 5
Theme URI: https://ojodigital.cl
Description: Tema hijo de Divi 5 con el sistema de diseño Ojo Digital (light / dark / retro, acento cyan, Michroma + Orbitron + VT323).
Author: Ojo Digital Media Lab
Author URI: https://ojodigital.cl
Template: Divi
Version: 1.0.0
Text Domain: ojodigital-d5
*/

/* ═══════════════════════════════════════════════════════════
   1. VARIABLES · 3 TEMAS
   ═══════════════════════════════════════════════════════════ */
:root,
html[data-od-theme="dark"] {
  --font-display: 'Michroma', sans-serif;
  --font-num:     'Orbitron', sans-serif;
  --font-body:    'Orbitron', sans-serif;
  --font-retro:   'VT323', monospace;
  --ease:         cubic-bezier(.16,1,.3,1);

  --bg:      #080f1e;
  --bg2:     #0d1a2f;
  --card:    #0f1e35;
  --card2:   #142440;
  --bdr:     rgba(255,255,255,0.07);
  --bdr2:    rgba(0,180,216,0.35);
  --txt:     #e2e8f0;
  --sub:     #94a3b8;
  --mut:     #475569;
  --blue:    #00b4d8;
  --blue2:   #0096c7;
  --teal:    #48cae4;
  --amber:   #f59e0b;
  --rose:    #f43f5e;
  --sage:    #22c55e;
  --glow:    rgba(0,180,216,0.18);
  --radius:  16px;
  --radius-sm: 10px;
  --nav-h:   88px;
}

html[data-od-theme="light"] {
  --bg:      #f0f8ff;
  --bg2:     #e0f4fb;
  --card:    #ffffff;
  --card2:   #f0faff;
  --bdr:     rgba(0,0,0,0.08);
  --bdr2:    rgba(0,150,199,0.25);
  --txt:     #0c1a2e;
  --sub:     #334155;
  --mut:     #64748b;
  --blue:    #0096c7;
  --blue2:   #0077a8;
  --teal:    #0096b7;
  --amber:   #d97706;
  --rose:    #e11d48;
  --sage:    #15803d;
  --glow:    rgba(0,150,199,0.12);
}

html[data-od-theme="retro"] {
  --bg:      #000800;
  --bg2:     #000400;
  --card:    #001200;
  --card2:   #001800;
  --bdr:     rgba(0,255,65,0.14);
  --bdr2:    rgba(0,255,65,0.45);
  --txt:     #00ff41;
  --sub:     #00cc33;
  --mut:     #00882b;
  --blue:    #00ff41;
  --blue2:   #00cc33;
  --teal:    #00ff41;
  --amber:   #00ff41;
  --rose:    #00cc33;
  --sage:    #00ff41;
  --glow:    rgba(0,255,65,0.12);
  --font-body:    'VT323', monospace;
  --font-display: 'VT323', monospace;
  --font-num:     'VT323', monospace;
  --radius:  0px;
  --radius-sm: 0px;
}

/* ═══════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════ */
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

html[data-od-theme="retro"] body {
  text-shadow: 0 0 8px rgba(0,255,65,0.4);
  letter-spacing: .5px;
  cursor: crosshair;
}
html[data-od-theme="retro"] body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blue2); border-radius: 3px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--txt); }
p, li, td { font-family: var(--font-body); color: var(--sub); }
a { color: var(--blue); }

/* Divi: dejar que el sistema mande */
#page-container { background: var(--bg); padding-top: var(--nav-h); }
.et_pb_section { background-color: transparent; }
.et_pb_row { max-width: 1200px; width: 90%; }
.et_pb_text_inner p:last-of-type { padding-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   3. TOPBAR
   ═══════════════════════════════════════════════════════════ */
#od-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  height: var(--nav-h);
  background: rgba(8,15,30,0.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--bdr);
  transition: background .3s, border-color .3s;
}
html[data-od-theme="light"] #od-topbar { background: rgba(240,248,255,0.92); }
html[data-od-theme="retro"] #od-topbar { background: #000200; border-color: var(--bdr2); backdrop-filter: none; }

#od-topbar .od-wrap {
  max-width: 1200px; width: 90%; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.od-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.od-logo img { height: 60px; width: auto; max-width: 230px; object-fit: contain; }
.od-logo-fallback { font-family: var(--font-display); font-size: 14px; letter-spacing: 1px; color: var(--txt); }
.od-logo-fallback span { color: var(--blue); }
/* El logo trae texto en gris oscuro (#3e3e3e / #aeaaa9) pensado para fondo
   claro; sobre el navy del tema oscuro (o el negro del retro) ese texto casi
   desaparece. En vez de tocar el SVG, le damos una placa clara detrás solo
   en esos dos temas. */
html[data-od-theme="dark"] .od-logo img,
html[data-od-theme="retro"] .od-logo img {
  background: #f4f9ff;
  border-radius: 10px;
  padding: 6px 10px;
  box-sizing: content-box;
}

.od-nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.od-nav li { position: relative; margin: 0; }
.od-nav a {
  display: block; font-family: var(--font-body);
  font-size: 12px; font-weight: 500; letter-spacing: .3px;
  color: var(--sub); text-decoration: none;
  padding: 8px 12px; border-radius: 7px;
  transition: color .2s, background .2s;
}
.od-nav a:hover,
.od-nav .current-menu-item > a,
.od-nav .current-menu-parent > a { color: var(--txt); background: var(--bdr); }

.od-nav .sub-menu {
  position: absolute; top: 100%; left: 0;
  /* top:100% = pegado al link, sin ningún hueco de por medio. Antes había
     un salto (top:calc(100% + 10px)): al bajar el mouse en línea recta
     desde "Servicios" hacia el desplegable, el cursor cruzaba ese hueco
     sobre un elemento que no era ni el <li> ni el submenú, el hover se
     perdía a mitad de camino y el menú se cerraba antes de poder hacer
     clic en nada. Pegado no hay pixel intermedio que "se escape" del hover. */
  padding: 8px; padding-top: 12px;
  background: var(--card); border: 1px solid var(--bdr2);
  border-radius: 12px; min-width: 250px;
  list-style: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ease), visibility .15s var(--ease);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
html[data-od-theme="retro"] .od-nav .sub-menu { border-radius: 0; }
.od-nav li:hover > .sub-menu,
.od-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: all; }
.od-nav .sub-menu a { padding: 9px 12px; font-size: 12px; }

.od-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.od-theme-btns { display: flex; gap: 4px; }
.od-theme-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--bdr); background: transparent;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
  color: var(--sub); transition: all .2s;
}
.od-theme-btn:hover,
.od-theme-btn.active { background: var(--card); color: var(--txt); border-color: var(--blue2); }
html[data-od-theme="retro"] .od-theme-btn { border-radius: 0; }

.od-cta-btn {
  padding: 9px 20px; border-radius: 8px;
  background: var(--blue2); color: #fff !important;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  text-decoration: none; letter-spacing: .3px; white-space: nowrap;
  transition: all .2s;
}
.od-cta-btn:hover { background: var(--blue); transform: translateY(-1px); }
html[data-od-theme="retro"] .od-cta-btn {
  border-radius: 0; background: transparent;
  color: var(--sage) !important; border: 2px solid var(--sage);
}

.od-burger {
  display: none; background: transparent; border: 1px solid var(--bdr);
  border-radius: 8px; width: 36px; height: 36px;
  color: var(--txt); font-size: 18px; cursor: pointer; line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   4. COMPONENTES (clases od-*)
   ═══════════════════════════════════════════════════════════ */

/* Eyebrow */
.od-eyebrow .et_pb_text_inner,
.od-eyebrow .et_pb_text_inner p {
  font-family: var(--font-display) !important;
  font-size: 11px !important; letter-spacing: 3px; text-transform: uppercase;
  color: var(--blue) !important; margin: 0;
}

/* Títulos */
.od-title h1, .od-title h2, .od-title h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(26px,3.5vw,44px) !important;
  letter-spacing: -0.5px; line-height: 1.15; color: var(--txt) !important;
}
html[data-od-theme="retro"] .od-title h1,
html[data-od-theme="retro"] .od-title h2 { letter-spacing: 3px; }
.od-accent { color: var(--blue); }

.od-desc .et_pb_text_inner,
.od-desc .et_pb_text_inner p {
  font-size: 16px !important; color: var(--sub) !important; line-height: 1.7;
}
.od-center .et_pb_text_inner { margin-left: auto; margin-right: auto; max-width: 620px; }

/* Hero */
.od-hero { position: relative; overflow: hidden; }
.od-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
.od-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .025; pointer-events: none;
  background-image: linear-gradient(var(--txt) 1px, transparent 1px), linear-gradient(90deg, var(--txt) 1px, transparent 1px);
  background-size: 56px 56px;
}
.od-hero .et_pb_row { position: relative; z-index: 1; }

.od-hero-title h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(32px,4.5vw,56px) !important;
  letter-spacing: -0.5px; line-height: 1.1;
}

.od-badge .et_pb_text_inner {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glow); border: 1px solid var(--bdr2);
  border-radius: 100px; padding: 6px 16px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--blue);
}
html[data-od-theme="retro"] .od-badge .et_pb_text_inner { border-radius: 0; }

/* Tarjeta blurb */
.od-card {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 32px !important;
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
  height: 100%;
}
.od-card:hover {
  transform: translateY(-4px);
  border-color: var(--bdr2);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
html[data-od-theme="retro"] .od-card:hover { transform: none; box-shadow: 0 0 20px rgba(0,255,65,0.12); }
.od-card .et_pb_module_header {
  font-family: var(--font-display) !important;
  font-size: 16px !important; letter-spacing: .5px;
  color: var(--txt) !important;
  padding-bottom: 10px !important;
}
.od-card .et_pb_blurb_description p,
.od-card .et_pb_blurb_description { font-size: 13px !important; color: var(--sub) !important; line-height: 1.7; }
.od-card .et_pb_main_blurb_image { margin-bottom: 18px; }
.od-card .et-pb-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue2), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
}
html[data-od-theme="retro"] .od-card .et-pb-icon {
  border-radius: 0; background: transparent; border: 1px solid var(--sage); color: var(--sage);
}

/* Tarjeta numerada */
.od-inc { background: var(--card); border: 1px solid var(--bdr); border-radius: 14px; padding: 28px; transition: all .3s var(--ease); height: 100%; }
.od-inc:hover { border-color: var(--bdr2); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
html[data-od-theme="retro"] .od-inc { border-radius: 0; }
html[data-od-theme="retro"] .od-inc:hover { transform: none; }
.od-inc .od-num { font-family: var(--font-num); font-size: 28px; font-weight: 700; color: var(--blue); opacity: .5; line-height: 1; margin-bottom: 12px; display: block; }
.od-inc h3 { font-family: var(--font-display); font-size: 14px; letter-spacing: .5px; margin: 0 0 10px; color: var(--txt); }
.od-inc p { font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0; }

/* Pasos */
.od-step { text-align: center; }
.od-step .od-step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--blue2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 20px; font-weight: 700;
  color: var(--blue); margin: 0 auto 20px;
  box-shadow: 0 0 24px var(--glow);
}
html[data-od-theme="retro"] .od-step .od-step-num { border-radius: 0; border-color: var(--sage); color: var(--sage); }
.od-step h3 { font-family: var(--font-display); font-size: 14px; letter-spacing: .5px; margin: 0 0 8px; color: var(--txt); }
.od-step p { font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0; }

/* Razones */
.od-why { text-align: center; }
.od-why .od-why-num { font-family: var(--font-num); font-size: 44px; font-weight: 700; color: var(--blue); opacity: .3; line-height: 1; margin-bottom: 12px; }
.od-why h3 { font-family: var(--font-display); font-size: 15px; letter-spacing: .5px; margin: 0 0 10px; color: var(--txt); }
.od-why p { font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0; }

/* Chips */
.od-chip {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  background: var(--glow); border: 1px solid var(--bdr2);
  font-size: 11px; font-weight: 600; color: var(--blue); margin: 2px;
  font-family: var(--font-body); letter-spacing: .3px;
}
html[data-od-theme="retro"] .od-chip { border-radius: 0; }

/* Marquee */
.od-strip { border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); overflow: hidden; background: rgba(255,255,255,0.04); }
html[data-od-theme="light"] .od-strip { background: rgba(0,150,199,0.04); }
html[data-od-theme="retro"] .od-strip { background: rgba(0,255,65,0.03); border-color: var(--bdr2); }
.od-strip-label { text-align: center; font-family: var(--font-display); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--mut); margin-bottom: 28px; }
.od-strip-viewport { overflow: hidden; }
.od-strip-track { display: flex; gap: 64px; align-items: center; animation: od-scroll 28s linear infinite; width: max-content; }
.od-strip-track:hover { animation-play-state: paused; }
@keyframes od-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.od-strip-item { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--txt); white-space: nowrap; display: flex; align-items: center; gap: 10px; letter-spacing: 1.5px; }
.od-strip-item::before { content: "◆"; font-size: 9px; color: var(--blue); }

/* Estadísticas */
.od-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.od-stat .od-stat-num { font-family: var(--font-num); font-size: 34px; font-weight: 700; line-height: 1; color: var(--txt); }
.od-stat .od-stat-num span { color: var(--blue); }
.od-stat .od-stat-label { font-size: 12px; color: var(--sub); margin-top: 4px; letter-spacing: .3px; }

/* CTA */
.od-cta-box {
  background: var(--card); border: 1px solid var(--bdr2);
  border-radius: 24px; padding: 72px 48px !important;
  text-align: center;
}
html[data-od-theme="retro"] .od-cta-box { border-radius: 0; border-color: var(--sage); }
.od-cta-box h2 { font-family: var(--font-display); font-size: clamp(28px,3.5vw,48px) !important; letter-spacing: -0.5px; line-height: 1.15; }

/* Botones */
.et_pb_button.od-btn {
  padding: 13px 28px !important; border-radius: var(--radius-sm) !important;
  background: var(--blue2) !important; color: #fff !important;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 700 !important;
  border: none !important; letter-spacing: .3px;
  box-shadow: 0 4px 20px rgba(0,150,199,0.3);
  transition: all .25s var(--ease);
}
.et_pb_button.od-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,150,199,0.45); background: var(--blue) !important; }
.et_pb_button.od-btn::after { display: none !important; }

.et_pb_button.od-btn-ghost {
  padding: 13px 28px !important; border-radius: var(--radius-sm) !important;
  background: transparent !important; color: var(--txt) !important;
  border: 1px solid var(--bdr2) !important;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 600 !important;
  box-shadow: none;
}
.et_pb_button.od-btn-ghost:hover { background: var(--card) !important; border-color: var(--blue) !important; }
.et_pb_button.od-btn-ghost::after { display: none !important; }

html[data-od-theme="retro"] .et_pb_button.od-btn,
html[data-od-theme="retro"] .et_pb_button.od-btn-ghost {
  border-radius: 0 !important; background: transparent !important;
  color: var(--sage) !important; border: 2px solid var(--sage) !important;
  box-shadow: none; letter-spacing: 2px;
}

/* FAQ */
.od-faq .et_pb_toggle {
  background: transparent !important; border: none !important;
  border-bottom: 1px solid var(--bdr) !important;
  border-radius: 0 !important; padding: 0 !important;
}
.od-faq .et_pb_toggle_title {
  font-family: var(--font-display) !important; font-size: 14px !important;
  letter-spacing: .3px; color: var(--txt) !important;
  padding: 20px 30px 20px 0 !important; cursor: pointer;
}
.od-faq .et_pb_toggle_title:hover { color: var(--blue) !important; }
.od-faq .et_pb_toggle_content { padding: 0 0 20px !important; }
.od-faq .et_pb_toggle_content p { font-size: 14px !important; color: var(--sub) !important; line-height: 1.7; }
.od-faq .et_pb_toggle_open { background: transparent !important; }

/* Formulario */
.od-form .et_pb_contact_field { padding: 0 0 20px !important; background: transparent !important; }
.od-form .et_pb_contact_field_options_title,
.od-form label {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sub); margin-bottom: 8px; display: block;
}
.od-form .et_pb_contact_field .input,
.od-form input[type=text],
.od-form input[type=email],
.od-form select,
.od-form textarea {
  width: 100%; padding: 12px 16px !important;
  background: var(--card) !important; border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important; font-size: 13px !important;
  color: var(--txt) !important; outline: none;
  transition: border-color .2s;
}
.od-form .input:focus { border-color: var(--blue2) !important; }
.od-form textarea { min-height: 140px; resize: vertical; }
.od-form ::placeholder { color: var(--mut); opacity: 1; }
.od-form .et_pb_contact_submit { margin-top: 8px; }

/* Blog */
.od-blog .et_pb_post {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--radius); overflow: hidden; padding: 0 !important;
  transition: all .3s var(--ease); margin-bottom: 28px;
}
.od-blog .et_pb_post:hover { transform: translateY(-4px); border-color: var(--bdr2); box-shadow: 0 16px 48px rgba(0,0,0,0.3); }
html[data-od-theme="retro"] .od-blog .et_pb_post { border-radius: 0; }
html[data-od-theme="retro"] .od-blog .et_pb_post:hover { transform: none; }
.od-blog .entry-featured-image-url { margin: 0; }
.od-blog .entry-title { font-family: var(--font-display); font-size: 15px !important; letter-spacing: .3px; line-height: 1.4; padding: 24px 24px 10px; margin: 0; }
.od-blog .entry-title a { color: var(--txt); text-decoration: none; }
.od-blog .post-content { padding: 0 24px 20px; font-size: 13px; color: var(--sub); }
.od-blog .post-meta { padding: 12px 24px; font-family: var(--font-display); font-size: 11px; color: var(--mut); border-top: 1px solid var(--bdr); margin: 0; }

/* ═══════════════════════════════════════════════════════════
   5. FOOTER
   ═══════════════════════════════════════════════════════════ */
#od-footer { background: var(--bg2); border-top: 1px solid var(--bdr); padding: 60px 0 0; }
#od-footer .od-wrap { max-width: 1200px; width: 90%; margin: 0 auto; }
.od-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.od-footer-brand img { height: 56px; width: auto; max-width: 220px; margin-bottom: 16px; object-fit: contain; }
html[data-od-theme="dark"] .od-footer-brand img,
html[data-od-theme="retro"] .od-footer-brand img {
  background: #f4f9ff; border-radius: 10px; padding: 6px 10px; box-sizing: content-box;
}
.od-footer-brand p { font-size: 13px; color: var(--sub); line-height: 1.7; max-width: 280px; margin: 0; }
.od-footer-col h4 { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--txt); margin: 0 0 16px; }
.od-footer-col ul { list-style: none; margin: 0; padding: 0; }
.od-footer-col li { margin-bottom: 10px; }
.od-footer-col a { font-size: 13px; color: var(--sub); text-decoration: none; transition: color .2s; }
.od-footer-col a:hover { color: var(--txt); }
.od-footer-bottom {
  border-top: 1px solid var(--bdr); padding: 28px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--mut); flex-wrap: wrap; gap: 12px;
}
.od-footer-bottom a { color: var(--mut); text-decoration: none; }
.od-footer-bottom a:hover { color: var(--sub); }

#od-bottom-bar {
  background: linear-gradient(90deg,#040c1a 2%,#0d2040 12%,#0d2040 88%,#040c1a 98%);
  border-top: 1px solid rgba(0,180,216,0.3);
  min-height: 36px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.45); gap: 12px; padding: 8px 16px; text-align: center; flex-wrap: wrap;
}
html[data-od-theme="light"] #od-bottom-bar { background: linear-gradient(90deg,#0a3050 2%,#0077a8 50%,#0a3050 98%); color: rgba(255,255,255,0.75); }
html[data-od-theme="retro"] #od-bottom-bar { background: #000200; border-top-color: var(--bdr2); color: var(--mut); letter-spacing: 2px; }
.od-bb-sep { opacity: .35; }

/* ═══════════════════════════════════════════════════════════
   6. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .od-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  :root { --nav-h: 74px; }
  .od-logo img { height: 46px; }
  .od-nav {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--bdr2);
    padding: 0 12px; max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease), padding .3s var(--ease);
  }
  .od-nav.open { max-height: 80vh; overflow-y: auto; padding: 12px; }
  .od-nav .sub-menu {
    position: static; opacity: 1; pointer-events: all; transform: none;
    box-shadow: none; border: none; padding: 0 0 0 14px; min-width: 0; background: transparent;
  }
  .od-burger { display: block; }
  .od-cta-btn { display: none; }
}
@media (max-width: 768px) {
  .od-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .od-cta-box { padding: 40px 24px !important; }
  .od-stats { gap: 20px; }
  .od-footer-bottom { justify-content: center; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════
   7. COMPONENTES ADICIONALES
   ═══════════════════════════════════════════════════════════ */

/* Botones en línea dentro del hero y del CTA */
.od-hero .et_pb_button_module_wrapper,
.od-cta-box .et_pb_button_module_wrapper {
  display: inline-block;
  margin: 0 12px 12px 0;
}
.od-cta-box .et_pb_button_module_wrapper { margin: 8px 6px 0; }
.od-cta-box .et_pb_module { text-align: center; }

/* Tarjeta resumen del hero de servicio */
.od-svc-card {
  background: var(--card);
  border: 1px solid var(--bdr2);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}
.od-svc-card h3 {
  font-family: var(--font-display); font-size: 16px; letter-spacing: .5px;
  color: var(--txt); margin: 0 0 18px;
}
.od-svc-card ul { list-style: none; margin: 0; padding: 0; }
.od-svc-card li {
  font-size: 13px; color: var(--sub); line-height: 1.7;
  padding: 9px 0; border-bottom: 1px solid var(--bdr);
}
.od-svc-card li:last-child { border-bottom: none; }

/* Mockup del hero de inicio */
.od-mockup {
  background: var(--card2);
  border: 1px solid var(--bdr2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  animation: od-float 6s ease-in-out infinite;
}
@keyframes od-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
html[data-od-theme="retro"] .od-mockup { animation: none; }
.od-mockup-bar {
  height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: linear-gradient(90deg,#04091a 2%,#0d1f3a 12%,#0d1f3a 88%,#04091a 98%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.od-mockup-bar .d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.od-mockup-bar .d.r { background: #f43f5e; }
.od-mockup-bar .d.a { background: #f59e0b; }
.od-mockup-bar .d.g { background: #22c55e; }
.od-mockup-tc { margin-left: 10px; font-family: var(--font-display); font-size: 9px; color: rgba(255,255,255,0.45); }
.od-mockup-tc b { color: #00b4d8; }
.od-mockup-body { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.od-m-chip {
  background: var(--glow); border: 1px solid var(--bdr2);
  border-radius: 8px; padding: 14px 12px;
  font-family: var(--font-display); font-size: 9px; color: var(--txt);
  display: flex; align-items: center; gap: 8px; line-height: 1.4;
}
html[data-od-theme="retro"] .od-m-chip { border-radius: 0; }
.od-m-status {
  grid-column: 1 / -1;
  background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.22);
  border-radius: 8px; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 10px; color: var(--sub);
}
.od-m-status .ok { color: #22c55e; font-weight: 700; }
.od-mockup-footer {
  padding: 9px 16px; background: rgba(0,0,0,0.28);
  border-top: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-display); font-size: 8px;
  color: rgba(255,255,255,0.28); letter-spacing: 1.5px;
}

/* Datos de contacto */
.od-contact-info h3 {
  font-family: var(--font-display); font-size: 16px; letter-spacing: .5px;
  color: var(--txt); margin: 0 0 18px;
}
.od-contact-info ul { list-style: none; margin: 0; padding: 0; }
.od-contact-info li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--bdr);
  font-size: 14px; color: var(--txt);
}
.od-contact-info li span {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mut); min-width: 96px; flex-shrink: 0;
}
.od-contact-info li a { color: var(--blue); text-decoration: none; }
.od-contact-info li a:hover { text-decoration: underline; }
.od-contact-info p { font-size: 14px; color: var(--sub); line-height: 1.8; margin: 0; }

/* Texto legal */
.od-legal .et_pb_text_inner h3 {
  font-family: var(--font-display); font-size: 15px; letter-spacing: .5px;
  color: var(--txt); margin: 32px 0 12px;
}
.od-legal .et_pb_text_inner p { font-size: 15px; color: var(--sub); line-height: 1.8; margin-bottom: 14px; }

/* Fila de contadores (Number Counter nativo) en Inicio.
   OJO: el tamaño del número (72px) viene del propio default de Divi
   (module-default-printed-style-attributes) y ese <p> está vacío hasta que
   el JS anima el conteo al hacer scroll. Achicar el font-size/line-height
   por CSS colapsa la caja de línea del párrafo a 0px mientras está vacío,
   y con altura 0 la librería de scroll-trigger nunca dispara la animación
   (el número se queda "en blanco" para siempre). Por eso aquí solo se toca
   tipografía/color, nunca el tamaño — el tamaño real se ajusta desde el
   propio Number Counter en el Visual Builder (pestaña Diseño → Número). */
.od-stats-row .et_pb_number_counter { margin: 0; text-align: left; }
.od-stats-row .et_pb_number_counter .percent { text-align: left; }
.od-stats-row .et_pb_number_counter .percent p {
  font-family: var(--font-num) !important; font-weight: 700; color: var(--txt); margin: 0;
}
.od-stats-row .et_pb_number_counter .percent-sign { display: none; }
.od-stats-row .et_pb_number_counter h3.title {
  font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 400 !important;
  color: var(--sub); letter-spacing: .3px; margin-top: 4px; text-align: left;
}
@media (max-width: 767px) { .od-stats-row .et_pb_column { margin-bottom: 20px; } }

/* Igualar altura de tarjetas en una fila */
.et_pb_row .et_pb_column .et_pb_code,
.et_pb_row .et_pb_column .et_pb_code_inner { height: 100%; }
.et_pb_column .od-inc, .et_pb_column .od-card { height: 100%; }

/* La franja de servicios ocupa todo el ancho */
.od-strip .et_pb_row { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }

/* Blurb: que el icono y el texto respiren igual que en el diseño original */
.od-card .et_pb_blurb_container { text-align: left; }
.od-card.et_pb_blurb .et_pb_module_header a { color: var(--txt); text-decoration: none; }
.od-card.et_pb_blurb .et_pb_module_header a:hover { color: var(--blue); }