/* =========================================================================
   EL CARTEL DEL PRADO — Entrenamiento en Habilidades Sociales, 19-09-2026
   Sistema visual extendido desde web/mocks/b-el-cartel.html (maqueta aprobada).
   Tinta plana: sin degradados, sin sombras suaves, sin bordes redondeados.
   Móvil primero (375px real). Un solo punto de quiebre: 760px.
   ========================================================================= */

/* ---------- 1 · Tokens del sistema -------------------------------------- */
:root{
  --papel:#F2EFE6;   /* fondo: papel de cartel */
  --violeta:#5D17EB; /* tinta 1: bloques de datos, acentos de titular */
  --magenta:#FF2D6F; /* tinta 2: SOLO la accion (botones y marcas de enfasis) */
  --tinta:#0B0B0F;   /* tinta 3: texto, bandas, bordes */

  /* gris de apoyo sobre papel. #8A8A93 de la maqueta daba 2.98:1 y no llega a
     AA; #54545C da 6.52:1 con el mismo papel visual. */
  --gris:#54545C;

  --pelo:rgba(11,11,15,.22);      /* hairline sobre papel (decorativa) */
  --pelo-papel:rgba(242,239,230,.30); /* hairline sobre violeta/tinta */

  --trama:.30;   /* opacidad de la trama de medio tono, por defecto */
  --punto:3.2px; /* paso de la trama */
  --contraste:1.65;
  --brillo:1.06;
}

/* ---------- 2 · Base ----------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--papel);color:var(--tinta);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  line-height:1.42;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;              /* nada scrollea de lado a 375px */
  padding-block-end:88px;         /* sitio para el boton flotante */
}

.hoja{max-width:460px;margin:0 auto;position:relative}
.pad{padding-inline:18px}         /* padding-inline: no pisa el eje vertical */

img{display:block;max-width:100%}

/* Foco visible. Magenta sobre papel = 3.12:1 (>=3:1 para elementos no
   textuales). Sobre violeta o tinta el magenta no llega, asi que ahi el
   anillo pasa a papel (6.55:1 y 17:1). */
:focus-visible{outline:4px solid var(--magenta);outline-offset:2px}
/* Sobre papel el anillo magenta se confundiria con el propio boton magenta:
   ahi el anillo es tinta (17:1 sobre papel, 5.48:1 sobre magenta). */
.boton:focus-visible,.flotante:focus-visible{outline-color:var(--tinta)}
/* Sobre fondos oscuros ni el magenta ni la tinta se ven: el anillo pasa a
   papel (6.55:1 sobre violeta, 17:1 sobre tinta). Va al final a proposito. */
.violeta :focus-visible,.negro :focus-visible,.banda :focus-visible,
.datos :focus-visible,.tira-b :focus-visible,.pie :focus-visible{
  outline-color:var(--papel);
}

.salta{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--tinta);color:var(--papel);padding:14px 18px;
  font-variation-settings:"wdth" 90,"wght" 700;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;
}
.salta:focus{left:0}

/* ---------- 3 · Banda negra superior (bloque 1) -------------------------
   DEFECTO CORREGIDO DE LA MAQUETA: la banda se partia en dos lineas a 375px.
   Ahora son dos renglones POR DISENO, cada uno de una sola linea garantizada:
   el nombre arriba, los descriptores abajo, con el tracking bajado de .19em
   a .12em y el cuerpo de 10.5px a 9.5px. */
.banda{
  background:var(--tinta);color:var(--papel);
  padding:8px 18px 9px;
  font-size:9.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:"wdth" 84,"wght" 700;
  white-space:nowrap;overflow:hidden;
}
.banda b{display:block;font-variation-settings:"wdth" 84,"wght" 800;letter-spacing:.13em}
.banda span{display:block;opacity:.88;letter-spacing:.11em} /* .88 sobre tinta = 13.4:1 */

