/* sitio.css — los componentes del sitio público de materamarketing.com.
   Va DESPUÉS de tokens.css y base.css.

   Propuesta C «Del caos al orden» (aprobada el 26/09/2026), F5 del concepto
   unificado. Las piezas comunes con robertomatera.com (cabecera, pie «Una
   casa, dos firmas», tablero, escalera, casos, pasarela, ficha, pasos,
   caminos, blog, legales, 404) son las de su sitio.css, con los mismos
   nombres, para que las dos firmas se vean iguales. Lo propio de esta firma
   (cabecera de página marino, niveles, pilares, reparto, rutas, oferta,
   sí/no, dos empresas, pantallas de demostración) va detrás.
   Aquí nada fija un font-size, un color, un radio o una sombra que pueda
   heredar de la base; las excepciones llevan su porqué. Cortes: solo los
   canónicos de tokens.css (640 · 860 · 980, y 1200 para la cabecera). */

/* Tintes que solo existen sobre el marino, dentro del tablero o en las
   pantallas de demostración. No son de la paleta semántica (tokens.css)
   porque no se usan fuera de estos bloques. */
:root{
  --apagado-oscuro:#9DB2CA;   /* texto secundario sobre --c-primario-osc */
  --senal-oscuro:#F4A193;     /* el «antes» de un caso, sobre marino */
  --posit:#FFF1A8;            /* el pósit del tablero y de las rutas */
  --excel-mal:#FBD9D3;        /* la celda rota del Excel del tablero */
  --borde-discontinuo:#9FB6CE;/* borde de lo que es «otra opción» */
  --alto-cabecera:72px;
}

/* ── Utilidades del sitio ─────────────────────────────────────────────── */
.seccion--pegada{padding-top:0}
.seccion__pie{margin:var(--e-5) 0 0}
.cabeza-seccion{max-width:46rem;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.cabeza-seccion:last-child{margin-bottom:0}
.cabeza-seccion>p:not(.eti){color:var(--c-texto-suave);font-size:var(--t-entradilla)}
.seccion--fuerte .cabeza-seccion:last-child{margin-bottom:0}
.cabeza-seccion>p:not(.eti){color:var(--c-sobre-oscuro)}
.cabeza-seccion .enlace-flecha{margin-left:.3rem}
/* Icono de Lucide en línea (templates/web/iconos): hereda el color con
   currentColor; el trazo se afina aquí porque el CSS manda sobre el atributo
   del SVG. Todas las cajas de icono del sitio pasan por esta regla. */
.ico{display:block;width:28px;height:28px;color:var(--c-primario);flex:none}
.ico--chico{width:22px;height:22px}
.ico svg{display:block;width:100%;height:100%}
.ico svg *{stroke-width:1.5}
.seccion--fuerte .ico,.caja--fuerte .ico{color:var(--c-acento)}
/* Foto a su ancho, con el marco del sitio. */
.foto{margin:0;border-radius:var(--radio-grande);overflow:hidden;box-shadow:var(--sombra)}
.foto picture,.foto img{display:block;width:100%;height:auto}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-borde)}
.cabecera__fila{display:flex;align-items:center;gap:var(--e-3);min-height:var(--alto-cabecera)}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--c-tinta);margin-right:auto}
.marca:hover{color:var(--c-tinta)}
.marca__signo{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;color:#fff;background:var(--c-primario-osc);flex:none}
.marca__nombre{white-space:nowrap;font-family:var(--f-disp);font-weight:700;font-size:1.08rem;letter-spacing:-.01em;line-height:1.1}
.marca__nombre small{display:block;font-family:var(--f-datos);font-weight:400;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-suave)}
.menu-principal{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.menu-principal a,.menu-principal button{gap:.3rem;white-space:nowrap}
.menu-principal .flechita{font-size:.7em;opacity:.6}
.desplegable{position:relative}
.submenu{list-style:none;margin:0;padding:.4rem;position:absolute;top:calc(100% + .3rem);left:0;min-width:17rem;z-index:60;background:var(--c-superficie);border:1px solid var(--c-borde);border-radius:var(--radio);box-shadow:var(--sombra);display:none}
.desplegable.abierto .submenu,.desplegable:focus-within .submenu{display:block}
@media (hover:hover) and (min-width:1201px){
  /* El submenú abre con el ratón y NO se cierra en seco: entre el botón y la
     caja hay un hueco de .3rem, y al cruzarlo se perdía el :hover. El ::before
     tiende un puente invisible sobre ese hueco, y el cierre espera 300 ms
     (visibility con retardo) por si el ratón se sale un momento. */
  .submenu{display:block;visibility:hidden;opacity:0;transition:opacity .15s ease,visibility 0s linear .3s}
  .desplegable:hover .submenu,.desplegable.abierto .submenu,.desplegable:focus-within .submenu{visibility:visible;opacity:1;transition-delay:0s}
  .submenu::before{content:"";position:absolute;left:0;right:0;top:calc(-.3rem - 1px);height:calc(.3rem + 1px)}
}
.submenu a{width:100%;justify-content:space-between}
.submenu small{font-family:var(--f-datos);font-size:.72rem;color:var(--c-texto-suave)}
.submenu .submenu__raya{border-top:1px solid var(--c-borde);margin-top:.3rem;padding-top:.3rem}
.cabecera__acciones{display:flex;align-items:center;gap:.6rem}
.cabecera .btn{white-space:nowrap;min-height:var(--tactil);padding:.55rem 1.1rem;font-size:.95rem}
.pasarela-mini{display:inline-flex;align-items:center;min-height:var(--tactil);padding-left:1rem;border-left:1px solid var(--c-borde);font-family:var(--f-datos);font-size:.78rem;letter-spacing:.02em;color:var(--c-texto-suave);text-decoration:none;white-space:nowrap}
.pasarela-mini:hover{color:var(--c-primario-osc)}
.pasarela-movil{display:none;min-height:var(--tactil);align-items:center;margin-top:.4rem;padding:0 .7rem;font-family:var(--f-datos);font-size:.82rem;color:var(--c-texto-suave);text-decoration:none;border-top:1px solid var(--c-borde)}
.hamburguesa{display:none;width:var(--tactil);height:var(--tactil);border-radius:var(--radio);border:1px solid var(--c-borde);background:var(--c-superficie);cursor:pointer;align-items:center;justify-content:center}
.hamburguesa span,.hamburguesa span::before,.hamburguesa span::after{display:block;width:18px;height:2px;background:var(--c-primario-osc);position:relative;content:""}
.hamburguesa span::before{position:absolute;top:-6px}
.hamburguesa span::after{position:absolute;top:6px}
/* 1200: el corte propio de la cabecera (tokens.css). Con siete entradas, dos
   desplegables, el botón y la pasarela, la barra no cabe en una fila debajo. */
@media (max-width:1200px){
  .hamburguesa{display:inline-flex}
  .nav{display:none}
  .nav.abierto{display:block;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--alto-cabecera));overflow-y:auto;background:var(--c-superficie);border-bottom:1px solid var(--c-borde);padding:.6rem var(--aire) 1.2rem;box-shadow:var(--sombra)}
  .nav.abierto .menu-principal{flex-direction:column;align-items:stretch}
  .nav.abierto .menu-principal a,.nav.abierto .menu-principal button{width:100%}
  .nav.abierto .pasarela-movil{display:flex}
  .submenu{position:static;display:none;box-shadow:none;border:0;border-left:2px solid var(--c-borde);border-radius:0;margin-left:.7rem;padding:0 0 0 .3rem}
  .pasarela-mini{display:none}
  .marca__nombre small{display:none}
}
@media (max-width:640px){.cabecera__fila{gap:.5rem}.marca__nombre{font-size:1rem}.cabecera .btn--cabecera{display:none}}

