/* ==========================================================================
   Recuadrito — comparativa de planes
   Sistema de diseño Fable (Formatos Electrónicos)
   Sin dependencias: no jQuery, no require.js, no Muse, no FontAwesome.
   Los acordeones usan <details>/<summary> nativo, así que funcionan sin JS.
   ========================================================================== */

:root{
  --fx-accent:#0ea6e9;
  --fx-accent-dark:#0b84bd;
  /* Verde de la paleta (el mismo de la marca, #1fab55) oscurecido lo justo
     para alcanzar el 3:1 de contraste que piden los elementos gráficos */
  --fx-green:#1a9a4d;
  /* Naranja tomado del propio Recuadrito original (#F15A24), oscurecido
     para pasar el 3:1 sobre blanco y sobre el fondo alterno */
  --fx-orange:#dd5111;
  /* Verde de WhatsApp del sistema Fable */
  --fx-wa:#1fab55;
  --fx-wa-dark:#188a44;
  --fx-ink:#1a3365;
  --fx-text:#2c3b52;
  --fx-muted:#5b7089;
  --fx-faint:#8a9bb0;
  --fx-border:#d8e3ee;
  --fx-border-soft:#e9f1f7;
  --fx-bg:#ffffff;
  --fx-bg-alt:#f2f8fc;
  --fx-bg-hl:#eef8fd;
  --fx-radius:10px;
  --fx-radius-sm:8px;
  --fx-shadow:0 1px 2px rgba(20,44,80,.06);
  --fx-font:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

body{
  margin:0;
  padding:0;
  background:var(--fx-bg);
  color:var(--fx-text);
  font-family:var(--fx-font);
  font-size:16px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block;border:0;}

.fx-wrap{
  max-width:1140px;
  margin:0 auto;
  padding:32px 20px 44px;
}

/* ---------- Titular + videos ---------- */
/* En escritorio el titular y los videos comparten franja: apilados sumaban
   casi 400px antes de que apareciera la primera fila de la comparativa */
.fx-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:36px;
  margin-bottom:28px;
}

.fx-head{text-align:left;}
.fx-head h1{
  margin:0;
  font-size:clamp(1.45rem,2.4vw,1.95rem);
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:700;
  /* Reparte las palabras para que las líneas queden de largo parecido en
     lugar de dejar una última línea corta y desbalanceada */
  text-wrap:balance;
  /* Azul de acento de la marca, no la tinta navy: el titular es el elemento
     que debe tirar del ojo al abrir la página */
  color:var(--fx-accent);
}

/* ---------- Videos ---------- */
.fx-videos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  max-width:520px;
  margin:0;
}
/* Se limita el ancho para que la miniatura no crezca desmedidamente
   cuando la rejilla se ensancha */
.fx-video{margin:0;max-width:260px;width:100%;justify-self:center;}
.fx-video a{display:block;text-decoration:none;color:inherit;}
.fx-video-img{position:relative;display:block;}
/* Imágenes limpias, sin marco ni sombra (regla del sistema Fable) */
.fx-video-img img{width:100%;border-radius:var(--fx-radius-sm);}
.fx-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.fx-play img{
  width:46px;height:46px;
  opacity:.9;
  transition:transform .15s ease,opacity .15s ease;
}
.fx-video a:hover .fx-play img,
.fx-video a:focus-visible .fx-play img{transform:scale(1.08);opacity:1;}
.fx-video figcaption{
  margin-top:8px;
  text-align:center;
  font-size:.85rem;
  font-style:italic;
  color:var(--fx-muted);
}
.fx-video a:hover figcaption{color:var(--fx-accent-dark);}

/* ==========================================================================
   Comparativa
   ========================================================================== */
.fx-cmp{
  border:1px solid var(--fx-border);
  border-radius:var(--fx-radius);
  box-shadow:var(--fx-shadow);
  overflow:hidden;
  background:var(--fx-bg);
}

/* Rejilla de 4 columnas compartida por cabecera y filas */
.fx-cmp-head,
.fx-row{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1fr));
}

/* ---------- Cabecera ---------- */
.fx-cmp-head{
  border-bottom:1px solid var(--fx-border);
  background:var(--fx-bg);
}
.fx-col-feat,
.fx-col-plan{padding:15px 16px;}
.fx-col-feat{
  font-weight:700;
  color:var(--fx-ink);
  font-size:1rem;
  display:flex;align-items:flex-end;
}
/* Las tres columnas de plan llevan fondo propio y borde de acento inferior
   para que se lean como cabeceras y no como texto suelto */
.fx-col-plan{
  text-align:center;
  font-size:.9rem;
  line-height:1.35;
  font-weight:700;
  color:var(--fx-ink);
  background:var(--fx-bg-hl);
  box-shadow:inset 0 -3px 0 var(--fx-accent);
  display:flex;align-items:flex-end;justify-content:center;
  border-left:1px solid var(--fx-border);
}
/* La columna más completa se marca un punto más */
.fx-col-plan:last-child{
  color:var(--fx-accent-dark);
  box-shadow:inset 0 -3px 0 var(--fx-accent-dark);
}

