.elementor-15472 .elementor-element.elementor-element-4826168b{--display:flex;}.elementor-15472 .elementor-element.elementor-element-9d35127{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15472 .elementor-element.elementor-element-50073a8f{--display:flex;}.elementor-15472 .elementor-element.elementor-element-23ef6f5e{--display:flex;}.elementor-15472 .elementor-element.elementor-element-35351fb7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-15472 .elementor-element.elementor-element-9d35127{--width:100%;}}/* Start custom CSS *//* =========================
   HIDRUROS VOLÁTILES – CSS GLOBAL BLINDADO
   Funciona si el contenido está dentro de:
   - #app  (tu wrapper original)
   - .hv-root (wrapper recomendado por widget)
   Evita color-mix() para no depender de soporte
   ========================= */

/* ✅ Scope doble: #app O .hv-root */
#app, .hv-root{
  --hv-bg: #fef9e7;
  --hv-surface: #ffffff;
  --hv-text: #1a4d2e;
  --hv-primary: #2d6a4f;
  --hv-secondary: #52b788;

  --hv-border: rgba(0,0,0,.10);
  --hv-radius-xl: 22px;
  --hv-radius-lg: 16px;

  --hv-shadow-sm: 0 10px 24px rgba(0,0,0,.08);
  --hv-shadow-md: 0 18px 56px rgba(0,0,0,.12);

  --hv-content-max: 100%;
  --hv-content-pad: clamp(12px, 2.5vw, 28px);

  background: var(--hv-bg);
  color: var(--hv-text);
}

/* Box sizing */
#app, #app *, .hv-root, .hv-root *{ box-sizing: border-box; }

/* ✅ Reset mínimo (Elementor a veces mete estilos raros) */
#app h1, #app h2, #app h3,
.hv-root h1, .hv-root h2, .hv-root h3{
  margin: 0 0 .6rem 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
#app p, #app li,
.hv-root p, .hv-root li{
  margin: 0 0 .8rem 0;
  line-height: 1.7;
}

#app .formula, .hv-root .formula{
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
}

/* ✅ Quitar capado Tailwind (si existe en tu HTML completo) */
#app article.max-w-4xl{
  max-width: var(--hv-content-max) !important;
  width: 100% !important;
}
#app main{
  padding-left: var(--hv-content-pad) !important;
  padding-right: var(--hv-content-pad) !important;
}

/* =========================
   BLOQUE A – HERO
   ========================= */
#app .hv-hero, .hv-root .hv-hero{
  position: relative;
  border-radius: var(--hv-radius-xl);
  overflow: hidden;
  border: 1px solid var(--hv-border);
  box-shadow: var(--hv-shadow-md);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.12));
  margin-bottom: 3rem;
}
#app .hv-hero__bg, .hv-root .hv-hero__bg{
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(900px 380px at 12% 5%, rgba(82,183,136,.35), transparent 62%),
    radial-gradient(820px 340px at 92% 12%, rgba(45,106,79,.28), transparent 60%),
    radial-gradient(520px 300px at 55% 100%, rgba(0,0,0,.10), transparent 60%);
  pointer-events: none;
}
#app .hv-hero__inner, .hv-root .hv-hero__inner{
  position: relative;
  padding: clamp(18px, 3vw, 34px);
}
#app .hv-hero__badge, .hv-root .hv-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--hv-border);
  box-shadow: var(--hv-shadow-sm);
  font-weight: 900;
}
#app .hv-dot, .hv-root .hv-dot{
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--hv-primary);
  box-shadow: 0 0 0 6px rgba(45,106,79,.18);
}
#app .hv-hero__title, .hv-root .hv-hero__title{
  margin-top: 1rem;
  text-align: center;
  font-weight: 950;
  line-height: 1.02;
  font-size: clamp(34px, 4vw, 56px);
}
#app .hv-hero__subtitle, .hv-root .hv-hero__subtitle{
  margin: .8rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: clamp(16px, 1.6vw, 20px);
  opacity: .92;
}
#app .hv-hero__card, .hv-root .hv-hero__card{
  margin-top: 1.35rem;
  background: var(--hv-surface);
  border-radius: var(--hv-radius-xl);
  border: 1px solid var(--hv-border);
  box-shadow: var(--hv-shadow-sm);
  padding: 1rem;
}
#app .hv-hero__formulaWrap, .hv-root .hv-hero__formulaWrap{
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: var(--hv-radius-lg);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  border: 1px dashed rgba(82,183,136,.55);
}
#app .hv-hero__img, .hv-root .hv-hero__img{
  max-width: 560px;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}