/* ── Pie común: «Una casa, dos firmas» ────────────────────────────────── */
.pie{background:var(--c-primario-osc);color:var(--c-sobre-oscuro);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.pie__lema{font-family:var(--f-disp);font-weight:700;font-size:var(--t-h2);color:#fff;letter-spacing:-.02em;margin:0}
.pie__firmas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-top:2rem}
.pie__firma{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem;border-radius:var(--radio-grande);border:1px solid rgba(255,255,255,.14);text-decoration:none;color:var(--c-sobre-oscuro);transition:border-color var(--t-rapida),background var(--t-rapida)}
.pie__firma:hover{border-color:var(--c-acento);background:rgba(105,164,249,.06);color:var(--c-sobre-oscuro)}
.pie__firma.actual{background:rgba(255,255,255,.05)}
.pie__firma-quien{font-family:var(--f-disp);font-weight:700;font-size:1.25rem;color:#fff}
.pie__firma-url{margin-top:auto;font-family:var(--f-datos);font-size:.76rem;color:var(--c-acento)}
.pie__base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.2rem;font-family:var(--f-datos);font-size:.76rem;color:var(--apagado-oscuro)}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:0 1.2rem}
.pie__base a{color:var(--apagado-oscuro);text-decoration:none;min-height:var(--tactil);display:inline-flex;align-items:center}
.pie__base a:hover{color:#fff}
@media (max-width:860px){.pie__firmas{grid-template-columns:1fr}}

/* ── Hero de la portada: el tablero caos → orden ──────────────────────── */
.hero{background:var(--c-fondo-alt);overflow:hidden}
.hero__rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(3rem,7vw,6rem)}
/* El h1 de la portada va un punto más apretado que el de la base: es el titular del sitio. */
.hero h1{letter-spacing:-.035em;line-height:.98;margin-top:1rem}
.hero h1 em,.pagina-cabeza h1 em{font-style:normal;color:var(--c-primario);box-shadow:inset 0 -.18em 0 rgba(105,164,249,.45)}
.pagina-cabeza h1 em{color:#fff}
.hero__baja{margin-top:1.4rem;font-size:var(--t-entradilla);max-width:34rem;color:var(--c-texto-suave)}
.hero__botones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__nota{margin-top:1.4rem;font-family:var(--f-datos);font-size:var(--t-small);color:var(--c-texto-suave)}
.tablero{min-width:0}
.tablero__marco{position:relative;border-radius:var(--radio-grande);padding:clamp(1rem,2.4vw,1.5rem);overflow:hidden;background:var(--c-superficie);box-shadow:var(--sombra)}
.tablero__barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.tablero__estado{margin:0;font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-suave)}
.tablero__estado b{color:var(--c-senal);transition:color .4s}
.tablero.ordenado .tablero__estado b{color:var(--c-primario)}
.conmutador{min-height:var(--tactil);padding:.45rem 1rem;border-radius:var(--radio-pastilla);font:600 .88rem var(--f-disp);cursor:pointer;border:1.5px solid currentColor;background:transparent;color:var(--c-primario-osc)}
.conmutador:hover{background:rgba(105,164,249,.16)}
.piezas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.pieza{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--c-superficie);color:var(--c-tinta);border:1px solid var(--c-borde);border-radius:var(--radio);padding:.85rem .9rem;min-height:150px;box-shadow:0 1px 3px rgba(11,31,51,.12),0 10px 22px rgba(11,31,51,.1);transform:translate(var(--cx,0),var(--cy,0)) rotate(var(--cr,0deg));transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .6s;transition-delay:var(--d,0s);z-index:var(--z,1)}
.tablero.ordenado .pieza{transform:none;box-shadow:0 1px 2px rgba(11,31,51,.1)}
.pieza p{margin:0}
.pieza__tipo{font-family:var(--f-datos);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-texto-suave);display:flex;align-items:center;gap:.4rem}
.pieza__tipo .punto{width:8px;height:8px;border-radius:50%;background:var(--c-senal);transition:background .5s;flex:none}
.tablero.ordenado .pieza__tipo .punto{background:var(--c-acento)}
.pieza__texto{overflow-wrap:anywhere;margin-top:.45rem!important;font-weight:700;font-size:.95rem;line-height:1.3}
.pieza__dato{margin-top:.3rem!important;font-family:var(--f-datos);font-size:.74rem;color:var(--c-senal);transition:color .5s}
.tablero.ordenado .pieza__dato{color:var(--c-texto-suave);text-decoration:line-through;text-decoration-color:rgba(74,91,110,.5)}
.pieza--posit{background:var(--posit)}
/* El pósit, «escrito a mano»: la cursiva de Manrope, sin traer otra familia. */
.pieza--posit .pieza__texto{font-style:italic;font-weight:500;font-size:1.02rem}
.excel{margin-top:.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;font-family:var(--f-datos);font-size:.64rem}
.excel span{background:var(--c-fondo-alt);padding:.15rem .25rem;white-space:nowrap;overflow:hidden}
.excel .mal{background:var(--excel-mal);color:#9C2E1E;transition:background .5s,color .5s}
.tablero.ordenado .excel .mal{background:var(--c-acento-claro);color:var(--c-primario-osc)}
.pieza__solucion{margin-top:auto!important;padding-top:.7rem;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;font-family:var(--f-datos);font-size:.68rem;line-height:1.25;color:var(--c-primario-osc);opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--d,0s) + .7s)}
.pieza__solucion b{font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--c-primario-osc);color:#fff;padding:.12rem .4rem;border-radius:4px}
.tablero.ordenado .pieza__solucion{opacity:1;transform:none}
.piezas li:nth-child(1){--cx:14%;--cy:22%;--cr:-7deg;--z:3;--d:0s}
.piezas li:nth-child(2){--cx:-8%;--cy:34%;--cr:9deg;--z:5;--d:.08s}
.piezas li:nth-child(3){--cx:-22%;--cy:10%;--cr:-4deg;--z:2;--d:.16s}
.piezas li:nth-child(4){--cx:20%;--cy:-18%;--cr:6deg;--z:4;--d:.24s}
.piezas li:nth-child(5){--cx:-4%;--cy:-30%;--cr:-10deg;--z:6;--d:.32s}
.piezas li:nth-child(6){--cx:-18%;--cy:-12%;--cr:5deg;--z:3;--d:.4s}
.tablero__pie{margin:1rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap;opacity:0;transition:opacity .5s 1.1s}
.tablero.ordenado .tablero__pie{opacity:1}
.tablero__pie span{font-family:var(--f-datos);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .6rem;border-radius:var(--radio-pastilla);background:var(--c-fondo-alt);color:var(--c-primario-osc)}
.tablero.quieto,.tablero.quieto *{transition:none!important}
@media (max-width:980px){.hero__rejilla{grid-template-columns:1fr}}
@media (max-width:640px){
  .piezas{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .pieza{min-height:138px;padding:.75rem}
  .pieza__texto{font-size:.88rem}
  .excel{font-size:.58rem}
  .piezas li:nth-child(1){--cx:10%}.piezas li:nth-child(2){--cx:-10%}
  .piezas li:nth-child(3){--cx:12%}.piezas li:nth-child(4){--cx:-8%}
  .piezas li:nth-child(5){--cx:6%}.piezas li:nth-child(6){--cx:-12%}
}
@media (prefers-reduced-motion:reduce){.pieza,.pieza__solucion,.tablero__pie,.pieza__tipo .punto,.pieza__dato,.excel .mal{transition:none!important}}

/* ── Cabecera de página interior (firma MM: marino) ───────────────────── */
.pagina-cabeza{background:var(--c-primario-osc);color:#fff}
.pagina-cabeza__rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:end;padding-block:clamp(2.6rem,6vw,5rem) clamp(2.6rem,5vw,4rem)}
.pagina-cabeza--sola .pagina-cabeza__rejilla{grid-template-columns:minmax(0,1fr)}
.pagina-cabeza--sola .pagina-cabeza__rejilla>*{max-width:52rem}
.pagina-cabeza .eti{color:var(--c-acento);margin:0}
/* El h1 interior, un punto por debajo del de la portada: la maqueta lo quiere así. */
.pagina-cabeza h1{font-size:clamp(2.1rem,1.3rem + 3vw,3.8rem);letter-spacing:-.035em;line-height:1;margin:.9rem 0 0}
.pagina-cabeza__baja{margin:1.2rem 0 0;font-size:var(--t-entradilla);color:var(--c-sobre-oscuro);max-width:36rem}
.pagina-cabeza .hero__botones{margin-top:1.8rem}
.pagina-cabeza .btn--fantasma{color:#fff}
.pagina-cabeza .migas ol{color:var(--apagado-oscuro)}
.pagina-cabeza .migas [aria-current="page"],.pagina-cabeza .migas a:hover{color:#fff}
.pagina-cabeza__lado{display:grid;gap:1rem;min-width:0}
.pagina-cabeza__aparte{padding:1.2rem 1.3rem;border-radius:var(--radio-grande);background:var(--c-primario);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:.96rem;color:var(--c-sobre-oscuro)}
.pagina-cabeza__aparte b{color:#fff;font-family:var(--f-disp)}
.pagina-cabeza__aparte .eti{display:block;margin-bottom:.5rem}
.pagina-cabeza__aparte p{margin:0}
.pagina-cabeza__foto{margin:0;border-radius:var(--radio-grande);overflow:hidden;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.pagina-cabeza__foto picture,.pagina-cabeza__foto img{display:block;width:100%;height:auto}
.pagina-cabeza .tablero{align-self:center}
.datos-rapidos{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.datos-rapidos li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.75rem 1rem;border-radius:var(--radio);background:var(--c-primario);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:.95rem;color:var(--c-sobre-oscuro)}
.datos-rapidos b{font-family:var(--f-datos);color:#fff;text-align:right}
@media (max-width:980px){.pagina-cabeza__rejilla{grid-template-columns:1fr;align-items:start}}

/* ── La escalera ──────────────────────────────────────────────────────── */
.escalera{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:.6rem}
.peldano{position:relative;display:flex;flex-direction:column;border-radius:var(--radio) var(--radio) 0 0;padding:1.1rem 1rem 1.2rem;background:var(--c-superficie);border:1px solid var(--c-borde);border-bottom:0;min-height:calc(12rem + var(--alto,0rem))}
.peldano h3,.peldano p{margin:0}
.peldano:nth-child(2){--alto:2.2rem}
.peldano:nth-child(3){--alto:4.4rem}
.peldano:nth-child(4){--alto:6.6rem}
.peldano:nth-child(5){--alto:8.8rem;background:var(--c-primario-osc);color:#fff;border-color:var(--c-primario-osc)}
.peldano .ico{margin-bottom:.7rem}
.peldano:nth-child(5) .ico{color:var(--c-acento)}
.peldano__num{font-family:var(--f-datos);font-size:var(--t-cejilla);color:var(--c-texto-suave);letter-spacing:.06em}
.peldano:nth-child(5) .peldano__num{color:var(--c-acento)}
.peldano h3{margin-top:.5rem;line-height:1.12}
.peldano__precio{margin-top:auto!important;padding-top:1rem;font-family:var(--f-datos);font-weight:700;font-size:1.05rem}
.peldano__firma{margin-top:.35rem!important;font-family:var(--f-datos);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--c-texto-suave)}
.peldano:nth-child(5) .peldano__firma{color:var(--apagado-oscuro)}
.peldano .enlace-flecha{margin-top:.6rem;font-size:.92rem;align-self:flex-start}
.peldano:nth-child(5) .enlace-flecha{color:#fff}
.peldano.aqui::before{content:attr(data-aqui);position:absolute;top:-.8rem;left:1rem;font-family:var(--f-datos);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;background:var(--c-acento);color:var(--c-primario-osc);padding:.2rem .5rem;border-radius:4px}
.escalera__suelo{height:6px;background:var(--c-primario-osc);border-radius:0 0 4px 4px}
.creditos{margin-top:1.6rem;display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.2rem;border-radius:var(--radio);background:var(--c-superficie);border:1px dashed var(--c-borde);font-size:.98rem}
.creditos b{font-family:var(--f-disp)}
.creditos__signo{flex:none;font-family:var(--f-datos);font-weight:700;color:var(--c-primario-osc)}
@media (max-width:980px){
  .escalera{grid-template-columns:1fr;gap:.5rem}
  .peldano{min-height:0;border-radius:var(--radio);border-bottom:1px solid var(--c-borde);margin-left:calc(var(--alto,0rem) * .9)}
  .peldano:nth-child(5){border-bottom-color:var(--c-primario-osc)}
  .peldano__precio{padding-top:.6rem}
  .escalera__suelo{display:none}
}
@media (max-width:640px){.peldano{margin-left:calc(var(--alto,0rem) * .35)}}

/* ── Niveles (tres que se contienen, y Claude) ────────────────────────── */
.niveles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.niveles--tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.nivel{display:flex;flex-direction:column;gap:.8rem;padding:1.4rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde)}
.nivel h3,.nivel p{margin:0}
.nivel p{color:var(--c-texto-suave);font-size:.98rem}
.nivel .enlace-flecha{margin-top:auto;align-self:flex-start}
.nivel__cabeza{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.capas{display:flex;gap:4px;height:10px;flex:1;max-width:8rem}
.capas i{flex:1;border-radius:3px;background:var(--c-borde)}
.capas i.on{background:var(--c-primario-osc)}
.nivel--claude{background:var(--c-fondo-alt);border-style:dashed;border-color:var(--borde-discontinuo)}
.nivel--claude .capas i.on{background:var(--c-acento)}
@media (max-width:980px){.niveles,.niveles--tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.niveles,.niveles--tres{grid-template-columns:1fr}}

/* ── Casos del libro ──────────────────────────────────────────────────── */
.casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.caso{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border-radius:var(--radio-grande);background:var(--c-primario);border:1px solid rgba(255,255,255,.08);color:#fff}
.caso p,.caso h3{margin:0}
.caso p{color:var(--c-sobre-oscuro);font-size:.96rem}
/* Foto de cabecera a sangre: el margen negativo es el padding de .caso. */
.caso__foto{margin:-1.5rem -1.5rem 0;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radio-grande) var(--radio-grande) 0 0}
.caso__foto picture,.caso__foto img{display:block;width:100%;height:100%;object-fit:cover}
.caso__quien{font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--apagado-oscuro)!important}
.caso__cifras{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6rem;padding-block:.9rem;border-block:1px solid rgba(255,255,255,.12)}
.caso__antes,.caso__despues{font-family:var(--f-datos);font-weight:700;font-size:var(--t-h4)!important;line-height:1.2}
.caso__antes{color:var(--senal-oscuro)!important}
.caso__despues{color:var(--c-acento)!important;text-align:right}
.caso__antes small,.caso__despues small{display:block;font-weight:400;font-size:.7rem;color:var(--apagado-oscuro);letter-spacing:.04em}
.caso__flecha{font-family:var(--f-datos);color:var(--apagado-oscuro)}
.caso__ruta{margin-top:auto!important;font-family:var(--f-datos);font-size:.72rem!important;letter-spacing:.04em;color:var(--apagado-oscuro)!important}
.caso__ruta s{color:var(--senal-oscuro);text-decoration-thickness:1px}
.caso__ruta b{color:var(--c-acento)}
.caso__ensena{padding-top:.2rem}
.caso__ensena b{color:#fff;font-family:var(--f-disp)}
.nota-fuente{margin-top:1.6rem;font-family:var(--f-datos);font-size:.76rem;color:var(--apagado-oscuro)!important;max-width:52rem}
@media (max-width:980px){.casos{grid-template-columns:1fr}}

/* ── Pilares ──────────────────────────────────────────────────────────── */
.pilares{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--c-primario-osc)}
.pilar{padding:1.4rem 1.2rem 1.6rem 0;border-right:1px solid var(--c-borde);display:flex;flex-direction:column;gap:.7rem;min-width:0}
.pilar+.pilar{padding-left:1.2rem}
.pilar:last-child{border-right:0}
.pilar h3,.pilar p{margin:0}
.pilar__firma{font-family:var(--f-datos);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--c-texto-suave)}
.pilar p:not(.pilar__firma){color:var(--c-texto-suave);font-size:.96rem}
.pilar .enlace-flecha{margin-top:auto;align-self:flex-start;font-size:.92rem}
@media (max-width:980px){
  .pilares{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pilar:nth-child(2){border-right:0}
  .pilar:nth-child(3){padding-left:0}
  .pilar:nth-child(n+3){border-top:1px solid var(--c-borde)}
}
@media (max-width:640px){
  .pilares{grid-template-columns:1fr}
  .pilar,.pilar+.pilar{padding-left:0;border-right:0}
  .pilar+.pilar{border-top:1px solid var(--c-borde)}
}

/* ── Pasarela a robertomatera.com ─────────────────────────────────────── */
.pasarela{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:2rem;align-items:center;padding:clamp(1.6rem,4vw,2.6rem);border-radius:var(--radio-grande);background:var(--c-fondo-alt);border:1px solid var(--c-borde)}
.pasarela h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem)}
.pasarela p:not(.eti){color:var(--c-texto-suave);max-width:40rem;margin-bottom:1.4rem}
.pasarela__foto{display:block;border-radius:var(--radio);overflow:hidden;border:1px solid var(--c-borde);box-shadow:0 18px 40px -24px rgba(11,45,79,.45)}
.pasarela__foto picture,.pasarela__foto img{display:block;width:100%;height:auto}
@media (max-width:860px){.pasarela{grid-template-columns:1fr}}

/* ── Quién está detrás: el libro como retrato ─────────────────────────── */
.quien{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.quien__libro{margin:0}
.quien__libro img{width:100%;max-width:260px;border-radius:6px;box-shadow:0 20px 40px rgba(11,31,51,.25)}
.quien__libro figcaption{margin-top:.8rem;font-family:var(--f-datos);font-size:.74rem;color:var(--c-texto-suave)}
.quien p:not(.eti){color:var(--c-texto-suave)}
.quien .btn{margin-top:.6rem}
@media (max-width:860px){.quien{grid-template-columns:1fr}.quien__libro img{max-width:180px}}

/* ── Quién hace cada parte (reparto entre las dos firmas) ─────────────── */
.reparto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.reparto__lado{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.4rem,3vw,2rem);border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde);min-width:0}
.reparto__lado h3,.reparto__lado p{margin:0}
.reparto__lado--equipo{background:var(--c-primario-osc);color:#fff;border-color:var(--c-primario-osc)}
/* Foto a sangre: el margen negativo es el padding de .reparto__lado. */
.reparto__foto{margin:calc(clamp(1.4rem,3vw,2rem) * -1) calc(clamp(1.4rem,3vw,2rem) * -1) 0;aspect-ratio:16/8;overflow:hidden;border-radius:var(--radio-grande) var(--radio-grande) 0 0}
.reparto__foto picture,.reparto__foto img{display:block;width:100%;height:100%;object-fit:cover}
.reparto__verbo{font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--c-texto-suave)}
.reparto__lado--equipo .reparto__verbo{color:var(--c-acento)}
.reparto__lado>p:not(.reparto__verbo){color:var(--c-texto-suave)}
.reparto__lado--equipo>p:not(.reparto__verbo){color:var(--c-sobre-oscuro)}
.reparto__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-borde)}
.reparto__lado--equipo .reparto__lista,.reparto__lado--equipo .reparto__lista li{border-color:rgba(255,255,255,.14)}
.reparto__lista li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--c-borde);font-size:.98rem}
.reparto__lista b{font-family:var(--f-datos);white-space:nowrap}
.reparto__lado .btn{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.reparto{grid-template-columns:1fr}}

