/*!
 * carta-facial-pro-v3.css · Facial Pro v3: hub + 4 niveles (Ronda 3, 26-oct-2026). Prefijo .f3-
 * Va después de carta.css (y de carta-sitio.css del header). Contrato: facial-pro/design/DESIGN-v3.md
 * Movimiento (3 familias de scroll): planos del héroe, escena fija con pasos (escalera / corte), dibujo y aparición
 * al entrar. Más un marquee de marcas (no ligado al scroll). Solo transform, opacity y stroke-dashoffset. Sin listeners de scroll.
 */
/* auteur-allow: CREAM_DEFAULT -- el papel crema #FFFAF3 es el color impreso de la carta de la marca (menú 2026-2027), no un reflejo de calidez */
.carta.f3 {
  --cab: 64px;
  --f3-ancho: 1200px;
  --f3-lento: 600ms cubic-bezier(.2, .7, .2, 1);
  --f3-sombra: 0 22px 40px -22px rgba(46, 42, 36, .45);
  overflow-x: clip;
  background: var(--c-crema);
  padding-bottom: 0;
}
@media (min-width: 900px) { .carta.f3 { --cab: 73px; } }
.wp-block-post-content:has(> .carta.f3) { margin-block-start: 0 !important; }
.wp-block-post-content > .carta.f3 { margin-block: 0 !important; max-width: none !important; }
.wp-block-post-content:has(> .carta.f3) + * { margin-block-start: 0 !important; }
/* La capa de legibilidad de carta-sitio.css (fuera de la página 97) limita <p> a 62ch; aquí cada bloque decide.
   Se fija la escala propia para que el borrador y la página 97 se vean igual. */