/* ---------- Filas ---------- */
.fx-row{border-top:1px solid var(--fx-border-soft);}
.fx-row:first-of-type{border-top:0;}
.fx-row:nth-of-type(odd){background:var(--fx-bg-alt);}
.fx-row-hl{background:var(--fx-bg-hl) !important;}

.fx-feat{padding:14px 16px;min-width:0;}
.fx-feat-txt{
  margin:0;
  font-size:.94rem;
  line-height:1.45;
  color:var(--fx-text);
}
.fx-feat-txt b{color:var(--fx-accent-dark);font-weight:600;}
.fx-feat-sub{
  margin:4px 0 0;
  font-size:.82rem;
  font-style:italic;
  color:var(--fx-muted);
}
.fx-strong{font-weight:700;color:var(--fx-ink);}

/* ---------- Celdas de marca ---------- */
.fx-cell{
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  border-left:1px solid var(--fx-border-soft);
  min-width:0;
}

/* Marcas dibujadas con CSS: sin FontAwesome, escalan y se colorean solas */
.fx-yes,.fx-no{
  position:relative;
  display:block;
  width:22px;height:22px;
  flex:none;
}
.fx-yes::before,.fx-yes::after,
.fx-no::before,.fx-no::after{
  content:"";position:absolute;border-radius:2px;
}
/* Palomita */
.fx-yes::before{
  width:7px;height:2.5px;background:var(--fx-green);
  left:3px;top:12px;transform:rotate(45deg);transform-origin:left center;
}
.fx-yes::after{
  width:14px;height:2.5px;background:var(--fx-green);
  left:7px;top:15px;transform:rotate(-52deg);transform-origin:left center;
}
/* Cruz */
.fx-no::before,.fx-no::after{
  width:16px;height:2.5px;background:var(--fx-orange);
  left:3px;top:10px;
}
.fx-no::before{transform:rotate(45deg);}
.fx-no::after{transform:rotate(-45deg);}

.fx-note{
  font-size:.76rem;
  font-style:italic;
  color:var(--fx-muted);
  line-height:1.3;
}

/* ---------- Fila de precios ---------- */
.fx-row-precios{background:var(--fx-bg) !important;border-top:1px solid var(--fx-border);}
.fx-precios-lbl{
  margin:0;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--fx-muted);
}
.fx-cell-precio{justify-content:flex-start;gap:10px;}
.fx-precio{
  margin:0;
  font-size:.9rem;
  font-weight:700;
  color:var(--fx-ink);
  line-height:1.35;
}

/* ==========================================================================
   Acordeón «+ INFORMACIÓN»  (details/summary nativo)
   ========================================================================== */
.fx-info{margin-top:7px;}
.fx-info summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  list-style:none;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fx-accent-dark);
  padding:2px 0;
  border-radius:var(--fx-radius-sm);
}
.fx-info summary::-webkit-details-marker{display:none;}
.fx-info summary::before{
  content:"+";
  display:inline-block;
  width:16px;height:16px;
  line-height:15px;
  text-align:center;
  font-size:.9rem;
  border:1px solid currentColor;
  border-radius:4px;
}
.fx-info[open] summary::before{content:"–";}
.fx-info summary:hover{color:var(--fx-accent);}
.fx-info summary:focus-visible{
  outline:2px solid var(--fx-accent);
  outline-offset:2px;
}

.fx-info-body{
  margin-top:10px;
  padding:16px 18px;
  background:var(--fx-bg);
  border:1px solid var(--fx-border);
  border-radius:var(--fx-radius);
  font-size:.88rem;
  line-height:1.6;
  color:var(--fx-text);
  text-align:left;
}
.fx-row:nth-of-type(odd) .fx-info-body{background:#fff;}
.fx-info-body p{margin:0 0 10px;}
.fx-info-body p:last-child{margin-bottom:0;}
.fx-info-body b{color:var(--fx-ink);font-weight:700;}
.fx-em{font-style:italic;color:var(--fx-muted);}

/* ==========================================================================
   Consideraciones importantes (nota informativa)
   ========================================================================== */
.fx-nota{
  margin:22px 0 0;
  padding:14px 20px 16px;
  background:var(--fx-bg-alt);
  border:1px solid var(--fx-border);
  border-radius:var(--fx-radius);
  text-align:center;
}
.fx-nota-titulo{
  margin:0 0 8px;
  font-size:.92rem;
  line-height:1.3;
  font-weight:700;
  color:var(--fx-ink);
}
.fx-nota-lista{
  margin:0;
  padding:0;
  list-style:none;
}
.fx-nota-lista > li + li{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--fx-border-soft);
}
/* El rótulo del punto va en la misma línea que el texto, no encima: como
   sobra una sola consideración, un renglón propio solo añadía alto */
