/* =========================================================================
   LA TIPOGRAFIA DE CUERPO, CON AUTOR.
   El sistema de marca pide Calibri. Calibri viene con Office: en un Mac, en un
   iPhone o en Linux NO EXISTE, asi que el 80% de los pixeles de un sitio cuya
   tesis es el oficio caian en la fuente que trae el sistema operativo de
   fabrica. Servir Calibri no se puede —es de Microsoft— pero SI se puede
   servir la intencion de esa eleccion: una humanista calida, no una grotesca
   neutra. Source Sans 3 es eso, es variable (un archivo para todos los pesos),
   pesa 28 kB por estilo en subconjunto latino, y lleva licencia OFL.
   Calibri se queda de primer respaldo: donde el sistema de marca SI se cumple,
   se cumple igual.
   `swap` y no `block`: una pagina que se esconde mientras baja una fuente es
   una pagina que castiga a quien tiene mala red por un detalle de estilo.
   ========================================================================= */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:300 700;
  font-display:swap;src:url(/fonts/source-sans-3-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400 600;
  font-display:swap;src:url(/fonts/source-sans-3-italic.woff2) format("woff2")}
:root{--ink:#0b1f3a;--muted:#5a6b82;--paper:#ffffff;--cream:#f4f8fd;--accent:#1d4ed8;--accent-deep:#1740a8;--red:var(--accent);--line:#dbe4f0;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17.5px/1.62 "Source Sans 3",Calibri,"Gill Sans","Segoe UI",sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}.reading{width:min(calc(100% - 40px),720px);margin:auto}header{padding:22px 0;border-bottom:1px solid var(--line)}nav{display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{font:600 18px Georgia,serif;text-decoration:none}.links{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}.links a{text-decoration:none;color:var(--muted)}.links a:hover{color:var(--ink)}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin:0 0 14px}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.07;font-weight:500}h1{font-size:clamp(44px,min(5.6vw,7.4vh),74px);letter-spacing:-.045em;margin:0}h2{font-size:clamp(34px,4vw,57px);letter-spacing:-.035em;margin:0 0 20px}h3{font-size:26px;margin:0 0 9px}.hero{display:grid;grid-template-columns:1.05fr .75fr;gap:clamp(30px,7vw,100px);align-items:end;padding:56px 0 72px}.hero-copy{padding-bottom:10px}.lede{font:clamp(20px,2.2vw,28px)/1.42 Georgia,serif;max-width:27ch;margin:30px 0;color:#3c3b37}.hero figure{margin:0}.hero img{width:100%;height:min(62vw,610px);object-fit:cover;object-position:center;border-radius:var(--r-card,14px)}.caption{font-size:13px;color:var(--muted);margin:8px 0 0}.rule{border:0;border-top:1px solid var(--line);margin:0}.section{padding:76px 0}.intro-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:45px}.kicker{font-size:14px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.09em}.big-copy{font:clamp(24px,3vw,38px)/1.3 Georgia,serif;max-width:31ch;margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.card{display:block;background:var(--cream);padding:26px;text-decoration:none;border:1px solid var(--line);border-radius:var(--r-card,22px);min-height:220px;transition:transform .25s,box-shadow .25s,border-color .25s}.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(11,31,58,.4)}.card p{color:var(--muted);margin:0;font-size:15px}.card .type{font-size:12px;color:var(--red);font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:52px}.button{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:12px 22px;text-decoration:none;font-size:14px;font-weight:700;background:var(--cream);transition:background .2s,color .2s,border-color .2s,transform .2s}.button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.button.red{background:var(--accent);color:#fff;border-color:var(--accent)}.button.red:hover{background:var(--accent-deep)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.quote{padding:clamp(20px,4vw,42px) 0}
.quote .wrap{background:var(--ink);color:#f4f8ff;border-radius:var(--r-card,24px);padding:clamp(34px,6vw,76px) clamp(26px,5vw,64px)}.quote blockquote{font:clamp(30px,5vw,63px)/1.14 Georgia,serif;letter-spacing:-.035em;max-width:19ch;margin:0}.quote p{color:#b9cbe4;max-width:55ch;margin:27px 0 0}.page-head{padding:80px 0 55px}.page-head h1{max-width:12ch}.page-head .lede{max-width:38ch}.prose{padding:0 0 76px}.prose p,.prose li{font-size:19px}.prose p{margin:0 0 22px}.prose h2{margin:58px 0 17px;font-size:40px}.prose h3{margin:36px 0 12px}.prose .small{font-size:14px;color:var(--muted)}.timeline{border-left:1px solid var(--line);padding-left:26px;margin:36px 0}.timeline article{position:relative;margin:0 0 32px}.timeline article:before{content:"";position:absolute;width:9px;height:9px;background:var(--red);border-radius:50%;left:-31px;top:8px}.timeline time{font-size:13px;font-weight:800;color:var(--red);letter-spacing:.08em}.feature-list{display:grid;gap:14px;margin-top:35px}.feature-list article{background:var(--cream);padding:28px;border:1px solid var(--line);border-radius:var(--r-tile,16px)}.feature-list p{font-size:16px;margin:0;color:var(--muted)}.feature-list article p+p{margin-top:15px}details{background:var(--cream);padding:18px 22px;margin:20px 0;border:1px solid var(--line);border-radius:var(--r-tile,16px)}summary{cursor:pointer;font-weight:700}details p{font-size:16px!important;margin:14px 0 0!important}.review-label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}.affiliate{background:#eaf2fd;border-radius:var(--r-tile,16px);padding:20px 24px;font-size:14px;margin:32px 0}.byline{font-size:14px;color:var(--muted);margin:18px 0 0}footer{border-top:1px solid var(--line);padding:28px 0 36px;font-size:13px;color:var(--muted)}footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}@media(max-width:720px){.hero,.intro-grid{grid-template-columns:1fr}.hero{padding:48px 0 58px}.hero img{height:110vw;max-height:560px}.cards{grid-template-columns:1fr}.section{padding:56px 0}.page-head{padding:54px 0 35px}.links{gap:13px}nav{align-items:flex-start;flex-direction:column}.prose p,.prose li{font-size:18px}}

/* ============================================================================
   RAIL-KIT DRESS + HOMEPAGE — 2026-09-18
   The kit is vendored at /vendor/rail-kit/rail.css and never edited (it has a
   sha256 lock). Everything below is the gonzaloaguilar.tech dress: tokens the
   kit reads, and the few overrides that turn a neutral kit into this brand.
   Same pattern the Daniel Zea site uses, in this site's cream/ink/red instead
   of copper on black.
   ========================================================================= */
:root{
  --serif:Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --card:#ffffff;
  --band:clamp(58px,8vw,116px);
  --r-card:clamp(18px,2.1vw,28px);--r-tile:clamp(14px,1.6vw,20px);
  --r-acc:999px;
  --elev-1:0 1px 2px rgba(11,31,58,.06), 0 18px 40px -26px rgba(11,31,58,.28);
  --et:12.5px; --et-track:.14em;

  /* Tokens the kit reads. Each one exists because the kit asked for it; the
     ones the kit maps but never uses are deliberately absent. */
  --rail-accent:var(--red);
  --rail-text:var(--ink);
  --rail-muted:var(--muted);
  --rail-card-bg:var(--card);
  --rail-card-border:var(--line);
  --rail-card-radius:var(--r-card);
  --rail-card-shadow:var(--elev-1);
  --rail-card-width:400px; --rail-card-width-sm:300px; --rail-card-width-lg:520px;
  --rail-gap:24px;
  --rail-media-aspect:4/5;
  --rail-title-font:var(--serif); --rail-heading-font:var(--serif);
  --rail-stat-font:var(--serif); --rail-meta-font:var(--sans);
  --rail-eyebrow-color:var(--red); --rail-eyebrow-size:12px;
  --rail-focus:var(--red);
}

/* ---- Bandas. Cada carrusel vive en una banda con su propio filete, que es
   lo que impide que seis carruseles seguidos se lean como una sola lista. -- */
section.band{padding-block:var(--band);border-top:1px solid var(--line)}
section.band--paper{background:#f2f7fd}
.bh{margin-bottom:clamp(26px,3.6vw,46px);max-width:60ch}
.bh h2{margin:12px 0 0;font-size:clamp(27px,3.4vw,42px);line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
.bh p{color:var(--muted);margin:16px 0 0;max-width:52ch;font-size:19px}

/* ---- La cabecera del carrusel: contador y flechas. En táctil el kit esconde
   las flechas (no hay ratón que las use) pero el contador se queda, porque
   "3 / 6" sigue diciendo cuántas tarjetas hay. --------------------------- */
.rail__header{align-items:flex-end}
.rail__header--solo{align-items:center;margin-bottom:8px}
.rail__arrows{align-items:center}
.rail__cuenta{font-size:13px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px}
@media(max-width:767px){.rail__cuenta{display:inline-block}}
.rail__arrow{border-color:var(--line);background:var(--card);font-size:16px;line-height:1;transition:background .2s,color .2s,border-color .2s}
.rail__arrow:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.rail__scroller:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

/* ---- El respiro de la tarjeta lo define el gap del cuerpo, no el margen por
   defecto del navegador. Sin esto cada tarjeta carga ~85px de aire que nadie
   pidió (medido en el sitio de Daniel Zea antes de corregirlo). ----------- */
.rail-card__title,.rail-card__subtitle,.rail-card__meta,.rail-card__description{margin:0}
.rail-card__body{gap:12px}
.rail-card__title{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.1vw,26px);line-height:1.15;letter-spacing:-.02em}
.rail-card__subtitle{font-size:15px;color:var(--muted)}
.rail-card__description{font-size:15.5px;line-height:1.55;color:#3e4f66}
.rail-card__meta{font-size:13px;color:var(--muted)}
.rail-card[data-rail-kind="text"] .rail-card__badge{position:static;padding:0;border-radius:0;
  background:none;order:-1}
.rail-card__badge{font-size:var(--et);letter-spacing:var(--et-track);text-transform:uppercase;color:var(--red);font-weight:700}
a.rail-card{text-decoration:none;color:inherit;transition:border-color .25s,transform .25s,box-shadow .25s}
@media (hover:hover) and (pointer:fine){
  a.rail-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 1px 2px rgba(11,31,58,.08),0 26px 46px -28px rgba(11,31,58,.4)}
}

/* ---- La tarjeta de TEXTO, con cuerpo de cartel.
   No hay fotografía de estos proyectos y no se va a inventar ninguna: el sitio
   tiene un solo retrato real. El campo que en un cartel ocupa la foto es aquí
   tipográfico — la cifra enorme, en contorno, sangrando por el borde, como el
   numeral del Top 10 de Netflix. Ordena la fila sin competir con el texto, y
   por eso va aria-hidden: es un ordinal, no un dato que haya que leer. ---- */
.rail-card[data-rail-kind="text"]{position:relative;overflow:hidden;min-height:288px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);
  box-shadow:var(--elev-1)}
.rail-card[data-rail-kind="text"] .rail-card__body{padding-top:clamp(20px,2.4vw,28px);gap:12px}
.rail-card[data-rail-kind="text"] .rail-card__description{max-width:40ch}
a.rail-card[data-rail-kind="text"]:hover{border-color:var(--accent)}
.rail-card__cifra{position:absolute;right:-.06em;bottom:-.04em;z-index:0;
  font-family:var(--serif);font-weight:400;line-height:.78;
  font-size:clamp(140px,17vw,190px);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(29,78,216,.28);
  pointer-events:none;user-select:none}
.rail-card[data-rail-kind="text"] .rail-card__body{position:relative;z-index:1}
.rail-card__pie{position:relative;z-index:1;margin:auto 0 0;padding:14px clamp(18px,2vw,26px) clamp(18px,2vw,24px);
  font-size:var(--et);letter-spacing:var(--et-track);text-transform:uppercase;color:var(--red);
  display:inline-flex;align-items:center;gap:7px}
.rail-card__pie i{font-style:normal;transition:transform .2s}
a.rail-card:hover .rail-card__pie i{transform:translateX(3px)}

/* ---- La tarjeta de CIFRA. El número en serif, grande, y debajo qué mide.
   El sello dice de dónde sale el dato; una cifra sin procedencia es una
   afirmación, no una prueba. ---------------------------------------------- */
.rail-card[data-rail-kind="stat"] .statv{font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,5.6vw,66px);line-height:.95;letter-spacing:-.04em;margin:0}
.rail-card[data-rail-kind="stat"] .statl{font-size:var(--et);letter-spacing:var(--et-track);
  text-transform:uppercase;color:var(--red);margin:10px 0 0;font-weight:700}
.sello{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:14px 0 0;border-top:1px solid var(--line);padding-top:10px}

/* ---- El cartel grande. Una sola imagen real, el retrato, y encima el texto
   con su velo. El velo no es gusto: sobre una foto clara el texto blanco
   desaparece, y la foto cambia con el recorte. ---------------------------- */
.rail-billboard{border:0;border-radius:clamp(22px,2.6vw,34px);overflow:hidden;background:var(--ink);
  box-shadow:var(--elev-1);aspect-ratio:auto;min-height:clamp(340px,44vw,520px);isolation:isolate}
/* El kit manda la foto a z-index:-1 y con `isolation:isolate` eso la deja
   DETRAS del propio cartel: se veia el panel oscuro y la mitad de la imagen.
   La foto es el fondo del cartel, no algo de otra capa. */
.rail-billboard__image{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%}
.rail-billboard__badge{position:absolute;top:0;left:0;z-index:2;margin:clamp(16px,1.8vw,22px);
  font-size:var(--et);letter-spacing:var(--et-track);text-transform:uppercase;font-weight:700;
  color:#eef5ff;padding:7px 15px;border-radius:0;background:rgba(8,22,42,.62);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
/* El texto a la izquierda y no centrado: es un titular editorial, no un
   poster de plataforma, y la columna de lectura vive a la izquierda en el
   resto de la pagina. */
/* EL VELO VA EN EL CARTEL, NO EN EL TEXTO. Puesto sobre `__content` cubria
   sus 44ch —la mitad del ancho— y dejaba un corte vertical duro a media foto.
   Un velo que solo tapa donde hay letra se lee como un parche; el degradado
   tiene que cruzar el cartel entero. */
.rail-billboard::after{content:"";position:absolute;inset:auto 0 0 0;z-index:0;
  height:72%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,22,42,0),rgba(8,22,42,.74) 46%,rgba(8,22,42,.95))}
.rail-billboard__content{position:absolute;inset:auto 0 0 0;z-index:1;color:#f6faff;
  align-items:flex-start;text-align:left;background:none;
  padding:clamp(24px,4vw,52px);max-width:52ch}
.rail-billboard__title{font-family:var(--serif);font-weight:500;margin:0;
  font-size:clamp(30px,4.6vw,58px);line-height:1.05;letter-spacing:-.032em;max-width:20ch}
.rail-billboard__status{margin:16px 0 0;max-width:52ch;color:#cfdcec;font-size:17px;line-height:1.55}
.rail-billboard__actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.rail-billboard__actions a{display:inline-block;text-decoration:none;font-size:14px;font-weight:700;
  padding:13px 24px;border-radius:var(--r-acc);background:var(--red);color:#fff}
.rail-billboard__actions a:hover{background:var(--accent-deep)}

/* ---- Las cifras del oficio, en fila. Viven juntas a propósito: una cifra
   sola es una presunción, doce juntas son un historial. ------------------ */
/* El kit apila las cifras en COLUMNAS automaticas (`grid-auto-flow:column`),
   que es lo correcto dentro de una tarjeta: tres cifras pequenas en fila.
   Aqui son cuatro bloques con texto y tienen que envolver en el telefono —
   medido: sin esto, en 375px daban 196px + tres columnas de 48px, con el
   texto cortado. `grid-template-columns` solo no basta: mientras el flujo
   siga siendo `column`, todo lo que no cabe en las pistas declaradas se va a
   columnas implicitas. */
.rail-figures{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;background:none;border:0;margin:0}
.rail-figures__pair{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-tile);padding:28px 26px;overflow:hidden}
.rail-figures__label{font-size:var(--et);letter-spacing:var(--et-track);text-transform:uppercase;
  color:var(--red);font-weight:700}
.rail-figures__value{position:relative;z-index:1;font-family:var(--serif);
  font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.038em;margin:12px 0 0}
/* El resplandor detrás de la cifra. En el sitio de Daniel la nota fue que las
   tarjetas sin foto, sin cifra y sin acento «se ven sin vida»: el remedio no
   era más texto, era un foco de luz. Aquí el foco es del azul de la casa y
   vive en la esquina, no detrás de la letra, para no tocar su contraste. */
.rail-figures__pair::before{content:"";position:absolute;inset:-40% 40% 55% -25%;
  background:radial-gradient(60% 60% at 30% 40%,rgba(29,78,216,.16),transparent 70%);
  pointer-events:none}
.rail-figures__note{font-size:14px;color:var(--muted);margin:10px 0 0}

/* ---- La lista de trayectoria: filas, no tarjetas. Una fila es lo correcto
   cuando lo que importa es el orden y la fecha. --------------------------- */
.rail-list__items{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rail-list__item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);
  transition:transform .25s,box-shadow .25s,border-color .25s}
@media (hover:hover) and (pointer:fine){.rail-list__item:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 20px 40px -26px rgba(11,31,58,.38)}}
.rail-list__row{display:flex;gap:clamp(16px,3vw,44px);align-items:baseline;padding:24px clamp(18px,2.4vw,28px);
  text-decoration:none;color:inherit}
.rail-list__value{font-size:var(--et);letter-spacing:var(--et-track);text-transform:uppercase;
  color:var(--red);font-weight:700;flex:0 0 auto;min-width:9ch}
.rail-list__title{font-family:var(--serif);font-size:21px;display:block;line-height:1.2}
.rail-list__description{color:var(--muted);font-size:15.5px;display:block;margin-top:7px;max-width:62ch}

/* ---- El cierre. Un bloque, una acción. --------------------------------- */
.rail-cta{display:block;text-decoration:none;color:#f6faff;background:var(--ink);
  border-radius:clamp(22px,2.6vw,34px);padding:clamp(28px,4.4vw,56px);box-shadow:var(--elev-1)}
.rail-cta__eyebrow{display:block;font-size:var(--et);letter-spacing:var(--et-track);
  text-transform:uppercase;color:#8fb4f5;font-weight:700}
.rail-cta__main{display:block;font-family:var(--serif);font-size:clamp(28px,4vw,50px);
  line-height:1.06;letter-spacing:-.032em;margin-top:14px;max-width:22ch}
.rail-cta__fineprint{display:block;color:#c4d4e8;margin-top:18px;font-size:16px;max-width:52ch}
@media (hover:hover) and (pointer:fine){.rail-cta:hover .rail-cta__main{color:#fff}}

/* ---- La cabecera se queda a la vista. En una portada larga la navegación
   que se va con el scroll obliga a volver arriba para cambiar de idea. ---- */
@media(min-width:768px){
  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);
    backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4)}
}
/* En el telefono la navegacion ocupa dos filas: pegada arriba se come 110px
   de pantalla en todas las secciones. Ahi se queda donde estaba. */

/* ---- El asomo de la siguiente tarjeta en el teléfono. Medido en el sitio de
   Daniel Zea: con el ancho del kit la siguiente tarjeta asomaba 14px, que no
   se lee como media tarjeta sino como el borde de la pantalla. Un ancho común
   calculado al revés —desde los ~46px de asomo que hacen falta— cuesta un 7%
   de tarjeta y compra el gesto de "hay otra". ---------------------------- */
@media(max-width:767px){
  .rail[data-rail-size] .rail__scroller > *{width:min(var(--rail-card-width,400px),76vw)}
  .bh h2{font-size:clamp(26px,6.4vw,33px)}
}
@media (prefers-reduced-motion:reduce){
  .rail__scroller{scroll-behavior:auto}
  a.rail-card:hover{transform:none}
}

/* El objetivo táctil de la navegación medía 23px de alto: un píxel por debajo
   del mínimo AA de WCAG 2.2, que son 24 y no 44. Viene de antes de este
   rediseño, pero vive en esta hoja y cuesta una línea. */
.links a{display:inline-block;padding-block:4px}

/* ============================================================================
   LA FICHA CON ILUSTRACIÓN — lenguaje de cartel
   El kit arma la tarjeta al revés a propósito, porque es neutral entre marcas:
   texto primero, figura después, fondo transparente y un filete arriba. Eso es
   un lenguaje EDITORIAL y está bien para una revista. Para un catálogo manda
   la portada, así que la ilustración sube a la primera fila.
   La rejilla evita el número mágico: una columna, tres filas, y la imagen en
   la primera. Si el texto crece, crece la tarjeta; nada se pisa nunca.
   ========================================================================= */
.rail-card[data-rail-kind="media"]{display:grid;grid-template-columns:1fr;
  grid-template-rows:auto auto auto auto;border-top:0;background:var(--card);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--elev-1)}