/* ---------- 4 · El grito (bloque 2) ------------------------------------- */
.grito{
  font-family:"Big Shoulders Display",sans-serif;
  font-weight:800;text-transform:uppercase;
  line-height:.79;letter-spacing:.004em;
  margin:18px 0 0;
  font-size:clamp(58px,16.4vw,80px);
}
.grito span{display:block}
.grito .l2{color:var(--violeta)}
.grito .l4{color:var(--magenta)} /* alineada con el resto del titular */
.grito .l5{
  font-size:.60em;letter-spacing:.08em;line-height:1;
  margin-top:.08em;
}

/* Bajada del titular (bloque 3), bajo regla gruesa */
.bajada{
  margin-top:16px;border-top:4px solid var(--tinta);padding-top:13px;
}
.bajada p{font-size:16.5px;line-height:1.4}
.bajada p+p{
  margin-top:12px;
  font-variation-settings:"wdth" 96,"wght" 700;
}

/* ---------- 5 · Fotografia: duotono violeta + trama de medio tono -------
   La trama es CSS puro (radial-gradient repetido + mix-blend-mode), no imagen. */
/* isolation: obliga a que el `screen` de la imagen se mezcle contra el violeta
   de este contenedor y no contra el fondo de la seccion. Sin esto, la segunda
   tira (fondo tinta) rompe el duotono. */
.foto{position:relative;background:var(--violeta);overflow:hidden;line-height:0;isolation:isolate}
.foto img{
  width:100%;height:auto;
  filter:grayscale(1) contrast(var(--contraste)) brightness(var(--brillo));
  mix-blend-mode:screen;opacity:.94;
}
.foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--tinta) 41%,transparent 42%);
  background-size:var(--punto) var(--punto);
  opacity:var(--trama);mix-blend-mode:multiply;
}
/* Fotos de vida: son personas reales, no textura. Menos contraste y menos
   trama para que las caras se lean. */
.foto--vida{--contraste:1.28;--brillo:1.02;--trama:.15;--punto:3.6px}
/* Manuscrito de la pizarra: la trama se lo comeria. Casi sin trama. */
.foto--nitida{--contraste:1.9;--brillo:1.10;--trama:.08;--punto:2.8px}

/* Recorte por CSS. Cada foto trae su ventana en variables:
   --cw = 100/ancho_recorte  --ch = 100/alto_recorte
   --cx = -x0*100%           --cy = -y0*100%   (x0,y0 en fraccion del original) */
.foto--rec{aspect-ratio:var(--ar)}
.foto--rec img{
  position:absolute;top:0;left:0;max-width:none;
  width:var(--cw);height:var(--ch);
  transform:translate(var(--cx),var(--cy));
}

/* F1 · taller-pablo-pizarra-2.jpg (1200x1600) — recorte de proteccion:
   deja fuera el esquema HOMBRES/MUJERES de la pizarra. Ventana x .535-1, y .15-.68 */
.rec-f1{--ar:558/848;--cw:215.05%;--ch:188.68%;--cx:-53.5%;--cy:-15%}
/* F3 · taller-pizarra-frases.jpg — banda con "No puedo hablar con una chica!!" */
.rec-f3{--ar:635/80;--cw:188.97%;--ch:2000%;--cx:-11.25%;--cy:-22.19%}
/* F4 · taller-pizarra-frases.jpg — banda con "No sé que decir!!!" */
.rec-f4{--ar:320/58;--cw:375.05%;--ch:2758.62%;--cx:-11.67%;--cy:-26.25%}
/* F2 · taller-grupo-sentado.jpg — recorte que saca la pizarra entera */
.rec-f2{--ar:648/768;--cw:185.19%;--ch:208.33%;--cx:-46%;--cy:-22%}
/* F8 · taller-pablo-ensenando.jpg — RECORTE OBLIGATORIO del copy:
   la pizarra queda fuera de cuadro; entran la pantalla proyectada y el gesto. */
.rec-f8{--ar:750/880;--cw:160%;--ch:181.82%;--cx:-37.5%;--cy:-3%}
/* 15.6 · prueba-bar-banderas-tres.jpg — recorte por la derecha: fuera la
   heladera de cerveza con marca. */