#app .hv-hero__micro, .hv-root .hv-hero__micro{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}
@media (min-width: 700px){
  #app .hv-hero__micro, .hv-root .hv-hero__micro{ grid-template-columns: 1fr 1fr; }
}
#app .hv-pill, .hv-root .hv-pill{
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .75rem .9rem;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--hv-border);
}
#app .hv-pill__k, .hv-root .hv-pill__k{ opacity: .75; font-weight: 900; }
#app .hv-pill__v, .hv-root .hv-pill__v{ font-weight: 950; text-align: right; }

#app .hv-hero__cta, .hv-root .hv-hero__cta{
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}
#app .hv-btn, .hv-root .hv-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.05rem;
  border-radius: 14px;
  font-weight: 950;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, filter .15s ease;
}
#app .hv-btn:hover, .hv-root .hv-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
#app .hv-btn--primary, .hv-root .hv-btn--primary{ background: var(--hv-primary); color: #fff; }
#app .hv-btn--ghost, .hv-root .hv-btn--ghost{
  background: rgba(255,255,255,.82);
  color: var(--hv-text);
  border-color: var(--hv-border);
}

/* =========================
   BLOQUE B – NOMENCLATURA
   ========================= */
#app .hv-section, .hv-root .hv-section{
  margin: 0 0 3.5rem 0;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--hv-radius-xl);
  background: var(--hv-surface);
  border: 1px solid var(--hv-border);
  box-shadow: var(--hv-shadow-sm);
}

#app .hv-section__kicker, .hv-root .hv-section__kicker{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.7rem;
}

#app .hv-chip, .hv-root .hv-chip{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius: 999px;
  font-weight: 950;
  background: rgba(45,106,79,.14);
  border: 1px solid rgba(45,106,79,.18);
}
#app .hv-chip--soft, .hv-root .hv-chip--soft{
  background: rgba(82,183,136,.16);
  border-color: rgba(82,183,136,.22);
}

#app .hv-grid2, .hv-root .hv-grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin-top: 1.1rem;
  margin-bottom: 1.2rem;
}
@media(min-width: 860px){
  #app .hv-grid2, .hv-root .hv-grid2{ grid-template-columns: 1fr 1fr; }
}

#app .hv-card, .hv-root .hv-card{
  border-radius: 18px;
  border: 1px solid var(--hv-border);
  background: linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,0));
  padding: 1rem 1.05rem;
}

#app .hv-mini, .hv-root .hv-mini{
  margin-top:.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;
  align-items:baseline;
}

#app .hv-tableWrap, .hv-root .hv-tableWrap{
  border-radius: 18px;
  border: 1px solid var(--hv-border);
  overflow: hidden;
}
#app .hv-table, .hv-root .hv-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
#app .hv-caption, .hv-root .hv-caption{
  text-align: left;
  padding: .9rem 1rem;
  font-weight: 950;
  background: rgba(82,183,136,.14);
  border-bottom: 1px solid var(--hv-border);
}
#app .hv-table thead th, .hv-root .hv-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: .85rem 1rem;
  font-weight: 950;
  color: #fff;
  background: var(--hv-secondary);
}
#app .hv-table tbody td, .hv-root .hv-table tbody td{
  padding: .85rem 1rem;
  border-top: 1px solid var(--hv-border);
  vertical-align: top;
}
#app .hv-table tbody tr:nth-child(even), .hv-root .hv-table tbody tr:nth-child(even){
  background: rgba(0,0,0,.02);
}