/* ── Por dónde se entra: lo que piensa el visitante, como un pósit ────── */
.rutas{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.ruta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde)}
.ruta p{margin:0}
/* El pósit, «escrito a mano»: la cursiva de Manrope, como el del tablero. */
.ruta__piensa{justify-self:start;font-style:italic;font-weight:500;font-size:1.08rem;line-height:1.3;background:var(--posit);padding:.7rem .9rem;border-radius:var(--radio-chico);box-shadow:0 1px 2px rgba(11,31,51,.1),0 6px 14px rgba(11,31,51,.08);transform:rotate(-1.2deg)}
.ruta:nth-child(even) .ruta__piensa{transform:rotate(1deg)}
.ruta__paso{display:flex;flex-direction:column;gap:.15rem;font-size:.96rem;min-width:0}
.ruta__paso small{font-family:var(--f-datos);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.ruta__paso a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--c-acento);align-self:flex-start;min-height:var(--tactil);display:inline-flex;align-items:center}
.ruta__paso span{color:var(--c-texto-suave);font-size:.88rem}
@media (max-width:860px){.ruta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ruta__piensa{grid-column:1/-1}}
@media (max-width:640px){.ruta{grid-template-columns:1fr}}

/* ── Nada se paga dos veces ───────────────────────────────────────────── */
.descuentos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.descuento{display:flex;flex-direction:column;gap:.7rem;padding:1.4rem;border-radius:var(--radio-grande);background:var(--c-primario);border:1px solid rgba(255,255,255,.08)}
.descuento p{margin:0;font-size:.96rem}
.descuento__de{font-family:var(--f-datos);font-size:var(--t-cejilla)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--apagado-oscuro)!important}
.descuento__cifra{font-family:var(--f-datos);font-weight:700;font-size:var(--t-h3)!important;color:var(--c-acento)!important}
@media (max-width:860px){.descuentos{grid-template-columns:1fr}}