.rec-bar{--ar:1334/1200;--cw:119.9%;--ch:100%;--cx:0;--cy:0}

/* Etiqueta corta pegada al borde de la foto.
   Tinta sobre magenta = 5.48:1 (papel sobre magenta serian 3.12:1 y a 10.5px
   no llega a AA). */
/* z-index: la trama (::after) se pinta despues del figcaption y lo oscurecia,
   bajando el contraste calculado del rotulo. Con z-index queda por encima. */
.tag{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--magenta);color:var(--tinta);
  padding:6px 11px;line-height:1.2;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 800;
}

/* Pie largo de foto: bloque negro pegado al borde inferior de la imagen. */
.pie-foto{
  background:var(--tinta);color:var(--papel);
  padding:13px 16px 15px;
  font-size:14.5px;line-height:1.38;
}
figure{line-height:1.42}

/* ---------- 6 · Bloque violeta de datos (bloque 4) ---------------------- */
.datos{background:var(--violeta);color:var(--papel);padding:20px 18px 22px}
.fila{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--pelo-papel)}
.fila:last-of-type{border-bottom:0}
.fila .k{
  flex:0 0 66px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" 84,"wght" 800;opacity:.86; /* 5.14:1 */
}
.fila .v{font-size:16px;font-variation-settings:"wdth" 96,"wght" 700;line-height:1.25}
.fila .v small{
  display:block;font-size:12.5px;margin-top:2px;line-height:1.3;
  opacity:.86;font-variation-settings:"wdth" 100,"wght" 400; /* 5.14:1 */
}

/* ---------- 7 · El sello del precio ------------------------------------- */
.sello{
  display:flex;align-items:center;gap:14px;margin-top:16px;
  background:var(--papel);color:var(--tinta);padding:12px 14px;
  border:3px solid var(--tinta);
}
.sello .bs{
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:44px;line-height:.82;letter-spacing:.01em;flex:0 0 auto;
}
.sello .det{
  font-size:12px;line-height:1.34;text-transform:uppercase;letter-spacing:.05em;
  font-variation-settings:"wdth" 92,"wght" 700;
}
/* ---- Dos tarifas (ficha de cabecera) ----
   Sustituye al precio tachado: la escala y el peso separan la tarifa
   vigente de la siguiente, sin retorica de descuento. */
.tarifas{
  margin-top:16px;background:var(--papel);color:var(--tinta);
  border:3px solid var(--tinta);
}
.tarifa{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px;
}
.tarifa .bs{
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  line-height:.82;letter-spacing:.01em;flex:0 0 auto;
}
.tarifa .det{
  font-size:12px;line-height:1.34;text-transform:uppercase;letter-spacing:.05em;
  font-variation-settings:"wdth" 92,"wght" 600;
}
.tarifa .det b{font-variation-settings:"wdth" 92,"wght" 800}

.tarifa--ahora{background:var(--magenta);color:var(--papel)}
.tarifa--ahora .bs{font-size:44px}

.tarifa--luego{border-top:3px solid var(--tinta);color:var(--tinta)}
.tarifa--luego .bs{font-size:27px}
.tarifa--luego .det{font-variation-settings:"wdth" 92,"wght" 600}

/* Sello sobre fondo violeta (seccion de precio) */
.datos .sello{background:var(--papel)}

/* ---------- 8 · Botones ------------------------------------------------- */
/* Papel sobre magenta = 3.12:1. Solo se usa a >=24px en peso 800, donde el
   umbral AA es 3:1 (texto grande). Nunca para texto pequeno. */
.boton{
  display:block;margin-top:14px;padding:14px 14px 12px;min-height:56px;
  text-align:center;text-decoration:none;text-wrap:balance;
  background:var(--magenta);color:var(--papel);
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:27px;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;
  border:3px solid var(--magenta);
}
.boton:hover{background:var(--tinta);border-color:var(--tinta)}
.micro{margin-top:10px;font-size:12.5px;line-height:1.42}
.datos .micro{opacity:.92}
.micro+.micro{margin-top:8px}

