/* Primeras Letras y Números
   Sin frameworks, sin fuentes externas, sin scripts.
   Disciplina del gradiente: UNA superficie grande (el hero). El resto, sobrio. */

:root {
  color-scheme: light;

  /* Superficies */
  --papel: #ffffff;
  --hueso: #faf7f2;
  --borde: #ebe5db;
  --borde-fuerte: #ddd4c6;

  /* Tinta — escala de contraste */
  --tinta: #17150f;
  --tinta-2: #45403a;
  --tinta-3: #6f6960;

  /* Acento, usado con cuentagotas */
  --acento: #c04f18;
  --acento-hondo: #94380c;
  --acento-tenue: #fdf1e7;

  /* Escala tipográfica 1.25, fluida */
  --t--2: .75rem;
  --t--1: .8125rem;
  --t-0: 1.0625rem;
  --t-1: clamp(1.16rem, .98rem + .5vw, 1.32rem);
  --t-2: clamp(1.45rem, 1.15rem + 1.1vw, 1.85rem);
  --t-3: clamp(1.9rem, 1.35rem + 2vw, 2.55rem);
  --t-4: clamp(2.3rem, 1.5rem + 3.4vw, 3.75rem);

  /* Aire */
  --aire-seccion: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Radios — concéntricos: exterior = interior + padding */
  --r-chico: 8px;
  --r-medio: 12px;
  --r-grande: 18px;

  /* Sombras en capas, no bordes duros */
  --sombra-1: 0 1px 2px rgba(23,21,15,.04), 0 4px 12px rgba(23,21,15,.04);
  --sombra-2: 0 2px 4px rgba(23,21,15,.05), 0 12px 28px rgba(23,21,15,.07);

  --ancho: 70rem;
  --medida: 34rem;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: var(--t-0)/1.65 var(--sans);
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.15rem, .6rem + 2vw, 2rem); }

/* Foco visible, nunca eliminado */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r-chico) 0;
}
.saltar:focus { left: 0; }

/* ============ Franja de aviso ============ */

.franja-aviso {
  background: #f6f4ef;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta-2);
  font-size: var(--t--1);
  line-height: 1.5;
  padding-block: .6rem;
}
.franja-aviso p { margin: 0; max-width: none; text-wrap: pretty; }
.franja-aviso a { color: var(--tinta); text-underline-offset: 2px; }

/* ============ Cabecera ============ */

.cabecera {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}

.cabecera-interior { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; padding-block: .85rem; }

.marca { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; margin-right: auto; touch-action: manipulation; }

/* radio concéntrico: 10px exterior, 4px interior + 6px de padding óptico */
.marca-icono {
  flex: none; inline-size: 38px; block-size: 38px; border-radius: 10px;
  background: var(--tinta); color: #fff;
  display: grid; place-content: center;
  font-weight: 700; font-size: .95rem; letter-spacing: -.02em;
}

.marca-titulo { font-family: var(--display); margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.008em; line-height: 1.2; }
.marca-bajada { margin: .05rem 0 0; font-size: .76rem; color: var(--tinta-3); }