/* Responsive cards */
@media(max-width: 720px){
  #app .hv-table thead, .hv-root .hv-table thead{ display:none; }
  #app .hv-table, #app .hv-table tbody, #app .hv-table tr, #app .hv-table td,
  .hv-root .hv-table, .hv-root .hv-table tbody, .hv-root .hv-table tr, .hv-root .hv-table td{
    display:block; width:100%;
  }
  #app .hv-table tbody tr, .hv-root .hv-table tbody tr{
    padding: .7rem .8rem;
    border-top: 1px solid var(--hv-border);
  }
  #app .hv-table tbody td, .hv-root .hv-table tbody td{
    border: none;
    padding: .45rem 0;
  }
  #app .hv-table tbody td::before, .hv-root .hv-table tbody td::before{
    content: attr(data-label);
    display:block;
    font-weight: 950;
    opacity: .7;
    margin-bottom: .15rem;
  }
}

#app .hv-note, .hv-root .hv-note{
  margin-top: 1.2rem;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(45,106,79,.18);
  background: rgba(45,106,79,.10);
}

/* Base: inputs/validación */
#app input[type="text"], .hv-root input[type="text"]{
  border-radius: 12px;
  border: 2px solid rgba(82,183,136,.45);
  background: var(--hv-surface);
  color: var(--hv-text);
  outline: none;
}
#app input[type="text"]:focus, .hv-root input[type="text"]:focus{
  border-color: rgba(45,106,79,.75);
  box-shadow: 0 0 0 5px rgba(45,106,79,.18);
}

#app .correct-answer, .hv-root .correct-answer{ background-color: #d1fae5 !important; border-color: #10b981 !important; }
#app .incorrect-answer, .hv-root .incorrect-answer{ background-color: #fee2e2 !important; border-color: #ef4444 !important; }

#app img, .hv-root img{ border-radius: 14px; }
#app strong, .hv-root strong{ font-weight: 950; }

/* =========================
   BLOQUE D – FAQ (mismo diseño aprobado)
   Scope: #app y .hv-root
   ========================= */

#app .faq-selectividad,
.hv-root .faq-selectividad{
  max-width: 980px;
  margin: 0 auto;
  padding: 8px;
}

#app .faq-selectividad .faq-title,
.hv-root .faq-selectividad .faq-title{
  text-align: center;
  font-size: 1.75rem;
  font-weight: 950;
  margin: 0 0 1rem 0;
  color: var(--hv-text);
  opacity: 1 !important;
}