/* ── Oferta de formación ──────────────────────────────────────────────── */
.oferta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:1rem}
.oferta__item{display:flex;flex-direction:column;gap:.9rem;padding:1.6rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde);min-width:0}
.oferta__item h3,.oferta__item p{margin:0}
.oferta__item--destacado{background:var(--c-primario-osc);color:#fff;border-color:var(--c-primario-osc)}
.oferta__item--destacado .ico{color:var(--c-acento)}
.oferta__tipo{font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--c-texto-suave)}
.oferta__item--destacado .oferta__tipo{color:var(--c-acento)}
.oferta__precio{font-family:var(--f-datos);font-weight:700;font-size:var(--t-h3)}
.oferta__precio small{display:block;font-weight:400;font-size:.74rem;color:var(--c-texto-suave);letter-spacing:.03em}
.oferta__item--destacado .oferta__precio small{color:var(--apagado-oscuro)}
.oferta__item>p:not([class]){color:var(--c-texto-suave)}
.oferta__item--destacado>p:not([class]){color:var(--c-sobre-oscuro)}
.oferta__puntos{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.95rem}
.oferta__puntos li{padding-left:1.2rem;position:relative}
.oferta__puntos li::before{content:"→";position:absolute;left:0;font-family:var(--f-datos);color:var(--c-primario)}
.oferta__item--destacado .oferta__puntos li::before{color:var(--c-acento)}
.oferta__item .btn{margin-top:auto;align-self:flex-start}
.oferta__donde{font-family:var(--f-datos);font-size:.72rem;color:var(--c-texto-suave)}
.oferta__item--destacado .oferta__donde{color:var(--apagado-oscuro)}
@media (max-width:980px){.oferta{grid-template-columns:repeat(2,minmax(0,1fr))}.oferta__item--destacado{grid-column:1/-1}}
@media (max-width:640px){.oferta{grid-template-columns:1fr}}