nav.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem; font-size: .9rem; }
nav.menu a {
  display: flex; align-items: center; min-block-size: 40px; /* hit area */
  color: var(--tinta-2); text-decoration: none; padding-inline: .7rem; border-radius: var(--r-chico);
  transition-property: color, background-color; transition-duration: .15s;
  touch-action: manipulation;
}
nav.menu a:hover { color: var(--tinta); background: var(--hueso); }
nav.menu a[aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* ============ Hero — la ÚNICA superficie con gradiente ============ */

.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(80% 120% at 78% -10%, #ffe9cf 0%, rgba(255,233,207,0) 55%),
    radial-gradient(70% 110% at 12% 110%, #e6eef5 0%, rgba(230,238,245,0) 52%),
    linear-gradient(180deg, var(--hueso) 0%, #fff 92%);
  border-bottom: 1px solid var(--borde);
}

.hero-interior {
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero-texto { min-inline-size: 0; }

.hero h1 {
  font-family: var(--display);
  font-size: var(--t-4);
  line-height: 1.06;
  letter-spacing: -.018em;
  font-weight: 700;
  margin: 0 0 1.15rem;
  max-inline-size: 17ch;
  text-wrap: balance;
}
.hero .lead {
  font-size: var(--t-1);
  color: var(--tinta-2);
  max-inline-size: 38rem;
  margin: 0 0 2.4rem;
  text-wrap: pretty;
}

.hero-datos { display: flex; flex-wrap: wrap; gap: 2.6rem; font-variant-numeric: tabular-nums; }
.hero-datos b { font-family: var(--display); display: block; font-size: var(--t-2); letter-spacing: -.01em; line-height: 1.1; font-weight: 700; }
.hero-datos span { font-size: var(--t--1); color: var(--tinta-3); }

/* ============ Secciones ============ */

main { display: block; }
.seccion { padding-block: var(--aire-seccion); }
.seccion + .seccion { padding-block-start: 0; }

.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1.5rem; margin-bottom: 2rem; }
.titulo-seccion h2 { font-family: var(--display); font-size: var(--t-2); letter-spacing: -.012em; font-weight: 700; margin: 0; text-wrap: balance; }
.titulo-seccion p { margin: 0; color: var(--tinta-3); font-size: var(--t--1); }

h2 { font-family: var(--display); font-size: var(--t-2); font-weight: 700; letter-spacing: -.012em; margin: 2.8rem 0 .8rem; line-height: 1.22; text-wrap: balance; }
h3 { font-family: var(--display); font-size: var(--t-1); font-weight: 700; margin: 2.2rem 0 .5rem; letter-spacing: -.008em; line-height: 1.3; }

p, ul.texto, ol.texto { max-inline-size: var(--medida); }
p { margin: 0 0 1.15rem; text-wrap: pretty; }
a { color: var(--acento-hondo); text-underline-offset: 2px; }

ul.texto, ol.texto { padding-left: 1.3rem; }
ul.texto li, ol.texto li { margin-bottom: .7rem; }

/* ============ Bento ============ */

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }

.celda {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  padding: 1.5rem;            /* concéntrico: 18 exterior = 8 interior + ~10 */
  box-shadow: var(--sombra-1);
  transition-property: transform, box-shadow, border-color;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.2,0,0,1);
  display: flex; flex-direction: column; min-inline-size: 0;
}
a.celda { text-decoration: none; color: inherit; touch-action: manipulation; }
a.celda:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
a.celda:active { transform: scale(.96); }

.celda-ancha { grid-column: span 2; }
.celda-alta { grid-row: span 2; }

.celda .kicker { font-size: var(--t--2); letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; margin-bottom: 1rem; }
.celda h3 { font-family: var(--display); margin: 0 0 .55rem; font-size: var(--t-1); line-height: 1.28; letter-spacing: -.01em; font-weight: 700; text-wrap: balance; }
.celda p { margin: 0; color: var(--tinta-3); font-size: .94rem; max-inline-size: 42ch; }
.celda .pie-celda { margin-top: auto; padding-top: 1.5rem; font-size: .88rem; color: var(--tinta-2); font-weight: 600; }
a.celda:hover .pie-celda { color: var(--acento-hondo); }

.celda-destacada { background: var(--hueso); padding: 2rem; border-radius: 22px; }
.celda-destacada .marco-figura { border-radius: 14px; }
.celda-destacada h3 { font-size: var(--t-3); letter-spacing: -.016em; line-height: 1.14; }
.celda-destacada p { font-size: var(--t-0); color: var(--tinta-2); max-inline-size: 46ch; }

.marco-figura {
  margin: 0 0 1.4rem;
  border-radius: var(--r-medio);   /* 12 = 18 - 6 de padding visual */
  background: var(--papel);
  outline: 1px solid rgba(23,21,15,.07);   /* contorno sutil, no borde duro */
  outline-offset: -1px;
  padding: 1.6rem 1.4rem;
  display: grid; place-items: center;
}
.marco-figura svg { inline-size: 100%; max-inline-size: 26rem; block-size: auto; display: block; }

/* Criterios dentro de una celda ancha */
.criterios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem 2.2rem; }
@media (max-width: 52rem) { .criterios { grid-template-columns: 1fr; gap: 1.4rem; } }
.criterios b { font-family: var(--display); display: block; font-size: 1.04rem; font-weight: 700; margin-bottom: .3rem; letter-spacing: -.005em; }
.criterios p { margin: 0; font-size: .9rem; color: var(--tinta-3); }
.criterios .num { font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .1em; color: var(--acento-hondo); font-weight: 700; display: block; margin-bottom: .6rem; }

/* ============ Artículo ============ */