/* ---------- 9 · Secciones y titulares ----------------------------------- */
.seccion{padding-block:46px 0;padding-inline:18px}
.seccion--pegada{padding-block-start:30px}

h2{
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(36px,10vw,46px);line-height:.86;
  text-wrap:balance; /* DEFECTO CORREGIDO: evita la palabra huerfana */
}
h2 em{font-style:normal;color:var(--violeta)}
h2 .l{display:block}
h2 .l+.l{color:var(--violeta);margin-top:.12em}

h3{
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  text-transform:uppercase;font-size:26px;line-height:.92;letter-spacing:.01em;
  text-wrap:balance;
}

.parrafos p{font-size:16px;line-height:1.5}
.parrafos p+p{margin-top:13px}
.parrafos p strong{font-variation-settings:"wdth" 100,"wght" 800}
.entradilla{margin-top:20px}
.entradilla p{font-size:16.5px;line-height:1.48}

/* ---------- 10 · Listas del sistema ------------------------------------- */
.lista{margin-top:22px;list-style:none}
.lista li{
  font-size:16px;line-height:1.44;padding-block:14px;
  border-top:1px solid var(--pelo);
}
.lista li:last-child{border-bottom:1px solid var(--pelo)}
.lista li mark{background:var(--magenta);color:var(--tinta);padding:0 3px} /* 5.48:1 */
.lista li strong{font-variation-settings:"wdth" 96,"wght" 800}

/* Los tres pasos del pago (bloque 42): la lista es numerada y el numero
   cuenta, asi que se dibuja a mano en la tipografia del cartel. */
.pasos{counter-reset:paso}
.pasos li{
  display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:baseline;
  counter-increment:paso;
}
.pasos li::before{
  content:counter(paso);
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:30px;line-height:.9;color:var(--violeta);
}

/* Bloque de cierre en negro (bloques 9, 16, 33) */
.negro{
  margin-top:26px;padding:17px 16px 19px;
  background:var(--tinta);color:var(--papel);
  font-size:16.5px;line-height:1.44;
  font-variation-settings:"wdth" 100,"wght" 500;
}
.negro p+p{margin-top:12px}
.negro strong{font-variation-settings:"wdth" 100,"wght" 800}

/* Bloque en violeta a sangre */
.violeta{background:var(--violeta);color:var(--papel);padding:24px 18px 26px}
.violeta p{font-size:16.5px;line-height:1.46}
.violeta p+p{margin-top:12px}

/* ---------- 11 · Las dos tiras de transformacion ------------------------
   Regla del copy: las dos tiras NO pueden fundirse en una sola cuadricula.
   Se separan por fondo: la primera sobre papel con pies en negro; la segunda
   entera sobre tinta. */
.tira{margin-top:24px}
.tira figure+figure{margin-top:22px}
.tira-b{background:var(--tinta);color:var(--papel);padding-block:34px 0}
/* el bloque 16 cierra la seccion negra a sangre, sin aire entre los dos
   colores: dos tintas planas que se tocan. */
.tira-b .violeta{margin-top:34px}
.tira-b .pie-foto{background:transparent;padding:13px 0 0}
.tira-b figure+figure{margin-top:26px}
.tira-b .foto{margin-inline:0}

/* ---------- 12 · El temario: bloque denso de datos (pie de cartel) ------ */
.temario{margin-top:22px;border-top:3px solid var(--tinta)}
.temario .item{
  display:grid;grid-template-columns:34px 1fr;column-gap:12px;
  padding-block:14px;border-bottom:1px solid var(--pelo);
}
.temario .n{
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:34px;line-height:.8;color:var(--violeta);
}
.temario .dur{
  grid-column:2;margin-top:3px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" 84,"wght" 800;color:var(--gris);
}
.temario .cuerpo{grid-column:2;margin-top:8px}
.temario .cuerpo p{font-size:15px;line-height:1.42}
.temario .cuerpo p+p{margin-top:9px}
.temario .cuerpo strong{font-variation-settings:"wdth" 100,"wght" 800}