.rail-card[data-rail-kind="media"] .rail-card__figure{grid-area:1/1/2/2;order:0;
  margin:10px 10px 0;border-radius:clamp(12px,1.5vw,20px);overflow:hidden;
  aspect-ratio:4/5;background:#eef4fc}
.rail-card[data-rail-kind="media"] .rail-card__body{grid-area:2/1/3/2;gap:10px;
  padding:clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px) 0}
/* El kit no le pone `order` a la descripción, así que caía junto al distintivo
   y se leía ANTES del titular. Quien mira decide por el titular y la imagen;
   el párrafo es para quien ya se detuvo. */
.rail-card[data-rail-kind="media"] .rail-card__description{grid-area:3/1/4/2;order:3;
  padding:0 clamp(16px,1.8vw,20px);margin:10px 0 0}
.rail-card[data-rail-kind="media"] .rail-card__pie{grid-area:4/1/5/2}
/* La ilustración arranca a la misma altura en todas las tarjetas: el cuerpo no
   se estira (`flex:1` del kit), y la holgura la absorbe la descripción, que va
   DESPUÉS de la imagen y por tanto no puede moverla. */
.rail-card[data-rail-kind="media"] .rail-card__title{min-height:2lh}
.rail-card[data-rail-kind="media"] .rail-card__body{flex:0 0 auto}
.rail-card[data-rail-kind="media"] .rail-card__description{flex:1}
/* EL DISTINTIVO, SOBRE LA ILUSTRACIÓN, EN VIDRIO. Un rótulo sobre imagen no
   puede fiarse del color de la imagen, porque la imagen cambia en cada ficha:
   se trae su propio fondo. Opaco taparía; el vidrio deja ver y sostiene la
   letra. Medido sobre el peor caso —zona blanca de la ilustración— el crema
   frío sobre velo .66 pasa de sobra. */
/* EL DISTINTIVO ES UN EPÍGRAFE, NO UNA MARCA DE AGUA.
   En el kit es una pastilla absoluta con fondo oscuro, pensada para flotar
   sobre una fotografía. Pero en este marcado el distintivo vive DENTRO de
   `__body` —es hijo del panel, no de la tarjeta—, así que `grid-area` no lo
   puede llevar sobre la imagen: se quedaba como un borrón oscuro encima del
   titular. Y sobre estas ilustraciones tampoco debería ir: acaban en blanco o
   azul pálido, y una etiqueta oscura ahí es un parche.
   Su sitio es el panel, encima del titular, que es lo que siempre fue. */
.rail-card__body .rail-card__badge{position:static;align-self:flex-start;
  background:#e8f0fe;padding:5px 12px;border-radius:999px;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#14399f;font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;order:-1}
.rail-card[data-rail-kind="media"] .rail-card__meta{padding:0}
/* El gesto de catálogo: la portada respira al pasar por encima. Sólo con ratón
   fino — en el teléfono no existe el hover y ahí se queda pegado. */
@media (prefers-reduced-motion:no-preference){
  .rail-card__image{transition:transform .7s cubic-bezier(.2,.7,.2,1)}}
@media (hover:hover) and (pointer:fine){
  a.rail-card[data-rail-kind="media"]:hover .rail-card__image{transform:scale(1.06)}}
/* El filo entre la ilustración y el panel: sin esto se leen como dos piezas
   pegadas. Las ilustraciones acaban en blanco o azul pálido, así que basta un
   filete, no un degradado. */
.rail-card[data-rail-kind="media"] .rail-card__figure{box-shadow:0 1px 0 rgba(11,31,58,.05)}

/* La procedencia de las imágenes. Va a la vista y no sólo en el pie: quien
   llega a un carrusel desde un enlace puede no bajar nunca hasta el final. */
.nota-ia{font-size:13px;color:var(--muted);margin:18px 0 0}

/* EL VELO DEL CARTEL EN EL TELÉFONO.
   Medido a 375px: el cartel se queda en 340px de alto y el texto ocupa casi
   todo, así que el titular cae en el tramo TRANSPARENTE del degradado —y la
   ilustración ahí es blanca—. En escritorio no pasaba porque sobra altura por
   arriba. Un velo calculado para una proporción no vale para la otra: aquí
   cubre el cartel entero y no baja de .80 donde vive la letra, que sobre la
   zona más clara de la ilustración da ~9,5:1. */
@media(max-width:767px){
  .rail-billboard::after{height:100%;
    background:linear-gradient(to bottom,rgba(8,22,42,.38),rgba(8,22,42,.82) 42%,rgba(8,22,42,.96))}
}

/* EL ANILLO DE FOCO, EN LA MARCA.
   El del navegador es naranja y de 1px: se ve, pero es el único naranja que
   quedaba en un sitio azul, y a 1px pegado al borde se confunde con el propio
   contorno del control. Dos píxeles, separado 3, en el azul de la casa.
   Sobre las superficies marinas —la cita, el bloque de cierre, el cartel— el
   azul del acento se pierde contra el fondo, así que allí el anillo es claro.
   Se comprobó pulsando el tabulador, no llamando a `focus()`: el foco
   programático no dispara `:focus-visible` y decía que no había anillo cuando
   sí lo había. */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.quote :focus-visible,
.rail-billboard :focus-visible,
a.rail-cta:focus-visible{outline-color:#9fc0ff}


/* ============================================================================
   LA ENTRADA — el gesto de Apple: las piezas aparecen al llegar a ellas.
   La clase `anim` la pone el JS. Si el JS no corre, nada se oculta nunca:
   ocultar con CSS y revelar con JS deja la página en blanco el día que el
   script falle, y una portada que depende de un script para tener texto no es
   una portada. Con `prefers-reduced-motion` no hay ni clase ni transición.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  /* SE MUEVE CON `translate`, NO CON `transform`, Y ESO NO ES UN DETALLE.
     `transform` es una sola propiedad: quien la escriba ultimo borra al otro.
     Con el revelado aqui, la inclinacion al tocar una ficha nunca llegaba a
     aplicarse —`transform: none` medido con la ficha tocada— porque este
     selector tiene mas especificidad y clavaba el valor.
     `translate` es una propiedad independiente que COMPONE con `transform`:
     el revelado sube la ficha, el tacto la inclina, y ninguno pisa al otro.
     Subir la especificidad habria funcionado hoy y vuelto a romperse a la
     siguiente regla que tocara el mismo transform. */
  html.anim .reveal{opacity:0;translate:0 16px}
  html.anim .reveal.visto{opacity:1;translate:none;
    transition:opacity .65s ease,translate .65s cubic-bezier(.2,.7,.2,1)}
}

/* La navegación también deja de ser texto suelto: píldora al pasar y al
   enfocar, que es lo que dice dónde estás sin subrayar nada. */
.links a{border-radius:999px;padding:4px 12px;transition:background .2s,color .2s}
.links a:hover{background:#eaf1fd;color:var(--ink)}

/* ============================================================================
   LA REJILLA DE CARTELES — para las páginas que eran un muro de texto.
   Mismo lenguaje que el carrusel de la portada, pero sin deslizar: en una
   página de lectura el contenido no se esconde detrás de un gesto.
   ========================================================================= */
.cartel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(18px,2.4vw,28px);margin:clamp(30px,4vw,48px) 0 0}
.cartel{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--elev-1);
  display:flex;flex-direction:column}
.cartel__figure{margin:10px 10px 0;border-radius:clamp(12px,1.5vw,20px);overflow:hidden;
  aspect-ratio:16/10;background:#eef4fc}
.cartel__figure img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .cartel__figure img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}}
@media (hover:hover) and (pointer:fine){.cartel:hover .cartel__figure img{transform:scale(1.05)}}
.cartel__body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:12px;flex:1}
.cartel__tag{align-self:flex-start;background:#e8f0fe;color:#14399f;border-radius:999px;
  padding:5px 12px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cartel h3{margin:0;font-size:clamp(21px,2.1vw,27px);line-height:1.15;letter-spacing:-.02em}
.cartel p{margin:0;font-size:16px;line-height:1.6;color:#3e4f66}
/* La ficha plegada dentro del cartel: la lección va donde va el caso, no en
   otra sección. Cerrada por defecto para que la página se lea de un vistazo. */
.cartel details{background:#f4f8fd;border:1px solid var(--line);border-radius:var(--r-tile);
  padding:14px 16px;margin:4px 0 0}
.cartel summary{cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--accent)}
.cartel summary::-webkit-details-marker{display:none}
.cartel summary::after{content:"+";font-size:19px;line-height:1;transition:transform .25s}
.cartel details[open] summary::after{transform:rotate(45deg)}
.cartel details p{font-size:15px!important;margin:12px 0 0!important;color:#3e4f66}
@media(max-width:560px){.cartel-grid{grid-template-columns:1fr}}

/* La creencia numerada: mismo numeral de la portada, en formato de lectura.
   El número sangra por el lado —nunca se le sierra la base— y va detrás del
   texto con `aria-hidden`, porque ordena la lista, no se lee. */
.creencia{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);margin:18px 0 0;box-shadow:var(--elev-1)}
.creencia__n{position:absolute;right:-.06em;bottom:-.1em;z-index:0;font-family:var(--serif);
  font-weight:400;line-height:.78;font-size:clamp(120px,14vw,175px);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(29,78,216,.2);pointer-events:none;user-select:none}
.creencia > :not(.creencia__n){position:relative;z-index:1}
.creencia h3{margin:0 0 12px;font-size:clamp(20px,2.2vw,28px);line-height:1.18;max-width:28ch}
.creencia p{margin:0 0 12px;font-size:17px;line-height:1.62;max-width:62ch}
.creencia p:last-child{margin-bottom:0}

/* ============================================================================
   LA TRAYECTORIA — cada puesto es una ficha, no un tramo de lista.
   La línea vertical con puntos leía como un formulario largo; el ojo no sabía
   dónde acababa un puesto y empezaba el siguiente.
   ========================================================================= */
.timeline{border-left:0;padding-left:0;margin:clamp(28px,3.6vw,44px) 0 0;display:grid;gap:clamp(16px,2vw,24px)}
.timeline article{position:relative;margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);box-shadow:var(--elev-1)}
.timeline article:before{display:none}
.timeline time{display:inline-block;background:#e8f0fe;color:#14399f;border-radius:999px;
  padding:5px 13px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.timeline h3{margin:14px 0 6px;font-size:clamp(20px,2.2vw,27px);line-height:1.18;letter-spacing:-.02em}
.timeline .small{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.timeline ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.timeline li{position:relative;padding-left:22px;font-size:16px;line-height:1.6;color:#3e4f66}
/* La viñeta es un punto del acento, no el disco gris del navegador: marca el
   principio de cada logro sin robarle peso a la cifra que lleva dentro. */
.timeline li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent);opacity:.55}
.timeline li strong{color:var(--ink);font-weight:700}

/* Los índices de escritura y escritorio: la ficha entera es el destino, no
   sólo el titular subrayado. Un título subrayado dentro de una caja que
   también parece pulsable promete dos cosas y cumple una. */
.feature-list article{transition:transform .25s,box-shadow .25s,border-color .25s}
@media (hover:hover) and (pointer:fine){
  .feature-list article:hover{border-color:var(--accent);transform:translateY(-2px);
    box-shadow:0 20px 40px -26px rgba(11,31,58,.38)}}
.feature-list h3{margin:10px 0 8px;font-size:clamp(19px,2vw,24px);line-height:1.2}
.feature-list h3 a{text-decoration:none}
.feature-list h3 a:after{content:" →";color:var(--accent);opacity:0;transition:opacity .2s,transform .2s}
@media (hover:hover) and (pointer:fine){.feature-list article:hover h3 a:after{opacity:1}}
.feature-list .review-label,.feature-list .eyebrow{display:inline-block;background:#e8f0fe;color:#14399f;
  border-radius:999px;padding:5px 12px;font-size:11.5px;letter-spacing:.1em;margin:0}

/* La cifra entra con un pequeño impulso, no aparece y ya. Va dentro de
   `no-preference` y del gancho `anim`: sin JS o con menos movimiento pedido,
   la cifra está quieta y completa desde el primer momento. */
@media (prefers-reduced-motion:no-preference){
  html.anim .rail-figures__pair .rail-figures__value{transform:scale(.94);opacity:.55;
    transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .5s ease}
  html.anim .rail-figures__pair.visto .rail-figures__value{transform:none;opacity:1}
}

/* ===========================================================================
 * NAVEGACIÓN — un componente, dos formas.
 *
 * Lo que estaba mal y qué lo causaba:
 *  - Seis enlaces del mismo peso, sin ningún estado actual: la página no decía
 *    dónde estabas. Ahora la actual lleva `aria-current` y una barra bajo el
 *    texto — el lector de pantalla y el ojo reciben el mismo dato.
 *  - En el teléfono `nav{flex-direction:column}` apilaba SEIS opciones encima
 *    del titular. Arriba quedan la marca y el idioma; los destinos bajan a la
 *    barra inferior del kit, donde llega el pulgar.
 * ======================================================================== */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line);padding:0}
.nav__bar{display:flex;align-items:center;gap:clamp(12px,3vw,34px);min-height:60px}
.nav__brand{font:600 18px Georgia,serif;text-decoration:none;white-space:nowrap;margin-right:auto}
.nav__links{display:flex;align-items:center;gap:4px;font-size:14px}
.nav__links>a,.nav__more>summary{position:relative;display:inline-block;padding:8px 12px;
  border-radius:999px;text-decoration:none;color:var(--muted);white-space:nowrap;
  transition:background .18s,color .18s}
.nav__links>a:hover,.nav__more>summary:hover{background:var(--cream);color:var(--ink)}
/* El estado actual: color, peso Y una barra. Sólo el color no sobrevive a una
 * pantalla con brillo alto, y es lo único que veía quien no distingue azul. */
.nav__links>a[aria-current="page"],.nav__more[data-current]>summary{color:var(--ink);font-weight:700}
.nav__links>a[aria-current="page"]::after,.nav__more[data-current]>summary::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--accent);border-radius:2px}
.nav__more{position:relative}
.nav__more>summary{list-style:none;cursor:pointer;font-weight:inherit}
.nav__more>summary::-webkit-details-marker{display:none}
.nav__more>summary::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.nav__sheet{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:2px;min-width:190px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 26px 50px -30px rgba(11,31,58,.55)}
.nav__sheet a{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;
  color:var(--muted);font-size:14px}
