@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* =========================================================
   EFENA · MOBILE LINE
   Colores explícitos (con !important en textos) para que el
   tema de WordPress no pueda igualar texto y fondo.
   ========================================================= */

.efena-mobile-v2 {
  --ink: #0B2230;
  --petrol: #0F5C6E;
  --flame: #7FD0E6;
  --amber: #F2B544;
  --paper: #FFFFFF;
  --mist: #EAF1F4;
  --line: #D5E1E7;
  --text: #33444E;
  --text-soft: #4A5C66;

  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);

  /* Respeta el contenedor de la plantilla; usar plantilla de ancho completo. */
  display: block !important;
  float: none !important;
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}


.efena-mobile-v2, .efena-mobile-v2 *, .efena-mobile-v2 *::before, .efena-mobile-v2 *::after { box-sizing: border-box; }
.efena-mobile-v2 p:empty { display: none; }
.efena-mobile-v2 img { max-width: 100%; height: auto; border: 0; }

.efena-mobile-v2 .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Tipografía ---------- */
.efena-mobile-v2 h1, .efena-mobile-v2 h2, .efena-mobile-v2 h3 {
  font-family: inherit;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0;
  padding: 0;
}
.efena-mobile-v2 p { margin: 0; padding: 0; }

.efena-mobile-v2 .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 20px !important;
  color: var(--petrol) !important;
}
.efena-mobile-v2 .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }

.efena-mobile-v2 section { padding: 88px 0; background: var(--paper); }
.efena-mobile-v2 section.soft { background: var(--mist); }
.efena-mobile-v2 section h2.title {
  color: var(--ink) !important;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  max-width: 24ch;
  margin-bottom: 20px;
}
.efena-mobile-v2 section p { color: var(--text) !important; font-size: 1.05rem; line-height: 1.75; }
.efena-mobile-v2 .head { max-width: 760px; margin-bottom: 52px; }