/* ── Aprender → implantar ─────────────────────────────────────────────── */
.puente{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:stretch}
.puente__lado{padding:1.4rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde);display:flex;flex-direction:column;gap:.6rem;min-width:0}
.puente__lado h3,.puente__lado p{margin:0}
.puente__lado p:not(.eti){color:var(--c-texto-suave);font-size:.96rem}
.puente__lado .enlace-flecha{margin-top:auto;align-self:flex-start}
.puente__flecha{align-self:center;font-family:var(--f-datos);font-size:1.6rem;color:var(--c-primario-osc)}
@media (max-width:860px){.puente{grid-template-columns:1fr}.puente__flecha{justify-self:center;transform:rotate(90deg)}}

/* ── Qué hace / qué no hace ───────────────────────────────────────────── */
.sino{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sino__col{padding:1.5rem;border-radius:var(--radio-grande);border:1px solid var(--c-borde);background:var(--c-superficie);min-width:0}
.sino__col h3{display:flex;align-items:center;gap:.6rem;margin:0}
.sino__marca{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.sino__marca svg{width:18px;height:18px}
.sino__marca svg *{stroke-width:1.5}
.sino__col--si .sino__marca{background:var(--c-acento-claro);color:var(--c-primario-osc)}
.sino__col--no .sino__marca{background:var(--excel-mal);color:#9C2E1E}
.sino__col ul{list-style:none;margin:1rem 0 0;padding:0}
.sino__col li{padding:.75rem 0;border-top:1px solid var(--c-borde);font-size:.98rem}
.sino__col li b{font-family:var(--f-disp)}
@media (max-width:860px){.sino{grid-template-columns:1fr}}

/* ── Caos / orden en pequeño: la misma IA sobre dos empresas ──────────── */
.dos-empresas{display:grid;gap:.8rem}
.dos-empresas__cabeza,.dos-empresas__fila{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:.8rem}
.dos-empresas__cabeza span{font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--apagado-oscuro)}
.dos-empresas__cabeza .caos{color:var(--senal-oscuro)}
.dos-empresas__cabeza .orden{color:var(--c-acento)}
.dos-empresas__fila>*{margin:0;padding:1rem 1.1rem;border-radius:var(--radio);font-size:.96rem}
.dos-empresas__tarea{padding-left:0!important;font-family:var(--f-disp);font-weight:700;font-size:1.1rem!important;color:#fff!important}
.dos-empresas__caos{background:rgba(232,96,76,.12);border:1px solid rgba(232,96,76,.35);color:#F7C4BA!important}
.dos-empresas__orden{background:rgba(105,164,249,.12);border:1px solid rgba(105,164,249,.35);color:#D5E5FD!important}
.dos-empresas__fila small{display:none;font-family:var(--f-datos);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem;color:inherit}
@media (max-width:860px){
  .dos-empresas__cabeza{display:none}
  .dos-empresas__fila{grid-template-columns:1fr;gap:.5rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.12)}
  .dos-empresas__fila small{display:block}
}

/* ── Lecturas del blog (tarjeta de texto) ─────────────────────────────── */
.lecturas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.lectura{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde);text-decoration:none;color:var(--c-tinta);transition:border-color var(--t-rapida)}
.lectura:hover{border-color:var(--c-primario-osc);color:var(--c-tinta)}
.lectura h3,.lectura p{margin:0}
.lectura__meta{font-family:var(--f-datos);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--c-texto-suave);display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.lectura p:not(.lectura__meta){color:var(--c-texto-suave);font-size:.95rem}
@media (max-width:860px){.lecturas{grid-template-columns:1fr}}

/* ── Salidas: aprender · ordenar · implantar ──────────────────────────── */
.salidas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.salida{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde);min-width:0}
.salida h3,.salida p{margin:0}
.salida--equipo{background:var(--c-primario-osc);color:#fff;border-color:var(--c-primario-osc)}
.salida--equipo .ico{color:var(--c-acento)}
.salida__verbo{font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--c-texto-suave)}
.salida--equipo .salida__verbo{color:var(--c-acento)}
.salida p:not([class]){color:var(--c-texto-suave);font-size:.96rem}
.salida--equipo p:not([class]){color:var(--c-sobre-oscuro)}
.salida__precio{font-family:var(--f-datos);font-weight:700}
.salida .enlace-flecha{margin-top:auto;align-self:flex-start}
.salida--equipo .enlace-flecha{color:#fff}
@media (max-width:980px){.salidas{grid-template-columns:1fr}}

/* ── Rejilla de puntos con icono (qué incluye, automatizaciones) ─────── */
.puntos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1rem}
.punto-i{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde);min-width:0}
.punto-i h3,.punto-i p{margin:0}
.punto-i h3{font-size:var(--t-h4)}
.punto-i p{color:var(--c-texto-suave);font-size:.95rem}
.seccion--alt .punto-i{background:var(--c-superficie)}
.seccion--fuerte .punto-i{background:var(--c-primario);border-color:rgba(255,255,255,.08)}
.seccion--fuerte .punto-i p{color:var(--c-sobre-oscuro)}
.nota{margin:1.4rem 0 0;font-family:var(--f-datos);font-size:.8rem;color:var(--c-texto-suave);max-width:52rem}
.seccion--fuerte .nota{color:var(--apagado-oscuro)}

/* ── Tabla de niveles (qué hay en cada uno) ───────────────────────────── */
/* Sobre marino la tabla va en su caja blanca: el texto no puede heredar el blanco de la sección. */
.seccion--fuerte .tabla-caja{color:var(--c-tinta)}
.seccion--fuerte .tabla-caja a{color:var(--c-primario-osc)}
.tabla-niveles table{min-width:560px}
.tabla-niveles td:not(:first-child),.tabla-niveles th:not(:first-child){text-align:center;white-space:nowrap}
.tabla-niveles .si{color:var(--c-primario-osc);font-weight:700}
.tabla-niveles .no{color:var(--c-texto-suave)}
.tabla-niveles th a{color:inherit}

/* ── Páginas interiores: ficha lateral, bloques, pasos, caminos ──────── */
.con-ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(2rem,5vw,4rem);align-items:start}
.con-ficha>*{min-width:0}
.ficha{position:sticky;top:calc(var(--alto-cabecera) + 1.5rem);padding:1.5rem;border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:1rem}
.ficha p{margin:0}
/* Foto a sangre en la cabecera de la ficha: el margen negativo es su padding. */
.ficha__foto{margin:-1.5rem -1.5rem 0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radio-grande) var(--radio-grande) 0 0}
.ficha__foto picture,.ficha__foto img{display:block;width:100%;height:100%;object-fit:cover}
.ficha .eti{margin:0}
.ficha__precio{font-family:var(--f-disp);font-weight:700;font-size:var(--t-h2);letter-spacing:-.03em;line-height:1}
.ficha__precio small{font-family:var(--f-datos);font-weight:400;font-size:.8rem;letter-spacing:0;color:var(--c-texto-suave);margin-left:.3rem}
.ficha .btn{width:100%}
.ficha__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-borde)}
.ficha__lista li{display:flex;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--c-borde);font-size:.94rem}
.ficha__lista li::before{content:"✓";font-family:system-ui,sans-serif;color:var(--c-primario);flex:none}
.ficha__nota{font-size:var(--t-small);color:var(--c-texto-suave)}
.ficha .creditos{margin-top:0;font-size:.88rem;padding:.8rem 1rem}
.huecos{display:flex;flex-wrap:wrap;gap:.4rem}
.huecos a{display:inline-flex;align-items:center;min-height:var(--tactil);padding:0 .8rem;border-radius:var(--radio-pastilla);border:1.5px solid var(--c-borde);background:var(--c-fondo-alt);font-family:var(--f-datos);font-weight:700;font-size:.85rem;color:var(--c-primario-osc);text-decoration:none}
.huecos a:hover{border-color:var(--c-primario-osc)}
@media (max-width:980px){.con-ficha{grid-template-columns:1fr}.ficha{position:static}}