/* ---------- 13 · Preguntas frecuentes ----------------------------------- */
.faq{margin-top:22px;border-top:3px solid var(--tinta)}
.faq details{border-bottom:1px solid var(--pelo)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;gap:12px;align-items:flex-start;
  min-height:44px;padding-block:13px;
  font-size:16px;line-height:1.34;
  font-variation-settings:"wdth" 96,"wght" 700;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;flex:0 0 auto;
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:28px;line-height:.8;color:var(--magenta);
}
.faq details[open] summary::after{content:"–"}
.faq .resp{padding-block:0 16px}
.faq .resp p{font-size:15.5px;line-height:1.48}
.faq .resp p+p{margin-top:11px}

/* ---------- 14 · Contador de preventa (bloque 44) -----------------------
   Oculto por defecto: si el JS no llega, no se publica un numero viejo.
   Solo el JS lo muestra, y solo si los dos numeros siguen vigentes. */
.contador{display:none}
.contador.on{display:block}
.contador strong{font-variation-settings:"wdth" 100,"wght" 800}

/* ---------- 15 · Boton flotante (bloque 68) -----------------------------
   Sin JS queda visible y funcional. Con JS aparece pasado el encabezado y se
   esconde cuando el boton final entra en cuadro. */
.flotante{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:block;min-height:60px;padding:15px 16px calc(15px + env(safe-area-inset-bottom));
  text-align:center;text-decoration:none;
  background:var(--magenta);color:var(--papel);
  border-top:3px solid var(--tinta);
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;
  font-size:25px;line-height:1;letter-spacing:.02em;text-transform:uppercase;
}
.flotante .largo{display:none}
html.u-js .flotante{transform:translateY(105%);visibility:hidden}
html.u-js .flotante.on{transform:none;visibility:visible;transition:transform .18s linear}
@media (prefers-reduced-motion:reduce){html.u-js .flotante.on{transition:none}}

/* ---------- 16 · Mapa / lugar ------------------------------------------- */
.lugar .dir{font-size:17px;line-height:1.4;font-variation-settings:"wdth" 96,"wght" 700}
.lugar .dir small{display:block;font-size:14px;font-variation-settings:"wdth" 100,"wght" 400;margin-top:3px;opacity:.9}
.mapa{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;min-height:56px;padding:14px 16px;
  background:var(--papel);color:var(--tinta);border:3px solid var(--tinta);
  text-decoration:none;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:"wdth" 88,"wght" 800;
}
.mapa:hover{background:var(--tinta);color:var(--papel)}
.mapa span:last-child{font-family:"Big Shoulders Display",sans-serif;font-size:24px;line-height:.8}

/* ---------- 17 · Pie ---------------------------------------------------- */
.pie{
  margin-top:46px;background:var(--tinta);color:var(--papel);
  padding:30px 18px calc(34px + env(safe-area-inset-bottom));
  font-size:13.5px;line-height:1.5;
}
.pie p+p{margin-top:13px}
.pie strong{font-variation-settings:"wdth" 100,"wght" 800}
.pie a{
  color:var(--papel);
  display:inline-flex;align-items:center;min-height:44px;
}
.pie .aviso{opacity:.9}
.pie .copy{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--pelo-papel);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700;opacity:.9;
}

/* =========================================================================
   18 · ESCRITORIO — un solo punto de quiebre
   ========================================================================= */