/* ---------- HERO ---------- */
.efena-mobile-v2 section.hero {
  background-color: var(--ink);
  background-image:
    radial-gradient(900px 420px at 88% -15%, rgba(127, 208, 230, 0.22), transparent 62%),
    radial-gradient(700px 360px at -5% 115%, rgba(15, 124, 138, 0.35), transparent 60%);
  padding: 104px 0 88px;
}
.efena-mobile-v2 .hero .eyebrow { color: var(--flame) !important; }
.efena-mobile-v2 .hero .hero-title {
  color: #FFFFFF !important;
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  max-width: 20ch;
  margin-bottom: 24px;
}
.efena-mobile-v2 .hero p.lead {
  color: #C9DCE4 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  max-width: 64ch;
}
.efena-mobile-v2 .kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.efena-mobile-v2 .kpi { padding: 28px 28px 0 0; }
.efena-mobile-v2 .kpi + .kpi { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.efena-mobile-v2 .kpi b {
  display: block;
  color: #FFFFFF !important;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.efena-mobile-v2 .kpi span { display: block; color: #B7CFD9 !important; font-size: 0.95rem; line-height: 1.5; }

/* ---------- CÓMO FUNCIONA ---------- */
.efena-mobile-v2 .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.efena-mobile-v2 .split p + p { margin-top: 16px; }
.efena-mobile-v2 .notice {
  margin-top: 28px;
  background: var(--mist);
  border-left: 4px solid var(--petrol);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  color: var(--text) !important;
  font-size: 0.98rem;
  line-height: 1.65;
}
.efena-mobile-v2 .notice strong { display: block; color: var(--ink) !important; font-weight: 800; margin-bottom: 4px; }
.efena-mobile-v2 figure.photo { margin: 0; }
.efena-mobile-v2 figure.photo img {
  display: block;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 20px 44px -22px rgba(11, 34, 48, 0.4);
}
.efena-mobile-v2 figure.photo figcaption {
  color: var(--text-soft) !important;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 14px;
}

/* ---------- POR QUÉ EL HIDRÓGENO ---------- */
.efena-mobile-v2 .science { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; }
.efena-mobile-v2 .compare {
  background: var(--ink);
  border-radius: 16px;
  padding: 36px 36px 32px;
}
.efena-mobile-v2 .compare h3 {
  color: #FFFFFF !important;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.efena-mobile-v2 .bar-row + .bar-row { margin-top: 26px; }
.efena-mobile-v2 .bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}
.efena-mobile-v2 .bar-label span { color: #C9DCE4 !important; font-size: 0.95rem; font-weight: 600; }
.efena-mobile-v2 .bar-label b { color: #FFFFFF !important; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.efena-mobile-v2 .bar-label b small { font-size: 0.8rem; font-weight: 600; color: #9FBBC7 !important; margin-left: 4px; }
.efena-mobile-v2 .bar-track { height: 18px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; }
.efena-mobile-v2 .bar-fill { height: 100%; border-radius: 999px; }
.efena-mobile-v2 .bar-fill.h2 { width: 100%; background: linear-gradient(90deg, #2FA7C4, #7FD0E6); }
.efena-mobile-v2 .bar-fill.fuel { width: 32.3%; background: #8FA3AE; }
.efena-mobile-v2 .ratio {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #D5E8EE !important;
  font-size: 1rem;
  line-height: 1.6;
}
.efena-mobile-v2 .ratio strong { color: var(--amber) !important; font-weight: 800; }

.efena-mobile-v2 .points { display: flex; flex-direction: column; gap: 28px; }
.efena-mobile-v2 .point { padding-left: 22px; border-left: 3px solid var(--petrol); }
.efena-mobile-v2 .point h3 {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  color: var(--ink) !important;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.efena-mobile-v2 .point p { font-size: 1rem !important; line-height: 1.7 !important; }
.efena-mobile-v2 .science-intro { max-width: 62ch; margin-bottom: 0; }
.efena-mobile-v2 .fine, .efena-mobile-v2 section p.fine {
  color: var(--text-soft) !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  margin-top: 28px !important;
  max-width: 90ch;
}

/* ---------- BENEFICIOS ---------- */
.efena-mobile-v2 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.efena-mobile-v2 .card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 28px 30px;
  box-shadow: 0 1px 2px rgba(11, 34, 48, 0.05), 0 12px 32px -18px rgba(11, 34, 48, 0.18);
}
.efena-mobile-v2 .card h3 {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  color: var(--ink) !important;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.efena-mobile-v2 .card p { font-size: 0.98rem !important; line-height: 1.7 !important; }

/* ---------- TABLA DE MODELOS ---------- */
.efena-mobile-v2 .tbl {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 12px 32px -18px rgba(11, 34, 48, 0.18);
}
.efena-mobile-v2 .tbl table { width: 100%; border-collapse: collapse; margin: 0; min-width: 620px; background: transparent; border: 0; }
.efena-mobile-v2 .tbl th {
  background: var(--ink);
  color: #FFFFFF !important;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px 24px;
  border: 0;
}
.efena-mobile-v2 .tbl td {
  color: var(--text) !important;
  background: var(--paper);
  font-size: 1rem;
  padding: 18px 24px;
  border: 0;
  border-top: 1px solid var(--line);
}
.efena-mobile-v2 .tbl tbody tr:nth-child(even) td { background: #F6F9FA; }
.efena-mobile-v2 .tbl td:first-child { color: var(--ink) !important; font-weight: 800; }
.efena-mobile-v2 .tbl td.sv { color: var(--petrol) !important; font-weight: 800; }

/* ---------- INSTALACIÓN ---------- */
.efena-mobile-v2 .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.efena-mobile-v2 .step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px 26px;
  color: var(--text) !important;
  font-size: 0.98rem;
  line-height: 1.65;
}
.efena-mobile-v2 .step strong { display: block; color: var(--ink) !important; font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.efena-mobile-v2 .step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--petrol);
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

/* ---------- KIT COMPLETO ---------- */
.efena-mobile-v2 .kit { margin-top: 64px; }
.efena-mobile-v2 .kit-fig {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 20px 44px -24px rgba(11, 34, 48, 0.35);
}
.efena-mobile-v2 .kit-fig a { display: block; }
.efena-mobile-v2 .kit-fig img { display: block; width: 100%; border-radius: 10px; }
.efena-mobile-v2 .kit-fig figcaption {
  color: var(--text-soft) !important;
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 14px 8px 4px;
}
.efena-mobile-v2 .parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.efena-mobile-v2 .part { display: flex; gap: 14px; align-items: flex-start; }
.efena-mobile-v2 .part .num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--petrol);
  color: var(--petrol) !important;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.efena-mobile-v2 .part b { display: block; color: var(--ink) !important; font-size: 1rem; font-weight: 800; line-height: 1.35; margin-bottom: 4px; }
.efena-mobile-v2 .part span { display: block; color: var(--text) !important; font-size: 0.92rem; line-height: 1.55; }

/* ---------- CTA ---------- */
.efena-mobile-v2 section.cta { background: var(--petrol); padding: 88px 0; text-align: center; }
.efena-mobile-v2 .cta h2 {
  color: #FFFFFF !important;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  max-width: 24ch;
  margin: 0 auto 16px;
}
.efena-mobile-v2 .cta p { color: #D5E8EE !important; font-size: 1.08rem; line-height: 1.7; max-width: 60ch; margin: 0 auto 36px; }
.efena-mobile-v2 .cta .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.efena-mobile-v2 a.btn, .efena-mobile-v2 a.btn:visited {
  display: inline-block;
  background: var(--amber);
  color: var(--ink) !important;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none !important;
  padding: 17px 30px;
  border-radius: 10px;
  border: 2px solid var(--amber);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.efena-mobile-v2 a.btn:hover { background: #FFFFFF; border-color: #FFFFFF; }
.efena-mobile-v2 a.btn.alt, .efena-mobile-v2 a.btn.alt:visited { background: transparent; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.7); }
.efena-mobile-v2 a.btn.alt:hover { background: #FFFFFF; color: var(--ink) !important; border-color: #FFFFFF; }
.efena-mobile-v2 a.btn.ghost, .efena-mobile-v2 a.btn.ghost:visited { background: transparent; color: #FFFFFF !important; border-color: transparent; text-decoration: underline !important; text-underline-offset: 4px; }
.efena-mobile-v2 a.btn.ghost:hover { background: transparent; color: var(--amber) !important; border-color: transparent; }
.efena-mobile-v2 a.btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .efena-mobile-v2 section { padding: 68px 0; }
  .efena-mobile-v2 section.hero { padding: 80px 0 68px; }
  .efena-mobile-v2 .split, .efena-mobile-v2 .science { grid-template-columns: 1fr; gap: 40px; }
  .efena-mobile-v2 .grid { grid-template-columns: repeat(2, 1fr); }
  .efena-mobile-v2 .steps, .efena-mobile-v2 .parts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .efena-mobile-v2 .wrap { padding: 0 20px; }
  .efena-mobile-v2 section { padding: 56px 0; }
  .efena-mobile-v2 section.hero { padding: 64px 0 52px; }
  .efena-mobile-v2 .head { margin-bottom: 36px; }
  .efena-mobile-v2 .kpis { grid-template-columns: 1fr; margin-top: 40px; }
  .efena-mobile-v2 .kpi, .efena-mobile-v2 .kpi + .kpi { padding: 22px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .efena-mobile-v2 .grid, .efena-mobile-v2 .steps, .efena-mobile-v2 .parts { grid-template-columns: 1fr; }
  .efena-mobile-v2 .compare { padding: 28px 22px 26px; }
  .efena-mobile-v2 .kit { margin-top: 44px; }
  .efena-mobile-v2 .kit-fig { padding: 8px; }
  .efena-mobile-v2 a.btn { display: block; width: 100%; text-align: center; }
  .efena-mobile-v2 .cta .actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .efena-mobile-v2 * { transition: none !important; } }

/* Ajustes de integración y accesibilidad. */
.efena-mobile-v2 { isolation: isolate; overflow-wrap: break-word; }
.efena-mobile-v2 .wrap { float: none; }
.efena-mobile-v2 .split > *, .efena-mobile-v2 .science > *, .efena-mobile-v2 .grid > * { min-width: 0; }
.efena-mobile-v2 .compare p.ratio { color: #D5E8EE !important; }
.efena-mobile-v2 .tbl:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.efena-mobile-v2 .kit-fig a:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.efena-mobile-v2 .eyebrow { flex-wrap: wrap; }