.bloque+.bloque,.formulario+.bloque{margin-top:clamp(2.8rem,5vw,4rem)}
.bloque>p:not(.eti){color:var(--c-texto-suave);max-width:44rem}
.bloque__foto{display:block;margin-top:1.6rem;border-radius:var(--radio-grande);overflow:hidden;box-shadow:var(--sombra)}
.bloque__foto picture,.bloque__foto img{display:block;width:100%;height:auto}
.pasos{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1rem}
.paso{padding:1.3rem;border-radius:var(--radio-grande);background:var(--c-fondo-alt);border:1px solid var(--c-borde);min-width:0}
.seccion--alt .paso{background:var(--c-superficie)}
.paso p,.paso h3{margin:0}
.paso .ico{margin-bottom:.7rem;width:24px;height:24px}
.paso__num{font-family:var(--f-datos);font-size:var(--t-cejilla);letter-spacing:.06em;text-transform:uppercase;color:var(--c-texto-suave)}
.paso h3{margin-top:.4rem;font-size:var(--t-h4)}
.paso p:not(.paso__num){margin-top:.5rem;color:var(--c-texto-suave);font-size:.95rem}
.caminos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.camino{display:flex;flex-direction:column;gap:.8rem;padding:1.5rem;border-radius:var(--radio-grande);border:1px solid var(--c-borde);background:var(--c-superficie);min-width:0}
.camino p,.camino h3{margin:0}
.camino p:not(.eti){color:var(--c-texto-suave)}
.camino .eti{margin:0}
.camino .btn,.camino .enlace-flecha{margin-top:auto;align-self:flex-start}
.camino--equipo{background:var(--c-primario-osc);color:#fff;border-color:var(--c-primario-osc)}
.camino--equipo p:not(.eti){color:var(--c-sobre-oscuro)}
.camino--equipo .eti,.camino--equipo .ico{color:var(--c-acento)}
.camino--equipo .enlace-flecha{color:#fff}
.camino__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-borde)}
.camino--equipo .camino__lista,.camino--equipo .camino__lista li{border-color:rgba(255,255,255,.14)}
.camino__lista li{padding:.6rem 0;border-bottom:1px solid var(--c-borde);font-size:.95rem}
@media (max-width:860px){.caminos{grid-template-columns:1fr}}
/* Dos columnas de texto sobre marino (lo que se paga aparte · contrato). */
.dos-textos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem)}
.dos-textos>div{min-width:0}
@media (max-width:860px){.dos-textos{grid-template-columns:1fr}}
.principios{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:principio}
.principios li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;padding:1rem 1.2rem;border-radius:var(--radio);background:var(--c-primario);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--c-sobre-oscuro)}
.principios li::before{counter-increment:principio;content:counter(principio);font-family:var(--f-datos);font-weight:700;color:var(--c-acento)}
.principios b{color:#fff;font-family:var(--f-disp)}

/* ── Un día con AUGE AI (nivel AUGE AI) ───────────────────────────────── */
.dia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.linea-dia{list-style:none;margin:0;padding:0;position:relative}
.linea-dia::before{content:"";position:absolute;left:78px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.18)}
.linea-dia li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1.6rem;padding:.9rem 0;position:relative}
.linea-dia .hora{font-family:var(--f-datos);font-weight:700;color:var(--c-acento)}
.linea-dia li::after{content:"";position:absolute;left:72px;top:1.3rem;width:14px;height:14px;border-radius:50%;background:var(--c-acento);border:3px solid var(--c-primario-osc)}
.linea-dia b{display:block;color:#fff;font-family:var(--f-disp);font-weight:600}
.linea-dia span:not(.hora){color:var(--c-sobre-oscuro);font-size:.95rem}
@media (max-width:860px){
  .dia{grid-template-columns:1fr}
  .linea-dia::before{left:6px}
  .linea-dia li{grid-template-columns:1fr;gap:.2rem;padding-left:2rem}
  .linea-dia li::after{left:0}
}

/* ── Pantallas de demostración (cabecera de cada nivel) ───────────────── */
/* Dibujan el sistema con datos inventados de demostración: marco de ventana,
   una web, un CRM por etapas y el chat del agente. Tamaños de letra propios
   (excepción anotada): es una pantalla en miniatura, no texto del sitio. */
.marco{background:var(--c-superficie);border-radius:var(--radio-grande);box-shadow:0 18px 40px -20px rgba(0,0,0,.5);overflow:hidden;color:var(--c-tinta);min-width:0}
.marco__barra{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--c-borde);align-items:center;background:var(--c-fondo-alt)}
.marco__barra i{width:10px;height:10px;border-radius:50%;background:var(--c-borde)}
.marco__barra span{margin-left:auto;font-family:var(--f-datos);font-size:.72rem;color:var(--c-texto-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.marco__cuerpo{padding:1.2rem;overflow:hidden;min-width:0}
.mini-web{display:grid;gap:var(--e-3)}
.mini-web__hero{background:var(--c-acento-claro);border-radius:var(--radio);padding:1.1rem;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--e-3);align-items:center}
.mini-web__hero h4{margin:0 0 .4rem}
.mini-web__hero p{font-size:.85rem;margin:0;color:var(--c-texto-suave)}
.mini-form{background:var(--c-superficie);border-radius:var(--radio);padding:.8rem;display:grid;gap:.5rem;border:1px solid var(--c-borde)}
.mini-form i{display:block;height:26px;border-radius:var(--radio-chico);background:var(--c-fondo-alt);border:1px solid var(--c-borde)}
.mini-form b{height:32px;border-radius:var(--radio-chico);background:var(--c-acento);color:var(--c-primario-osc);font-size:.8rem;display:flex;align-items:center;justify-content:center;font-family:var(--f-disp)}
.mini-web__tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.mini-web__tarjetas i{display:block;height:56px;border-radius:var(--radio);background:var(--c-fondo-alt);border:1px solid var(--c-borde)}
.mini-web .aviso{justify-self:end}
.mini-crm{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--e-3)}
.mini-crm__lateral{background:var(--c-primario-osc);border-radius:var(--radio);padding:.9rem .7rem;color:#fff;font-size:.76rem;display:grid;align-content:start;gap:.5rem;font-family:var(--f-disp)}
.mini-crm__lateral b{opacity:.55;font-weight:500;letter-spacing:.08em;font-size:.66rem}
.mini-crm__lateral span{padding:.3rem .45rem;border-radius:var(--radio-chico);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-crm__lateral span.on{background:rgba(255,255,255,.16)}
.demo-tablero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.demo-columna{min-width:0}
.demo-columna h5{margin:0 0 .5rem;font-family:var(--f-datos);font-weight:400;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-suave);display:flex;justify-content:space-between}
.demo-ficha{background:var(--c-fondo-alt);border:1px solid var(--c-borde);border-radius:var(--radio-chico);padding:.5rem .55rem;font-size:.74rem;margin-bottom:.5rem;line-height:1.3;overflow:hidden}
.demo-ficha b{display:block;font-size:.76rem}
.demo-ficha em{display:block;margin-top:.15rem;font-style:normal;color:var(--c-primario);font-family:var(--f-datos);font-size:.66rem}
.mini-ai{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--e-3)}
.chat{display:grid;gap:.55rem;align-content:start}
.burbuja{max-width:88%;padding:.6rem .8rem;border-radius:14px;font-size:.84rem;line-height:1.35;background:var(--c-fondo-alt);border:1px solid var(--c-borde)}
.burbuja--ai{background:var(--c-acento-claro);border-color:transparent;margin-left:auto;border-bottom-right-radius:4px}
.burbuja small{display:block;font-family:var(--f-datos);font-size:.64rem;color:var(--c-texto-suave);margin-bottom:.2rem;letter-spacing:.04em;text-transform:uppercase}
.llamada{background:var(--c-tinta);color:#fff;border-radius:14px;padding:var(--e-3);font-size:.82rem;display:grid;gap:.6rem;align-content:start}
.llamada b{font-family:var(--f-disp);font-size:.95rem}
.llamada .hora{color:var(--c-acento);font-family:var(--f-datos)}
.llamada ul{margin:0;padding-left:1rem;display:grid;gap:.3rem;color:var(--c-sobre-oscuro)}
@media (max-width:640px){
  .mini-web__hero,.mini-ai{grid-template-columns:1fr}
  .mini-crm{grid-template-columns:1fr}
  .mini-crm__lateral{display:flex;flex-wrap:wrap}
}

/* ── Formularios: propuesta ───────────────────────────────────────────── */
.formulario{display:grid;gap:var(--e-4)}
.formulario__fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-4)}
.formulario fieldset{border:0;margin:0;padding:0}
.formulario legend{padding:0;margin-bottom:.35rem}
.opciones{display:grid;gap:.5rem}
.formulario .btn{justify-self:start}
.formulario__error{margin:0;padding:.8rem 1rem;border-radius:var(--radio);background:var(--c-senal-claro);color:var(--c-error);font-weight:600}
.formulario__nota{margin:0;font-size:var(--t-small);color:var(--c-texto-suave)}
.lista-numerada{margin:0;padding-left:1.3em;color:var(--c-texto-suave)}
.lista-numerada li{margin-bottom:.4em}
@media (max-width:640px){.formulario__fila{grid-template-columns:1fr}.formulario .btn{justify-self:stretch}}