#app .faq-selectividad details,
.hv-root .faq-selectividad details{
  background: var(--hv-surface);
  border: 1px solid var(--hv-border);
  border-radius: 16px;
  margin: 10px 0;
  padding: 0 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

#app .faq-selectividad details[open],
.hv-root .faq-selectividad details[open]{
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

#app .faq-selectividad summary,
.hv-root .faq-selectividad summary{
  cursor: pointer;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.5;
  padding: 18px 0;
  list-style: none;
  position: relative;
  color: var(--hv-text);
  outline: none;
}

#app .faq-selectividad summary::-webkit-details-marker,
.hv-root .faq-selectividad summary::-webkit-details-marker{
  display: none;
}

/* Icono + */
#app .faq-selectividad summary::after,
.hv-root .faq-selectividad summary::after{
  content: '+';
  position: absolute;
  right: 0;
  top: 18px;
  font-size: 1.35rem;
  color: var(--hv-secondary);
  transition: transform .25s ease, color .25s ease;
}

/* Al abrir: + rota (x) */
#app .faq-selectividad details[open] summary::after,
.hv-root .faq-selectividad details[open] summary::after{
  transform: rotate(45deg);
  color: var(--hv-primary);
}

#app .faq-selectividad .answer,
.hv-root .faq-selectividad .answer{
  padding: 0 0 18px 0;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--hv-text);
  opacity: .95;
}

/* Links dentro de answer */
#app .faq-selectividad .answer a,
.hv-root .faq-selectividad .answer a{
  color: var(--hv-primary);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Listas dentro de answers */
#app .faq-selectividad .answer ul,
.hv-root .faq-selectividad .answer ul{
  margin: .6rem 0 0 1.1rem;
  padding: 0;
}
#app .faq-selectividad .answer li,
.hv-root .faq-selectividad .answer li{
  margin: .35rem 0;
}


/* =========================
   PARCHE PRO – Tabla HV en móvil (tarjetas cómodas + 2 columnas)
   Pegar AL FINAL del CSS global
   ========================= */

/* Evitar que textos largos rompan el layout */
#app .hv-table td, #app .hv-table th,
.hv-root .hv-table td, .hv-root .hv-table th{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* MÓVIL: convertir filas en tarjetas “pro” */
@media (max-width: 720px){

  /* ocultar cabecera de tabla en móvil */
  #app .hv-table thead,
  .hv-root .hv-table thead{ display: none !important; }

  /* que el wrapper no meta cosas raras */
  #app .hv-tableWrap,
  .hv-root .hv-tableWrap{
    border: none;
    background: transparent;
    overflow: visible;
  }

  /* tabla en bloque */
  #app .hv-table, #app .hv-table tbody,
  .hv-root .hv-table, .hv-root .hv-table tbody{
    display: block !important;
    width: 100% !important;
  }

  /* cada fila = tarjeta con GRID */
  #app .hv-table tbody tr,
  .hv-root .hv-table tbody tr{
    display: grid !important;
    grid-template-columns: 1fr;                 /* por defecto 1 columna */
    grid-template-areas:
      "f"
      "p"
      "s";
    gap: .55rem;
    margin: .85rem 0;
    padding: .95rem 1rem;
    background: var(--hv-surface);
    border: 1px solid var(--hv-border);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }

  /* asignar áreas */
  #app .hv-table tbody td:nth-child(1),
  .hv-root .hv-table tbody td:nth-child(1){ grid-area: f; }

  #app .hv-table tbody td:nth-child(2),
  .hv-root .hv-table tbody td:nth-child(2){ grid-area: p; }

  #app .hv-table tbody td:nth-child(3),
  .hv-root .hv-table tbody td:nth-child(3){ grid-area: s; }

  /* celdas */
  #app .hv-table tbody td,
  .hv-root .hv-table tbody td{
    display: block !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* fórmula como “badge” grande */
  #app .hv-table tbody td.formula,
  .hv-root .hv-table tbody td.formula{
    font-size: 1.2rem;
    font-weight: 950;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: .4rem .65rem !important;
    border-radius: 12px;
    background: rgba(82,183,136,.14);
    border: 1px solid rgba(82,183,136,.25);
  }

  /* etiqueta encima de cada campo (Prefijos / Sustitución) */
  #app .hv-table tbody td[data-label]::before,
  .hv-root .hv-table tbody td[data-label]::before{
    content: attr(data-label);
    display: block;
    font-weight: 950;
    opacity: .75;
    margin-bottom: .2rem;
    font-size: .92rem;
  }

  /* “Prefijos” y “Sustitución” estilo tarjeta interior */
  #app .hv-table tbody td:nth-child(2),
  #app .hv-table tbody td:nth-child(3),
  .hv-root .hv-table tbody td:nth-child(2),
  .hv-root .hv-table tbody td:nth-child(3){
    padding: .65rem .75rem !important;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08) !important;
    background: rgba(0,0,0,.02);
  }

  /* si el móvil tiene un poco más de ancho: 2 columnas (prefijos / sustitución) */
  @media (min-width: 480px){
    #app .hv-table tbody tr,
    .hv-root .hv-table tbody tr{
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "f f"
        "p s";
      column-gap: .75rem;
    }
  }
}/* End custom CSS */