/* ===========================================================
   Mentoría — sistema de diseño compartido
   Una sola hoja para todas las páginas (ES y EN).
   Reglas aplicadas: familia de fondos l1–l3 / d1–d3, alternancia
   claro–oscuro–claro, UN acento por tarjeta (borde o halo),
   contraste medido (texto normal 4.5:1, grande 3:1), velos
   fotográficos y respaldo en capas para imágenes que aún no existen.
   =========================================================== */

:root{
  /* Marca */
  --ink:#0A1326;          /* texto principal */
  --violet:#7A31C4;       /* acento sobre claro — 6,9:1 con blanco */
  --violet-dark:#5E1F9E;
  --violet-claro:#C9A8F0; /* acento sobre oscuro — 9,3:1 con --d2 */
  --cyan:#0090D0;         /* 3,6:1 con blanco: solo trazos y texto grande */
  --cyan-dark:#006B9E;    /* para texto sobre claro */
  --cyan-claro:#6FD3FF;

  /* Neutros */
  --paper:#FFFFFF;
  --mist:#F4F6FB;
  --line:#DDE3EF;
  --muted:#53617D;        /* 5,9:1 con blanco */
  --muted-claro:#B9C4DA;  /* sobre oscuro */

  /* Familia de fondos de tarjeta */
  --l1:#F3F0FB;  /* claro con tinte violeta */
  --l2:#FBF7F0;  /* claro cálido */
  --l3:#EFF4FA;  /* claro frío */
  --d1:#16213B;  /* oscuro medio */
  --d2:#0A1326;  /* oscuro profundo */
  --d3:#1B1736;  /* oscuro más saturado */

  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ancho:1180px;
  --radio:14px;
  --sombra:0 1px 2px rgba(10,19,38,.06), 0 8px 24px rgba(10,19,38,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--violet-dark); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--violet)}
h1,h2,h3,h4{font-family:var(--display); line-height:1.18; letter-spacing:-.01em; margin:0 0 .6em}
h1{font-size:clamp(2rem,4.6vw,3.2rem); font-weight:700}
h2{font-size:clamp(1.55rem,3vw,2.25rem); font-weight:700}
h3{font-size:1.15rem; font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.15em}
li{margin:.3em 0}
code{font-family:var(--mono); font-size:.9em; background:rgba(122,49,196,.08); padding:.1em .35em; border-radius:5px}
:focus-visible{outline:3px solid var(--cyan-dark); outline-offset:2px; border-radius:4px}

.salto{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1rem; z-index:100}
.salto:focus{left:.5rem; top:.5rem}

.contenedor{width:min(100% - 2rem, var(--ancho)); margin-inline:auto}
.contenedor--estrecho{width:min(100% - 2rem, 760px)}
.centrado{text-align:center}
.entradilla{font-size:1.1rem; color:var(--muted); max-width:62ch}
.nota{font-size:.94rem; color:var(--muted)}
.meta{font-size:.94rem; color:var(--muted); font-family:var(--mono); letter-spacing:-.01em}
.opcional{font-weight:400; color:var(--muted); font-size:.9em}