/* ── Agenda escaparate (/agenda/) ─────────────────────────────────────── */
.reserva{padding:clamp(1rem,3vw,1.6rem);border-radius:var(--radio-grande);background:var(--c-superficie);border:1px solid var(--c-borde)}
.reserva__paso+.reserva__paso{margin-top:1.6rem}
.reserva__dias{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:.5rem}
.reserva__dia{min-height:64px;border-radius:var(--radio);border:1.5px solid var(--c-borde);background:var(--c-superficie);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;text-decoration:none;color:var(--c-tinta)}
.reserva__dia small{font-family:var(--f-datos);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--c-texto-suave)}
.reserva__dia b{font-family:var(--f-disp);font-size:1.05rem}
.reserva__dia:hover{border-color:var(--c-primario-osc);color:var(--c-tinta)}
.reserva__dia[aria-current="true"]{border-color:var(--c-primario-osc);background:var(--c-primario-osc);color:#fff}
.reserva__dia[aria-current="true"] small{color:var(--c-sobre-oscuro)}
.reserva__horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.reserva__hora{min-height:48px;border-radius:var(--radio-pastilla);border:1.5px solid var(--c-borde);background:var(--c-fondo-alt);font:700 .95rem var(--f-datos);color:var(--c-primario-osc);text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center}
.reserva__hora:hover{border-color:var(--c-primario-osc);color:var(--c-primario-osc)}
.reserva__hora--ocupada{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.reserva__hora--ocupada small{font-family:var(--f-texto);font-weight:500;font-size:.66rem;text-decoration:none}
.reserva__nota{font-size:var(--t-small);color:var(--c-texto-suave);margin:1rem 0 0}

/* ── Blog: listado y entrada ──────────────────────────────────────────── */
/* auto-fit y no auto-fill: con pocas entradas, se reparten todo el ancho. */
.posts{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.post{display:flex;flex-direction:column;overflow:hidden;padding:0;transition:transform .35s,box-shadow .35s}
.post:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.post__thumb{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,var(--c-acento-claro),var(--c-fondo-alt));position:relative;overflow:hidden}
.post__thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.post__body{padding:var(--e-4);flex:1;display:flex;flex-direction:column}
.post__cat{font-family:var(--f-datos);font-size:var(--t-cejilla);color:var(--c-primario);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--e-2)}
.post__title{font-size:var(--t-h4);margin-bottom:var(--e-2)}
.post__title a{color:inherit;text-decoration:none}
.post__title a:hover{color:var(--c-primario)}
.post__excerpt{font-size:var(--t-small);color:var(--c-texto-suave);flex:1}
.post__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);border-top:1px solid var(--c-borde);padding-top:var(--e-3)}
.post__date{font-size:var(--t-small);color:var(--c-texto-suave)}
.post__link{font-family:var(--f-disp);font-weight:600;font-size:var(--t-small);display:inline-flex;align-items:center;gap:.3rem;min-height:var(--tactil);transition:gap .2s}
.post__link:hover{gap:.6rem}
.blog-filtros{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-5)}
.blog-filtros .chip[aria-current="page"]{background:var(--c-primario-osc);border-color:var(--c-primario-osc);color:#fff}
.blog-vacio{color:var(--c-texto-suave)}
.paginacion{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-6)}
.entrada-cab{background:var(--c-fondo-alt);border-bottom:1px solid var(--c-borde);padding-block:clamp(2.4rem,6vw,4.4rem)}
.entrada-cab__in{max-width:52rem}
.entrada-cab .eti{margin-top:var(--e-3)}
.entrada-cab h1{font-size:var(--t-h2);letter-spacing:-.03em} /* el título de una entrada es largo: a escala de h2 para no partirse en seis líneas */
.entrada-cab__meta{margin:var(--e-3) 0 0;font-family:var(--f-datos);font-size:var(--t-small);color:var(--c-texto-suave)}
.entrada-portada{margin-top:clamp(1.6rem,4vw,2.6rem)}
.entrada-portada img{width:100%;max-width:52rem;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radio-grande);box-shadow:var(--sombra)}
.entrada-cuerpo{padding-block:clamp(2rem,5vw,3.4rem) var(--sec-y)}
.entrada-cuerpo .prosa{max-width:52rem}
.entrada-cuerpo .prosa>*:first-child{margin-top:0}
.entrada-cuerpo .prosa table{display:block;overflow-x:auto}
.entrada-cuerpo .prosa img{height:auto}
.entrada-cuerpo .prosa a{overflow-wrap:anywhere}
.entrada-relacionadas{margin-top:var(--e-6);max-width:52rem;padding-top:var(--e-5);border-top:1px solid var(--c-borde)}