html body .carta.f3.f3 p { max-width: none; }
html body .carta.f3.f3 .c-btn { font-size: 1rem; letter-spacing: .08em; line-height: 1.2; text-align: center; }
html body .carta.f3.f3 .c-enlace { font-size: 1rem; }
.carta.f3 :where(p, li) { font-size: 1.0625rem; line-height: 1.55; }
@media (min-width: 900px) { .carta.f3 :where(p, li) { font-size: 1.125rem; } }
.carta.f3 h2 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.06; }
.carta.f3 h2 em, .carta.f3 h1 em { color: var(--c-oliva-hondo); }
.carta .f3-ancho { max-width: var(--f3-ancho); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 900px) { .carta .f3-ancho { padding-inline: 48px; } }
.carta .f3-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carta .f3-cifra { font-family: var(--f-display); font-weight: 500; font-variant-numeric: lining-nums; }
.carta .f3-ilus { position: absolute; right: 8px; top: 8px; z-index: 6; font: 400 .8125rem/1 var(--f-texto); color: #fff; background: rgba(46, 42, 36, .78); padding: 5px 8px; border-radius: 2px; letter-spacing: .02em; pointer-events: none; }
.carta .is-sin-foto > .f3-ilus { display: none; }
.carta .f3-sello { display: inline-block; font: 600 .875rem/1.3 var(--f-texto); letter-spacing: .08em; color: var(--c-oliva-hondo); white-space: nowrap; }
.carta .f3-glifo { width: 56px; height: 56px; fill: none; stroke: var(--c-oliva); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.carta .f3-glifo--grande { width: 34%; height: auto; max-width: 120px; }
.carta .f3-glifo--linea { width: 22px; height: 22px; stroke-width: 1.4; vertical-align: -5px; }
.carta .f3-protocolo { font: italic 500 1.35rem/1.35 var(--f-display); color: var(--c-oliva-hondo); }
.carta .f3-enlace-claro { color: #F3EADB; text-decoration-color: rgba(201, 178, 122, .7); }
.carta .f3-enlace-claro:hover { color: #fff; }
.carta .f3-btn-borde { background: transparent; border-color: rgba(255, 250, 243, .6); color: var(--c-crema); }
.carta .f3-btn-borde:hover { background: var(--c-crema); color: var(--c-cafe); }

/* Migas */
.carta .f3-migas ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.carta .f3-migas li { font-size: .9375rem; color: var(--c-tinta-2); }
.carta .f3-migas li + li::before { content: "›"; margin-right: 8px; }
.carta .f3-migas a { color: var(--c-tinta-2); }

/* ---------- Medios con respaldo: glifo debajo, foto encima (si da 404, el JS la quita) ---------- */
.carta .f3-tec__media, .carta .f3-prota__media, .carta .f3-ancla__media, .carta .f3-subir__media {
  position: relative; margin: 0; overflow: hidden; background: var(--c-lienzo); display: grid; place-items: center;
  background-image: linear-gradient(var(--c-arena) 1px, transparent 1px), linear-gradient(90deg, var(--c-arena) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center;
}
.carta .f3-tec__media > img, .carta .f3-prota__media > img, .carta .f3-ancla__media > img, .carta .f3-subir__media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

/* =====================================================================
 * HÉROE (planos de profundidad)
 * ===================================================================== */
.carta .f3-hero { position: relative; background: var(--c-crema); view-timeline: --f3hero block; }
.carta .f3-hero__escena { position: relative; height: clamp(320px, 50svh, 460px); overflow: hidden; }
.carta .f3-capa { position: absolute; margin: 0; translate: calc(var(--px, 0) * var(--d, 0px)) calc(var(--py, 0) * var(--d, 0px)); transition: translate 700ms cubic-bezier(.2, .7, .2, 1); }
.carta .f3-capa--fondo { inset: 0; --d: 6px; }
.carta .f3-capa--fondo .f3-mov { position: absolute; inset: -3%; }
.carta .f3-hero__placa { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.carta .f3-capa--rama { --d: 26px; z-index: 5; right: -16%; bottom: -22%; width: 66%; pointer-events: none; }
.carta .f3-capa--rama img { width: 100%; }
.carta .f3-ilus--hero { z-index: 6; }
.carta .f3-hero__texto { position: relative; z-index: 2; padding: 22px 20px 44px; }
.carta .f3-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); line-height: 1.02; letter-spacing: -.015em; }
.carta .f3-h1__marca { display: block; font: 600 .9375rem/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--c-oliva-hondo); margin-bottom: 12px; }
.carta .f3-hero__lead { margin-top: 16px; font-size: 1.125rem; color: var(--c-cafe); }
.carta .f3-hero__lead em { font-family: var(--f-display); font-size: 1.3em; font-weight: 500; color: var(--c-cafe); }
.carta .f3-hero__precio { margin-top: 14px; color: var(--c-tinta-2); }
.carta .f3-hero__precio .f3-cifra { font-size: 1.8rem; color: var(--c-cafe); margin-right: .2em; }
.carta .f3-hero__nota { margin-top: 4px; color: var(--c-tinta-2); }
.carta .f3-hero__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 22px; }
.carta .f3-hero__acciones .c-btn { min-width: 240px; }
.carta .f3-hero .f3-sello { margin-top: 12px; }

/* El mazo de cartas (hub): cuatro naipes, Signature arriba */
.carta .f3-capa--mazo { z-index: 3; right: 4%; bottom: 7%; width: min(64vw, 300px); height: 76%; --d: 0px; }
.carta .f3-mazo { position: relative; width: 100%; height: 100%; }
.carta .f3-naipe {
  position: absolute; display: flex; flex-direction: column; gap: 2px; width: 44%; aspect-ratio: 3 / 4; padding: 10px 10px 12px;
  background: var(--c-crema); border: 1px solid var(--c-arena); color: var(--c-cafe); text-decoration: none; box-shadow: var(--f3-sombra);
  --d: calc(8px + var(--i, 0) * 7px);
  left: calc(var(--i, 0) * 18.6%); top: calc((3 - var(--i, 0)) * 9%);
  rotate: calc(-7deg + var(--i, 0) * 4.5deg);
  translate: calc(var(--px, 0) * var(--d)) calc(var(--py, 0) * var(--d));
  transition: translate 700ms cubic-bezier(.2, .7, .2, 1), scale 200ms ease-out, box-shadow 200ms ease-out;
  z-index: calc(1 + var(--i, 0));
}
.carta .f3-naipe__n { font: 600 .6875rem/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.carta .f3-naipe__nombre { font: 500 clamp(1.05rem, .8rem + 1vw, 1.7rem)/1 var(--f-display); margin-top: 4px; }
.carta .f3-naipe--solo .f3-naipe__nombre { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.carta .f3-naipe__precio { font: 500 clamp(.95rem, .8rem + .6vw, 1.35rem)/1.1 var(--f-display); font-variant-numeric: lining-nums; color: var(--c-tinta-2); }
.carta .f3-naipe__sello { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--c-arena); font: 500 .6875rem/1.2 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--c-oliva); }
.carta .f3-naipe--2 { border-color: var(--c-oliva); }
.carta .f3-naipe--3 { background: #F3EADB; }
.carta .f3-naipe--4 { background: var(--c-cafe); border-color: var(--c-oliva); color: var(--c-crema); }
.carta .f3-naipe--4 .f3-naipe__n, .carta .f3-naipe--4 .f3-naipe__sello { color: var(--c-oro-claro); border-color: #5C5345; }
.carta .f3-naipe--4 .f3-naipe__precio { color: #EFE7D8; }
@media (hover: hover) { .carta a.f3-naipe:hover { scale: 1.05; box-shadow: 0 30px 50px -24px rgba(46, 42, 36, .55); z-index: 9; } }
.carta a.f3-naipe:focus-visible { outline: 2px solid var(--c-oliva); outline-offset: 3px; z-index: 9; }

@media (min-width: 600px) and (max-width: 899px) {
  .carta .f3-hero__escena { height: 52svh; }
  .carta .f3-hero__texto { padding: 28px 40px 56px; }
  .carta .f3-capa--mazo { width: 340px; }
}
@media (min-width: 900px) {
  .carta .f3-hero { min-height: clamp(640px, calc(100svh - var(--cab)), 920px); display: flex; align-items: center; }
  .carta .f3-hero__escena { position: absolute; inset: 0; height: auto; }
  .carta .f3-hero__texto { width: 100%; max-width: var(--f3-ancho); margin-inline: auto; padding: 56px 48px 80px; }
  .carta .f3-hero__texto > * { max-width: 540px; }
  .carta .f3-hero__lead { font-size: 1.3125rem; }
  .carta .f3-hero__acciones { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px 28px; }
  .carta .f3-hero__acciones .c-btn { min-width: 0; }
  .carta .f3-capa--rama { right: -5%; bottom: -16%; width: min(40vw, 640px); }
  .carta .f3-ilus { right: 14px; top: 14px; }
  /* hub: placa a sangre con velo a la izquierda, mazo a la derecha */
  .carta .f3-hero--hub .f3-capa--fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 250, 243, .94) 0%, rgba(255, 250, 243, .82) 34%, rgba(255, 250, 243, 0) 58%); pointer-events: none; }
  .carta .f3-hero--hub .f3-hero__placa { object-position: 70% 50%; }
  .carta .f3-capa--mazo { right: auto; left: max(52%, calc(50% + 40px)); bottom: 12%; width: min(40vw, 560px); height: 62%; }
  .carta .f3-naipe { padding: 16px 16px 18px; }
  .carta .f3-naipe__n { font-size: .8125rem; }
  .carta .f3-naipe__sello { font-size: .8125rem; }
}

/* Héroe de nivel: arco con la foto del protagonista, naipe flotando, ornamento de línea */
.carta .f3-hero--nivel .f3-capa--fondo { inset: 0; }
.carta .f3-arco { overflow: hidden; background: var(--c-lienzo); }
.carta .f3-hero--nivel .f3-hero__placa { position: absolute; inset: 0; object-position: 50% 40%; }
.carta .f3-capa--orna { --d: 16px; z-index: 2; right: 6%; top: 6%; width: 38%; max-width: 220px; opacity: .55; pointer-events: none; }
.carta .f3-orna { width: 100%; height: auto; fill: none; stroke: var(--c-crema); stroke-width: .6; stroke-linecap: round; }
.carta .f3-capa--carta { --d: 14px; z-index: 4; left: 16px; bottom: 16px; width: 150px; }
.carta .f3-naipe--solo { position: relative; width: 100%; left: 0; top: 0; rotate: -4deg; translate: none; }
@media (min-width: 900px) {
  .carta .f3-hero--nivel .f3-capa--fondo { inset: auto; right: max(48px, calc((100vw - var(--f3-ancho)) / 2 + 48px)); top: 8%; width: min(40vw, 520px); aspect-ratio: 4 / 5; height: auto; }
  .carta .f3-hero--nivel .f3-capa--fondo .f3-mov { inset: 0; border-radius: 50% 50% 3px 3px / 40% 40% 3px 3px; }
  .carta .f3-capa--orna { right: auto; left: 50%; top: 10%; width: 200px; opacity: .9; }
  .carta .f3-hero--nivel .f3-orna { stroke: var(--c-oliva); }
  .carta .f3-capa--carta { left: auto; right: calc(max(48px, calc((100vw - var(--f3-ancho)) / 2 + 48px)) + min(40vw, 520px) - 170px); bottom: 10%; width: 200px; }
  .carta .f3-hero--nivel .f3-capa--rama { right: -8%; bottom: -18%; width: min(34vw, 520px); }
}
/* Signature: héroe café */
.carta .f3-hero--oscuro { background: var(--c-cafe); color: var(--c-crema); }
.carta .f3-hero--oscuro h1 { color: var(--c-crema); }
.carta .f3-hero--oscuro .f3-h1__marca, .carta .f3-hero--oscuro .f3-sello { color: var(--c-oro-claro); }
.carta .f3-hero--oscuro .f3-hero__lead, .carta .f3-hero--oscuro .f3-hero__lead em, .carta .f3-hero--oscuro .f3-hero__precio .f3-cifra { color: var(--c-crema); }
.carta .f3-hero--oscuro .f3-hero__precio, .carta .f3-hero--oscuro .f3-hero__nota, .carta .f3-hero--oscuro .f3-migas li, .carta .f3-hero--oscuro .f3-migas a { color: #DCD2C0; }
.carta .f3-hero--oscuro .f3-arco { background: #3A352D; }
@media (min-width: 900px) { .carta .f3-hero--oscuro .f3-orna { stroke: var(--c-oro-claro); } }

/* Entrada (una vez) y salida con el scroll */
@keyframes f3-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes f3-reparte { from { opacity: 0; transform: translateY(46px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes f3-flota { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.carta .f3-entra { animation: f3-entra var(--f3-lento) both; animation-delay: calc(var(--e, 0) * 70ms + 80ms); }
.carta .f3-mazo .f3-naipe { animation: f3-reparte 900ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms + 260ms); }
.carta .f3-naipe--solo { animation: f3-flota 800ms cubic-bezier(.2, .7, .2, 1) 260ms both; }
@keyframes f3-sale-fondo { to { transform: translateY(9%) scale(1.03); } }
@keyframes f3-sale-medio { to { transform: translateY(-16%); } }
@keyframes f3-sale-rama { to { transform: translateY(-36%) scale(1.06); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carta .f3-hero--hub .f3-capa--fondo .f3-mov { animation: f3-sale-fondo linear both; animation-timeline: --f3hero; animation-range: exit 0% exit 100%; }
    .carta .f3-capa--mazo, .carta .f3-capa--carta, .carta .f3-capa--orna { animation: f3-sale-medio linear both; animation-timeline: --f3hero; animation-range: exit 0% exit 100%; }
    .carta .f3-capa--rama { animation: f3-sale-rama linear both; animation-timeline: --f3hero; animation-range: exit 0% exit 100%; }
  }
}

/* =====================================================================
 * MARQUEE DE MARCAS (uno por página, solo en el hub)
 * ===================================================================== */
.carta .f3-marcas { padding-block: clamp(48px, 7vw, 96px); background: var(--c-lienzo); border-block: 1px solid var(--c-arena); }
.carta .f3-marcas__cabeza p { margin-top: 10px; color: var(--c-tinta-2); }
.carta .f3-marquee { margin-top: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.carta .f3-marquee__pista { list-style: none; margin: 0; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.carta .f3-marquee.is-lista .f3-marquee__pista { flex-wrap: nowrap; width: max-content; padding: 0; gap: 0; animation: f3-desliza 52s linear infinite; }
.carta .f3-marquee.is-lista .f3-marca { padding-inline: 28px; }
.carta .f3-marquee.is-pausa .f3-marquee__pista { animation-play-state: paused; }
@media (hover: hover) { .carta .f3-marquee:hover .f3-marquee__pista { animation-play-state: paused; } }
@keyframes f3-desliza { to { transform: translateX(-50%); } }
.carta .f3-marca { display: flex; align-items: center; min-height: 52px; white-space: nowrap; font: 500 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1 var(--f-display); color: var(--c-cafe); font-variant: small-caps; letter-spacing: .03em; }
.carta .f3-marca img { height: 40px; width: auto; max-width: 190px; object-fit: contain; }
.carta .f3-marca--logo img { display: block; }
.carta .f3-marquee.is-lista .f3-marca::before { content: "✦"; font: 400 .9rem/1 var(--f-texto); color: var(--c-oliva); margin-right: 56px; }

/* =====================================================================
 * ANCLA: Signature arriba (café)
 * ===================================================================== */
.carta .f3-ancla { background: var(--c-cafe); color: var(--c-crema); padding-block: clamp(64px, 9vw, 120px); }
.carta .f3-ancla__rejilla { display: grid; gap: 32px; align-items: center; }
.carta .f3-ancla__media { aspect-ratio: 4 / 5; max-width: 440px; border-radius: 50% 50% 3px 3px / 40% 40% 3px 3px; background-color: #3A352D; background-image: linear-gradient(#4A443A 1px, transparent 1px), linear-gradient(90deg, #4A443A 1px, transparent 1px); }
.carta .f3-ancla__media .f3-glifo { stroke: var(--c-oro-claro); }
.carta .f3-ancla__ceja { font: 600 .9375rem/1.3 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--c-oro-claro); }
.carta .f3-ancla h2 { color: var(--c-crema); margin-top: 10px; }
.carta .f3-ancla h2 em { color: var(--c-oro-claro); }
.carta .f3-ancla p { color: #EFE7D8; margin-top: 12px; }
.carta .f3-ancla__precio .f3-cifra { font-size: 2.2rem; color: var(--c-crema); margin-right: .25em; }
.carta .f3-ancla__chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.carta .f3-ancla__chips li { font-size: .9375rem; padding: 6px 12px; border: 1px solid #6B6152; border-radius: 2px; color: #F3EADB; }
.carta .f3-ancla .c-acciones { margin-top: 28px; }
@media (min-width: 900px) {
  .carta .f3-ancla__rejilla { grid-template-columns: 5fr 7fr; gap: 80px; }
  .carta .f3-ancla__media { justify-self: end; width: 100%; }
}

/* =====================================================================
 * PICO: escena fija con pasos (escalera en el hub, corte en los niveles)
 * ===================================================================== */
.carta .f3-pico { position: relative; background: var(--c-crema); padding-top: clamp(64px, 9vw, 120px); }
.carta .f3-pico__cabeza p { margin-top: 10px; color: var(--c-tinta-2); }
.carta .f3-pico__cuerpo { position: relative; margin-top: 28px; }
.carta .f3-pico__escena {
  position: sticky; top: var(--cab); z-index: 3; height: 46svh; display: grid; grid-template-rows: 1fr auto; padding: 10px 20px 8px;
  background-color: var(--c-crema); border-bottom: 1px solid var(--c-arena);
  background-image: linear-gradient(rgba(233, 223, 204, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 223, 204, .55) 1px, transparent 1px);
  background-size: 32px 32px;
}
.carta .f3-pico__fig { margin: 0; min-height: 0; display: grid; place-items: center; position: relative; }
.carta .f3-pico__fig svg { width: 100%; height: 100%; max-height: 100%; }
.carta .f3-pico__nota { font-size: .875rem !important; color: var(--c-tinta-3); margin-top: 4px; }
.carta .f3-pico__pasos { position: relative; z-index: 2; }
.carta .f3-paso { min-height: 62svh; display: flex; align-items: flex-start; padding: 26px 20px 0; }
.carta .f3-paso__panel { width: 100%; background: var(--c-crema); padding: 4px 0 24px; }
.carta .f3-paso__n { font: 600 .875rem/1.3 var(--f-texto) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.carta .f3-paso__n .f3-sello { margin-left: 8px; letter-spacing: .06em; }
.carta .f3-paso h3 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-top: 6px; }
.carta .f3-paso h3 a { color: var(--c-cafe); text-decoration: none; }
.carta .f3-paso__panel > p:not(.f3-paso__n) { margin-top: 8px; color: var(--c-cafe); }
.carta .f3-paso__precio { color: var(--c-tinta-2) !important; }
.carta .f3-paso__precio .f3-cifra { font-size: 1.7rem; color: var(--c-cafe); margin-right: .15em; }
.carta .f3-paso__suma { font-weight: 500; }
.carta .f3-paso__lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.carta .f3-paso__lista li { padding-left: 20px; position: relative; color: var(--c-tinta-2); }
.carta .f3-paso__lista li::before { content: "✦"; position: absolute; left: 0; font-size: .75em; top: .3em; color: var(--c-oliva); }
.carta .f3-paso__lista .f3-paso__prota { color: var(--c-cafe); font-weight: 500; }
.carta .f3-paso .c-acciones { margin-top: 18px; }
.carta .f3-paso--signature .f3-paso__panel { background: var(--c-cafe); color: var(--c-crema); padding: 24px 20px; }
.carta .f3-paso--signature h3 a, .carta .f3-paso--signature .f3-paso__panel > p:not(.f3-paso__n), .carta .f3-paso--signature .f3-paso__precio .f3-cifra { color: var(--c-crema) !important; }
.carta .f3-paso--signature .f3-paso__n, .carta .f3-paso--signature .f3-sello { color: var(--c-oro-claro); }
.carta .f3-paso--signature .f3-paso__lista li { color: #EFE7D8; }
.carta .f3-paso--signature .f3-paso__lista .f3-paso__prota { color: var(--c-crema); }
.carta .f3-pico__pasos::after { content: ""; display: block; height: 8svh; }
@media (min-width: 900px) {
  .carta .f3-pico__cuerpo { display: grid; grid-template-columns: 6fr 5fr; max-width: var(--f3-ancho); margin-inline: auto; padding-inline: 48px; gap: 56px; }
  .carta .f3-pico__escena { top: calc(var(--cab) + 24px); height: calc(100svh - var(--cab) - 48px); border: 1px solid var(--c-arena); padding: 24px 28px 18px; }
  .carta .f3-paso { min-height: 78svh; align-items: center; padding: 0; }
  .carta .f3-paso__panel { padding: 0; }
  .carta .f3-paso--signature .f3-paso__panel { padding: 34px 32px; }
  .carta .f3-pico__pasos::after { height: 16svh; }
}
/* Pasos que no son el actual se atenúan (solo con JS) */
.f3-js .carta .f3-paso .f3-paso__panel { transition: opacity 500ms ease-out; }
.f3-js .carta .f3-paso:not(.is-actual) .f3-paso__panel { opacity: .4; }
.f3-js .carta .f3-paso--signature:not(.is-actual) .f3-paso__panel { opacity: .7; }

/* Escalera: losas */
.carta .f3-escalera-svg { overflow: visible; }
.carta .f3-losa polygon { stroke: var(--c-oliva); stroke-width: 1; stroke-linejoin: round; }
.carta .f3-losa__top { fill: #F3EADB; }
.carta .f3-losa__izq { fill: #E2D5BC; }
.carta .f3-losa__der { fill: #D3C2A0; }
.carta .f3-losa--2 .f3-losa__top { fill: #E9DCC0; }
.carta .f3-losa--3 .f3-losa__top { fill: #DCC796; }
.carta .f3-losa--3 .f3-losa__izq { fill: #CDB57D; }
.carta .f3-losa--3 .f3-losa__der { fill: #B99F66; }
.carta .f3-losa--4 .f3-losa__top { fill: #3A352D; stroke: var(--c-oro-claro); }
.carta .f3-losa--4 .f3-losa__izq { fill: #2E2A24; stroke: var(--c-oro-claro); }
.carta .f3-losa--4 .f3-losa__der { fill: #24211C; stroke: var(--c-oro-claro); }
.carta .f3-losa__guia { stroke: var(--c-oliva); stroke-width: 1; stroke-dasharray: 2 4; }
.carta .f3-losa__txt { font: 500 22px var(--f-display); fill: var(--c-cafe); }
.carta .f3-losa { transform-box: fill-box; transform-origin: 50% 100%; }
.f3-js .carta .f3-pico--escalera .f3-losa { opacity: 0; transform: translateY(-46px); transition: opacity 500ms ease-out, transform 750ms cubic-bezier(.2, .9, .25, 1.15); }
.f3-js .carta .f3-pico--escalera .f3-losa.is-on { opacity: 1; transform: none; }
.carta .f3-losa.is-actual .f3-losa__top { stroke-width: 2; }
.carta .f3-escalera-svg--mini .f3-losa.is-futura { opacity: .28; }
.carta .f3-escalera-svg--mini .f3-losa.is-activa polygon { stroke-width: 2; }
.carta .f3-escalera-svg--mini .f3-losa.is-activa .f3-losa__top { fill: var(--c-oro-claro); }
.carta .f3-n4 .f3-escalera-svg--mini .f3-losa.is-activa .f3-losa__top { fill: #3A352D; }

/* Contadores (dentro del pico, ligados a cada peldaño) */
.carta .f3-contadores { margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0; border-top: 1px solid var(--c-arena); }
.carta .f3-contador--fijo { display: none; }
.carta .f3-contador { padding: 8px 6px 0 0; }
.carta .f3-contador + .f3-contador { padding-left: 8px; border-left: 1px solid var(--c-arena); }
.carta .f3-contador dt { font: 500 .75rem/1.2 var(--f-texto); color: var(--c-tinta-2); letter-spacing: .02em; }
.carta .f3-contador dd { margin: 4px 0 0; font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem)/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; color: var(--c-cafe); }
@media (min-width: 900px) {
  .carta .f3-contadores { margin-top: 14px; grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .carta .f3-contador--fijo { display: block; }
  .carta .f3-contador dt { font-size: .875rem; }
  .carta .f3-contador:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Corte de piel */
.carta .f3-corte { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.carta .f3-corte-svg { width: 100%; height: 100%; }
.carta .f3-corte__etq { font: 500 15px var(--f-texto); fill: var(--c-tinta-3); transition: fill 400ms ease-out; }
.carta .f3-corte figcaption { font-size: .875rem; color: var(--c-tinta-3); margin-top: 4px; }
.carta .f3-corte__b--0 { fill: #FBF3E6; }
.carta .f3-corte__b--1 { fill: #F3E6D0; }
.carta .f3-corte__b--2 { fill: #EBDCC1; }
.carta .f3-corte__linea, .carta .f3-corte__fibra, .carta .f3-corte__poro { fill: none; stroke: var(--c-oliva); stroke-width: 1; }
.carta .f3-corte__fibra { stroke-opacity: .45; stroke-dasharray: 3 5; }
.carta .f3-corte__luz { fill: var(--c-oro-claro); opacity: 0; transition: opacity 500ms ease-out; }
.carta .f3-corte__accion { fill: none; stroke: var(--c-oliva-hondo); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity 400ms ease-out; }
.carta .f3-corte__accion path, .carta .f3-corte__accion line, .carta .f3-corte__accion rect, .carta .f3-corte__accion circle:not(.f3-corte__punto) { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 900ms cubic-bezier(.2, .7, .2, 1); }
.carta .f3-corte__punto { fill: var(--c-oliva-hondo); stroke: none; }
/* estado por paso (data-paso y data-capa los pone el JS; sin JS se ve el primero) */
.carta .f3-pico--corte[data-capa="0"] .f3-corte__luz[data-capa="0"],
.carta .f3-pico--corte[data-capa="1"] .f3-corte__luz[data-capa="1"],
.carta .f3-pico--corte[data-capa="2"] .f3-corte__luz[data-capa="2"] { opacity: .5; }
.carta .f3-pico--corte[data-capa="0"] .f3-corte__etq[data-capa="0"],
.carta .f3-pico--corte[data-capa="1"] .f3-corte__etq[data-capa="1"],
.carta .f3-pico--corte[data-capa="2"] .f3-corte__etq[data-capa="2"] { fill: var(--c-cafe); font-weight: 600; }
.carta .f3-pico--corte[data-paso="1"] .f3-corte__accion[data-p="1"],
.carta .f3-pico--corte[data-paso="2"] .f3-corte__accion[data-p="2"],
.carta .f3-pico--corte[data-paso="3"] .f3-corte__accion[data-p="3"],
.carta .f3-pico--corte[data-paso="4"] .f3-corte__accion[data-p="4"] { opacity: 1; }
.carta .f3-pico--corte[data-paso="1"] .f3-corte__accion[data-p="1"] *,
.carta .f3-pico--corte[data-paso="2"] .f3-corte__accion[data-p="2"] *,
.carta .f3-pico--corte[data-paso="3"] .f3-corte__accion[data-p="3"] *,
.carta .f3-pico--corte[data-paso="4"] .f3-corte__accion[data-p="4"] * { stroke-dashoffset: 0; }
/* el calor de la radiofrecuencia y la luz LED "respiran" mientras están activos */
@keyframes f3-respira { 50% { opacity: .55; } }
@media (prefers-reduced-motion: no-preference) {
  .carta .f3-corte__accion--ondas, .carta .f3-corte__accion--luz { animation: f3-respira 2.4s ease-in-out infinite; }
}
.carta .f3-n4 .f3-pico--corte .f3-pico__escena { background-color: #FBF6EE; }

/* =====================================================================
 * PROTAGONISTAS (tira deslizable)
 * ===================================================================== */
.carta .f3-protas { padding-block: clamp(64px, 9vw, 120px) clamp(40px, 6vw, 80px); background: var(--c-crema); }
.carta .f3-protas__intro { margin-top: 10px; color: var(--c-tinta-2); }
.carta .f3-protas__tira { list-style: none; margin: 28px 0 0; padding: 0 20px 18px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: thin; scrollbar-color: var(--c-arena) transparent; }
.carta .f3-protas__tira:focus-visible { outline: 2px solid var(--c-oliva); outline-offset: 4px; }
.carta .f3-prota { flex: 0 0 68vw; max-width: 300px; scroll-snap-align: start; }
.carta .f3-prota a { display: block; color: var(--c-cafe); text-decoration: none; }
.carta .f3-prota__media { aspect-ratio: 4 / 5; }
.carta .f3-prota--4 .f3-prota__media { background-color: #3A352D; background-image: linear-gradient(#4A443A 1px, transparent 1px), linear-gradient(90deg, #4A443A 1px, transparent 1px); }
.carta .f3-prota--4 .f3-glifo { stroke: var(--c-oro-claro); }
.carta .f3-prota__nivel { display: block; margin-top: 12px; font: 600 .8125rem/1.2 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.carta .f3-prota__t { display: block; margin-top: 4px; font: 500 1.6rem/1.1 var(--f-display); }
@media (hover: hover) { .carta .f3-prota a:hover img { transform: scale(1.04); } }
@media (min-width: 900px) {
  .carta .f3-protas__tira { padding-inline: max(48px, calc((100vw - var(--f3-ancho)) / 2 + 48px)); scroll-padding-inline: max(48px, calc((100vw - var(--f3-ancho)) / 2 + 48px)); gap: 22px; }
  .carta .f3-prota { flex-basis: 270px; }
}

/* =====================================================================
 * SEGÚN TU VALORACIÓN (ecuación)
 * ===================================================================== */
.carta .f3-valora { padding-block: clamp(64px, 9vw, 120px); background: var(--c-lienzo); }
.carta .f3-valora__rejilla { display: grid; gap: 28px; align-items: center; }
.carta .f3-valora__texto p { margin-top: 12px; color: var(--c-cafe); }
.carta .f3-ecuacion svg { width: 100%; max-width: 460px; display: block; margin-inline: auto; overflow: visible; }
.carta .f3-ec__c circle { fill: rgba(201, 178, 122, .22); stroke: var(--c-oliva); stroke-width: 1.2; }
.carta .f3-ec__c--3 circle { fill: rgba(107, 90, 46, .16); }
.carta .f3-ec__c text { font: 500 14px var(--f-texto); fill: var(--c-cafe); text-anchor: middle; }
.carta .f3-ec__sumas text { font: 400 26px var(--f-texto); fill: var(--c-oliva); text-anchor: middle; }
.carta .f3-ec__c, .carta .f3-ec__sumas { transform-box: view-box; transition: transform 1100ms cubic-bezier(.2, .7, .2, 1), opacity 600ms ease-out; }
.carta .f3-ecuacion.is-in .f3-ec__c--1 { transform: translateX(38px); }
.carta .f3-ecuacion.is-in .f3-ec__c--3 { transform: translateX(-38px); }
.carta .f3-ecuacion.is-in .f3-ec__sumas { opacity: 0; }
.carta .f3-ecuacion__total { text-align: center; font: 500 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.2 var(--f-display) !important; color: var(--c-cafe); margin-top: 10px; }
.carta .f3-ecuacion__total span { color: var(--c-oliva); margin-right: .3em; }
@media (min-width: 900px) { .carta .f3-valora__rejilla { grid-template-columns: 6fr 5fr; gap: 72px; } }

/* =====================================================================
 * COMPARADOR (encabezado fijo)
 * ===================================================================== */
.carta .f3-comparar { padding-block: clamp(64px, 9vw, 120px); background: var(--c-crema); }
.carta .f3-comparar__intro { margin-top: 10px; color: var(--c-tinta-2); }
.carta .f3-tabla { width: 100%; margin-top: 28px; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.carta .f3-tabla thead th { position: sticky; top: var(--cab); z-index: 4; background: var(--c-crema); padding: 14px 8px 12px; border-bottom: 1px solid var(--c-oliva); text-align: center; vertical-align: bottom; }
.carta .f3-tabla thead th a { display: block; font: 500 clamp(1.05rem, .9rem + .8vw, 1.7rem)/1.1 var(--f-display); color: var(--c-cafe); text-decoration: none; }
.carta .f3-tabla thead th span { display: block; margin-top: 4px; font: 500 .75rem/1.2 var(--f-texto); letter-spacing: .06em; color: var(--c-oliva-hondo); }
.carta .f3-tabla thead th.f3-col--4 { background: var(--c-cafe); }
.carta .f3-tabla thead th.f3-col--4 a { color: var(--c-crema); }
.carta .f3-tabla thead th.f3-col--4 span { color: var(--c-oro-claro); }
.carta .f3-tabla th[scope="row"] { text-align: left; font: 400 1rem/1.35 var(--f-texto); color: var(--c-cafe); padding: 14px 10px 14px 0; border-bottom: 1px solid var(--c-arena); }
.carta .f3-tabla td { text-align: center; padding: 12px 6px; border-bottom: 1px solid var(--c-arena); color: var(--c-cafe); font-variant-numeric: lining-nums; }
.carta .f3-tabla td strong { font: 500 1.25rem/1 var(--f-display); }
.carta .f3-tabla .f3-col--reco { background: rgba(201, 178, 122, .14); }
.carta .f3-tabla thead th.f3-col--reco { background: #F6EEDC; }
.carta .f3-tabla__grupo th { text-align: left; padding: 26px 0 8px; font: 600 .875rem/1.2 var(--f-texto) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--c-oliva-hondo); border-bottom: 1px solid var(--c-oliva); }
.carta .f3-si { width: 20px; height: 20px; fill: none; stroke: var(--c-oliva-hondo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.carta .f3-no { color: var(--c-tinta-3); }
.f3-js .carta .f3-tabla tbody .f3-si path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 500ms ease-out; }
.f3-js .carta .f3-tabla tbody.is-in .f3-si path { stroke-dashoffset: 0; }
.f3-js .carta .f3-tabla tbody.is-in td.f3-col--2 .f3-si path { transition-delay: 90ms; }
.f3-js .carta .f3-tabla tbody.is-in td.f3-col--3 .f3-si path { transition-delay: 180ms; }
.f3-js .carta .f3-tabla tbody.is-in td.f3-col--4 .f3-si path { transition-delay: 270ms; }
.carta .f3-comparar__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 759px) {
  /* En celular cada fila es: nombre arriba (ancho completo) y 4 celdas debajo */
  .carta .f3-tabla, .carta .f3-tabla thead, .carta .f3-tabla tbody { display: block; }
  .carta .f3-tabla thead { position: sticky; top: var(--cab); z-index: 4; }
  .carta .f3-tabla tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carta .f3-tabla thead th { position: static; padding: 10px 2px 8px; }
  .carta .f3-tabla thead th span { font-size: .6875rem; letter-spacing: .02em; }
  .carta .f3-tabla .f3-tabla__vacia { display: none; }
  .carta .f3-tabla th[scope="row"] { grid-column: 1 / -1; padding: 14px 0 2px; border-bottom: 0; }
  .carta .f3-tabla td { padding: 6px 2px 12px; font-size: .9375rem; }
  .carta .f3-tabla td strong { font-size: 1.05rem; }
  .carta .f3-tabla__grupo { display: block !important; }
  .carta .f3-tabla__grupo th { display: block; }
  .carta .f3-comparar__acciones .c-btn { flex: 1 1 100%; }
}

/* =====================================================================
 * SIEMPRE, FAQ, PUERTA, BARRA
 * ===================================================================== */
.carta .f3-siempre { padding-block: clamp(64px, 9vw, 120px); background: var(--c-lienzo); }
.carta .f3-siempre__rejilla { display: grid; gap: 28px; }
.carta .f3-siempre .f3-protocolo { margin-top: 18px; }
.carta .f3-siempre__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-arena); }
.carta .f3-siempre__lista li { display: grid; gap: 4px; padding: 18px 0 18px 28px; border-bottom: 1px solid var(--c-arena); position: relative; }
.carta .f3-siempre__lista li::before { content: "✦"; position: absolute; left: 0; top: 20px; color: var(--c-oliva); }
.carta .f3-siempre__lista strong { font: 500 1.5rem/1.15 var(--f-display); color: var(--c-cafe); }
.carta .f3-siempre__lista span { color: var(--c-tinta-2); }
@media (min-width: 900px) { .carta .f3-siempre__rejilla { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }

.carta .f3-faq { padding-block: clamp(64px, 9vw, 120px); background: var(--c-crema); }
.carta .f3-faq__rejilla { display: grid; gap: 32px; }
.carta .f3-faq__lista { border-top: 1px solid var(--c-arena); }
.carta .f3-faq--nivel .f3-faq__lista { margin-top: 24px; }
.carta .f3-faq details { border-bottom: 1px solid var(--c-arena); }
.carta .f3-faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 500 1.4rem/1.25 var(--f-display); color: var(--c-cafe); }
.carta .f3-faq summary::-webkit-details-marker { display: none; }
.carta .f3-faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 400 1.6rem/1 var(--f-texto); color: var(--c-oliva); transition: transform 200ms ease-out; }
.carta .f3-faq details[open] summary::after { transform: rotate(45deg); }
.carta .f3-faq details p { padding: 0 0 22px; color: var(--c-cafe); }
.carta .f3-faq a { color: var(--c-oliva-hondo); }
.carta .f3-faq .f3-protocolo { margin-top: 28px; }
.carta .f3-faq__aside { display: grid; gap: 20px; align-content: start; }
.carta .f3-caja { background: var(--c-lienzo); border: 1px solid var(--c-arena); padding: 22px 20px; display: grid; gap: 10px; }
.carta .f3-caja h3 { font-size: 1.6rem; }
.carta .f3-caja p, .carta .f3-caja li { color: var(--c-cafe); font-size: 1.0625rem; }
@media (min-width: 900px) {
  .carta .f3--hub .f3-faq__rejilla { grid-template-columns: 4fr 8fr; gap: 64px; }
  .carta .f3-faq--nivel .f3-faq__rejilla { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
}

.carta .f3-puerta { background: var(--c-cafe); color: var(--c-crema); padding-block: clamp(64px, 9vw, 120px); }
.carta .f3-puerta h2 { color: var(--c-crema); }
.carta .f3-puerta h2 em { color: var(--c-oro-claro); }
.carta .f3-puerta p { color: #EFE7D8; margin-top: 12px; }
.carta .f3-puerta .c-acciones { margin-top: 26px; }
.carta .f3-puerta__nota a { color: #F3EADB; text-decoration-color: rgba(201, 178, 122, .7); }
.carta .f3-puerta__nota { margin-top: 28px !important; }
@media (max-width: 899px) { .carta .f3-puerta { padding-bottom: 120px; } .carta .f3-puerta .c-btn { flex: 1 1 100%; } }

.carta .f3-barra { transition: transform 300ms ease-out, opacity 300ms ease-out; }
.carta .f3-barra.is-oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }
.carta .f3-barra__texto { margin: 0; display: grid; font-size: .9375rem !important; color: var(--c-tinta-2); line-height: 1.3 !important; }
.carta .f3-barra__texto strong { font: 500 1.2rem/1.1 var(--f-display); color: var(--c-cafe); }

/* =====================================================================
 * PÁGINAS DE NIVEL
 * ===================================================================== */
.carta .f3-navniveles { border-block: 1px solid var(--c-arena); background: var(--c-crema); }
.carta .f3-navniveles ol { list-style: none; margin: 0 auto; padding: 0 12px; max-width: var(--f3-ancho); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carta .f3-navniveles a { display: block; padding: 12px 6px; text-align: center; text-decoration: none; color: var(--c-tinta-2); font: 500 clamp(1.05rem, .9rem + .7vw, 1.5rem)/1.1 var(--f-display); border-bottom: 2px solid transparent; }
.carta .f3-navniveles a span { display: block; font: 600 .6875rem/1.2 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--c-oliva); margin-bottom: 2px; }
.carta .f3-navniveles a[aria-current="page"] { color: var(--c-cafe); border-bottom-color: var(--c-oliva-hondo); }
@media (hover: hover) { .carta .f3-navniveles a:hover { color: var(--c-cafe); } }

.carta .f3-peldano { padding-block: clamp(56px, 8vw, 104px); background: var(--c-crema); }
.carta .f3-peldano__rejilla { display: grid; gap: 24px; align-items: center; }
.carta .f3-peldano__fig { max-width: 340px; width: 72%; margin-inline: auto; }
.carta .f3-peldano__fig svg { width: 100%; height: auto; }
.carta .f3-peldano p { margin-top: 10px; color: var(--c-cafe); }
.carta .f3-cifras { margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-oliva); }
.carta .f3-cifras div { padding: 12px 10px 0 0; }
.carta .f3-cifras div + div { padding-left: 12px; border-left: 1px solid var(--c-arena); }
.carta .f3-cifras dt { font: 500 .8125rem/1.25 var(--f-texto); color: var(--c-tinta-2); }
.carta .f3-cifras dd { margin: 6px 0 0; font: 500 clamp(2rem, 1.5rem + 2vw, 3.2rem)/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--c-cafe); }
.carta .f3-cifras small { font: 500 .9375rem/1 var(--f-texto); color: var(--c-oliva-hondo); vertical-align: .6em; }
.carta .f3-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.carta .f3-chips li { padding: 6px 12px; border: 1px solid var(--c-oliva); border-radius: 2px; font-size: .9375rem !important; color: var(--c-oliva-hondo); font-variant: small-caps; letter-spacing: .04em; }
@media (min-width: 900px) { .carta .f3-peldano__rejilla { grid-template-columns: 4fr 7fr; gap: 72px; } .carta .f3-peldano__fig { width: 100%; } .carta .f3-cifras dt { font-size: .9375rem; } }

/* La carta del nivel: tres tamaños */
.carta .f3-carta { padding-block: clamp(64px, 9vw, 120px); background: var(--c-lienzo); }
.carta .f3-carta__cabeza p { margin-top: 12px; color: var(--c-cafe); max-width: 58ch !important; }
.carta .f3-grupo { margin-top: 48px; }
.carta .f3-grupo__cabeza { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--c-oliva); }
.carta .f3-grupo__cabeza h3 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); }
.carta .f3-grupo__n { font: 500 .9375rem/1 var(--f-texto); color: var(--c-oliva-hondo); vertical-align: .5em; margin-left: 4px; }
.carta .f3-grupo__cabeza p { color: var(--c-tinta-2); }
.carta .f3-tecs { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.carta .f3-tec { background: var(--c-crema); border: 1px solid var(--c-arena); transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
@media (hover: hover) { .carta .f3-tec:hover { border-color: var(--c-oliva); box-shadow: var(--f3-sombra); } .carta .f3-tec:hover img { transform: scale(1.04); } }
.carta .f3-tec__txt { padding: 16px 16px 20px; }
.carta .f3-tec__marca { font: 600 .8125rem/1.2 var(--f-texto) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--c-oliva-hondo); margin-bottom: 4px; }
.carta .f3-tec h4 { margin: 0; font: 500 1.55rem/1.12 var(--f-display); color: var(--c-cafe); }
.carta .f3-tec__txt p:not(.f3-tec__marca) { margin-top: 6px; color: var(--c-tinta-2); }
/* protagonistas: grandes */
.carta .f3-tecs--tec { grid-template-columns: 1fr; }
.carta .f3-tec--tec .f3-tec__media { aspect-ratio: 4 / 3; }
.carta .f3-tec--tec h4 { font-size: 1.9rem; }
/* base: medianas */
.carta .f3-tecs--base { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.carta .f3-tec--base .f3-tec__media { aspect-ratio: 1; }
.carta .f3-tec--base .f3-tec__txt { padding: 12px 12px 16px; }
.carta .f3-tec--base h4 { font-size: 1.3rem; }
.carta .f3-tec--base .f3-tec__txt p:not(.f3-tec__marca) { font-size: 1.0625rem; }
.carta .f3-tec--base .f3-glifo { width: 44px; height: 44px; }
/* ritual: tira horizontal con miniatura redonda */
.carta .f3-tecs--ritual { grid-template-columns: 1fr; gap: 0; border-top: 0; }
.carta .f3-tec--ritual { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--c-arena); padding: 14px 0; }
.carta .f3-tec--ritual .f3-tec__media { width: 84px; height: 84px; border-radius: 50%; background-size: 14px 14px; }
.carta .f3-tec--ritual .f3-glifo { width: 34px; height: 34px; }
.carta .f3-tec--ritual .f3-ilus { display: none; }
.carta .f3-tec--ritual .f3-tec__txt { padding: 0; }
.carta .f3-tec--ritual h4 { font-size: 1.4rem; }
@media (hover: hover) { .carta .f3-tec--ritual:hover { box-shadow: none; border-color: var(--c-arena); } }
.carta .f3-tecs--ritual + .f3-nota-ilus { display: none; }
@media (min-width: 760px) {
  .carta .f3-tecs--tec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .carta .f3-tecs--base { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .carta .f3-tecs--ritual { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1100px) {
  .carta .f3-tecs--tec .f3-tec:only-child, .carta .f3-tecs--tec .f3-tec:nth-child(odd):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .carta .f3-tecs--tec .f3-tec:only-child .f3-tec__txt, .carta .f3-tecs--tec .f3-tec:nth-child(odd):last-child .f3-tec__txt { padding: 32px; align-self: center; }
  .carta .f3-tecs--base { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.carta .f3-combina { margin-top: 40px; padding: 24px 22px; border: 1px solid var(--c-oliva); background: var(--c-crema); }
.carta .f3-combina h3 { font-size: 1.7rem; }
.carta .f3-combina ol { margin: 12px 0 0; padding-left: 1.3em; display: grid; gap: 8px; }
.carta .f3-formacion { margin-top: 20px; }
.carta .f3-formacion ul { margin: 12px 0 0; padding-left: 1.1em; display: grid; gap: 8px; }
.carta .f3-heredados { margin-top: 36px; border-top: 1px solid var(--c-arena); }
.carta .f3-heredados summary { cursor: pointer; padding: 18px 0; font: 500 1.3rem/1.25 var(--f-display); color: var(--c-cafe); }
.carta .f3-heredados summary span { color: var(--c-oliva-hondo); }
.carta .f3-heredados ul { margin: 0; padding: 0 0 20px 1.1em; columns: 2 220px; column-gap: 32px; }
.carta .f3-heredados li { color: var(--c-tinta-2); font-size: 1rem !important; break-inside: avoid; }

/* Las 3 horas: regla */
.carta .f3-horas { padding-block: clamp(64px, 9vw, 120px); background: var(--c-crema); }
.carta .f3-horas__intro { margin-top: 10px; color: var(--c-tinta-2); }
.carta .f3-regla { list-style: none; margin: 32px 0 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 24px; }
.carta .f3-regla::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--c-oliva); transform-origin: 50% 0; }
.carta .f3-regla__p { position: relative; }
.carta .f3-regla__p::before { content: ""; position: absolute; left: -25px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-crema); border: 1px solid var(--c-oliva-hondo); }
.carta .f3-regla__h { font: 500 1.2rem/1 var(--f-display); color: var(--c-oliva-hondo); font-variant-numeric: lining-nums; }
.carta .f3-regla h3 { font-size: 1.6rem; margin-top: 4px; }
.carta .f3-regla p { color: var(--c-tinta-2); margin-top: 4px; }
@keyframes f3-linea-v { from { transform: scaleY(0); } to { transform: none; } }
@keyframes f3-linea-h { from { transform: scaleX(0); } to { transform: none; } }
@media (min-width: 900px) {
  .carta .f3-regla { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 30px 0 0; gap: 24px; }
  .carta .f3-regla::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; transform-origin: 0 50%; }
  .carta .f3-regla__p::before { left: 0; top: -30px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carta .f3-regla::before { animation: f3-linea-v linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .carta .f3-regla::before { animation-name: f3-linea-h; }
  }
}

.carta .f3-parati { padding-block: clamp(56px, 8vw, 104px); background: var(--c-lienzo); }
.carta .f3-parati__rejilla { display: grid; gap: 24px; }
.carta .f3-parati__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-arena); }
.carta .f3-parati__lista li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--c-arena); position: relative; font: italic 500 1.6rem/1.25 var(--f-display) !important; color: var(--c-cafe); }
.carta .f3-parati__lista li::before { content: "✦"; position: absolute; left: 0; top: 20px; font: normal 400 1rem/1 var(--f-texto); color: var(--c-oliva); }
@media (min-width: 900px) { .carta .f3-parati__rejilla { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }

/* Siguiente peldaño */
.carta .f3-subir { padding-block: clamp(64px, 9vw, 120px); background: var(--c-crema); }
.carta .f3-subir__rejilla { display: grid; gap: 28px; align-items: center; }
.carta .f3-subir__media { aspect-ratio: 4 / 5; max-width: 420px; width: 100%; }
.carta .f3-subir__ceja { font: 600 .875rem/1.3 var(--f-texto) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.carta .f3-subir h2 { margin-top: 8px; }
.carta .f3-subir__texto > p:not(.f3-subir__ceja) { margin-top: 10px; color: var(--c-cafe); }
.carta .f3-dif { margin: 22px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--c-oliva); }
.carta .f3-dif div { padding: 10px 8px 0 0; }
.carta .f3-dif div + div { padding-left: 10px; border-left: 1px solid var(--c-arena); }
.carta .f3-dif dt { font: 500 .8125rem/1.2 var(--f-texto); color: var(--c-tinta-2); }
.carta .f3-dif dd { margin: 4px 0 0; font: 500 clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem)/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--c-cafe); }
.carta .f3-subir__prota { font-weight: 500; }
.carta .f3-subir .c-acciones { margin-top: 22px; }
.carta .f3-subir--oscuro { background: var(--c-cafe); color: var(--c-crema); }
.carta .f3-subir--oscuro h2, .carta .f3-subir--oscuro .f3-subir__texto > p:not(.f3-subir__ceja), .carta .f3-subir--oscuro .f3-dif dd { color: var(--c-crema); }
.carta .f3-subir--oscuro .f3-subir__ceja { color: var(--c-oro-claro); }
.carta .f3-subir--oscuro .f3-dif dt { color: #DCD2C0; }
.carta .f3-subir--oscuro .f3-dif div + div { border-left-color: #5C5345; }
.carta .f3-subir--oscuro .f3-subir__media { background-color: #3A352D; background-image: linear-gradient(#4A443A 1px, transparent 1px), linear-gradient(90deg, #4A443A 1px, transparent 1px); }
.carta .f3-subir--oscuro .f3-glifo { stroke: var(--c-oro-claro); }
@media (max-width: 599px) { .carta .f3-dif { grid-template-columns: repeat(2, minmax(0, 1fr)); } .carta .f3-dif div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (min-width: 900px) { .carta .f3-subir__rejilla { grid-template-columns: 5fr 7fr; gap: 72px; } .carta .f3-subir__media { justify-self: end; } }

/* Signature: cómo se llega + niveles abiertos */
.carta .f3-llegar { padding-block: clamp(64px, 9vw, 120px); background: var(--c-crema); }
.carta .f3-llegar__pasos { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: f3; display: grid; gap: 22px; }
.carta .f3-llegar__pasos li { counter-increment: f3; display: grid; grid-template-columns: 3rem 1fr; gap: 2px 14px; }
.carta .f3-llegar__pasos li::before { content: counter(f3); grid-row: span 2; font: 500 2.6rem/1 var(--f-display); color: var(--c-oliva); }
.carta .f3-llegar__pasos h3 { font-size: 1.7rem; }
.carta .f3-llegar__pasos p { color: var(--c-tinta-2); }
.carta .f3-llegar > .f3-ancho > .c-acciones { margin-top: 26px; }
.carta .f3-abiertos { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 16px; }
.carta .f3-abiertos li { border: 1px solid var(--c-arena); padding: 20px; display: grid; gap: 8px; background: #fff; }
.carta .f3-abiertos .f3-abiertos--reco { border-color: var(--c-oliva); }
.carta .f3-abiertos__n { font: 600 .8125rem/1.2 var(--f-texto) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--c-oliva-hondo); }
.carta .f3-abiertos h3 a { color: var(--c-cafe); text-decoration: none; font-size: 2rem; }
.carta .f3-abiertos__precio .f3-cifra { font-size: 1.5rem; margin-right: .2em; }
@media (min-width: 760px) { .carta .f3-llegar__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .carta .f3-abiertos { grid-template-columns: 1fr 1.15fr 1fr; align-items: end; } .carta .f3-abiertos .f3-abiertos--reco { padding-block: 30px; } }

/* =====================================================================
 * APARICIÓN (solo con JS; sin JS todo se ve). Cada familia entra distinto.
 * ===================================================================== */
.f3-js .carta .f3-rev { opacity: 0; transform: translateY(14px); transition: opacity var(--f3-lento), transform var(--f3-lento); }
.f3-js .carta .f3-tec.f3-rev { transform: translateY(10px) scale(.97); }
.f3-js .carta .f3-parati__lista .f3-rev, .f3-js .carta .f3-siempre__lista .f3-rev { transform: translateX(-14px); }
.f3-js .carta .f3-ancla__media.f3-rev, .f3-js .carta .f3-subir__media.f3-rev { transform: translateY(24px) scale(.98); transition-duration: 900ms; }
.f3-js .carta .f3-rev.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .carta .f3-entra, .carta .f3-mazo .f3-naipe, .carta .f3-naipe--solo { animation: none; }
  .carta .f3-capa, .carta .f3-naipe { translate: none; transition: none; }
  .f3-js .carta .f3-rev { opacity: 1; transform: none; transition: none; }
  .f3-js .carta .f3-pico--escalera .f3-losa { transition: none; }
  .carta .f3-corte__luz, .carta .f3-corte__accion, .carta .f3-corte__accion * { transition: none !important; }
  .carta .f3-ec__c, .carta .f3-ec__sumas { transition: none; }
  .carta .f3-marquee.is-lista .f3-marquee__pista { animation: none; }
  .carta .f3-tec img, .carta .f3-prota img { transition: none; }
}

/* Rótulo dentro de los arcos: abajo a la izquierda (arriba lo corta la curva) */
.carta .f3-ancla__media > .f3-ilus { top: auto; right: auto; bottom: 10px; left: 10px; }
@media (min-width: 900px) { .carta .f3-arco > .f3-ilus { top: auto; right: auto; bottom: 10px; left: 10px; } }
@media (min-width: 900px) { .carta.f3 .f3-hero__texto > p.f3-hero__lead { max-width: 34ch; } }
.carta .f3-tecs--base .f3-tec:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(120px, 30%) 1fr; align-items: center; }
.carta .f3-tecs--base .f3-tec:only-child .f3-tec__media { height: 100%; aspect-ratio: auto; min-height: 150px; }
@media (min-width: 760px) { .carta .f3-tecs--base .f3-tec:only-child { grid-template-columns: 260px 1fr; } }
@media (max-width: 899px) { .carta .f3-naipe--solo { aspect-ratio: auto; } .carta .f3-naipe--solo .f3-naipe__sello { margin-top: 14px; } }
.carta .f3-pico, .carta .f3-comparar, .carta .f3-llegar, .carta .f3-carta { scroll-margin-top: var(--cab); }

/* S-PKG (26-oct-2026): leyenda "Imagen ilustrativa" de las miniaturas redondas y "Nuestro compromiso" */
.carta .f3-tec__ilus { margin-top: 4px; font-size: .8125rem; letter-spacing: .02em; color: var(--c-tinta-2); }
.carta .f3-compromiso { border-left: 2px solid var(--c-oliva); scroll-margin-top: calc(var(--cab, 72px) + 16px); }
.carta .f3-comparar .f3-compromiso { margin-top: 28px; max-width: 46rem; }
.carta .f3-hero__compromiso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.carta .f3-hero--oscuro .f3-hero__compromiso a { color: #DCD2C0; }