.cabecera-pieza { background: linear-gradient(180deg, var(--hueso) 0%, #fff 100%); border-bottom: 1px solid var(--borde); padding-block: 2.6rem 2.8rem; }
.cabecera-pieza h1 { font-family: var(--display); font-size: var(--t-3); line-height: 1.14; letter-spacing: -.016em; font-weight: 700; margin: .9rem 0 1rem; max-inline-size: 24ch; text-wrap: balance; }
.migas { font-size: var(--t--1); color: var(--tinta-3); margin: 0; }
.migas a { color: var(--tinta-3); }
.meta-pieza { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-size: var(--t--1); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pastilla { background: var(--acento-tenue); color: var(--acento-hondo); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; font-weight: 700; }

.cuerpo-pieza { padding-block: 3rem 4rem; }
.entradilla { font-size: var(--t-1); line-height: 1.6; color: var(--tinta-2); margin-bottom: 2rem; max-inline-size: 36rem; text-wrap: pretty; }

.practica {
  background: var(--hueso);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  padding: 1.5rem;
  margin-block: 2.2rem;
  max-inline-size: var(--medida);
  box-shadow: var(--sombra-1);
}
.practica h3 { margin: 0 0 .6rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .11em; color: var(--acento-hondo); font-weight: 700; }
.practica p:last-child { margin-bottom: 0; }

/* ============ Cierre ============ */

.cierre { background: var(--hueso); border-block: 1px solid var(--borde); }
.cierre .envoltura { padding-block: clamp(2.8rem, 2rem + 3vw, 4rem); }
.cierre h2 { margin: 0 0 .9rem; }
.cierre p { max-inline-size: 46rem; font-size: var(--t-1); color: var(--tinta-2); margin: 0; }

/* ============ Pie ============ */

.pie { border-top: 1px solid var(--borde-fuerte); background: var(--hueso); padding-block: 3.5rem 4rem; font-size: .92rem; color: var(--tinta-2); }
.pie-rejilla { display: grid; grid-template-columns: 1.8fr 1fr; gap: 2rem 4rem; }
.pie h2 { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .8rem; font-weight: 700; }
.pie h2 + p + h2 { margin-top: 1.8rem; }
.pie a { text-decoration: none; border-bottom: 1px solid rgba(148,56,12,.28); }
.pie a:hover { border-bottom-color: var(--acento-hondo); }
.pie .enlaces-pie { display: grid; gap: .5rem; }
.pie p { margin: 0 0 .8rem; max-inline-size: 40rem; line-height: 1.6; }
.pie p:last-child { margin-bottom: 0; }
.pie a { color: var(--acento-hondo); }

/* ============ Responsive ============ */

@media (max-width: 60rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .celda-ancha { grid-column: span 2; }
  .celda-alta { grid-row: auto; }
}

@media (max-width: 40rem) {
  .bento { grid-template-columns: 1fr; }
  .celda-ancha { grid-column: span 1; }
  .hero-datos { gap: 1.5rem 2rem; }
  .cabecera { position: static; }
  .pie-rejilla { grid-template-columns: 1fr; }
}

.lista-fuentes { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.lista-fuentes li { font-size: .9rem; color: var(--tinta-2); padding-left: 1.1rem; position: relative; }
.lista-fuentes li::before { content: ""; position: absolute; left: 0; top: .62em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--acento); }

.celda-completa { grid-column: 1 / -1; }
@media (max-width: 40rem) { .celda-completa { grid-column: span 1; } }

/* ============ Muestra del hero: enseña el producto ============ */

.muestra {
  margin: 0;
  background: var(--papel);
  border-radius: 20px;                      /* concéntrico: 20 = 12 interior + 8 */
  box-shadow: 0 1px 2px rgba(23,21,15,.05), 0 18px 44px rgba(23,21,15,.11);
  overflow: hidden;
  border: 1px solid rgba(23,21,15,.06);
}

.muestra-cinta {
  background: var(--tinta);
  color: #fff;
  font-size: var(--t--2);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .7rem 1.5rem;
}

.muestra-cuerpo { padding: 1.5rem 1.5rem 1.6rem; }

.muestra-kicker { font-size: var(--t--2); letter-spacing: .09em; text-transform: uppercase; color: var(--acento-hondo); font-weight: 700; margin: 0 0 .5rem; }
.muestra-titulo { font-family: var(--display); font-size: var(--t-2); font-weight: 700; letter-spacing: -.012em; line-height: 1.2; margin: 0 0 .7rem; }
.muestra-texto { font-size: .96rem; color: var(--tinta-2); margin: 0 0 1.4rem; max-inline-size: none; }

.muestra-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--borde); }
.muestra-datos div { min-inline-size: 0; }
.muestra-datos dt { font-size: var(--t--2); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .2rem; }
.muestra-datos dd { margin: 0; font-size: .93rem; font-weight: 600; }

@media (max-width: 56rem) {
  .hero-interior { grid-template-columns: 1fr; gap: 2.5rem; }
  .muestra { max-inline-size: 26rem; }
}

.meta-pieza time { color: var(--tinta-3); }