/* ── 404 y 500 ────────────────────────────────────────────────────────── */
/* Excepción anotada: la cifra del error es un adorno a escala de pantalla, no un título. */
.er-n{font-family:var(--f-datos);font-weight:700;font-size:clamp(4rem,12vw,8rem);line-height:1;color:var(--c-acento);margin:0 0 var(--e-3)}
.er-caja{max-width:40rem}

/* ── Legales: el texto tal cual, con la medida de la prosa ────────────── */
.lg-cabeza{padding-block:clamp(2.2rem,5vw,3.6rem)}
.lg-cabeza h1{margin:var(--e-3) 0 0}
.lg-texto{font-size:var(--t-cuerpo)}
/* Las direcciones largas de los textos legales (las de Google) no caben en un móvil: se parten. */
.lg-texto a{overflow-wrap:anywhere}
.lg-texto ol{padding-left:1.3em}
.lg-texto table{min-width:640px}
/* La tabla de cookies viene del sitio anterior envuelta en .tabla-scroll: la caja lleva el scroll. */
.lg-texto .tabla-scroll{overflow-x:auto;margin:1.5em 0;border:1px solid var(--c-borde);border-radius:var(--radio)}
.lg-texto td p{margin:0}

/* ── Página de mantenimiento (sitio apagado desde el panel) ───────────── */
.mantenimiento{min-height:100vh;display:grid;place-items:center;background:var(--c-fondo-alt)}
.mantenimiento__caja{padding-block:var(--sec-y);max-width:40rem}
.mantenimiento__caja .marca{margin-bottom:var(--e-5)}