/* ---------- Barra ---------- */
.barra{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.barra__interior{width:min(100% - 2rem, var(--ancho)); margin-inline:auto; display:flex; align-items:center; gap:1rem; min-height:66px}
.logo{font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em}
.logo::after{content:""; display:inline-block; width:7px; height:7px; margin-left:4px; border-radius:50%; background:var(--cyan)}
.menu{margin-left:auto; display:flex; align-items:center; gap:1.35rem}
.menu a{color:var(--ink); text-decoration:none; font-size:.97rem}
.menu a:hover{color:var(--violet-dark)}
.menu .btn--wa{color:#fff}
.menu__boton{display:none; margin-left:auto; width:44px; height:40px; background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer}
.menu__boton span{display:block; width:20px; height:2px; margin:4px auto; background:var(--ink)}
.idioma{display:inline-flex; gap:.4rem; align-items:center; font-size:.9rem; font-family:var(--mono); border-left:1px solid var(--line); padding-left:.9rem}
.idioma strong{color:var(--violet-dark)}
.idioma a{color:var(--muted); text-decoration:none}

/* ---------- Botones ---------- */
.btn{display:inline-block; padding:.78rem 1.3rem; border-radius:11px; font-weight:600; font-size:1rem; text-decoration:none; border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--principal{background:var(--violet); color:#fff; box-shadow:0 6px 18px rgba(122,49,196,.28)}
.btn--principal:hover{background:var(--violet-dark); color:#fff}
.btn--secundario{background:transparent; color:var(--violet-dark); border-color:rgba(122,49,196,.45)}
.btn--secundario:hover{background:rgba(122,49,196,.07); color:var(--violet-dark)}
.btn--wa{background:#1FA855; color:#fff}
.btn--wa:hover{background:#178643; color:#fff}
.bloque--oscuro .btn--secundario{color:#fff; border-color:rgba(255,255,255,.5)}
.bloque--oscuro .btn--secundario:hover{background:rgba(255,255,255,.1); color:#fff}

/* ---------- Encabezado con foto ---------- */
.hero{position:relative; isolation:isolate; min-height:clamp(430px,62vh,620px); display:flex; align-items:center; background-color:var(--d2)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(104deg, rgba(10,19,38,.90) 0%, rgba(10,19,38,.74) 44%, rgba(10,19,38,.38) 100%),
    url("../img/redisenio/portada/portada-hero-mentoria.webp") center/cover no-repeat,
    url("../img/hero-parallax.webp") center/cover no-repeat;
  background-color:var(--d2);
}
.hero__texto{width:min(100% - 2rem, var(--ancho)); margin-inline:auto; padding:3.6rem 0; color:#fff}
.hero__texto h1{color:#fff; max-width:19ch}
.hero__bajada{font-size:1.16rem; color:#E9EEF8; max-width:52ch}
.hero__acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.6rem 0 1.2rem}
.hero__confianza{font-family:var(--mono); font-size:.9rem; color:var(--cyan-claro); margin:0}

.encabezado-pagina{background:linear-gradient(180deg,var(--l1),var(--paper)); padding:3.2rem 0 2.4rem; border-bottom:1px solid var(--line)}
.encabezado-pagina h1{max-width:24ch}

/* ---------- Bloques: alternancia claro – oscuro – claro ---------- */
.bloque{padding:4.2rem 0}
.bloque--claro{background:var(--paper)}
.bloque--mist{background:var(--mist)}
.bloque--oscuro{background:var(--d2); color:#F2F5FB}
.bloque--oscuro h2,.bloque--oscuro h3{color:#fff}
.bloque--oscuro .entradilla,.bloque--oscuro .nota,.bloque--oscuro .meta{color:var(--muted-claro)}
.bloque--oscuro a{color:var(--cyan-claro)}
.bloque--oscuro strong{color:#fff}

/* ---------- Rejillas ---------- */
.rejilla{display:grid; gap:1.4rem; margin-top:2rem}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rejilla--apretada{margin-top:1.4rem}

/* ---------- Tarjetas: un acento por tarjeta ---------- */
.tarjeta{position:relative; overflow:hidden; border-radius:var(--radio); padding:1.5rem; box-shadow:var(--sombra); border:1px solid var(--line)}
.tarjeta h3{margin-top:.9rem}
.tarjeta p:last-child{margin-bottom:0}
.tarjeta img{border-radius:10px; aspect-ratio:4/3; object-fit:cover; width:100%}
.tarjeta--l1{background:var(--l1)}
.tarjeta--l2{background:var(--l2)}
.tarjeta--l3{background:var(--l3)}
.tarjeta--d1,.tarjeta--d2,.tarjeta--d3{color:#EFF3FA; border-color:rgba(255,255,255,.12)}
.tarjeta--d1{background:var(--d1)}
.tarjeta--d2{background:var(--d2)}
.tarjeta--d3{background:var(--d3)}
.tarjeta--d1 h3,.tarjeta--d2 h3,.tarjeta--d3 h3{color:#fff}
.tarjeta--d1 a,.tarjeta--d2 a,.tarjeta--d3 a{color:var(--cyan-claro)}
.tarjeta--d1 .meta,.tarjeta--d2 .meta,.tarjeta--d3 .meta{color:var(--muted-claro)}
/* acento 1: borde superior */
.tarjeta--acento{border-top:3px solid var(--violet)}
.tarjeta--d1.tarjeta--acento,.tarjeta--d3.tarjeta--acento{border-top-color:var(--violet-claro)}
/* acento 2: halo radial (nunca junto con el borde) */
.tarjeta--halo::after{content:""; position:absolute; width:260px; height:260px; right:-90px; top:-90px; pointer-events:none;
  background:radial-gradient(circle, rgba(0,144,208,.20), transparent 68%)}

/* ---------- Servicio (imagen + texto) ---------- */
.servicio{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:2.4rem; align-items:start}
.servicio img{border-radius:var(--radio); aspect-ratio:4/3; object-fit:cover; box-shadow:var(--sombra)}
.servicio h2{margin-top:0}
.servicio--invertido img{order:2}
.bloque--oscuro .servicio code{background:rgba(255,255,255,.12); color:#fff}

/* ---------- Precios ---------- */
.precio{display:flex; flex-direction:column; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-top:3px solid var(--cyan); border-radius:var(--radio); padding:1.5rem; box-shadow:var(--sombra)}
.precio h3{margin-bottom:.35rem}
.precio ul{padding-left:1.1em; font-size:.97rem}
.precio__cifra{font-family:var(--display); font-size:1.08rem; color:var(--muted); margin-bottom:1rem}
.precio__cifra strong{display:block; font-size:1.65rem; color:var(--ink); letter-spacing:-.02em}
.precio__plazo{font-size:.9rem; color:var(--muted); margin-top:auto}
.precio .btn{margin-top:1rem; text-align:center}
.precio--destacada{border-top-color:var(--violet); border-color:rgba(122,49,196,.35); box-shadow:0 10px 30px rgba(122,49,196,.16)}
.precio--mensual{border-top-color:var(--cyan-dark)}
.precio--mensual p:last-child{margin-bottom:0}

/* ---------- Banda fotográfica (rompe la monotonía) ---------- */
.banda{min-height:clamp(180px,26vw,300px);
  background:
    linear-gradient(90deg, rgba(10,19,38,.62), rgba(27,23,54,.40)),
    url("../img/redisenio/portada/portada-hero-mentoria.webp") center/cover no-repeat,
    url("../img/hero-parallax.webp") center/cover no-repeat;
  background-color:var(--d3)}

/* ---------- Pasos ---------- */
.pasos{counter-reset:paso; list-style:none; padding:0; margin-top:2rem; display:grid; gap:1rem}
.pasos li{counter-increment:paso; position:relative; padding:1.05rem 1.2rem 1.05rem 3.6rem; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:12px}
.pasos li::before{content:counter(paso); position:absolute; left:1.1rem; top:1rem; width:28px; height:28px; border-radius:50%; background:var(--violet-claro); color:var(--d2); font-family:var(--display); font-weight:700; font-size:.95rem; display:grid; place-items:center}
.factor-humano{margin-top:2rem}

/* ---------- Sellos técnicos ---------- */
.sellos{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0}
.sello{font-size:.93rem; background:var(--l3); border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; color:var(--ink)}
.bloque--oscuro .sello{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#EFF3FA}

/* ---------- Preguntas frecuentes ---------- */
.pregunta{border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin-bottom:.8rem; background:var(--paper)}
.pregunta summary{font-family:var(--display); font-weight:600; cursor:pointer; font-size:1.05rem}
.pregunta[open] summary{color:var(--violet-dark); margin-bottom:.6rem}
.pregunta p:last-child{margin-bottom:0}

/* ---------- Formulario ---------- */
.campo{margin-bottom:1rem}
.campo label{display:block; font-weight:600; font-size:.95rem; margin-bottom:.3rem}
.campo input,.campo textarea,.campo select{width:100%; padding:.72rem .85rem; font:400 1rem var(--body); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--violet); outline:none; box-shadow:0 0 0 3px rgba(122,49,196,.18)}
.mensaje{min-height:1.2em; font-size:.95rem; margin-top:.8rem}
.mensaje--ok{color:#13693A; background:#E8F7EE; border:1px solid #BFE6CE; padding:.7rem .9rem; border-radius:10px}
.mensaje--error{color:#8A1C2B; background:#FDECEE; border:1px solid #F2C4CA; padding:.7rem .9rem; border-radius:10px}

/* ---------- Contacto y pagos ---------- */
.contacto__datos{list-style:none; padding:0; margin:0 0 2rem}
.contacto__datos li{padding:.55rem 0; border-bottom:1px solid var(--line)}
.pagos{list-style:none; padding:0; display:grid; gap:.5rem}
.pagos li{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:.6rem .9rem; font-size:.96rem}

/* ---------- Tabla ---------- */
.tabla{width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.97rem}
.tabla th,.tabla td{text-align:left; padding:.8rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
.tabla th{font-family:var(--display); background:var(--l3)}
.tabla td:last-child,.tabla th:last-child{text-align:right; white-space:nowrap}
.tabla-envoltura{overflow-x:auto}

/* ---------- Pie ---------- */
.pie{background:var(--d2); color:#D7DEEC; padding:3rem 0 1.5rem; font-size:.96rem}
.pie__interior{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2rem}
.pie .logo{color:#fff}
.pie a{color:#C9D3E6; text-decoration:none; display:block; padding:.18rem 0}
.pie a:hover{color:#fff; text-decoration:underline}
.pie__redes{display:flex; gap:1rem; margin-top:.8rem}
.pie__redes a{display:inline-block}
.pie__legal{text-align:center; margin:2.4rem 0 0; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12); color:var(--muted-claro); font-size:.88rem}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{position:fixed; right:1rem; bottom:1rem; z-index:40; background:#1FA855; color:#fff; font-weight:600; font-size:.95rem; padding:.8rem 1.1rem; border-radius:999px; text-decoration:none; box-shadow:0 8px 22px rgba(0,0,0,.25)}
.wa-flotante:hover{background:#178643; color:#fff}

/* ---------- Aparición suave ---------- */
.aparece{transition:opacity .5s ease, transform .5s ease}
.aparece.oculto{opacity:0; transform:translateY(14px)}

/* ---------- Celular ---------- */
@media (max-width:860px){
  .menu__boton{display:block}
  .menu{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:.5rem 1rem 1rem; display:none}
  .menu.abierto{display:flex}
  .menu a{padding:.75rem 0; border-bottom:1px solid var(--line)}
  .menu .btn--wa{margin-top:.7rem; text-align:center; border-bottom:none}
  .idioma{border-left:none; padding-left:0; margin-top:.7rem}
  .servicio,.servicio--invertido{grid-template-columns:1fr; gap:1.4rem}
  .servicio--invertido img{order:0}
  .pie__interior{grid-template-columns:1fr}
  .bloque{padding:3rem 0}
  .hero__texto{padding:2.8rem 0}
}

/* ---------- Accesibilidad y movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  .aparece.oculto{opacity:1; transform:none}
}

/* ---------- Impresión ---------- */
@media print{
  .barra,.wa-flotante,.banda{display:none !important}
  body{color:#000; background:#fff; font-size:12pt}
  .bloque--oscuro,.tarjeta--d1,.tarjeta--d2,.tarjeta--d3{background:#fff !important; color:#000 !important}
  .bloque--oscuro h2,.bloque--oscuro h3{color:#000 !important}
  a{color:#000; text-decoration:underline}
}

/* ---------- Ilustración de artículo (añadido al generar blog y noticias) ---------- */
.ilustracion{border-radius:var(--radio); aspect-ratio:3/2; object-fit:cover; width:100%; box-shadow:var(--sombra); margin-bottom:.5rem}
.encabezado-pagina .meta{margin-top:-.2rem}