.nav__sheet a:hover{background:var(--cream);color:var(--ink)}
.nav__sheet a[aria-current="page"]{color:var(--ink);font-weight:700;background:var(--cream)}
.nav__lang{font-size:12px;font-weight:800;letter-spacing:.08em;text-decoration:none;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.nav__lang:hover{color:var(--ink);border-color:var(--ink)}
.nav :is(a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* La barra inferior es del kit; aquí sólo se le dice de qué color va este sitio. */
.rail-bottomnav{--rail-bottomnav-bg:var(--paper);--rail-bottomnav-active-color:var(--accent);
  color:var(--muted);border-top:1px solid var(--line)}
.rail-bottomnav__spacer{display:none}


/* ===========================================================================
 * ENTRADA Y TRÁNSITO
 *
 * La regla que gobierna todo esto: NADA se esconde sin JavaScript. El velo de
 * entrada se pinta desde JS y se quita con un temporizador Y con `pageshow`;
 * si el script no corre, no hay velo que quitar y la página se ve entera. Lo
 * contrario —`opacity:0` en el CSS y `1` desde JS— deja la página en blanco
 * cuando el script falla, que es el fallo que no se puede permitir.
 *
 * El tránsito entre páginas es la API nativa de vistas: cero JavaScript, y
 * donde no existe simplemente no pasa nada.
 * ======================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* AQUÍ HABÍA UN SEGUNDO JUEGO DE REGLAS, y estaba muerto. Esta misma hoja
     declaraba `::view-transition-old/new(root)` DOS veces, y ganaba la de más
     abajo: este bloque, con su comentario y todo, no lo ejecutaba nadie.
     La transición de verdad vive en «la gramática del movimiento», al final
     del fichero. Dejar dos definiciones de lo mismo es garantizar que alguien
     ajuste la que no se usa y no entienda por qué no cambia nada. */
}
/* =========================================================================
   LA ENTRADA. Fondo TINTA: el sitio entero es blanco, asi que un velo blanco
   es un fotograma vacio indistinguible de una pagina que aun no pinto.
   Encima, un lienzo con la red —los puntos se buscan y se enlazan— y el nombre
   apareciendo letra a letra. Se toca: el dedo empuja la red.
   No hay logotipo ni barra de progreso. Una barra que no mide nada miente
   sobre cuanto falta, y un logotipo girando no dice nada de nadie.
   ========================================================================= */
.gt-veil{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 8%,#122040 0%,var(--ink,#0b1220) 62%);
  text-align:center;padding:0 28px;overflow:hidden;touch-action:none}
.gt-veil__red{position:absolute;inset:0;width:100%;height:100%;display:block}
.gt-veil__stack{position:relative;z-index:2;display:grid;justify-items:center;
  gap:0;pointer-events:none;
  /* Endurecido, NO un fallo corregido: medido con Georgia, con Times y con
     Arial Black —dos respaldos bastante mas anchos, del tipo que aparece donde
     Georgia no existe, como Android— el nombre cabia en los tres casos. Lo que
     parecia un corte en las capturas eran las ultimas letras a media animacion.
     Se deja porque un hijo de rejilla vale `min-width:auto` y no puede encoger
     por debajo de su contenido: es la red que evita que un nombre mas largo o
     una tipografia futura si se salgan. */
  max-width:100%;min-width:0}

/* EL NOMBRE, LETRA A LETRA. Todo de golpe se lee como una imagen que acabo de
   cargar; escalonado se lee como algo que se esta escribiendo, y eso sostiene
   la mirada los dos segundos que dura. El hueco no se anima —una letra
   invisible que "cae" es un salto de maquetacion en mitad del nombre. */
.gt-veil__firma{margin:0;font:600 clamp(27px,7.2vw,52px)/1.06 Georgia,serif;
  color:var(--paper,#fff);letter-spacing:-.03em;display:flex;flex-wrap:wrap;
  justify-content:center;position:relative;padding-bottom:16px;
  /* Sin tope el nombre se sale por la derecha en cuanto la Georgia no esta y
     cae un respaldo mas ancho. Un nombre cortado en la primera pantalla es el
     peor sitio posible para un defecto tipografico. */
  /* Ancho completo para que el flex tenga contra que partir el dia que haga
     falta: un hijo de rejilla centrado se dimensiona a su contenido. */
  width:100%;max-width:100%}
.gt-veil__letra{display:inline-block;white-space:pre;
  animation:gt-letra .5s cubic-bezier(.2,.7,.2,1) both}
.gt-veil__letra--hueco{animation:none;width:.28em}
@keyframes gt-letra{from{opacity:0;transform:translateY(16px) rotate(2deg);filter:blur(5px)}}

.gt-veil__firma::after{content:"";position:absolute;left:50%;bottom:0;height:2px;
  width:0;background:var(--accent,#1d4ed8);transform:translateX(-50%);
  animation:gt-raya .8s cubic-bezier(.3,.8,.2,1) .86s forwards}
@keyframes gt-raya{to{width:min(100%,420px)}}

.gt-veil__pie{margin:18px 0 0;
  /* SIN TOPE. `30ch` daba 217 px medidos y la cadena necesita ~310: `ch` mide
     el ancho del cero y NO cuenta el `letter-spacing` de .26em que lleva este
     renglon, asi que la caja salia un 30% mas estrecha de lo pedido y partia
     «Applied AI» por la mitad. Es la TERCERA vez hoy que esta unidad me engaña
     en un rotulo con tracking. Regla para la proxima: con `letter-spacing`,
     `ch` no sirve — o se mide, o no se pone tope. */
  max-width:none;
  font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent,#1d4ed8) 62%,#fff);
  animation:gt-pie .6s ease 1.5s both}
@keyframes gt-pie{from{opacity:0;transform:translateY(8px)}}

/* La invitacion a saltar aparece tarde y baja: si llega con todo lo demas,
   compite con el nombre; si no llega nunca, la entrada parece un peaje. */
.gt-veil__saltar{position:absolute;left:0;right:0;bottom:30px;z-index:2;
  font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  /* Al 34% daba 3,0:1 sobre la tinta. Es la UNICA instruccion de esa pantalla:
     si no se lee, la entrada pasa a ser obligatoria sin decirlo. */
  color:color-mix(in srgb,var(--paper,#fff) 68%,transparent);
  animation:gt-saltar .6s ease 2s both}
@keyframes gt-saltar{from{opacity:0}}

/* Al irse el velo NO se desvanece: se atraviesa. Crece un 8% con desenfoque y
   la pagina aparece detras — la diferencia entre «se apago una pantalla» y
   «pase al otro lado». */
.gt-veil[data-leaving]{opacity:0;transform:scale(1.08);filter:blur(7px);
  transition:opacity .52s ease,transform .52s cubic-bezier(.4,0,.2,1),filter .52s ease}
.gt-veil[data-leaving] .gt-veil__stack{transform:scale(1.1)}

/* Las marcas. Fichas, no una rejilla de logos: el nombre compuesto en la
 * tipografía del sitio dice dónde trabajó y no afirma un respaldo. El nombre
 * manda en la jerarquía, el puesto explica y la fecha ancla. */
.marcas{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:14px;margin:34px 0 0;padding:0}
.marca{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-tile,18px);
  padding:24px 22px;display:flex;flex-direction:column;gap:9px}
.marca__name{font:500 clamp(21px,2.1vw,25px)/1.14 Georgia,serif;margin:0;letter-spacing:-.02em}
.marca__role{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.marca__when{margin:auto 0 0;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.marcas__note{margin:22px 0 0;font-size:14px;color:var(--muted)}
@media(max-width:560px){.marcas{grid-template-columns:1fr}}

/* ===========================================================================
 * LA FICHA DE CONSEJOS
 *
 * Todo el texto está en el HTML. Lo que hace el CSS es el gesto: el consejo
 * viejo se va hacia arriba, el nuevo entra desde abajo. Nada se esconde desde
 * aquí — el pozo de consejos lo esconde el JavaScript, así que sin JavaScript
 * se lee la lista completa, que es la falla correcta.
 * ======================================================================== */
.consejo{background:var(--ink);color:#f3f8ff;border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(26px,4vw,44px);display:grid;gap:18px;position:relative;overflow:hidden}
.consejo__eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#7fa8ff;margin:0}
.consejo__marco{min-height:clamp(120px,17vw,150px);display:flex;align-items:center}
.consejo__texto{font:clamp(20px,2.6vw,30px)/1.32 Georgia,serif;margin:0;max-width:30ch}
@media (prefers-reduced-motion:no-preference){
  .consejo__texto{transition:opacity .17s ease,transform .17s ease}
  .consejo__texto[data-saliendo]{opacity:0;transform:translateY(-14px)}
  .consejo__texto[data-entrando]{animation:consejo-entra .3s cubic-bezier(.2,.75,.2,1) both}
  @keyframes consejo-entra{from{opacity:0;transform:translateY(16px)}}
}
.consejo__pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.consejo__boton{font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:999px;
  padding:12px 22px;transition:transform .12s ease,background .2s}
.consejo__boton:hover{background:#2f63ec}
/* El botón se hunde al pulsarlo. Es lo único que confirma que el toque llegó
 * antes de que el texto cambie, y ese hueco es donde una interfaz se siente
 * muerta. */
.consejo__boton:active{transform:scale(.96)}
.consejo__boton:focus-visible{outline:2px solid #fff;outline-offset:3px}
.consejo__contador{font-size:12.5px;color:#9db9e4;letter-spacing:.04em}
.consejo__contador[data-completo]{color:#7fa8ff;font-weight:700}
.consejo__pozo{margin:0;padding-left:20px;display:grid;gap:10px;font-size:16px;color:#cfe0f8}

/* Sólo para lectores de pantalla. Se usa en el anuncio del consejo nuevo y en
 * la etiqueta del campo de la clave. `clip-path` en vez de `display:none`
 * porque lo que está en `display:none` no lo lee nadie, que es lo contrario
 * de lo que hace falta. */
.rail-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* La respuesta corta, en su caja, antes que nada. Es la misma propiedad que
 * gana un fragmento destacado y la que permite a un asistente levantar la
 * respuesta entera — y de paso es lo que respeta a quien sólo lee un párrafo. */
.respuesta{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-tile,16px);padding:24px 26px;margin:0 0 34px}
.respuesta__label{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.respuesta__texto{margin:0;font:clamp(18px,2vw,21px)/1.5 Georgia,serif!important}

/* Los fragmentos. Una línea por idea, numeradas, en dos columnas. El número no
 * es decoración: convierte una lista de frases sueltas en algo que se puede
 * recorrer y retomar, y de paso dice cuántas hay antes de leer ninguna. */
.frag-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:34px}
.frag-col__label{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.frag-list{list-style:none;counter-reset:frag;margin:0 0 22px;padding:0;display:grid;gap:2px}
.frag{counter-increment:frag;border-top:1px solid var(--line)}
.frag:last-child{border-bottom:1px solid var(--line)}
.frag a{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:baseline;
  padding:14px 4px;text-decoration:none;font:clamp(16px,1.6vw,18.5px)/1.4 Georgia,serif;
  transition:background .18s,padding-left .18s}
.frag a::before{content:counter(frag,decimal-leading-zero);font:800 11px/1 ui-sans-serif,sans-serif;
  letter-spacing:.08em;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .frag a:hover{background:var(--cream);padding-left:10px}
  .frag a:hover::before{color:var(--accent)}
}
.frag a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:700px){.frag-grid{grid-template-columns:1fr}}

/* ===========================================================================
 * LA CABECERA INTERIOR
 *
 * Lo que arregla: cada página interior abría con antetítulo, titular y tres
 * párrafos de prosa. Ni una imagen ni un punto de descanso en la primera
 * pantalla, mientras la portada iba llena de fichas — parecían dos sitios.
 *
 * En escritorio, texto e ilustración conviven. En el TELÉFONO la ilustración va
 * DEBAJO y en una banda baja: arriba empujaría las palabras fuera de la primera
 * pantalla, que es justo el problema que vino a resolver.
 * ======================================================================== */
.cabecera{padding:0}
.cabecera__rejilla{display:grid;grid-template-columns:1.05fr .8fr;
  gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(48px,7vw,86px) 0 clamp(34px,4vw,54px)}
.cabecera .page-head{padding:0;width:auto;margin:0}
.cabecera .page-head h1{max-width:14ch}
.cabecera .page-head .lede{max-width:40ch;margin-bottom:0}
.cabecera__figura{margin:0;border-radius:clamp(18px,2.2vw,26px);overflow:hidden;
  border:1px solid var(--line);background:var(--cream);line-height:0}
.cabecera__figura img{width:100%;height:clamp(230px,26vw,330px);object-fit:cover;display:block}
/* La ilustración entra con un acercamiento muy corto. Muy corto a propósito:
 * una imagen que sigue moviéndose cuando ya estás leyendo compite con el texto. */
@media (prefers-reduced-motion:no-preference){
  .cabecera__figura img{animation:cab-entra .85s cubic-bezier(.2,.7,.2,1) both}
  @keyframes cab-entra{from{opacity:0;transform:scale(1.06)}}
}
@media(max-width:820px){
  .cabecera__rejilla{grid-template-columns:1fr;gap:26px;padding:34px 0 26px}
  .cabecera__figura img{height:clamp(120px,32vw,170px)}
}

/* Los apartados numerados de una nota. El número está en el HTML, no en un
 * contador de CSS: un contador no se copia al pegar, no lo lee un asistente y
 * desaparece en el modo lectura del navegador. */
.prose h2.paso{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  margin-top:52px}
.paso__n{font:800 12px/1 ui-sans-serif,-apple-system,sans-serif;letter-spacing:.1em;
  color:var(--accent);padding-top:6px}
@media(max-width:560px){.prose h2.paso{grid-template-columns:1fr;gap:4px}}

/* Las cifras dentro de los logros. Estaban ya en <strong>, pero en un párrafo
 * denso una negrita se lee como énfasis y no como dato: los números medidos
 * —lo más valioso de la página— quedaban enterrados a mitad de frase. Un fondo
 * tenue los convierte en algo que se puede barrer con la vista sin leer.
 * `font-variant-numeric:tabular-nums` para que «75% → 92%» no baile. */
.prose li strong{background:linear-gradient(transparent 58%,#dbe7fb 58%);
  padding:0 2px;font-variant-numeric:tabular-nums;font-weight:700}

/* El vestido del contraste. El kit deja `label` y `value` en línea, que sirve
 * para «Goles 3» y no para una etiqueta con una frase detrás: aquí la etiqueta
 * va encima, pequeña, y la frase debajo. El kit trae la estructura; el vestido
 * es del sitio, que es el trato. */
.rail-versus{margin:34px 0 8px;--rail-versus-stat-size:15px}
.rail-versus__eyebrow{margin:0 0 14px;font-size:12px!important;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.rail-versus__name{font-family:Georgia,serif;font-size:20px;letter-spacing:-.01em;margin:0 0 12px}
.rail-versus__stat{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.rail-versus__stat-label{margin-right:0!important;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rail-versus__stat-value{font-size:15px;line-height:1.45;color:var(--ink)}

/* El recap plegable. El kit lo trae casi entero; sólo se le dan los tamaños
 * del sitio y se le quita el ancho de medida, que aquí ya lo pone `.reading`. */
.rail-faq{max-width:none;margin:52px 0 0;--rail-faq-padding:22px 0}
.rail-faq__heading{font-family:Georgia,serif;font-size:clamp(24px,3vw,32px);
  letter-spacing:-.025em;margin:0 0 4px}
.rail-faq__q{font-family:Georgia,serif;font-size:19px;font-weight:500;margin:0}
.rail-faq__a p{font-size:16px!important;color:var(--muted);margin:0 0 4px!important}
.rail-faq__pm{color:var(--accent);font-weight:700}

/* El sitio viste TODO <details> como una caja crema con relleno — así son los
 * plegables de los carteles. Dentro del recap eso se pelea con el componente:
 * la pregunta quedaba pequeña y hundida en una caja pálida enorme. Se
 * neutraliza sólo aquí, que es donde estorba, en vez de tocar la regla general
 * y arrastrar el cambio a los carteles que sí la quieren. */
.rail-faq details{background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;margin:0;padding:0}
.rail-faq summary{font-weight:inherit;display:flex;align-items:center;
  justify-content:space-between;gap:18px;cursor:pointer}
.rail-faq details[open] .rail-faq__pm{transform:rotate(45deg)}
.rail-faq__pm{display:inline-block;font-size:20px;line-height:1;transition:transform .2s ease}
.rail-faq details p{font-size:16px!important;margin:0 0 20px!important}

/* La tira de cifras de la experiencia. Cuatro fichas en fila; dos por fila en
 * el teléfono, que es el máximo que cabe sin que el número baje de la medida a
 * la que todavía se lee de un vistazo. */
.cifras{padding:0 0 clamp(26px,3vw,42px)}
.rail-stats{--rail-stats-bg:var(--cream);--rail-stats-gap:12px;
  --rail-stats-value-size:clamp(20px,2.5vw,29px)}
.rail-stats[data-rail-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.rail-stats__tile{border:1px solid var(--line);align-items:flex-start}
.rail-stats__value{font-family:Georgia,serif;font-weight:500!important;color:var(--ink)}
.rail-stats__label{display:block;margin-top:8px;font-size:12.5px;line-height:1.35;color:var(--muted)}
@media(max-width:820px){.rail-stats[data-rail-columns="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* La ficha con clave dentro de una tira de cifras. Tiene que leerse como lo
 * que es —un dato que existe y está guardado— y no como un número que falta:
 * de ahí que conserve su sitio en la fila en vez de desaparecer. Se le quita
 * el subrayado, que la hacía parecer un error de maquetación entre tres
 * números, y se le pone la llave delante. */
.rail-stats__value a,.rail-figures__value a{text-decoration:none;color:var(--accent);
  font-size:.62em;display:inline-flex;align-items:center;gap:8px;letter-spacing:0}
.rail-stats__value a::before,.rail-figures__value a::before{content:"";width:13px;height:15px;
  flex:none;background:currentColor;
  -webkit-mask:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>');
  mask:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>')}
.rail-stats__value a:hover,.rail-figures__value a:hover{text-decoration:underline;
  text-underline-offset:4px}

/* ===========================================================================
 * VIDRIO LÍQUIDO — la barra de abajo, siempre, en cualquier pantalla.
 *
 * Qué cambia y por qué. La cabecera llevaba nueve enlaces del mismo peso y él
 * seguía sin poder decir en qué página estaba. La respuesta no era marcar
 * mejor el enlace: era quitar ocho de nueve de arriba. Los cuatro destinos
 * viven ahora en una sola barra flotante abajo —donde llega el pulgar en el
 * teléfono y donde está el ratón cuando se lee en escritorio— y arriba quedan
 * la marca, «Más» y el idioma.
 *
 * El estado actual deja de ser una rayita: es una PASTILLA RELLENA. Si hay que
 * buscar cuál está activo, no está marcado.
 * ======================================================================== */
.rail-bottomnav{
  --rail-bottomnav-bg:transparent;
  --rail-bottomnav-active-color:var(--accent);
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  /* Ancho DEFINIDO, no `auto`. Con `auto` la lista se quedaba más ancha que la
   * pastilla y `overflow:hidden` se comía el último destino: en el teléfono la
   * barra decía «Home Work Expe… T». Un ancho definido le da a los cinco
   * elementos algo entre lo que repartirse. */
  width:min(560px,calc(100% - 24px));
  border:0;border-radius:999px;padding:6px;
  /* El vidrio: fondo translúcido, desenfoque y saturación. La saturación es lo
   * que evita que el desenfoque lo deje todo gris — sin ella el efecto se lee
   * como suciedad, no como cristal. */
  /* Al 72% el texto de la pagina se LEE a traves del cristal y los cinco
     destinos compiten con parrafos que pasan por detras. Un vidrio que deja
     leer lo de atras no separa dos capas: las mezcla. Al 92% sigue siendo
     vidrio —se nota el color de lo que pasa debajo— y deja de ser una ventana. */
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);
  backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),
             0 18px 40px -18px rgba(11,31,58,.45);
  overflow:hidden}
/* Sin soporte de desenfoque, fondo sólido: un panel translúcido sin desenfocar
 * deja el texto de la página cruzando las etiquetas. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rail-bottomnav{background:var(--paper)}
}
.rail-bottomnav__list{gap:2px;width:100%}
/* Cada celda puede encogerse. Sin `min-width:0` una etiqueta larga impone su
 * ancho y vuelve a desbordar, que es el mismo fallo por otra puerta. */
.rail-bottomnav__item{flex:1 1 0;min-width:0}
.rail-bottomnav__link{
  --rail-bottomnav-height:50px;
  border-radius:999px;padding:0 6px;color:var(--muted);
  transition:color .18s ease,background .18s ease}
.rail-bottomnav__link[aria-current="page"]{
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  color:var(--accent);font-weight:700}
.rail-bottomnav__link[aria-current="page"] .rail-bottomnav__icon{transform:translateY(-1px)}
@media (hover:hover) and (pointer:fine){
  .rail-bottomnav__link:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
}
.rail-bottomnav__label{font-size:11.5px;letter-spacing:.01em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-bottomnav__spacer{display:block;height:calc(78px + env(safe-area-inset-bottom,0px))}

/* La cabecera, ahora con tres cosas. También de vidrio, para que las dos
 * barras se lean como el mismo material. */
.nav{background:color-mix(in srgb,var(--paper) 78%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7)}
.nav__derecha{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__more>summary{border-radius:999px}
.nav__sheet{border-radius:18px;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7)}

/* La barra de abajo SIEMPRE. Antes se escondía en escritorio y la navegación
 * vivía sólo arriba; ahora es al revés. */
@media(min-width:768px){
  .rail-bottomnav{display:block}
  .rail-bottomnav__link{--rail-bottomnav-height:52px;padding:0 14px}
  .rail-bottomnav__label{font-size:12.5px}
}
@media(max-width:767px){
  .nav__bar{min-height:54px}
}

/* =========================================================================
   EL ACENTO DEL CARTEL — los ajustes del barrido del kit.
   El kit barre con `currentColor` al 22%: sobre una ficha blanca con texto
   tinta eso es un barrido gris, que sobre papel se lee como suciedad, no como
   luz. Se barre con el azul de la marca.
   Y se barre DOS veces, no tres: el kit trae 5,4 s x3 = dieciseis segundos de
   ficha en movimiento, que a esa altura ya no es un acento sino un parpadeo
   que compite con la lectura.
   ========================================================================= */



/* =========================================================================
   EL SUELO DEL TELEFONO. La barra inferior mide 62 px y es FIJA, y el body
   tenia `padding-bottom: 0`: los ultimos 62 px de TODAS las paginas quedaban
   debajo de la barra. No es un detalle estetico — ahi es donde viven el ultimo
   parrafo y el ultimo enlace de cada pagina, incluido LinkedIn en la portada.
   Se reserva el alto de la barra mas el area segura del telefono, y un respiro
   para que el texto no termine lamiendo el vidrio.
   ========================================================================= */
@media (max-width:767px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px) + 20px)}
}

/* =========================================================================
   LOS LOGOS DE LA TRAYECTORIA. Cinco marcas con cinco alturas, cinco colores
   y cinco pesos distintos: puestos tal cual, la fila parece un muro de
   patrocinadores y la mas chillona se lleva la mirada.
   Se normalizan a una misma altura optica y se apagan a tinta. En reposo es
   un historial; al tocarlos o pasar por encima recuperan su color, que es lo
   que los vuelve algo con lo que se puede jugar y no un adorno fijo.
   ========================================================================= */
.marca__logo{display:flex;align-items:center;height:30px;margin:0 0 14px}
.marca__logo img{max-height:100%;max-width:150px;width:auto;height:auto;
  filter:grayscale(1) brightness(.35) contrast(1.15);opacity:.66;
  transition:filter .42s ease,opacity .42s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
.marca:hover .marca__logo img,
.marca:focus-within .marca__logo img,
.marca[data-tocado] .marca__logo img{filter:none;opacity:1;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .marca__logo img{transition:none}
}

/* =========================================================================
   EL TACTO. Hasta aqui todo el movimiento del sitio ocurria SOLO — entraba y
   se acababa. Nada respondia a un dedo, y una pagina que no responde al dedo
   se siente impresa aunque este llena de animaciones.
   Tres respuestas, todas sobre propiedades que el compositor ya mueve
   (transform, y un degradado posicionado por variable), nunca sobre layout:
   un reflejo que sigue al dedo, una inclinacion hacia el, y el hundido al
   pulsar. El hundido es el importante: es el unico que confirma que el toque
   se registro, y sin esa confirmacion un enlace parece roto en el medio
   segundo que tarda en navegar.
   ========================================================================= */
.rail-card,.marca{
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease}
.rail-card[data-tocado],.marca[data-tocado]{
  transform:perspective(900px)
    rotateX(calc(var(--ty,0) * -3.2deg))
    rotateY(calc(var(--tx,0) * 3.2deg))
    translateY(-3px)}
.rail-card[data-pulsado],.marca[data-pulsado]{
  transform:scale(.975) translateY(0);transition-duration:.11s}

/* El reflejo que sigue al dedo. Es un pseudo-elemento y no un fondo para no
   pelearse con el barrido del cartel, que vive en `background-image`. */
.rail-card::after,.marca::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--accent,#1d4ed8) 15%,transparent),transparent 72%)}
.rail-card{position:relative}
.marca{position:relative}
.rail-card[data-tocado]::after,.marca[data-tocado]::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .rail-card,.marca{transition:none}
  .rail-card[data-tocado],.marca[data-tocado]{transform:none}
  .rail-card::after,.marca::after{display:none}
}

/* =========================================================================
   LA TRAYECTORIA COMO RIEL. Era una rejilla de cinco fichas que se leia de un
   vistazo y se olvidaba igual de rapido. Como riel se RECORRE: se empuja con
   el dedo desde donde trabaja hoy hasta sus primeros años, y ese gesto —ir
   hacia atras en el tiempo— es el contenido, no el envoltorio.
   ========================================================================= */
.rail-card--marca{min-width:262px;background:var(--cream);border:1px solid var(--line)}
.rail-card--marca .rail-card__body{display:flex;flex-direction:column;gap:10px;
  padding:22px 22px 20px;height:100%}
.rail-card__marca{display:flex;align-items:center;height:32px;margin-bottom:4px}
.rail-card__marca img{height:100%;width:auto;max-width:152px;
  filter:grayscale(1) brightness(.35) contrast(1.15);opacity:.66;
  transition:filter .42s ease,opacity .42s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
.rail-card--marca:hover .rail-card__marca img,
.rail-card--marca[data-tocado] .rail-card__marca img{filter:none;opacity:1;transform:translateY(-2px)}
.rail-card--marca .rail-card__title{font:500 clamp(19px,2vw,22px)/1.15 Georgia,serif;
  margin:0;letter-spacing:-.02em}
.rail-card--marca .rail-card__description{margin:0;font-size:14.5px;line-height:1.5;
  color:var(--muted)}
.rail-card--marca .rail-card__pie{margin-top:auto;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.rail-card__marca img{transition:none}}

/* =========================================================================
   EL SOBRE. Vive POR ENCIMA de la barra inferior, nunca sobre ella: un boton
   flotante que tapa la navegacion cuesta una pagina entera.
   La solapa gira de verdad en 3D — es lo unico del sitio que se permite una
   animacion que no explica nada, porque su trabajo es dar gusto al tocarla.
   ========================================================================= */
.sobre{position:fixed;right:16px;z-index:60;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;
  bottom:calc(62px + env(safe-area-inset-bottom,0px) + 26px)}
/* La barra inferior NO desaparece en escritorio: reserva los mismos 62 px.
   Este valor los ignoraba y metia el sobre debajo del vidrio. */
@media (min-width:768px){.sobre{bottom:calc(62px + env(safe-area-inset-bottom,0px) + 18px);right:22px}}

.sobre__boton{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:10px 16px 10px 12px;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 10px 30px -12px rgba(11,18,32,.38);
  font:700 13.5px/1 inherit;color:var(--ink);letter-spacing:.01em;
  transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s ease}
.sobre__boton:hover{transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(11,18,32,.48)}
.sobre__boton:active{transform:scale(.96)}

/* La carta: un rectangulo, una hoja que asoma y una solapa que abre. Tres
   elementos, ninguna imagen — un icono que es un archivo mas es un icono que
   puede faltar. */
/* LA CARTA SE DIBUJA CON SVG, NO CON TRES CAJAS. Mi version anterior se
   pintaba como un rectangulo VACIO en todas las paginas: la solapa era blanca
   sobre fondo blanco —solo se distinguia por su borde— y `overflow:hidden` del
   sobre le recortaba justo la punta que la hacia reconocible. Un icono que hay
   que explicar no es un icono.
   En SVG la solapa es un trazo, se ve siempre, y girarla sigue siendo un
   `transform` que mueve el compositor. */
.sobre__carta{position:relative;width:24px;height:18px;flex:none;
  display:block;overflow:visible}
.sobre__carta svg{display:block;width:100%;height:100%;overflow:visible}
.sobre__carta .cuerpo{fill:none;stroke:currentColor;stroke-width:1.6}
.sobre__carta .solapa{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round;transform-origin:50% 0;transform-box:fill-box;
  transition:transform .34s cubic-bezier(.3,.8,.2,1)}
.sobre__carta .hoja{fill:var(--accent);opacity:0;
  transform:translateY(5px);transform-box:fill-box;
  transition:transform .34s cubic-bezier(.2,.7,.2,1) .06s,opacity .2s ease .06s}
.sobre.is-abierto .sobre__carta .solapa{transform:rotateX(180deg)}
.sobre.is-abierto .sobre__carta .hoja{opacity:1;transform:translateY(0)}

.sobre__panel{width:min(268px,calc(100vw - 32px));
  border:1px solid var(--line);border-radius:16px;padding:16px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:0 22px 54px -22px rgba(11,18,32,.5);
  opacity:0;transform:translateY(10px) scale(.97);transform-origin:100% 100%;
  transition:opacity .24s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.sobre.is-abierto .sobre__panel{opacity:1;transform:none}
.sobre__titulo{margin:0 0 12px;font:600 17px/1.2 Georgia,serif;letter-spacing:-.02em}
.sobre__via{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:9px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);
  transition:background .2s ease,transform .2s ease}
.sobre__via:hover{background:var(--cream);transform:translateX(2px)}
.sobre__via-icono{display:grid;place-items:center;width:24px;height:24px;flex:none;
  border-radius:7px;background:var(--accent);color:#fff;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.sobre__pie{margin:12px 2px 0;font-size:12px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .sobre__boton,.sobre__panel,.sobre__solapa,.sobre__hoja,.sobre__via{transition:none}
}

/* El riel agarrado: el cursor dice que se puede arrastrar ANTES de intentarlo,
   y se apaga la seleccion de texto — arrastrar un carrusel y acabar con media
   pagina en azul es el defecto clasico de este gesto. */
.rail__scroller{cursor:grab}
.rail__scroller.is-agarrado{cursor:grabbing;user-select:none;scroll-behavior:auto;
  /* EL ANCLAJE SE APAGA MIENTRAS SE ARRASTRA. El riel lleva
     `scroll-snap-type: x mandatory`, y con el puesto cada micro-movimiento del
     arrastre vuelve al punto de anclaje mas cercano: medido, un arrastre de
     180 px dejaba `scrollLeft` en 0. El gesto parecia roto.
     Se devuelve al soltar, cuando la inercia ya paro, y entonces el anclaje
     hace justo lo que debe: asentar el riel en una ficha en vez de dejarla
     cortada por la mitad. */
  scroll-snap-type:none}
.rail__scroller.is-agarrado *{pointer-events:none}

/* =========================================================================
   MOVIMIENTO LIGADO AL SCROLL. Hasta aqui todo entraba UNA VEZ y se quedaba
   quieto: la pagina se sentia como algo que termino de cargar, no como algo
   que se esta recorriendo. Esto ata unas pocas piezas a la posicion de la
   pagina, asi que el movimiento lo manda el dedo y no un temporizador.

   Se hace con `animation-timeline: view()`, que corre en el compositor: no hay
   un `scroll` que escuchar, ni un observador, ni JavaScript por fotograma. Y
   se encierra en @supports porque donde no existe la pieza sale como siempre
   — que es el fallo correcto, no una pagina quieta a medias.

   ESTA DELIBERADAMENTE CONTENIDO. Media docena de piezas, no todas. Una pagina
   donde TODO reacciona al scroll no se puede leer: el ojo persigue y no lee.
   ========================================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){

    /* El cartel respira: entra un 6% mas grande y se asienta. Es la unica
       imagen grande de la pagina y la que aguanta el gesto sin distraer. */
    .rail-billboard__image{
      animation:gt-respira linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 62%}
    @keyframes gt-respira{
      from{transform:scale(1.06)}
      to{transform:scale(1)}}

    /* Las cabeceras de seccion suben un poco mas despacio que la pagina. Ocho
       pixeles de desfase: suficiente para que se note profundidad, poco para
       que nada quede fuera de sitio al parar el scroll a mitad. */
    .rail__header .bh{
      animation:gt-parallax linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%}
    @keyframes gt-parallax{
      from{translate:0 14px}
      to{translate:0 -14px}}

    /* La raya de la cifra se dibuja segun se recorre: el numero deja de ser un
       dato impreso y pasa a completarse delante de quien mira. */
    .rail-figures__pair{position:relative}
    .rail-figures__pair::after{
      content:"";position:absolute;left:0;bottom:-10px;height:2px;width:100%;
      transform-origin:0 50%;background:var(--accent);
      animation:gt-raya-cifra linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 45%}
    @keyframes gt-raya-cifra{
      from{scale:0 1;opacity:.25}
      to{scale:1 1;opacity:1}}

    /* El retrato del heroe se desplaza al reves que la pagina. Es el unico
       parallax de verdad del sitio y esta donde mas rinde: la primera pantalla. */
    .hero img,.hero__foto img{
      animation:gt-hero linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%}
    @keyframes gt-hero{
      from{translate:0 -18px;scale:1.04}
      to{translate:0 18px;scale:1.04}}
  }
}


/* La ficha del borde se partia a media palabra —"A fleet of automated sy"— sin
   ningun aviso de que hubiera mas. Un corte limpio dice "aqui se acaba"; un
   desvanecido dice "sigue". Es la unica pista de que el riel se puede empujar. */
.rail__scroller{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent)}
.rail__scroller.is-agarrado{-webkit-mask-image:none;mask-image:none}

/* =========================================================================
   EL RITMO. Este es el hallazgo central de la revision de direccion de arte:
   un unico modulo —antetitulo, titular Georgia a la izquierda, parrafo, riel
   de fichas blancas— repetido nueve veces sin un solo cambio de escala. En
   12.366 px de portada nada llegaba a ser grande y nada llegaba a ser
   silencioso, y eso es exactamente lo que se siente como falta de caracter.

   La solucion NO es añadir adornos. Es decidir que dos momentos son grandes y
   obligar al resto a ser tranquilo. Un sitio con nueve titulares de 57 px no
   tiene jerarquia: tiene nueve gritos del mismo volumen.
   ========================================================================= */

/* 1. LOS TITULARES DE SECCION BAJAN — y se tocan en `.bh h2`, NO en `h2`.
      Escribir `h2{...}` al final de la hoja no hacia nada: `.bh h2` tiene
      especificidad (0,1,1) y gana siempre. Medido antes de creerselo: el
      titular seguia en 55,3 px, que es exactamente el 5,4vw de la regla vieja.
      Con h1 a 74 y h2 a 64 los dos pesaban casi igual y cada seccion competia
      con la portada; a 42 la seccion pasa a ser un rotulo de orientacion. */

/* 2. EL CARTEL ES EL SEGUNDO MOMENTO GRANDE, y para serlo tiene que salirse.
      A ancho de ventana y 86vh deja de ser "una imagen mas dentro del contenedor"
      y pasa a ser un cambio de sala: es el unico sitio de la portada donde la
      maqueta se rompe, y por eso se nota. */
@media (min-width:768px){
  .rail-billboard{
    /* `--sb` lo mide `arrastre.js`; si no corre vale 0 y el cartel se comporta
       como antes: ancho de ventana y siete pixeles de desfase. Nunca se rompe,
       solo deja de estar fino. */
    width:calc(100vw - var(--sb,0px));
    margin-left:calc(50% - 50vw + var(--sb,0px)/2);
    border-radius:0;min-height:86vh;aspect-ratio:auto}
  .rail-billboard__content{padding:clamp(40px,5vw,80px)}
  .rail-billboard__title{font-size:clamp(44px,5.6vw,82px);max-width:16ch}
}
@media (max-width:767px){
  .rail-billboard{min-height:74vh;aspect-ratio:auto}
  .rail-billboard__title{font-size:clamp(30px,8.2vw,42px)}
}

/* 3. LAS BANDAS RESPIRAN DISTINTO. Todas con el mismo aire es una pagina que
      avanza a paso de metronomo. Las de tinta —el unico respiro oscuro— se
      llevan mas aire porque son las pausas; las de papel se aprietan porque
      son el trabajo. */
.band{--band:clamp(54px,6vw,86px)}
.band--paper{--band:clamp(66px,8vw,118px)}

/* 4. UN ANCHO DE LINEA HONESTO. El parrafo de seccion corria hasta donde
      llegara el contenedor; por encima de 75 caracteres el ojo pierde el
      renglon al volver y la lectura se vuelve trabajo. */
.bh p{max-width:66ch}
.bh{max-width:min(100%,780px)}

/* =========================================================================
   OFICIO. Seis detalles que por separado no valen nada y juntos son la
   diferencia entre "lo hizo alguien" y "salio de una plantilla".
   ========================================================================= */

/* 1. DIRIGIR EL RETRATO. Mira hacia FUERA de la pagina, asi que el unico ser
      humano del sitio esta dando la espalda al texto que tiene que leerse.
      Volteado, mira hacia el titular: la mirada de una figura es una flecha, y
      una flecha apuntando fuera del lienzo saca al lector con ella.
      El encuadre sube al 22% porque a la mitad el recorte le corta la frente. */
.hero img{transform:scaleX(-1);object-position:50% 22%}

/* 2. EL BOTON «MAS» ERA UNA CAJA GRIS DE 240x160 que pesaba mas que el propio
      nombre de la marca. Un control secundario que grita mas que la firma
      invierte la jerarquia de la cabecera. Pasa a texto con una linea. */
.nav__more>summary{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 2px;border:0;border-radius:0;background:none;
  font-size:14px;color:var(--muted);
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.nav__more>summary:hover{background:none;color:var(--ink);border-bottom-color:var(--ink)}

/* 3. «Experi…» TRUNCADO en la barra inferior. Un destino que no se puede leer
      no es un destino. La etiqueta baja de tamaño y se aprieta el tracking
      antes que cortarla: una palabra corta con puntos suspensivos cuesta mas
      que una palabra pequeña. */
.rail-bottomnav__label{font-size:11px;letter-spacing:-.01em;
  overflow:visible;text-overflow:clip}



/* 5. UNA SOLA ACCION DE ACENTO. Cuatro pildoras del mismo peso no son cuatro
      caminos: son ninguno. Solo la primera lleva el azul; las demas pasan a
      enlaces, que es lo que son. */
.hero .actions .button:not(.red){
  background:none;border-color:transparent;padding-left:4px;padding-right:4px;
  font-size:15px;font-weight:600;color:var(--muted);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.hero .actions .button:not(.red):hover{background:none;color:var(--ink)}

/* 6. EL SOBRE NO COMPITE CON LA PRIMERA PANTALLA. Mientras el heroe se ve, la
      accion que manda es «Say hello»; un flotante encima diciendo lo mismo
      parte la atencion en dos. Se retira hasta que el heroe sale de cuadro.
      `tacto.js` pone el atributo con un IntersectionObserver. */
.sobre[data-esperando]{opacity:0;transform:translateY(12px) scale(.94);
  pointer-events:none;transition:opacity .3s ease,transform .3s ease}

/* =========================================================================
   LOGOS POR ALTURA OPTICA, NO POR CAJA. Igualar la caja a 32 px dejaba a
   Caesars —un escudo casi cuadrado— en 44 px de ancho e ilegible, y a Office
   Depot, que es una palabra larga y baja, ocupando el maximo. Dos marcas con
   la misma altura de caja pueden tener la mitad de "peso" en pantalla.
   Se corrige marca a marca con un factor: las compactas crecen, las alargadas
   se contienen. Es un ajuste a ojo y no hay formula que lo sustituya — por eso
   va escrito aqui y no calculado en ningun sitio.
   ========================================================================= */
/* La fila se dimensiona al logo mas ALTO (el escudo de Caesars) y los demas
   bajan desde ahi. Al reves —fila corta y el compacto creciendo por encima del
   100%— el escudo se salia 9 px por arriba y por abajo y chocaba con el
   titular de la ficha. */
.rail-card__marca{height:48px;align-items:center}
.rail-card__marca img{max-width:none}
.rail-card__marca img[src*="caesars"]{height:100%}
.rail-card__marca img[src*="ritzcarlton"]{height:78%}
.rail-card__marca img[src*="carnival"]{height:66%}
.rail-card__marca img[src*="spirit"]{height:58%}
.rail-card__marca img[src*="officedepot"]{height:44%}

/* =========================================================================
   `100vw` NO ES EL ANCHO VISIBLE. Incluye la barra de desplazamiento, asi que
   el cartel a ancho de ventana se pasaba 15 px del area de contenido y creaba
   scroll HORIZONTAL en toda la portada — medido en produccion: el documento
   iba de -7 a 1017 sobre 1009 disponibles. Un sitio que se puede arrastrar de
   lado por accidente se siente roto aunque el resto sea impecable.

   `clip` y no `hidden`: `hidden` convierte la raiz en un contenedor de
   desplazamiento y eso se lleva por delante `position:sticky` y las
   animaciones ligadas al scroll, que es media pagina. `clip` recorta y ya.
   ========================================================================= */
/* EN LOS DOS. El desbordamiento de la raiz se PROPAGA al viewport, y al
   propagarse la propia raiz vuelve a comportarse como `visible`: puesto solo en
   `html` no hacia nada — medido, los 8 px seguian ahi despues de desplegarlo.
   Con `body` tambien, el recorte ocurre donde tiene que ocurrir. */
html,body{overflow-x:clip}

/* =========================================================================
   LAS PAGINAS DE ARTICULO TENIAN EL MISMO DEFECTO QUE LA PORTADA, y se me
   habia escapado por arreglar solo lo que salia en las capturas del informe:
   medido en /thesis a 375 px, el titular estaba en 44 px y los subtitulos en
   40. Un salto de 1,1 no es una jerarquia — es el mismo grito dos veces, y en
   un texto largo eso hace que no se pueda hojear: todos los niveles pesan
   igual, asi que ninguno orienta.
   Son mas de sesenta paginas: es el defecto mas repetido del sitio.
   ========================================================================= */
.prose h2{font-size:clamp(24px,2.7vw,32px);letter-spacing:-.02em;margin:54px 0 14px}
.prose h3{font-size:clamp(19px,1.9vw,22px);margin:34px 0 10px}
/* La medida del texto largo: por encima de 70 caracteres el ojo pierde el
   renglon al volver, y estas paginas son para leerlas enteras. */
.prose p,.prose li{max-width:68ch}


/* =========================================================================
   EL ACENTO, BIEN HECHO ESTA VEZ. Mi primer intento fue redefinir `--red` a
   gris de una sola linea. Era un atajo y salio caro: `--red` no lo usaban solo
   los rotulos — lo usaba tambien el BOTON PRINCIPAL DEL CARTEL, que quedo gris
   `rgb(90,107,130)` sobre la pieza mas grande de la portada y pasa a leerse
   como desactivado. Un token que vale para un rotulo y para una accion no es
   un token de color: es dos cosas con el mismo nombre.
   Se revierte y se apaga rotulo por rotulo, que es mas largo de escribir y es
   lo unico que no arrastra la accion con ello.
   ========================================================================= */
.eyebrow,.kicker,.card .type,.review-label,.timeline time{color:var(--muted)}
.timeline article:before{background:var(--muted)}
/* `--muted` a 12-14 px sobre papel da 3,84:1, por debajo del minimo legible.
   Los rotulos son pequeños POR DISEÑO, asi que el que tiene que ceder es el
   color, no el tamaño. */
:root{--muted-rotulo:#48586e}
.eyebrow,.kicker,.card .type,.review-label,.timeline time,.links a{color:var(--muted-rotulo)}

/* =========================================================================
   EL CARTEL: RESCATE. Es el mayor acierto de la pasada y estaba a medio hacer.
   - El titular caia sobre cielo claro `rgb(205,225,241)` con texto casi blanco
     —contraste 1,35:1, la primera palabra sencillamente no se ve— porque el
     velo era un degradado que arranca transparente justo donde empieza el
     texto. Ningun comprobador automatico lo detecta: el fondo es una imagen.
   - El contenido usaba 452 px de 1440 y empezaba en x=65 cuando TODOS los
     demas titulares del sitio empiezan en x=153. Sacar una pieza a sangre no
     es motivo para romper la unica linea vertical que ordena la pagina.
   ========================================================================= */
@media (min-width:768px){
  .rail-billboard__content{
    /* LA MISMA FORMULA QUE `.wrap`, literalmente. Escribi una equivalente
       —`min(1120px, 100% - 80px)`— y daba 13 px de diferencia: el cartel casi
       alineado es peor que el cartel claramente distinto, porque se lee como
       un descuido en vez de como una decision. */
    width:min(calc(100% - 40px),var(--max,1120px));margin-inline:auto;
    padding-inline:0;padding-block:clamp(40px,5vw,72px);
    max-width:none}
  .rail-billboard__title{max-width:20ch}
}
/* El velo sube hasta cubrir el texto entero y se apoya en el color de tinta de
   la marca, no en negro puro: un velo negro sobre una ilustracion azul la
   ensucia y se nota que hay una capa encima. */
.rail-billboard::after{
  inset:auto 0 0 0;height:78%;
  background:linear-gradient(to top,
    rgba(8,22,42,.94) 0%,
    rgba(8,22,42,.86) 34%,
    rgba(8,22,42,.62) 62%,
    rgba(8,22,42,0) 100%)}
/* El boton del cartel es la accion principal de la pieza mas grande: azul. */
.rail-billboard__actions a{background:var(--accent);color:#fff}

/* =========================================================================
   TRES CIERRES DE LA SEGUNDA REVISION.
   ========================================================================= */

/* 1. LA MASCARA DEL RIEL SE QUEDABA CORTA. 64 px de desvanecido sobre una
      ficha que sobresale 128: la mitad cortada seguia opaca, asi que se veia
      igual el tajo a media palabra que se queria evitar. Medido antes de
      ampliarlo. */
.rail__scroller{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 148px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 148px),transparent)}

/* 2. EL CIERRE ERA UN ENLACE DE 1120x377 SIN NADA QUE PARECIERA PULSABLE. Un
      bloque enorme que resulta ser un enlace no se descubre: se descubre por
      accidente. El boton va en el MARCADO y no en un `::after` con `content`,
      porque el texto de una accion tiene que poder leerlo un lector de
      pantalla y tiene que poder traducirse. */
.rail-cta{position:relative}
.rail-cta__boton{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin-top:26px;padding:13px 24px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;
  transition:background .2s ease,transform .2s cubic-bezier(.2,.7,.2,1)}
.rail-cta__boton i{font-style:normal;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.rail-cta:hover .rail-cta__boton{background:var(--accent-deep)}
.rail-cta:hover .rail-cta__boton i{transform:translateX(4px)}
.rail-cta[data-pulsado] .rail-cta__boton{transform:scale(.97)}

/* 3. LA BARRA AL 92% SEGUIA DEJANDO LEER LA PAGINA por detras en las paginas
      de texto, donde hay parrafos pasando justo debajo. 97% sigue teniendo
      vidrio —se nota el color de lo que pasa por debajo— y deja de ser ventana. */
.rail-bottomnav{background:color-mix(in srgb,var(--paper) 97%,transparent)}

/* 4. EL ANTETITULO DEJABA «ESPAÑOL» HUERFANO en el telefono. Mi primer intento
      puso `max-width:26ch` a TODOS los anchos y en escritorio lo partio en
      TRES lineas — medido: un arreglo de movil aplicado donde no habia nada
      que arreglar. Se acota al ancho donde el problema existe. */
@media (max-width:640px){
  /* SIN TOPE DE ANCHO. `24ch` parecia razonable y daba 152 px reales: la unidad
     `ch` mide el ancho del cero, no cuenta el `letter-spacing` de .13em que
     lleva este rotulo, asi que el tope quedaba a la mitad de lo previsto y lo
     partia en TRES lineas. Medido dos veces: primero a 34ch en todos los
     anchos —tres lineas en escritorio— y luego a 24ch en movil, tres otra vez.
     `text-wrap:balance` reparte solo, sin que yo tenga que acertar un numero. */
  .hero .eyebrow{text-wrap:balance}
}

/* =========================================================================
   C1 — EL AZUL SE PULSA. SI NO, ES GRIS.
   Auditoria en vivo: ONCE elementos pintaban el acento sin estar dentro de un
   enlace ni un boton — fechas de trayectoria, etiquetas de cifra, rotulos de
   columna. Con el acento repartido en cinco significados distintos deja de
   significar ninguno, y entonces un boton azul ya no promete nada.
   Los `rail-card__pie` que SI viven dentro de un enlace («Read the case →»)
   se quedan azules: ahi el color esta diciendo la verdad.
   ========================================================================= */
.rail-figures__label,
.frag-col__label,
:is(article,li,div):not(:has(> a)) > .rail-card__pie{color:var(--muted-rotulo)}
.rail-card--marca .rail-card__pie{color:var(--muted-rotulo)}

/* =========================================================================
   C2 — EL CIERRE ERA EL UNICO BLOQUE CENTRADO de una pagina de 11.389 px
   alineada a la izquierda. Un cambio de eje sin motivo se lee como una pieza
   pegada de otro sitio. Y dejaba ~120 px de tinta muerta debajo del boton.
   ========================================================================= */
/* COLUMNA EXPLICITA. Con el contenedor en `block` dos hijos seguian saliendo
   centrados —antetitulo en 372 y pie en 169 contra 58 de los otros— y no habia
   ninguna regla en la hoja que lo explicara: ni margenes automaticos, ni
   `text-align`, ni `justify-items` activo. Perseguir al culpable era mas caro
   que quitarle la ambiguedad al contenedor. Una columna flex con los hijos al
   inicio no depende de lo que herede: un solo eje, por construccion. */
.rail-cta{display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;padding-bottom:clamp(28px,3vw,40px)}
.rail-cta__fineprint{max-width:52ch}

/* =========================================================================
   C3 — LA INSIGNIA DEL CARTEL VIVIA DEBAJO DE LA CABECERA FIJA. Estaba en
   `position:absolute; top:0; margin:22px`, o sea en un tercer margen que no es
   ni el del sitio ni el del cartel, y ademas justo donde pasa la barra de
   arriba: borron palido en escritorio, rectangulo cortado en el telefono.
   Baja al bloque de contenido, encima del titular y en la misma vertical.
   ========================================================================= */
.rail-billboard__badge{position:static;margin:0 0 16px;align-self:flex-start;
  display:inline-block}
.rail-billboard__content{display:flex;flex-direction:column;align-items:flex-start}

/* =========================================================================
   C4 — EL ARREGLO FUE AL HIJO Y FALTABA EL PADRE. Limpie el `summary` (52x36,
   transparente) pero la caja gris que se ve en pantalla es el `<details>` que
   lo envuelve: 98x74 con fondo `rgb(244,248,253)` y borde. Tocar el interior y
   dejar el contenedor es como repintar un cuadro sin quitar el marco viejo.
   ========================================================================= */
.nav__more{background:none;border:0;padding:0;margin:0;border-radius:0}

/* C8 — LA BARRA FLOTANTE TAPABA TEXTO A PARTIR DE 768 px. El suelo que puse
   estaba dentro de `@media (max-width:767px)`, pero la barra es fija en TODOS
   los anchos: en 834 se comia la tercera linea de un parrafo. El suelo deja de
   tener condicion, igual que la barra. */
body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px) + 22px)}

/* C10 — AL LLEGAR AL FINAL, LA MASCARA SEGUIA COMIENDO 148 px de la ultima
   ficha. El desvanecido dice «sigue»; cuando ya no sigue, mentir con el es
   peor que no tenerlo. `arrastre.js` marca el riel al tocar tope. */
.rail__scroller[data-rail-fin]{-webkit-mask-image:none;mask-image:none}


/* =========================================================================
   D2 — EL CIERRE TENIA CUATRO EJES. Lo descentre en el contenedor pero sus
   hijos conservaban `margin-inline:auto`, asi que cada uno se centraba por su
   cuenta: a 1440 el boton en 291, el parrafo en 719, el pie en 720 y el
   antetitulo en 720. A 375 coincidian por casualidad —todos en 49— y por eso
   lo di por bueno mirando solo el telefono. Centrar el padre no descentra a
   los hijos.
   ========================================================================= */
.rail-cta > *{margin-inline:0;max-width:60ch}
.rail-cta__boton{align-self:flex-start}

/* D3 — A 375 EL CARTEL TENIA SU PROPIO EJE: contenido, insignia y titular en
   x=44 mientras el resto del sitio empieza en 20, por 24 px de relleno
   interior; y el boton iba centrado. La regla de alineacion solo la habia
   escrito para escritorio. */
@media (max-width:767px){
  /* EN EL TELEFONO EL CARTEL NO SALE A SANGRE: sigue dentro de `.wrap`, que ya
     puso los 20 px de margen. Volver a aplicar la formula del sitio aqui los
     ponia DOS veces y dejaba el texto en 40. El contenido ocupa el ancho que
     le den y no se vuelve a centrar. */
  /* EL RELLENO INTERIOR NO ES EL MARGEN DE LA PAGINA. Puse `padding-inline:0`
     razonando que aqui el cartel ya vive dentro de `.wrap` y que ese margen
     bastaba — y bastaba para colocar LA TARJETA, no para separar el texto de su
     propio borde. Medido: tarjeta y titular empezaban los dos en x=20, o sea
     cero aire entre el texto y el canto oscuro. Son dos cosas distintas y las
     confundi: una posiciona la caja, la otra la hace habitable. */
  .rail-billboard__content{
    width:100%;margin-inline:0;
    padding-inline:clamp(20px,5.6vw,28px);
    align-items:flex-start;text-align:left}
  .rail-billboard__actions{justify-content:flex-start;margin-inline:0}
  .rail-billboard__actions a{margin-inline:0}
}

/* D4 — A 834 EL SOBRE Y LA BARRA SE SOLAPABAN 14x9 px. El sobre se aparta al
   ancho donde la barra flotante es mas ancha y sube mas. */
@media (min-width:768px) and (max-width:1023px){
  .sobre{bottom:calc(62px + env(safe-area-inset-bottom,0px) + 34px)}
}

/* D5 — «remote-first.» quedaba huerfano en su propia linea. El pie se equilibra
   en vez de partir por donde caiga. */
.rail-cta__fineprint{text-wrap:balance}

/* =========================================================================
   D8 — CAESARS: MASA OPTICA, NO ALTURA DE CAJA. A 48 px de caja su altura de
   MAYUSCULA es ~9 px contra ~20 de Carnival: igualar la caja de un escudo
   apilado contra una palabra horizontal no iguala nada de lo que ve el ojo.
   NO se recorta el SVG —alterar la marca registrada de un tercero, y siendo
   ademas su empleador actual, es justo lo que revisa un equipo legal—. Se
   normaliza por altura de x: sube de caja y baja un punto de opacidad, que es
   lo que devuelve el peso sin tocar el archivo.
   ========================================================================= */
.rail-card__marca{height:76px}
.rail-card__marca img[src*="caesars"]{height:100%;opacity:.56}
.rail-card__marca img[src*="ritzcarlton"]{height:49%}
.rail-card__marca img[src*="carnival"]{height:42%}
.rail-card__marca img[src*="spirit"]{height:37%}
.rail-card__marca img[src*="officedepot"]{height:28%}


/* =========================================================================
   D9 — LA CORTINA BAJABA DESPUES DE EMPEZAR LA FUNCION.
   `entrada.js` va con `defer`, asi que el velo se creaba tarde: medido con red
   lenta, a ~150 ms se veia la portada ENTERA —cabecera, antetitulo, titular,
   retrato— y a ~900 ms caia el velo azul encima. Eso no es una entrada: es un
   parpadeo del sitio seguido de una interrupcion.
   Mi argumento para pintarlo desde JS era que un fallo de descarga no dejara a
   nadie mirando un rectangulo de color. El argumento es bueno pero protegia
   contra un fallo que este arreglo tampoco tiene: el guion que decide va
   INCRUSTADO en el HTML —no se descarga, no puede fallar— y su propio plan de
   salida vive dentro de el. Se conservan las dos cosas en vez de elegir.
   ========================================================================= */
html[data-gt-entrada]::before{
  content:"";position:fixed;inset:0;z-index:9998;
  background:radial-gradient(120% 90% at 50% 8%,#122040 0%,var(--ink,#0b1220) 62%)}
/* El lienzo de la entrada se pinta encima de esa base y la releva sin costura.
   Cuando el velo real existe, la base sobra. */
html[data-gt-entrada]:has(.gt-veil)::before{display:none}
@media (prefers-reduced-motion:reduce){
  html[data-gt-entrada]::before{display:none}
}

/* E3 — LAS CINCO FICHAS DE TRAYECTORIA TENIAN TRES ALTURAS, hasta 43 px de
   diferencia. No era culpa de los logos —las cinco filas miden 76 px— sino de
   que cada puesto se describe con mas o menos texto. En una rejilla eso no se
   nota; en un carrusel horizontal las bases quedan a distinta altura y el
   borde inferior sale dentado, que es de las cosas que mas rapido delatan que
   algo no se remato. Se estiran a la mas alta. */
.rail--marcas .rail__scroller{align-items:stretch}
.rail-card--marca{height:auto}

/* =========================================================================
   OFICIO, ULTIMA TANDA. Tres defectos que no salen en una captura y que se
   miden solos.

   1. OBJETIVOS TACTILES POR DEBAJO DEL MINIMO. Medido a 375: la marca de la
      cabecera 150x21, el desplegable de reglas 237x19 y el enlace de LinkedIn
      47x18. El minimo accesible es 24 px de alto, no 44 — la norma exceptua los
      enlaces que van DENTRO de una frase, y por eso «case files» se queda como
      esta: es texto corrido. Pero la marca y el desplegable son controles
      sueltos, y ahi no hay excepcion que valga.
      Se gana con relleno, no con tipografia mas grande: el dedo necesita area,
      el ojo no necesita mas letra.
   ========================================================================= */
/* La clase es `nav__brand`, no `brand`: mi primera regla apuntaba a una clase
   que no existe en el marcado y era CSS muerto — verificado leyendo el HTML
   servido, no el que yo recordaba. */
.nav__brand{display:inline-flex;align-items:center;min-height:26px;padding-block:3px}
.consejo__todo > summary{min-height:26px;display:flex;align-items:center}
.links a{display:inline-flex;align-items:center;min-height:26px}

/* 2. NO HABIA FORMA DE SALTAR AL CONTENIDO. Quien navega con teclado tenia que
      recorrer la cabecera entera en cada una de las 66 paginas antes de llegar
      al texto. El enlace solo aparece cuando recibe el foco: no le quita sitio
      a nadie y le devuelve la pagina a quien la necesita. */
/* Se oculta RECORTANDO, no mandandolo a -9999px. Con el desplazamiento
   negativo el elemento sigue ocupando una posicion real y medi que al recibir
   el foco seguia en -9999: el navegador lo enfocaba pero no lo traia. El
   recorte a 1x1 lo saca del flujo visual sin sacarlo del orden de foco, que es
   justo lo que se quiere, y al enfocarlo se restituye entero. */
.saltar{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--ink);color:#fff;padding:0;border-radius:0 0 12px 0;
  font-size:14px;font-weight:700;text-decoration:none}
.saltar:focus,.saltar:focus-visible{
  position:fixed;left:0;top:0;width:auto;height:auto;
  overflow:visible;clip-path:none;padding:12px 18px;z-index:10000}

/* =========================================================================
   LA DEMOSTRACION. La pagina afirmaba nueve años en la parte dificil y no
   enseñaba una sola cosa ejecutada: un desconocido tenia que creerse el texto.
   Esto no explica la tesis — la deja probar.
   Dos columnas, los mismos cinco pasos, distinto orden. Sin una sola cifra de
   rendimiento: cualquiera seria inventada o seria de un cliente, y las dos
   cosas estan fuera. Se cuenta lo unico contable sin mentir — lo que hay en
   pantalla.
   ========================================================================= */
.sec{display:grid;gap:clamp(14px,2.4vw,28px);margin-top:clamp(22px,3vw,34px);
  grid-auto-rows:1fr}
/* DOS COLUMNAS DESDE MUY PRONTO, aunque aprieten. Apiladas, la columna A mide
   483 px y la B empieza 502 px mas abajo: NUNCA se ven los dos marcadores a la
   vez, y una comparacion que no se puede comparar no es una comparacion. En un
   telefono estrecho es preferible que el texto apriete a que el argumento
   desaparezca. */
/* DOS COLUMNAS SIEMPRE, sin punto de corte. Lo puse en 430 px y a 375 —el ancho
   mas comun— seguia apilado, que era exactamente el defecto que venia a
   arreglar. Una comparacion en una sola columna no es una comparacion. */
.sec{grid-template-columns:1fr 1fr}
@media (max-width:429px){
  .sec{gap:10px}
  .sec__via{padding:13px}
  .sec__paso{font-size:13.5px;padding:9px 10px}
  .sec__titulo{font-size:17px}
  .sec__cuenta{font-size:11px;padding:4px 8px}
  /* LA PILDORA SE VA, LA CODIFICACION SE QUEDA. Ocultar `.sec__etiqueta` sin mas
     era quitar lo UNICO que distingue un paso que pide de uno que da: a 375 las
     dos columnas quedaban como dos listas grises identicas y el argumento entero
     desaparecia justo en el ancho mas comun. El color pasa al canto del paso,
     que no cuesta ni un pixel de ancho de texto. */
  .sec__etiqueta{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sec__paso{padding-left:16px}
  .sec__paso::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
    width:4px;border-radius:0 3px 3px 0;background:var(--line)}
  .sec__paso[data-paso="pide"]::before{background:#8d2b2b}
  .sec__paso[data-paso="da"]::before{background:#1d6b42}
}

.sec__via{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-tile,18px);padding:clamp(18px,2.2vw,26px);
  display:flex;flex-direction:column}
.sec__titulo{font:500 clamp(19px,2vw,23px)/1.15 Georgia,serif;margin:0 0 4px;
  letter-spacing:-.02em}

/* El marcador. Es el corazon del asunto: no dice si algo va bien o mal, dice
   cuanto te han pedido antes de darte nada. */
.sec__marcador{order:-1;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sec__cuenta{display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;background:var(--cream);color:var(--muted-rotulo);
  transition:background .3s ease,color .3s ease}
.sec__cuenta b{font-size:15px}
.sec__cuenta[data-tipo="pide"]{background:#fdeaea;color:#8d2b2b}
.sec__cuenta[data-tipo="da"]{background:#e6f4ec;color:#1d6b42}

/* `grid-auto-rows:1fr` VA AQUI, en la lista de pasos, no en la rejilla de
   fuera. Lo puse en `.sec` —que solo iguala las dos COLUMNAS entre si— y el
   defecto seguia: dentro de cada columna los pasos tienen textos de distinto
   largo, asi que la fila 3 de la izquierda no cae a la altura de la fila 3 de
   la derecha. Y en una comparacion eso lo es todo: si las filas no se alinean,
   el ojo no puede leer «este paso contra este paso» y hay que ir recordando. */
.sec__pasos{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1;
  grid-auto-rows:1fr}
/* EL PASO EN REPOSO SE LEE. Mi primera version bajaba la opacidad del `<li>`
   entero al 50%: contraste 2,02:1, las dos tarjetas arrancaban pareciendo que
   no habian cargado, y la version SIN JavaScript se veia mejor que la buena —
   que es la señal mas clara de que el estado por defecto estaba mal elegido.
   Lo que distingue un paso pendiente de uno recorrido no es que se vea menos:
   es el fondo y el borde. El texto se lee en los dos. */
.sec__paso{position:relative;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--cream);
  font-size:15px;line-height:1.45;color:var(--muted-rotulo);
  transition:background .3s ease,border-color .3s ease,color .3s ease}
.sec__paso[data-visto]{color:var(--ink);background:var(--paper);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.sec__paso[data-actual]{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
/* Sin JavaScript no hay pasos «vistos», asi que se leen todos por igual: dos
   listas que dicen lo mismo que la version jugable. */
.sec__via:not([data-listo]) .sec__paso{color:var(--ink)}

.sec__etiqueta{display:inline-block;margin-right:8px;padding:2px 7px;
  border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;vertical-align:1px}
.sec__paso[data-paso="pide"] .sec__etiqueta{background:#fdeaea;color:#8d2b2b}
.sec__paso[data-paso="da"] .sec__etiqueta{background:#e6f4ec;color:#1d6b42}

/* EL NUMERO ES EL ARGUMENTO, Y VA ARRIBA. Antes habia que pulsar cinco veces
   para deducirlo de dos marcadores; ahora es lo primero que se lee y la pieza
   se entiende sin tocarla. Va en el marcado, no lo escribe el JS: es la verdad
   de la columna, no un adorno. */
.sec__coste{margin:0 0 12px;font-size:13.5px;line-height:1.3;color:var(--muted-rotulo)}
.sec__coste b{display:block;font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(34px,5vw,46px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* La linea de abajo tambien. Pintar solo la cifra en blanco dejaba su propia
   etiqueta en gris de reposo sobre tinta: 2,3:1, ilegible justo debajo del
   numero mas grande de la pieza. */
.sec__via[data-oscuro] .sec__coste{color:#d6d8dd}
.sec__via[data-oscuro] .sec__coste b{color:#fff}

/* A OSCURAS: FONDO OSCURO, NO TEXTO GRIS. La tentacion era bajar la opacidad, y
   este fichero ya aprendio que eso da 2,02:1 y aspecto de pagina rota. Se
   invierte la tarjeta: el texto sube a blanco sobre tinta —contraste mas ALTO
   que en reposo— y lo que se lee es la metafora, no un fallo de carga. */
.sec__via{transition:background .45s ease,border-color .45s ease}
.sec__via[data-oscuro]{background:var(--ink);border-color:var(--ink)}
.sec__via[data-oscuro] .sec__titulo{color:#fff}
.sec__via[data-oscuro] .sec__paso{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);color:#f2f2f2}
.sec__via[data-oscuro] .sec__paso[data-visto]{background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.4);color:#fff}
.sec__via[data-oscuro] .sec__cuenta[data-tipo="pide"]{background:#5c1a1a;color:#ffd9d9}
.sec__via[data-oscuro] .sec__cuenta[data-tipo="da"]{background:#173a28;color:#cdebd9}

.sec__mandos{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.sec__boton{border:0;cursor:pointer;border-radius:999px;padding:11px 20px;
  background:var(--accent);color:#fff;font:700 14px/1 inherit;
  transition:background .2s ease,transform .18s cubic-bezier(.2,.7,.2,1)}
.sec__boton:hover:not(:disabled){background:var(--accent-deep)}
.sec__boton:active:not(:disabled){transform:scale(.97)}
.sec__boton:disabled{background:var(--cream);color:var(--muted-rotulo);cursor:default}
.sec__boton--tenue{background:none;color:var(--muted-rotulo);
  border:1px solid var(--line);font-weight:600}
.sec__boton--tenue:hover{background:var(--cream);color:var(--ink)}

.sec__cierre{margin:clamp(20px,2.6vw,30px) 0 0;max-width:62ch;
  font:italic clamp(17px,1.9vw,21px)/1.5 Georgia,serif;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .sec__paso,.sec__cuenta,.sec__boton{transition:none}
}

/* =========================================================================
   B1..B4 — LOS CUATRO ULTIMOS DEL CARRIL DE CODIGO.
   ========================================================================= */

/* B1 — MI «CASO PEOR» NO ERA EL PEOR. Saque los mandos de las tarjetas y
   comprobe el boton a 716: devolvia el boton y lo di por cerrado. Pero por
   debajo de y≈728 la barra fija se lo sigue tragando —730/745/760 devuelven
   `rail-bottomnav__link`— y ahi el toque navega a otra pagina. Elegi UN punto
   para verificar y era justo el que me daba la razon.
   Pegajoso por encima de la barra: el mando deja de depender de donde pare el
   scroll, que es la unica forma de que no haya un «punto malo». */
@media (max-width:759px){
  /* ACOTADO POR LOS DOS LADOS. Con solo `bottom`, el mando se pegaba por
     encima de la barra —bien— pero al salir la pieza por arriba pasaba por
     DEBAJO de la cabecera fija: barrido de 35 posiciones de scroll, 2 malas, y
     en las dos el toque lo recibia la marca de la cabecera. Arreglar un extremo
     y no mirar el otro es como llegue aqui la primera vez. */
  /* YA NO SE PEGA. El mando se hizo pegajoso porque era la unica forma de
     empezar la pieza y habia que tenerlo siempre a mano; costo dos intentos
     —una vez cayo bajo la barra inferior y otra paso bajo la cabecera— y aun
     asi se cruzaba con las tarjetas. Ahora la pieza se reproduce sola: el mando
     es opcional, y un control opcional no tiene derecho a taparle a nadie el
     contenido. Se queda quieto debajo, donde no estorba. */
  .sec__mandos{position:static}
}

/* B2 — `grid-auto-rows:1fr` GANA A 834 Y PIERDE A 375. Con las columnas juntas
   iguala las filas y la comparacion se lee; apilado no hay nada con que
   comparar, asi que solo estira cada paso a la altura del mas largo y deja unos
   100 px muertos por tarjeta. La regla se acota al ancho donde sirve. */
@media (max-width:759px){
  .sec__pasos{grid-auto-rows:auto}
}

/* B3 — LA PILDORA DEL SOBRE SE COMIA LA TARJETA DERECHA a 375. Un flotante
   siempre tapa algo; lo que se puede decidir es CUANTO. Bajo 430 px se queda en
   el icono: el sobre ya dice lo que es sin la etiqueta, y el area de toque
   sigue por encima del minimo. */
@media (max-width:429px){
  .sobre__texto{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .sobre__boton{padding:12px;min-width:44px;min-height:44px;justify-content:center}
}

/* B4 — AL LLEGAR POR ANCLA, EL ANTETITULO QUEDABA BAJO LA CABECERA FIJA. Una
   pieza a la que se llega decapitada empieza por su segunda linea. */
.sec,.band{scroll-margin-top:88px}

/* =========================================================================
   «Every rule on this card» — EL DESPLEGABLE ESTABA DENTRO DE LA TARJETA
   OSCURA Y SE PINTABA COMO SI ESTUVIERA EN PAPEL.

   La regla generica del sitio —`details{background:var(--cream)}`— le ponia una
   caja CREMA en mitad de una tarjeta de tinta, y sus textos son los claros
   pensados para fondo oscuro. Resultado medido: el titulo del desplegable a
   2,20:1 y las dieciseis reglas de dentro a **1,26:1**, o sea invisibles
   aunque consiguieras abrirlo. El desplegable funcionaba —`click` lo abre—;
   lo que fallaba era que no se veia que fuera un control.

   Una regla de elemento (`details`) escrita para el cuerpo del sitio alcanza
   TAMBIEN a los componentes que viven sobre fondo oscuro. Es el mismo defecto
   que el `--red` de esta mañana: un valor global que vale para el 90% de los
   casos y destroza el 10% restante sin avisar.
   ========================================================================= */
.consejo__todo{
  background:none;border:0;border-top:1px solid rgba(207,224,248,.22);
  border-radius:0;padding:14px 0 0;margin:20px 0 0}

/* El titulo del desplegable tiene que PARECER un control. Antes era un rotulo
   mas, del mismo color y peso que el resto, sin nada que dijera «esto se abre».
   Se le pone un signo que gira: es la señal mas barata y la unica que funciona
   sin leer. */
.consejo__todo > summary{
  display:flex;align-items:center;gap:9px;min-height:28px;
  list-style:none;cursor:pointer;
  color:color-mix(in srgb,var(--accent) 45%,#fff)}
.consejo__todo > summary::-webkit-details-marker{display:none}
.consejo__todo > summary::before{
  content:"+";display:grid;place-items:center;
  width:19px;height:19px;flex:none;border-radius:6px;
  background:rgba(207,224,248,.14);color:#cfe0f8;
  font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),background .22s ease}
.consejo__todo[open] > summary::before{content:"\2212";background:rgba(207,224,248,.24)}
.consejo__todo > summary:hover::before{background:rgba(207,224,248,.3)}

/* Las dieciseis reglas: color de la tarjeta, no del papel. */
.consejo__pozo{margin:14px 0 0;padding-left:20px}
.consejo__pozo li{color:#cfe0f8;font-size:15px;line-height:1.5;margin:0 0 9px}
.consejo__pozo li::marker{color:rgba(207,224,248,.45)}

@media (prefers-reduced-motion:reduce){
  .consejo__todo > summary::before{transition:none}
}

/* =========================================================================
   QUE ES ESTA PAGINA. Llevaba seis revisiones señalando lo mismo: un
   desconocido recorre once mil pixeles y no sabe si esto es un portafolio, una
   tienda o una tarjeta de visita. Era lo unico que tenia la primera pantalla
   clavada en 8,0.
   No hace falta ofrecer nada para responderlo — basta con DESCRIBIR. La frase
   es literalmente suya: «es mas que todo un espacio para compartir mi tesis de
   producto y quien soy».
   Va debajo de la entradilla y por encima de las acciones, que es donde alguien
   decide si sigue leyendo: antes de las acciones, para que sepa a que le esta
   diciendo que si; y despues de la entradilla, para que no compita con ella.
   Pequeña y en gris: es una aclaracion, no un segundo titular.
   ========================================================================= */
.hero__proposito{margin:-14px 0 26px;max-width:46ch;
  font-size:15.5px;line-height:1.5;color:var(--muted-rotulo)}
@media (max-width:720px){.hero__proposito{margin:-8px 0 22px;font-size:15px}}

/* ==========================================================================
   EL DIAGNÓSTICO — "¿dónde pierdes a esta persona?" (friccion.js)

   La mecánica sale del audit del kit [[rail-kit-and-gamification-audit]]:
   medidor de progreso y veredicto personal, que son las dos con evidencia.
   Ni rachas, ni insignias, ni puntos, ni cuenta atrás — con un 10% de
   sesiones que vuelven, una racha es decoración.

   El movimiento sale del desmontaje de clickspark: lo interactivo por debajo
   de 700 ms y con UN rebote al 58%, lo ambiental lento y diminuto. El JS
   escribe variables (`--i`) y atributos; los fotogramas viven aquí.

   Nada se esconde desde este archivo: el pozo de los nueve casos lo esconde
   el JavaScript, así que sin JavaScript se lee la lista entera con sus
   respuestas, que es la falla correcta.
   ========================================================================= */
.friccion{background:var(--cream);border:1px solid var(--line);
  border-radius:clamp(20px,2.4vw,30px);padding:clamp(26px,4vw,44px);display:grid;gap:18px;
  position:relative;overflow:hidden}
.friccion__eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0}
.friccion__titular{font:clamp(24px,3vw,38px)/1.2 Georgia,serif;margin:0;max-width:22ch}
.friccion__entrada{color:var(--muted);margin:0;max-width:58ch;font-size:16px}

/* EL MEDIDOR. Nueve casillas. Vacía = hueco; acertada = llena con ✓;
 * fallada = llena con ✕ y una barra diagonal. El signo va en la casilla, no
 * sólo el color, porque el medidor tiene que leerse igual sin distinguir
 * verde de rojo. */
/* El medidor ya no se dibuja aqui: es RailProgress, del kit. Lo que habia
 * eran nueve casillas hechas a mano — y la pieza estaba vendorizada y sin
 * usar desde el primer dia. Esto es solo la piel de la marca sobre ella.
 *
 * Lo que se pierde al cambiar: las casillas decian, de un vistazo, CUALES
 * acertaste. Eso ahora va en palabras en la nota (`__note`) y entero en el
 * resumen del final, que es donde de verdad se lee. Lo que se gana: una
 * <progress> de verdad, que el lector de pantalla ya sabe anunciar. */
.friccion__medidor{
  --rail-progress-bg:transparent;
  --rail-progress-fill:var(--accent);
  --rail-progress-track:#dde6f4;
  --rail-progress-height:10px;
  --rail-progress-label-size:13px;
  --rail-progress-value-size:13px;
  padding:0;
}
.friccion__medidor .rail-progress__label,
.friccion__medidor .rail-progress__value{
  letter-spacing:.04em;color:var(--muted-rotulo);text-transform:uppercase;font-weight:700}
.friccion__medidor .rail-progress__note{
  font-size:13px;color:var(--muted-rotulo);margin:6px 0 0}
.friccion__medidor[data-completo] .rail-progress__value{color:var(--accent)}

/* LA GUIA DEL PRIMER MOMENTO. Es RailCoachmark, tambien del kit. Existe por
 * una frase suya: «no entiendo este juego, abruma». Sale una vez, en la
 * primera pregunta, y se puede cerrar. */
.friccion__guia{
  --rail-coachmark-bg:var(--ink);
  --rail-coachmark-width:46ch;
  margin:0 0 18px;
}

/* Se reserva algo de alto para que la tarjeta no pegue un salto entre pasos,
 * pero poco: reservar el alto del paso MÁS largo deja un agujero debajo de las
 * tres personas, que es el paso más corto y el primero que se ve. */
.friccion__tablero{display:grid;gap:16px;min-height:clamp(180px,19vw,210px);align-content:start}
.friccion__paso{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0}
.friccion__quien{font:20px/1.25 Georgia,serif;margin:0;display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap}
/* Dónde estás DENTRO de esta persona. Sustituye al menú de momentos: en vez de
 * elegir cuál de los tres, se ve cuál de los tres va. */
.friccion__quien-cuenta{font:700 11.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);background:#e8effc;border-radius:999px;padding:5px 10px}
.friccion__escena{margin:0;font-size:17px;color:var(--muted);max-width:52ch}
.friccion__fila{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.friccion__fila--momentos{grid-template-columns:1fr}

/* LA ENTRADA ESCALONADA. Cada hijo sale 55 ms después del anterior y entra con
 * un solo rebote. Esto y el rebote son lo que hace que un tablero se lea como
 * un juego; el resto es contención. */
@media (prefers-reduced-motion:no-preference){
  .friccion__fila[data-entrando] > *,
  .friccion__opciones-botones[data-entrando] > *,
  .friccion__revela[data-entrando] > *{
    animation:friccion-entra .42s cubic-bezier(.16,.78,.2,1) both;
    animation-delay:calc(var(--i,0) * 55ms)}
  @keyframes friccion-entra{
    0%{opacity:0;transform:translateY(14px) scale(.985)}
    58%{opacity:1;transform:translateY(-3px) scale(1.006)}
    100%{opacity:1;transform:none}}
}

/* LOS BOTONES. Mismo cuerpo para los tres pasos. El tacto es del kit: se
 * hunden al pulsar, y el vecino se apaga un punto cuando el puntero está
 * encima de otro — pero sólo con puntero fino, que en un móvil un `hover` se
 * queda pegado. */
.friccion__persona,.friccion__momento-boton,.friccion__opcion{
  font:inherit;text-align:left;cursor:pointer;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-tile,16px);padding:16px 18px;
  position:relative;overflow:hidden;
  transition:border-color .2s,transform .12s cubic-bezier(.16,.78,.2,1),
    box-shadow .2s,opacity .2s}
@media (pointer:fine){
  .friccion__fila:hover > .friccion__persona:not(:hover),
  .friccion__fila:hover > .friccion__momento-boton:not(:hover),
  .friccion__opciones-botones:hover > .friccion__opcion:not(:hover):not(:disabled){opacity:.72}
  .friccion__persona:hover,.friccion__momento-boton:hover,
  .friccion__opcion:not(:disabled):hover{
    border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--elev-1)}
}
.friccion__persona:active,.friccion__momento-boton:active,
.friccion__opcion:not(:disabled):active{transform:scale(.982)}
.friccion__persona:focus-visible,.friccion__momento-boton:focus-visible,
.friccion__opcion:focus-visible,.friccion__boton:focus-visible,
.friccion__volver:focus-visible{outline:2px solid var(--accent);outline-offset:3px;opacity:1}

.friccion__persona{display:grid;gap:6px;align-content:start}
.friccion__persona-nombre{font:19px/1.2 Georgia,serif}
.friccion__persona-pista{font-size:14px;color:var(--muted);line-height:1.4}
.friccion__persona-cuenta{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--muted);
  margin-top:2px}
.friccion__persona[data-hecho]{border-color:var(--accent)}
.friccion__persona[data-hecho] .friccion__persona-cuenta{color:var(--accent)}
.friccion__momento-boton{font-size:16.5px}
.friccion__momento-boton[data-hecho]::after{content:" \2713";color:var(--accent);font-weight:700}
.friccion__momento-boton[data-hecho="mal"]::after{content:" \2715";color:#8aa0be}
.friccion__opciones-botones{display:grid;gap:10px}
.friccion__opcion{font-size:16.5px}
.friccion__opcion:disabled{cursor:default;opacity:.55}
.friccion__opcion[data-correcta]{opacity:1;border-color:#16a34a;background:#f0fdf4;font-weight:600}
.friccion__opcion[data-correcta] .friccion__opcion-txt::after{content:" \2713";color:#16a34a;
  font-weight:800}
.friccion__opcion[data-elegida]:not([data-correcta]){opacity:1;border-color:#dc2626;background:#fef2f2}
.friccion__opcion[data-elegida]:not([data-correcta]) .friccion__opcion-txt::after{content:" \2715";
  color:#dc2626;font-weight:800}
@media (prefers-reduced-motion:no-preference){
  /* La opción correcta se marca con un golpe corto, tenga o no razón quien
   * pulsó: es la que hay que mirar. */
  .friccion__opcion[data-correcta]{animation:friccion-acierta .44s cubic-bezier(.16,.78,.2,1) both}
  @keyframes friccion-acierta{
    0%{transform:none}
    58%{transform:scale(1.014)}
    100%{transform:none}}
}

.friccion__revela{display:grid;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-tile,16px);padding:20px 22px}
.friccion__revela[data-acierto="no"]{border-left-color:#8aa0be}
.friccion__veredicto{margin:0;font:19px/1.25 Georgia,serif;display:flex;align-items:baseline;gap:10px}
.friccion__marca{font-size:15px;font-weight:800;color:#16a34a}
.friccion__revela[data-acierto="no"] .friccion__marca{color:#dc2626}
.friccion__tipo{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.friccion__tipo-etq{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.friccion__tipo-val{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:#e8effc;border-radius:999px;padding:5px 12px}
.friccion__porque-texto{margin:0;font-size:16.5px;max-width:58ch}
.friccion__arreglo-texto{margin:0;font-size:16px;color:var(--muted);max-width:58ch}
.friccion__boton{justify-self:start;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:999px;
  padding:11px 20px;margin-top:4px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .12s cubic-bezier(.16,.78,.2,1),background .2s}
.friccion__boton:hover{background:var(--accent-deep)}
.friccion__boton:active{transform:scale(.96)}
.friccion__boton-cuenta{font-size:11.5px;font-weight:800;background:rgba(255,255,255,.22);
  border-radius:999px;padding:2px 8px;min-width:20px;text-align:center}
.friccion__volver{justify-self:start;font:inherit;font-size:15px;cursor:pointer;background:none;
  border:0;color:var(--muted);padding:6px 2px}
.friccion__volver:hover{color:var(--ink)}

/* EL CIERRE. Lleva el barrido de atención del kit: TRES pasadas y se para.
 * Un pulso que no termina es un patrón de tragaperras y esa línea no se cruza.
 * El JS quita el atributo a los 2,4 s por si el navegador ignora el contador. */
.friccion__cierre{margin:0;font:clamp(18px,2.1vw,23px)/1.35 Georgia,serif;max-width:46ch;
  position:relative;overflow:hidden;border-top:1px solid var(--line);padding-top:16px}
@media (prefers-reduced-motion:no-preference){
  .friccion__cierre[data-barrido]::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 30%,rgba(29,78,216,.13) 50%,transparent 70%);
    transform:translateX(-100%);animation:friccion-barrido .8s ease-in-out 3}
  @keyframes friccion-barrido{to{transform:translateX(100%)}}
}

/* El pozo: los nueve casos tal cual, para quien no tenga JavaScript. */
.friccion__pozo{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:22px}
.friccion__caso{border-top:1px solid var(--line);padding-top:16px}
.friccion__momento{font-weight:700;margin:0 0 8px}
.friccion__opciones{margin:0 0 10px;padding-left:20px;display:grid;gap:5px;font-size:16px}
.friccion__opciones li[data-correcta]{font-weight:700}
.friccion__porque,.friccion__arreglo{margin:0 0 6px;font-size:16px;color:var(--muted)}
@media(max-width:720px){
  .friccion__fila{grid-template-columns:1fr}
}
/* =========================================================================
   LOS DOS TELEFONOS. La pieza dejo de ser dos listas.
   Gonzalo, sobre la version de listas: «el ui no es llamativo, no ayuda» y
   luego «es horrible». Tenia razon las dos veces y el diagnostico estaba mal
   por mi parte: le puse jerarquia y color a un texto, cuando lo que hacia
   falta era ENSENAR LAS DOS APLICACIONES. Un alta no se entiende leyendo cinco
   frases, se entiende viendo las pantallas por las que te hacen pasar — y
   viendo que en una de ellas la pantalla buena no llega hasta la quinta.
   Se mueven con el dedo, las dos a la vez, porque son una comparacion.
   ========================================================================= */
.tels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,30px);
  margin-top:clamp(16px,2.4vw,26px);touch-action:pan-y}
.tel{display:flex;flex-direction:column;align-items:center;min-width:0}
.tel__rotulo{font-size:clamp(12px,1.5vw,14px);font-weight:700;letter-spacing:.02em;
  color:var(--muted-rotulo);margin:0 0 8px;text-align:center}
.tel__marco{position:relative;width:100%;max-width:230px;aspect-ratio:9/17.5;
  border-radius:clamp(18px,3vw,28px);background:#0b1f3a;padding:7px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;overflow:hidden}
/* SIN MUESCA. La puse por realismo y a 375 se leia como una mancha oscura
   flotando sobre una pantalla blanca: un adorno que parece un fallo de pintado
   cuesta mas de lo que aporta. El marco ya dice «telefono» sin ella. */
.tel__muesca{display:none}
.tel__visor{position:relative;height:100%;border-radius:clamp(12px,2.4vw,21px);
  overflow:hidden;background:#fff}
.tel__pista{display:flex;height:100%;will-change:transform}
.tel__p{flex:0 0 100%;height:100%;padding:15px 13px 13px;display:flex;
  flex-direction:column;gap:9px;background:#fff}

/* LAS PANTALLAS QUE PIDEN se parecen entre si a proposito: formulario gris
   detras de formulario gris. Esa monotonia ES el argumento de la columna A. */
.tel__t{font-size:12.5px;font-weight:700;color:#0b1f3a;line-height:1.25;margin:0}
.tel__s{font-size:10.5px;line-height:1.3;color:#6b7280;margin:0}
.tel__campo{height:26px;border-radius:6px;border:1px solid #d7dae0;background:#f6f7f9;
  display:flex;align-items:center;padding:0 8px;font-size:10.5px;color:#9aa1ac;letter-spacing:.06em}
.tel__caja{flex:1;border:1px dashed #cdd2da;border-radius:8px;background:#f6f7f9;
  display:grid;place-items:center;color:#9aa1ac;font-size:10.5px;text-align:center;padding:8px}
.tel__btn{margin-top:auto;height:28px;border-radius:7px;background:#c9ced6;color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700}

/* LA PANTALLA QUE DA es la unica con color en toda la pieza. Si el producto se
   pareciera a los formularios no habria nada que sentir al llegar a el. */
.tel__p[data-tipo="producto"]{background:linear-gradient(170deg,#0b1f3a,#16457f);
  color:#fff;gap:7px}
.tel__p[data-tipo="producto"] .tel__t{color:#fff;font-size:13.5px}
.tel__p[data-tipo="producto"] .tel__s{color:#bcd2f0}
.tel__fila{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);
  border-radius:8px;padding:6px 8px}
.tel__punto{width:16px;height:16px;border-radius:5px;background:#4ade80;flex:none}
.tel__barra{height:5px;border-radius:99px;background:rgba(255,255,255,.28);flex:1}
.tel__barra i{display:block;height:100%;border-radius:99px;background:#4ade80}
.tel__cifra{font-family:Georgia,'Times New Roman',serif;font-size:26px;line-height:1;margin:2px 0 0}

/* EL PIE DE CADA TELEFONO dice, en una linea, lo unico que hay que sacar de
   este paso. Cambia con el dedo. */
.tel__pie{margin:9px 0 0;font-size:12px;line-height:1.35;text-align:center;
  color:var(--muted-rotulo);min-height:2.7em}
.tel__pie b{color:#b23b3b}
.tel__pie[data-bien] b{color:#1d6b42}

/* EL CARRIL DE PUNTOS: donde estas y, en color, que te ha tocado en cada paso.
   Es la unica forma de ver los cinco pasos A LA VEZ mientras miras uno. */
.tel__puntos{display:flex;gap:4px;margin-top:8px;justify-content:center}
.tel__puntos i{width:13px;height:5px;border-radius:99px;background:#d7dae0}
.tel__puntos i[data-p="pide"]{background:#e2a3a3}
.tel__puntos i[data-p="da"]{background:#8fcfab}
.tel__puntos i[data-actual]{transform:scaleY(2)}

.sec__arrastre{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--muted-rotulo)}
@media (prefers-reduced-motion:no-preference){
  .tel__pista{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .tel__puntos i{transition:transform .25s ease,background .25s ease}
}

/* La lista original se retira de la VISTA cuando los telefonos la suplantan,
   pero no del arbol: es el texto que lee un lector de pantalla y la version
   que se ve si el JavaScript no llega. `display:none` la habria borrado para
   las dos cosas. */
.sec[data-suplantado]{position:absolute;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* EN ANCHO, EL TELEFONO CRECE POR DENTRO, NO POR FUERA. Con el mismo cuerpo de
   letra que en el movil, un marco de 447 px de alto quedaba medio vacio y las
   pantallas parecian maquetas sin terminar. Sube el texto, no el marco: lo que
   tiene que verse grande es lo que dice cada pantalla. */
@media (min-width:700px){
  .tel__marco{max-width:250px;aspect-ratio:9/16.2}
  .tel__p{padding:18px 15px 15px;gap:11px}
  .tel__t{font-size:15px}
  .tel__s{font-size:12px}
  .tel__campo{height:32px;font-size:12px}
  .tel__btn{height:34px;font-size:12.5px}
  .tel__caja{font-size:12px}
  .tel__p[data-tipo="producto"] .tel__t{font-size:16px}
  .tel__cifra{font-size:32px}
  .tel__pie{font-size:13px}
}

.tel__sup{display:flex;align-items:center;justify-content:space-between;
  margin:-4px 0 2px;color:#6b7280;font-size:11px}
/* Eran #9aa1ac y #b6bcc6: 2.6:1 y 1.91:1 sobre blanco, por debajo del 4.5
   que pide un texto pequeno. La cuenta de pantalla («1 / 5») y la flecha de
   volver son texto que se lee, no adorno — el gris apagado de los CAMPOS si
   se queda, porque ahi el gris ES el argumento. #6b7280 da 4.83:1. */
.tel__atras{font-size:19px;line-height:1;color:#6b7280}
.tel__cuenta2{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tel__p[data-tipo="producto"] .tel__sup{color:#bcd2f0}
.tel__p[data-tipo="producto"] .tel__atras{color:#7ea6e0}

/* =========================================================================
   EL DIAGNOSTICO: MENOS COSAS ANTES DE PODER TOCAR NADA.
   Reportado como «difícil de entender y agobiante». Medido: el juego en si son
   CUATRO elementos —una pregunta y tres opciones—, o sea que el juego no era el
   problema. Lo era todo lo que hay que leer ANTES: antetitulo, titular, una
   instruccion de tres ordenes en una frase, y un medidor que dice «0 de 9»
   antes de haber hecho nada.

   Un medidor a cero no informa: anuncia deberes. Se esconde hasta la primera
   respuesta, y a partir de ahi si dice algo — cuanto llevas.
   ========================================================================= */
.friccion__medidor{transition:opacity .3s ease}
.friccion__medidor:not([data-empezado]){
  opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none}

/* --------------------------------------------------------------------------
   LA TARJETA DE ENTRADA AL DIAGNÓSTICO.

   El juego estaba suelto en la portada y no se entendía hasta que alguien lo
   toqueteaba — la misma fricción que el juego enseña, cometida por mí. Ahora
   la portada sólo promete: qué es, cuánto dura y qué vas a hacer. El juego
   vive en su propia página.

   Es un `<a>` entero, no una tarjeta con un botón dentro: si parece pulsable
   tiene que serlo por cualquier lado, y el dedo de un pulgar no apunta.
   -------------------------------------------------------------------------- */
.friccion-entrada{display:grid;gap:10px;text-decoration:none;color:inherit;
  background:var(--cream);border:1px solid var(--line);
  border-radius:clamp(20px,2.4vw,30px);padding:clamp(24px,3.4vw,38px);
  position:relative;overflow:hidden;
  transition:border-color .2s,transform .16s cubic-bezier(.16,.78,.2,1),box-shadow .2s}
@media (pointer:fine){
  .friccion-entrada:hover{border-color:var(--accent);transform:translateY(-3px);
    box-shadow:var(--elev-1)}
  .friccion-entrada:hover .friccion-entrada__cta{background:var(--accent-deep)}
}
.friccion-entrada:active{transform:scale(.993)}
.friccion-entrada:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.friccion-entrada__eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
.friccion-entrada__titulo{font:clamp(26px,3.2vw,40px)/1.16 Georgia,serif;max-width:20ch;
  letter-spacing:-.02em}
.friccion-entrada__copy{color:var(--muted);max-width:54ch;font-size:16.5px;line-height:1.55}
.friccion-entrada__pie{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
/* El CTA es un `span` con cara de botón: un `<button>` dentro de un enlace es
 * HTML inválido y además roba el tabulador a la tarjeta. */
.friccion-entrada__cta{display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:#fff;border-radius:999px;padding:12px 22px;
  font-size:14px;font-weight:700;transition:background .2s}
.friccion-entrada__cta::after{content:"\2192";font-size:15px;transition:transform .2s}
@media (pointer:fine){.friccion-entrada:hover .friccion-entrada__cta::after{transform:translateX(3px)}}
/* Las nueve casillas vacías: enseñan de un vistazo que hay nueve cosas y que
 * no has hecho ninguna. Es la promesa del medidor antes de entrar. */
.friccion-entrada__medidor{display:flex;gap:5px}
.friccion-entrada__medidor span{width:20px;height:8px;border-radius:999px;background:#dde6f4}
@media(max-width:720px){
  .friccion-entrada__pie{gap:14px}
  .friccion-entrada__medidor span{width:16px}
}

/* =========================================================================
   EL RESUMEN DE UNA PERSONA YA JUGADA. Antes, volver a elegirla te devolvia a
   su primer caso ya contestado, con las opciones apagadas y una sola salida:
   un callejon. Repetir algo que ya no se puede jugar no es «hacer algo en vez
   de nada» — es prometer una partida y no darla.
   Ahora dice lo unico que alguien quiere al volver: que momentos eran, cuales
   acertaste, y cual era la respuesta.
   ========================================================================= */
.friccion__resumen-intro{margin:6px 0 16px;color:var(--muted-rotulo);font-size:15px}
.friccion__resumen{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.friccion__resumen-item{display:grid;gap:3px;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--cream);
  border-left:3px solid var(--muted-rotulo)}
/* El acierto no se dice SOLO con color: lleva su palabra («Acertaste» /
   «Fallaste»), porque quien no distingue el verde del gris tiene que poder
   leer el mismo resumen. */
.friccion__resumen-item[data-bien]{border-left-color:#1d6b42}
.friccion__resumen-momento{font:500 16px/1.35 Georgia,serif;color:var(--ink)}
.friccion__resumen-respuesta{font-size:14.5px;line-height:1.45;color:var(--muted)}
.friccion__resumen-marca{font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-rotulo);margin-top:3px}
.friccion__resumen-item[data-bien] .friccion__resumen-marca{color:#1d6b42}


/* LA FICHA DEL PUESTO ------------------------------------------------------
   La hoja del kit trae dos columnas en pantalla ancha porque normalmente
   lleva una fotografia. Esta no lleva ninguna: un logotipo ajeno ampliado no
   dice nada mas que el que ya esta en la tarjeta. Una sola columna, entonces. */
.rail-sheet--ficha {
  --rail-sheet-width: 640px;
  --rail-sheet-measure: 62ch;
  --rail-sheet-title-size: clamp(26px, 3.4vw, 40px);
  --rail-sheet-body-size: clamp(16px, 1.6vw, 18px);
}
.rail-sheet--ficha .rail-sheet__in { grid-template-columns: 1fr; min-height: 0; }
/* Sin esto la columna crece hasta su alto natural y el <dialog> recorta el
   final: el boton del registro completo quedaba fuera, sin barra que lo
   alcanzara. El scroll vive en el texto, no en la hoja. */
.rail-sheet--ficha .rail-sheet__text {
  min-height: 0;
  max-height: var(--rail-sheet-height, 88vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 860px) {
  .rail-sheet--ficha .rail-sheet__in { grid-template-columns: 1fr; min-height: 0; }
/* Sin esto la columna crece hasta su alto natural y el <dialog> recorta el
   final: el boton del registro completo quedaba fuera, sin barra que lo
   alcanzara. El scroll vive en el texto, no en la hoja. */
.rail-sheet--ficha .rail-sheet__text {
  min-height: 0;
  max-height: var(--rail-sheet-height, 88vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
}
.rail-sheet--ficha .rail-sheet__meta { color: var(--muted-rotulo); }
/* El boton de cerrar flota sobre la esquina: sin este hueco, un nombre largo
   como The Ritz-Carlton Yacht Collection pasa por debajo. */
.rail-sheet--ficha .rail-sheet__title { padding-right: 52px; }
.rail-sheet--ficha .rail-sheet__body p { margin: 0 0 1em; }
.rail-sheet--ficha .rail-sheet__body p:last-child { margin-bottom: 0; }

/* El disparador: cubre la tarjeta entera con ::after para que el area tactil
   sea la tarjeta, no una palabra. El texto visible queda debajo del pie. */
.rail-card--marca { position: relative; }
.rail-card__abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: calc(13px * var(--_type, 1));
  letter-spacing: .01em;
  opacity: .72;
  cursor: pointer;
  min-height: 24px;
}
.rail-card__abrir::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.rail-card__abrir-txt::after { content: " \2192"; }
.rail-card--marca:hover .rail-card__abrir,
.rail-card__abrir:focus-visible { opacity: 1; }
.rail-card__abrir:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }


/* EL LIENZO DEL CARTEL -----------------------------------------------------
   Faltaba esto entero. flujo.js esconde la fotografia y dibuja en su lugar,
   pero el <canvas> no tenia ni una regla: se quedaba en sus 300x150 nativos,
   estatico y en linea, arrinconado arriba a la izquierda de un cartel de
   1265x774. La animacion corria — en una esquina del tamano de un sello.
   Ocupa el sitio de la imagen, con su mismo z-index, asi que el degradado de
   .rail-billboard::after sigue cayendo encima y el titular se lee igual. */
.rail-billboard__flujo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* El dedo aparta figuras; deslizar la pagina tiene que seguir funcionando. */
  touch-action: pan-y;
}

/* El degradado es un pseudo-elemento que cubre el cartel entero, y un
   pseudo-elemento recibe puntero como cualquier caja: sin esto se traga el
   pointermove y el lienzo nunca siente el dedo. */
.rail-billboard::after { pointer-events: none; }

/* El pulso al avanzar: 520 ms con su fotograma de rebote al 58%, igual que
   tenian las casillas que habia antes. */
@media (prefers-reduced-motion:no-preference){
  .friccion__medidor[data-avanza] .rail-progress__bar{
    animation:friccion-avanza .52s cubic-bezier(.16,.78,.2,1) both}
  @keyframes friccion-avanza{
    0%{transform:scaleY(1)}
    58%{transform:scaleY(2)}
    100%{transform:scaleY(1)}}
}


/* MOVIMIENTO EN LAS PAGINAS DE DENTRO ---------------------------------------
   Medido antes de tocar nada: las catorce paginas interiores tenian UNA sola
   animacion (la entrada de la foto de cabecera), sus transiciones de hover y
   cero movimiento ligado al scroll. Se anaden dos cosas, las dos con sentido,
   ninguna decorativa, y ninguna pide marcado nuevo en 18 archivos.

   1. LA LINEA DE LECTURA. Cuanto llevas de la pagina, ligado al scroll de
      verdad con animation-timeline, sin una linea de JavaScript. Vive en
      body::before, asi que no hay que tocar ni un HTML. En un navegador sin
      scroll-driven animations no aparece, que es justo lo correcto: no hay
      fallback con JS porque la barra no es informacion critica. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 3px;
      z-index: 60;
      background: var(--accent);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: gt-leido linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes gt-leido { to { transform: scaleX(1) } }
  }
}

/* 2. LA DERIVA DE LA CABECERA. La foto de arriba respira: 17 segundos, ida y
      vuelta, 6 px de recorrido. Es movimiento ambiente, y el kit es explicito
      en que eso va lento y pequeno — lo que no vale es el termino medio.

      SE ESCRIBE CON `translate` Y `scale`, NO CON `transform`. La entrada
      (cab-entra) ya usa transform, y dos animaciones sobre la misma propiedad
      no se suman: gana la ultima y la entrada se pierde. Las propiedades
      independientes componen con transform en vez de pelearse con el. */
@media (prefers-reduced-motion: no-preference) {
  .cabecera__figura img {
    animation:
      cab-entra .85s cubic-bezier(.2, .7, .2, 1) both,
      gt-deriva 17s ease-in-out 1.1s infinite alternate;
  }
  @keyframes gt-deriva {
    from { translate: 0 0;        scale: 1.015 }
    to   { translate: -6px -4px;  scale: 1.05 }
  }
}


/* LA ELECCION DE LA SECUENCIA. El control es RailSegmented del kit; aqui solo
   va la piel de la marca y el hueco. */
.sec__eleccion{display:grid;gap:12px;justify-items:start;margin:26px 0 0}
.sec__pregunta{margin:0;font-weight:700;font-size:clamp(17px,1.9vw,20px)}
.sec__eleccion .rail-segmented{
  /* Sin tope media 969 px en una ventana de 1024: dos etiquetas en los
     extremos opuestos de una pildora, que se lee como cabecera de tabla y no
     como una pregunta con dos respuestas. */
  max-width:440px;
  --rail-segmented-bg:var(--cream);
  --rail-segmented-active-bg:var(--paper);
  --rail-segmented-active-color:var(--accent);
  --rail-segmented-height:46px;
  border:1px solid var(--line)}
.sec__eleccion .rail-segmented__segment{white-space:normal;text-align:center;padding:0 18px}
.sec__eleccion .rail-segmented__segment[data-active]{box-shadow:var(--elev-1)}
.sec__cierre[data-elegido]{animation:none}
@media (prefers-reduced-motion:no-preference){
  .sec__cierre[data-elegido]{animation:sec-cierre .44s cubic-bezier(.16,.78,.2,1) both}
  @keyframes sec-cierre{from{opacity:0;transform:translateY(10px)}}
}
@media(max-width:600px){
  .sec__eleccion .rail-segmented{width:100%}
}


/* El volver del juego: flecha mas palabra, y una superficie que se puede
   pulsar. Antes era un glifo de 16 px y nada mas. */
.friccion__volver{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 14px 0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--muted-rotulo);font:inherit;font-size:14px;
  cursor:pointer;transition:border-color .2s,color .2s}
.friccion__volver:hover{border-color:var(--accent);color:var(--accent)}
.friccion__volver-flecha{font-size:16px;line-height:1}

/* El cierre de la ficha llevaba el gris del kit, que no se parece a nada del
   sitio. Disco blanco, glifo azul marino, sobre el marino de la marca. */
.rail-sheet--ficha{--rail-sheet-backdrop:rgba(11,26,51,.72)}
.rail-sheet--ficha .rail-sheet__close{
  --rail-sheet-close-bg:var(--paper);
  --rail-sheet-close-hover-bg:var(--cream);
  color:var(--ink);border:1px solid rgba(11,31,58,.1)}

/* User-driven illustration motion. The artwork moves, surrounding copy stays put. */
[data-art-motion]{--art-x:0;--art-y:0}
[data-art-motion]:focus-visible{outline:3px solid var(--red,#264ddb);outline-offset:5px}
@media(prefers-reduced-motion:no-preference){
  img[data-art-motion]{animation:none!important;translate:none!important;scale:none!important;transform:perspective(850px) rotateX(0deg) rotateY(0deg) scale(1)!important;transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .5s!important;transform-origin:center;will-change:auto}
  img[data-art-motion][data-art-active]{transform:perspective(850px) rotateX(calc(var(--art-y)*-3deg)) rotateY(calc(var(--art-x)*4deg)) translate3d(calc(var(--art-x)*5px),calc(var(--art-y)*4px),0) scale(1.055)!important;filter:saturate(1.14);will-change:transform}
  .room-art .room-sun,.room-art .room-horizon,.room-art .room-pool,.lamp-art .lamp-shade,.lamp-art .lamp-stem,.lamp-art .lamp-foot,.lamp-art .lamp-floor{transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .5s,background .45s,box-shadow .45s}
  .room-art[data-art-active] .room-sun{transform:translate(calc(var(--art-x)*12px),calc(-12px + var(--art-y)*7px)) scale(1.09)}
  .room-art[data-art-active] .room-horizon{transform:translate(calc(var(--art-x)*-9px),calc(var(--art-y)*-5px)) scale(1.08)}
  .room-art[data-art-active] .room-pool{transform:rotate(-5deg) translateX(calc(var(--art-x)*10px)) scale(1.04);filter:brightness(1.09)}
  .lamp-art[data-art-active] .lamp-shade{transform:translate(calc(var(--art-x)*8px),-9px) rotate(calc(var(--art-x)*-5deg));filter:brightness(1.12)}
  .lamp-art[data-art-active] .lamp-stem{transform:rotate(calc(var(--art-x)*-2deg));transform-origin:bottom}
  .lamp-art[data-art-active] .lamp-foot{transform:translateY(-2px) scale(1.035)}
  .lamp-art[data-art-active] .lamp-floor{transform:rotate(-6deg) scale(.9);filter:blur(15px)}
  .flow-board{transition:box-shadow .4s,translate .4s}
  .flow-board[data-art-active]{translate:0 -4px;box-shadow:0 20px 34px #14276420}
}
@media(prefers-reduced-motion:reduce){
  img[data-art-motion]{animation:none!important;transform:none!important;translate:none!important;scale:none!important;transition:none!important}
}

@media(prefers-reduced-motion:reduce){
  [data-art-motion], [data-art-motion] *{transition:none!important;animation:none!important}
}

/* Site-wide motion grammar: quick transitions, readable destinations, no scroll hijack. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  /* SE DIFUMINA, NO SE DESLIZA. Gonzalo, usando la barra de abajo: «las
     transiciones entre las páginas están raras, se ve extraño. Debería ser
     como que se difumine todo y aparezca el texto, para que no se vea tan
     jarring».
     Lo que se sentía brusco era el DESPLAZAMIENTO: la vieja se iba 8px arriba
     y la nueva entraba 14px desde abajo, así que entre las dos había 22px de
     salto en menos de medio segundo. Un salto corto y rápido se lee como un
     tirón, no como un paso.
     Ahora las dos se cruzan en el sitio: la que se va se desenfoca y se apaga,
     la que llega entra desde el desenfoque. Nada se mueve de posición. */
  /* LA BARRA Y LA CABECERA NO PARPADEAN. Gonzalo, dos veces: «usando el
     navegador de abajo, las transiciones entre las páginas se ven raras».
     Medido: las dos tenían `view-transition-name: none`, así que entraban en el
     cross-fade del root y se desvanecían junto con el contenido. O sea que lo
     que acabas de tocar desaparece y vuelve a aparecer, que es exactamente la
     sensación de «raro». Con nombre propio el navegador las trata como la MISMA
     cosa en las dos páginas y las deja quietas: cambia el contenido, no el
     marco. */
  nav.rail-bottomnav{view-transition-name:barra-inferior}
  body>header,.nav__bar{view-transition-name:cabecera}
  ::view-transition-old(root){animation:page-out .18s ease-out both}
  ::view-transition-new(root){animation:page-in .36s cubic-bezier(.2,.75,.2,1) both}
  @keyframes page-out{to{opacity:0;filter:blur(7px)}}
  @keyframes page-in{from{opacity:0;filter:blur(9px)}to{opacity:1;filter:blur(0)}}
  .motion-word{display:inline-block;animation:word-arrive .65s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--word-delay,0ms)}
  @keyframes word-arrive{from{opacity:0;translate:0 .6em;rotate:2deg;filter:blur(3px)}to{opacity:1;translate:0 0;rotate:0deg;filter:blur(0)}}
  img[data-art-motion]{transform:perspective(850px) translate3d(0,var(--art-scroll,0px),0) scale(1.04)!important}
  img[data-art-motion][data-art-active]{transform:perspective(850px) rotateX(calc(var(--art-y)*-3deg)) rotateY(calc(var(--art-x)*4deg)) translate3d(calc(var(--art-x)*5px),calc(var(--art-scroll,0px) + var(--art-y)*4px),0) scale(1.08)!important}
  .rail-card__title,.rail-list__title{transition:color .25s,translate .3s}
  .rail-card:hover .rail-card__title,.rail-card:focus-within .rail-card__title{translate:3px 0}
  .rail-card__marca img{transition:transform .45s cubic-bezier(.2,.75,.2,1),filter .35s,opacity .35s}
  .rail-card--marca:hover .rail-card__marca img,.rail-card--marca:focus-within .rail-card__marca img{transform:translateY(-5px) scale(1.04)}
  details[open]>:not(summary){animation:disclosure-arrive .32s ease-out}
  @keyframes disclosure-arrive{from{opacity:.2;translate:0 8px}to{opacity:1;translate:0 0}}
  .rail-bottomnav__link,.nav__lang,.button,.rail__arrow{transition:background .25s,color .25s,transform .25s}
  .rail__arrow:active,.button:active{transform:scale(.94)}
  @supports(animation-timeline:view()){
    .bh h2{animation:heading-scroll linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes heading-scroll{from{translate:0 18px;opacity:.5}to{translate:0 0;opacity:1}}
  }
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),.motion-word{animation:none!important;filter:none!important;translate:none!important;rotate:none!important;opacity:1!important}
}
/* Articulated portfolio diagrams. Each scene moves its own geometry. */
.work-art{position:relative;width:100%;height:100%;min-height:250px;overflow:hidden;background:#edf3fc;color:var(--ink);cursor:pointer;touch-action:pan-y;--work-x:0px;--work-y:0px}.work-art svg{display:block;width:100%;height:100%;min-height:250px;max-height:520px}.work-art__hint{position:absolute;bottom:16px;left:18px;right:12px;font:600 13px/1.4 'Source Sans 3',sans-serif;color:var(--accent)}.work-art svg path,.work-art svg circle,.work-art svg rect{vector-effect:non-scaling-stroke}.work-wire,.work-route,.work-guide{fill:none;stroke:#95a9c6;stroke-width:2}.work-route{stroke:var(--accent);stroke-dasharray:7 7}.work-node,.work-core,.work-pair-a,.work-pair-b{fill:var(--accent)}.work-node-b,.work-pair-b{fill:var(--ink)}.work-destination{fill:white;stroke:var(--accent);stroke-width:3}.work-gate{fill:var(--ink)}.work-bars rect{fill:var(--accent);transform-box:fill-box;transform-origin:bottom}.work-bars rect:nth-child(even){fill:#8ba6da}.work-guide{stroke-dasharray:5 5}.work-rings{fill:none;stroke:#91aacf;stroke-width:2}.work-sweep{fill:#1d4ed825;transform-origin:220px 175px}.work-record rect{fill:white;stroke:#9fb4d5;stroke-width:2}.work-record path{stroke:var(--ink);stroke-width:4}.work-record circle{fill:var(--accent)}.work-vault{fill:white;stroke:var(--ink);stroke-width:3}.work-lock{fill:none;stroke:var(--accent);stroke-width:4}.work-lock rect{fill:var(--accent)}.work-lock circle,.work-lock path:last-child{stroke:white}.work-blockers{fill:var(--accent)}.work-art:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}.work-art[data-playing] .work-art__hint{color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
.work-art svg>g,.work-node,.work-gate,.work-destination{transition:transform .5s cubic-bezier(.2,.7,.2,1),fill .3s}.work-art .work-node{transform:translate(var(--work-x),var(--work-y))}.work-art[data-playing] .work-node-a{animation:work-flow 1.5s ease-in-out}.work-art[data-playing] .work-node-b{animation:work-flow 1.5s .1s ease-in-out}.work-art[data-playing] .work-node-c{animation:work-flow 1.5s .2s ease-in-out}.work-art[data-playing] .work-gate{transform:translateY(70px)}.work-art[data-playing] .work-destination{transform:translateY(-14px)}.work-art[data-playing] .work-bars rect:nth-child(1){transform:scaleY(.94)}.work-art[data-playing] .work-bars rect:nth-child(2){transform:scaleY(1.33)}.work-art[data-playing] .work-bars rect:nth-child(3){transform:scaleY(.78)}.work-art[data-playing] .work-bars rect:nth-child(4){transform:scaleY(1.1)}.work-bars rect{transition:transform .65s cubic-bezier(.2,.7,.2,1)}.work-art[data-playing] .work-sweep{animation:work-radar 1.6s ease-in-out}.work-art[data-playing] .work-record-a{transform:translate(12px,74px)}.work-art[data-playing] .work-record-b{transform:translate(-12px,-74px)}.work-art[data-playing] .work-record-c{transform:translateX(20px)}.work-art[data-playing] .work-pair-a{transform:translate(45px,-30px)}.work-art[data-playing] .work-pair-b{transform:translate(-45px,30px)}.work-art[data-playing] .work-lock{transform:translateY(-10px)}.work-art[data-playing] .work-blockers{transform:translateX(-24px)}.work-art[data-playing] .work-route{animation:work-dash 1.5s linear}.work-art .work-rings{transform:translate(calc(var(--work-x)*.3),calc(var(--work-y)*.3))}@keyframes work-flow{50%{transform:translate(70px,0)}}@keyframes work-radar{to{transform:rotate(360deg)}}@keyframes work-dash{to{stroke-dashoffset:-60}}
}
/* Guided sequence: one deliberate step, one observation. */
.tels[hidden]{display:none!important}.sec__guide{max-width:760px;margin:0 0 18px;padding:20px 24px;background:white;border-left:3px solid var(--accent);color:var(--ink);font-size:20px;line-height:1.5}.sec__mandos{margin-bottom:24px}.sec__mandos .sec__boton{min-height:48px}[data-sequence-guided]:not([data-sequence-complete]) .sec__eleccion,[data-sequence-guided]:not([data-sequence-complete]) .sec__cierre{display:none!important}
@media(max-width:600px){.sec__guide{font-size:17px;padding:16px}.sec__mandos{flex-wrap:wrap}}

/* Case links land on the selected story, below the fixed header. */
article[id^="case-"],#contact{scroll-margin-top:95px}

/* Text-only navigation: no pictograms competing with destination labels. */
.rail-bottomnav__link{justify-content:center;gap:0}
.rail-bottomnav__label{font-size:13px;line-height:1.2}
@media(max-width:380px){.rail-bottomnav__label{font-size:11.5px}.rail-bottomnav__link{padding-inline:4px}}

/* Mobile brand cards open at the top of the viewport, ready to read. */
@media(max-width:859px){
  .rail-sheet--ficha{
    position:fixed;inset:calc(env(safe-area-inset-top,0px) + 12px) 0 auto;
    margin:0 auto;width:calc(100% - 24px);
    --rail-sheet-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);

  }
  .rail-sheet--ficha .rail-sheet__text{scroll-behavior:auto}
}

@supports(height:100dvh){@media(max-width:859px){.rail-sheet--ficha{--rail-sheet-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px)}}}

/* Career reading sheet: use the phone height rather than a short floating card. */
@media(max-width:859px){
 .rail-sheet--ficha{height:var(--rail-sheet-height);background:var(--paper)}
 .rail-sheet--ficha .rail-sheet__in{height:100%}
 .rail-sheet--ficha .rail-sheet__text{height:100%;box-sizing:border-box;padding:24px 20px}
 .rail-sheet--ficha .rail-sheet__title:focus{outline:none}
}
@media(hover:none){.rail-card__abrir{-webkit-tap-highlight-color:transparent;user-select:none}}

/* Company colors belong to logos; the sheet uses the site design system. */
.rail-sheet--ficha .rail-sheet__text{background:var(--paper);gap:16px}
.ficha-brand{display:flex;align-items:center;min-height:72px;padding:4px 56px 4px 0;flex-shrink:0}
.ficha-brand img{display:block;width:auto;height:auto;max-width:180px;max-height:76px;object-fit:contain;filter:none;opacity:1}
.rail-sheet--ficha[data-ficha-de=caesars] .ficha-brand img{background:#182337;border-radius:12px;padding:10px;box-sizing:border-box;max-height:90px}
.rail-sheet--ficha .rail-sheet__title{padding-right:0}
.rail-sheet--ficha .rail-sheet__actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.rail-sheet--ficha .ficha-case-link{display:flex;justify-content:center;align-items:center;min-height:48px;background:var(--accent);color:#fff;border-color:var(--accent);text-align:center}
.rail-sheet--ficha .rail-sheet__actions>a:not(.ficha-case-link){align-self:flex-start;background:transparent;border:0;padding-left:0;min-height:44px}
.rail-card__marca img{filter:none;opacity:1}
@media(prefers-reduced-motion:no-preference){.rail-sheet--ficha[open] .ficha-brand{animation:ficha-logo-in .22s ease-out}@keyframes ficha-logo-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}}

/* EL ÍNDICE DE CAPACIDADES. Gonzalo: «para que tengan una idea de lo que puedo
   hacer». Recorrer trece casos no da esa idea de un vistazo. Se compone de la
   UNIÓN de lo que declara cada caso, así que no puede afirmar una capacidad que
   ningún trabajo respalde, y crece sola cuando se añade un caso. */
.indice{margin:0 0 44px;padding:26px 0 0;border-top:1px solid var(--line)}
.indice h2{font:400 clamp(24px,3.4vw,34px)/1.15 Georgia,serif;letter-spacing:-.03em;margin:0 0 8px}
.indice>p{font:400 16px/1.5 "Source Sans 3",sans-serif;color:var(--muted);margin:0 0 20px;max-width:58ch}
.indice h3{font:600 13px/1.3 "Source Sans 3",sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 10px}
.indice__tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0}
.indice__tags li{font:500 13px/1 "Source Sans 3",sans-serif;padding:8px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--cream);color:var(--ink)}
.indice__tags--tec li{background:transparent;color:var(--muted)}
@media(max-width:600px){.indice{margin-bottom:32px}.indice__tags li{font-size:12px;padding:7px 10px}}

/* Las tarjetas de la página de proyectos también dicen dónde y con qué. */
.cartel__org{font:500 14px/1.35 "Source Sans 3",sans-serif;color:var(--muted);margin:2px 0 8px}
.cartel__tec{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.cartel__tec li{font:500 12px/1 "Source Sans 3",sans-serif;padding:6px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--cream);color:var(--muted);white-space:nowrap}
.cartel__figure--tipo{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  min-height:150px;padding:22px;background:var(--cream);border-bottom:1px solid var(--line)}
.cartel__nombre{font:400 clamp(22px,3.4vw,30px)/1.1 Georgia,serif;letter-spacing:-.02em;color:var(--ink)}

/* SEIS TEMAS, NO SESENTA Y DOS PÍLDORAS. Gonzalo: «las habilidades a la gente
   no le importan; le importa qué construyes». Cada tarjeta dice una cosa que
   hace, qué significa y cuántos casos la respaldan — y ese número sale de los
   casos, no de una cuenta escrita a mano. La tecnología sigue disponible, pero
   plegada: quien la busca la abre, quien no, no la sufre. */
.tema-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;margin:22px 0 0}
.tema{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--paper)}
.tema h3{font:400 clamp(20px,2.4vw,24px)/1.2 Georgia,serif;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.tema__linea{font:400 15px/1.5 "Source Sans 3",sans-serif;color:var(--muted);margin:0 0 14px}
.tema__hace{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.tema__hace li{font:400 15px/1.45 "Source Sans 3",sans-serif;padding-left:16px;position:relative;color:var(--ink)}
.tema__hace li:before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:2px;background:var(--accent)}
.tema__casos{font:600 12px/1.3 "Source Sans 3",sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.indice__tec{margin:24px 0 0}
.indice__tec summary{cursor:pointer;font:600 14px/1.4 "Source Sans 3",sans-serif;color:var(--accent);padding:10px 0;min-height:44px;display:flex;align-items:center}
@media(max-width:600px){.tema-grid{grid-template-columns:1fr;gap:12px}.tema{padding:18px}.tema h3{font-size:21px}}
/* Un `display` de autor en el hijo directo de un <details> gana al ocultado del
   navegador: las 46 píldoras seguían visibles con el desplegable cerrado.
   Medido, no leído. */
.indice__tec:not([open]) .indice__tags{display:none}

/* LA HOJA DE MARCA APARECÍA DE GOLPE. Medido: `animation: none`, y el
   `transition: all` que tenía no puede animar un <dialog> que pasa de
   `display:none` a visible. Ahora entra centrada, creciendo desde el 96 % con
   un solo rebote a los dos tercios, y el fondo se oscurece con ella.
   Presupuesto del kit: gesto interactivo por debajo de 700 ms, un tramo, sin
   pulso. Y quien pide menos movimiento la ve aparecer sin recorrido. */
dialog.rail-sheet[open]{animation:ficha-entra .34s cubic-bezier(.2,.8,.25,1) both}
dialog.rail-sheet[open]::backdrop{animation:ficha-fondo .34s ease both;background:rgba(11,31,58,.46)}
dialog.rail-sheet[data-cerrando]{animation:ficha-sale .2s ease-in both}
dialog.rail-sheet[data-cerrando]::backdrop{animation:ficha-fondo .2s ease reverse both}
@keyframes ficha-entra{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  66%{opacity:1;transform:translateY(-3px) scale(1.006)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ficha-sale{from{opacity:1;transform:scale(1)}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes ficha-fondo{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  dialog.rail-sheet[open],dialog.rail-sheet[open]::backdrop,
  dialog.rail-sheet[data-cerrando],dialog.rail-sheet[data-cerrando]::backdrop{animation:none}}

/* ---- LA HOJA DE BÚSQUEDA ----
   VIVE AQUI, NO EN portfolio.css. El buscador esta en las 104 paginas, pero
   `portfolio.css` solo lo cargan DOS: las dos portadas. En las otras 102 la
   hoja salia sin una sola de estas reglas, cayendo en el `.rail-sheet` pelado
   del kit: caja centrada de 198px, otro radio, otro tamano. Desde dentro del
   sitio eso se lee como «el buscador no esta en esta pagina».
   La regla: el vestido de algo global va en la hoja de estilos global. */
/* LA HOJA VA ARRIBA, NO ABAJO. Anclada abajo, el teclado del telefono se
   sienta justo encima: medido en produccion, con el teclado abierto se veian
   CERO de los resultados. El teclado siempre sale por abajo, asi que lo unico
   que nunca tapa es la parte de arriba.
   `--alto-visible` lo escribe buscar.js desde `visualViewport`, que es lo
   unico que en iOS sabe cuanto sitio queda de verdad: `100dvh` sigue contando
   el trozo que hay debajo del teclado. */
.buscar-hoja{
  box-sizing:border-box;width:min(520px,calc(100% - 20px));
  max-height:calc(var(--alto-visible, 100dvh) - 16px);margin:0 auto auto;
  border:0;border-radius:0 0 20px 20px;padding:14px 18px 22px;
  background:#fff;color:#0b1f3a;overflow-y:auto;overscroll-behavior:contain;
}
.buscar-hoja::backdrop{background:rgba(11,31,58,.55);backdrop-filter:blur(4px)}
/* El titulo y la salida comparten fila, como en WhatsApp o Instagram. */
.buscar-hoja__cabecera{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.buscar-hoja__titulo-hoja{margin:0;flex:1;font:400 24px/1.2 Georgia,serif;letter-spacing:-.02em}
.buscar-hoja__cerrar{
  flex:none;margin-right:-8px;min-height:44px;padding:8px 12px;
  border:0;background:none;color:#5a6b82;font:600 15px/1 "Source Sans 3",sans-serif;cursor:pointer;
}
/* El campo es `rail-search`, de la libreria. Aqui solo van sus colores: el
   componente pone la forma, el foco y la lupa. */
.buscar-hoja__buscador{
  --rail-search-bg:#f8fbff;
  --rail-search-border:#c3d4ec;
  --rail-search-radius:14px;
  --rail-search-height:52px;
  width:100%;color:#0b1f3a;font-family:"Source Sans 3",sans-serif;
}
.buscar-hoja__buscador .rail-search__input{font-size:17px}
.buscar-hoja__buscador .rail-search__glyph{display:flex;color:#5a6b82;opacity:1}
/* El componente ya marca el foco en el marco entero (`.rail-search:focus-within`).
   Si el campo dibuja ademas el suyo salen DOS anillos, uno dentro de otro, y el
   campo parece una caja metida en otra caja. Se ve en la captura, no en el CSS:
   `outline` del input 3px y `outline` del formulario 2px, a la vez. */
.buscar-hoja__buscador .rail-search__input:focus-visible,
.buscar-hoja__buscador .rail-search__input:focus{outline:none}
.buscar-hoja__cuenta{margin:12px 2px 6px;font:600 12px/1.4 "Source Sans 3",sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:#5a6b82}
.buscar-hoja__lista{list-style:none;margin:0;padding:0}
.buscar-hoja__enlace{
  display:block;padding:12px 14px;border-radius:12px;text-decoration:none;
  border:1px solid transparent;
}
.buscar-hoja__enlace:hover,.buscar-hoja__enlace:focus-visible{background:#f2f6fd;border-color:#dbe4f2}
.buscar-hoja__titulo{display:block;font:600 16px/1.3 "Source Sans 3",sans-serif;color:#0b1f3a}
.buscar-hoja__pista{display:block;margin-top:2px;font:400 14px/1.4 "Source Sans 3",sans-serif;color:#5a6b82}
@media (prefers-reduced-motion: no-preference){
  /* Entra y sale por arriba, que es de donde viene. */
  .buscar-hoja[open]{animation:buscar-sube .22s cubic-bezier(.2,.8,.25,1)}
  .buscar-hoja[data-cerrando]{animation:buscar-baja .18s ease-in forwards}
  @keyframes buscar-sube{from{transform:translateY(-20px);opacity:.5}}
  @keyframes buscar-baja{to{transform:translateY(-20px);opacity:0}}
}
@media(min-width:760px){.buscar-hoja{margin:40px auto auto;border-radius:20px}}

/* Cuando no hay nada escrito sobre lo que buscas, la hoja lo dice y ofrece
   pedirlo, en vez de dejarte en un callejón sin salida. */
.buscar-hoja__nada{list-style:none;margin:6px 0 0;padding:14px;border-radius:12px;background:#f2f6fd;border:1px solid #dbe4f2}
.buscar-hoja__nada p{margin:0 0 10px;font:400 15px/1.45 "Source Sans 3",sans-serif;color:#41536c}
.buscar-hoja__pedir{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:10px;
  background:#1d4ed8;color:#fff;text-decoration:none;font:600 15px/1.2 "Source Sans 3",sans-serif}

/* ---- LA ENTRADA PREGUNTA EL IDIOMA ----
   Gonzalo: «la intro tiene que preguntar si quieres inglés o español, como
   opciones». Antes sólo decía «toca para entrar» y te dejaba en el idioma que
   el navegador hubiera adivinado. La pregunta va en los DOS idiomas, porque
   preguntar en español a quien no lo habla es no preguntar nada. */
.gt-veil__idioma{
  position:absolute;left:0;right:0;bottom:74px;z-index:3;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  padding:0 16px;
  animation:gt-pie .6s ease 1.9s both;
}
.gt-veil__pregunta{
  flex:0 0 100%;margin:0 0 4px;text-align:center;
  font:600 10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper,#fff) 70%,transparent);
}
.gt-veil__opcion{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:124px;padding:10px 20px;
  border:1px solid color-mix(in srgb,var(--paper,#fff) 40%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--paper,#fff) 8%,transparent);
  color:#fff;text-decoration:none;
  font:600 15px/1.2 "Source Sans 3",sans-serif;
}
/* El idioma en el que ya estás va marcado: si los dos se ven igual, la
   pregunta parece que no tiene respuesta todavía. */
.gt-veil__opcion[aria-current="true"]{
  background:var(--accent,#1d4ed8);
  border-color:var(--accent,#1d4ed8);
}
.gt-veil__opcion:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* El pie se cambia con un desvanecido corto: sin él, la palabra salta y se
   lee como un fallo en vez de como una traducción. */
@media(prefers-reduced-motion:no-preference){
  .gt-veil__pie{transition:opacity .26s ease}
  .gt-veil__pie[data-cambiando]{opacity:0}
}
@media(max-width:380px){
  .gt-veil__opcion{min-width:108px;padding:10px 14px;font-size:14px}
}

/* EL CIERRE QUE EXPLICA EL PORQUÉ. Gonzalo: «ese puede ser un mensaje chévere
   al final de la página si terminas todo, que te explica: ok, lo hicimos de
   esta forma porque la gente se abruma». Va al final de los juegos y antes del
   contacto, que es el sitio donde alguien que llegó hasta abajo se merece
   saber por qué el camino era así. */
.porque__texto{max-width:62ch}
.porque__texto p{font-size:18px;line-height:1.6;margin:0 0 14px}
.porque__texto p:last-child{margin-bottom:0;font-weight:600}
@media(max-width:600px){.porque__texto p{font-size:17px}}