.fx-nota-lista b{color:var(--fx-ink);font-weight:700;}
.fx-nota-lista p{
  /* Se limita la medida para que en pantallas anchas la línea no se
     estire más allá de lo cómodo de leer */
  max-width:104ch;
  margin:0 auto 5px;
  font-size:.86rem;
  line-height:1.5;
  color:var(--fx-text);
}
.fx-nota-lista p:last-child{margin-bottom:0;}

.fx-link{
  color:var(--fx-accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.fx-link:hover{color:var(--fx-accent);}
.fx-link:focus-visible{outline:2px solid var(--fx-accent);outline-offset:2px;border-radius:3px;}

/* ---------- Botón de WhatsApp (solo icono) ---------- */
/* Va dentro del párrafo, alineado con el texto, para no ocupar un renglón */
.fx-wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  margin-left:7px;
  vertical-align:-9px;
  border-radius:50%;
  background:var(--fx-wa);
  color:#fff;
  text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.fx-wa:hover{background:var(--fx-wa-dark);transform:scale(1.06);}
.fx-wa:focus-visible{outline:2px solid var(--fx-accent);outline-offset:3px;}

/* ---------- Cierre ---------- */
.fx-cta{
  margin:32px auto 0;
  max-width:760px;
  text-align:center;
  font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.4;
  font-weight:700;
  color:var(--fx-ink);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet: la rejilla se aprieta --- */
@media (max-width:1000px){
  .fx-hero{gap:24px;}
  .fx-videos{max-width:400px;gap:16px;}
  .fx-cmp-head,.fx-row{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));}
  .fx-col-plan{font-size:.8rem;padding:14px 10px;}
  .fx-feat,.fx-cell{padding:13px 12px;}
}

/* --- Móvil: cada fila se convierte en tarjeta --- */
@media (max-width:820px){
  .fx-wrap{padding:24px 16px 32px;}

  /* El titular vuelve a ir arriba y centrado */
  .fx-hero{display:block;margin-bottom:24px;}
  .fx-head{text-align:center;margin-bottom:20px;}

  /* Los dos videos se mantienen lado a lado: apilarlos costaba casi
     una pantalla entera de alto sin aportar legibilidad */
  .fx-videos{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    max-width:none;
    margin:0;
  }
  .fx-video{max-width:none;}
  .fx-play img{width:38px;height:38px;}
  .fx-video figcaption{font-size:.78rem;margin-top:6px;}

  /* La cabecera de columnas no tiene sentido apilada */
  .fx-cmp-head{display:none;}

  .fx-cmp{
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    background:transparent;
  }

  .fx-row{
    display:block;
    border:1px solid var(--fx-border);
    border-radius:var(--fx-radius);
    box-shadow:var(--fx-shadow);
    background:var(--fx-bg) !important;
    margin-bottom:11px;
    overflow:hidden;
  }
  .fx-row-hl{background:var(--fx-bg-hl) !important;border-color:var(--fx-accent);}

  .fx-feat{
    padding:13px 15px;
    border-bottom:1px solid var(--fx-border-soft);
  }
  .fx-feat-txt{font-size:.95rem;}

  /* Cada celda pasa a fila «plan → marca» con la etiqueta del plan delante */
  .fx-cell{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    gap:12px;
    padding:9px 15px;
    border-left:0;
    border-top:1px solid var(--fx-border-soft);
  }
  /* En móvil la cabecera de columnas desaparece, así que la etiqueta del plan
     se inyecta aquí con el mismo color que tiene arriba en escritorio */
  .fx-cell::before{
    content:attr(data-plan);
    font-size:.82rem;
    font-weight:700;
    color:var(--fx-ink);
    flex:1 1 auto;
    min-width:0;
  }
  .fx-cell:last-child::before{color:var(--fx-accent-dark);}
  .fx-note{
    flex:none;
    text-align:right;
    max-width:45%;
  }
  /* La marca siempre al final de la fila */
  .fx-yes,.fx-no{order:3;}
  .fx-note{order:2;}

  /* Precios: la etiqueta del plan encima y el texto debajo */
  .fx-row-precios .fx-feat{padding-bottom:7px;}
  .fx-cell-precio{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    padding:12px 15px;
  }
  .fx-cell-precio::before{flex:none;}
  .fx-precio{font-size:.95rem;}
  .fx-cell-precio .fx-info{align-self:flex-start;}
}

/* --- Móvil angosto --- */
@media (max-width:400px){
  .fx-wrap{padding:20px 12px 28px;}
  .fx-feat,.fx-cell{padding-left:13px;padding-right:13px;}
  .fx-info-body{padding:13px 14px;}
  .fx-cell::before{font-size:.78rem;}
  .fx-nota{padding:16px 15px;}
}

/* --- Accesibilidad: respeta la preferencia de menos movimiento --- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* --- Impresión: abre todos los paneles --- */
@media print{
  .fx-info-body{display:block !important;}
  .fx-cmp{box-shadow:none;}
}