@media (min-width:760px){
  body{padding-block-end:0}
  .hoja{max-width:1120px}
  .pad{padding-inline:40px}
  .banda{padding:11px 40px 12px;font-size:11px;display:flex;justify-content:space-between;gap:24px}
  .banda b,.banda span{display:inline}

  /* Cabecera a ancho completo: el grito arriba y la foto apaisada debajo.
     Antes eran dos columnas con la foto en la derecha, pensado para una foto
     vertical; con la de portada apaisada esa columna quedaba medio vacia. */
  .cabecera{display:block}
  .cabecera .titulo{padding-block-end:12px;min-width:0}
  .cabecera .bajada{max-width:62ch}
  .cabecera .foto{margin-top:26px}
  .cabecera .datos{margin-top:30px}
  .grito{font-size:clamp(64px,6.6vw,92px);margin-top:22px}
  .bajada p{font-size:18px}

  /* La ficha de datos ocupa el ancho entero, en tres columnas. */
  .datos{padding:28px 40px 32px}
  .datos-rejilla{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 32px}
  .datos-cierre{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-items:start;margin-top:22px}
  .datos-cierre .sello{margin-top:0}
  .datos-cierre .boton{margin-top:0}

  .seccion{padding-block-start:76px;padding-inline:40px}
  .seccion--pegada{padding-block-start:46px}
  h2{font-size:clamp(52px,5.4vw,68px)}
  h3{font-size:30px}
  .violeta,.negro{padding:34px 40px 38px}

  /* Columna de lectura: el texto largo no se estira a 1120px. */
  .col{max-width:60ch}
  .lista{max-width:64ch}
  .entradilla{max-width:60ch}

  /* Las dos tiras: dos columnas en escritorio, y la primera foto de cada
     tira ocupa las dos (es la "foto de honor" del copy). */
  .tira{display:grid;grid-template-columns:1fr 1fr;gap:34px 32px}
  .tira figure+figure{margin-top:0}
  .tira .destacada{grid-column:1 / -1}
  .tira-b{padding:46px 0 0}
  .tira-b .violeta{margin-top:46px}
  .tira-b .pie-foto{padding-inline:0}

  .temario{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:0}
  .temario .item{border-top:3px solid var(--tinta);border-bottom:0}

  /* La lista de preguntas se queda en una columna: en dos, abrir una
     desplaza todas las demas. */
  .faq{max-width:74ch}
  .faq summary{font-size:18px}
  .faq .resp p{font-size:16.5px}

  .flotante{
    left:auto;right:24px;bottom:24px;border:3px solid var(--tinta);
    padding:16px 22px;min-height:auto;
  }
  .flotante .corto{display:none}
  .flotante .largo{display:inline}

  .pie{margin-top:76px;padding:44px 40px 48px}
  .pie .col{max-width:70ch}
}

/* Pantallas cortas: el flotante no debe comerse la pantalla. */
@media (max-height:520px) and (max-width:759px){
  .flotante{min-height:48px;padding-block:11px;font-size:20px}
  body{padding-block-end:66px}
}


/* El precio dentro del boton principal: baja a segunda linea propia en vez
   de partirse por la mitad cuando no cabe. */
.boton-precio{
  display:block;margin-top:2px;
  font-size:.66em;letter-spacing:.05em;opacity:.92;
}


/* ---- La foto de la pizarra ----
   Con el duotono normal (screen sobre violeta) la letra a mano se perdia:
   la tinta azul del marcador queda gris claro al pasar a escala de grises, y
   screen la empuja hacia el blanco del tablero. Esta foto invierte el
   procedimiento: fondo papel y multiply, para que la tinta se oscurezca en
   vez de aclararse. Es la unica foto de la pagina que se trata asi, y se
   justifica porque su contenido ES el texto escrito a mano. */
.foto--pizarra{background:var(--papel)}
.foto--pizarra img{
  filter:grayscale(1) contrast(1.55) brightness(1.02);
  mix-blend-mode:multiply;opacity:1;
}
.foto--pizarra::after{opacity:.10}


@media (min-width:760px){
  /* Tope de altura. Sin esto, una foto vertical a 1040px de ancho se dibuja
     mas alta que la ventana y hay que hacer scroll para ver una sola imagen.
     Las .foto--rec quedan fuera: su recorte ya fija la proporcion. */
  figure:not(.foto--rec):not(.foto--pizarra) img{
    max-height:66vh;object-fit:cover;object-position:center 42%;
  }
  .tira .destacada img{max-height:58vh}
  /* La portada NO se recorta: es apaisada y su contenido es el texto escrito
     a mano. Se muestra entera, a lo ancho de la hoja. */
  .cabecera .foto img{max-height:none;object-fit:fill}
}