/* Sabores de Amalia — el recetario que se hojea · v10 «Salvia de cocina»
   Colores y tipografías: /assets/marca/tokens-V5.css (se importa en el HTML; acá no se define
   ningún color nuevo). Este archivo solo compone.

   El sistema Ciruela, en tres superficies:
   · tapa y contratapa: --salvia-tinta con filete --crema (clase .sobre-salvia);
   · hojas: --marfil para leer, --papel y --papel-2 para lo hundido;
   · el cafecito: --acento como campo de la acción con Mimi, con --tinta encima (.sobre-contacto).
   Las palabras marcadas (.am, .cf) cambian de color solas según la superficie: lo hacen los tokens.

   Leyes que rigen:
   · Nada más alto que la pantalla: cada hoja mide por vh Y por vw, y la foto es la que
     cede el espacio que sobra (flex + container query), nunca el texto.
   · Un solo breakpoint: 900px. Se declara una vez, abajo, y en ningún otro lugar.
   · El CSS manda y el JS obedece: el modo de giro lo declara --giro (3d | fundido) y el
     JS lo lee con getComputedStyle; no replica el media query de movimiento reducido.
   · El estado por defecto es el seguro: sin la clase .js en <html> las hojas se apilan y
     todo se lee con scroll normal. El hojeo se enciende por clase.
   · Todo lo que se toca mide 44 px o más. */

*,*::before,*::after{box-sizing:border-box}
/* [hidden] gana siempre: .boton y .nota declaran display y se lo comerían */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--salvia-honda);color:var(--tinta);
  font-family:var(--f-texto);font-size:16px;line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
/* el foco es un anillo turquesa por contorno (no por sombra) */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;box-shadow:none;border-radius:6px}
.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:12px;top:-60px;z-index:50;background:var(--marfil);color:var(--salvia-tinta);padding:10px 14px;border-radius:6px;min-height:44px}
.saltar:focus{top:12px}

/* ---------- escala: una sola por rol, medida por ancho y por alto ---------- */
:root{
  --barra:56px;
  --t-titulo:clamp(1.6rem, min(7vw, 4.4vh), 2.7rem);
  --t-entrada:clamp(1.02rem, min(4.5vw, 2.7vh), 1.36rem);
  --t-texto:clamp(.94rem, min(3.95vw, 2.3vh), 1.06rem);
  --t-chico:clamp(.8rem, min(3.4vw, 1.9vh), .9rem);
  --aire:clamp(.45rem, 1.5vh, 1rem);
  --pad-x:20px;
  --pad-der:58px;              /* deja libre la franja de las cintas (44 px + la que sobresale) */
  --giro:3d;
}
@media (prefers-reduced-motion:reduce){ :root{--giro:fundido} }

/* ---------- el papel ---------- */
.hoja{
  position:relative;
  background-color:var(--marfil);
  /* renglón del cuaderno cada 32px + margen fucsia muy tenue */
  background-image:
    linear-gradient(90deg, transparent 0 calc(var(--pad-x) - 8px), color-mix(in srgb, var(--acento) 26%, transparent) calc(var(--pad-x) - 8px) calc(var(--pad-x) - 7px), transparent calc(var(--pad-x) - 7px)),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--linea) 31px 32px);
  padding:clamp(14px, 3vh, 28px) var(--pad-der) clamp(12px, 2.4vh, 24px) var(--pad-x);
}
.hoja__cuerpo{display:flex;flex-direction:column;gap:var(--aire);height:100%;min-height:0}
.texto{display:flex;flex-direction:column;gap:calc(var(--aire) * .8);flex:0 0 auto}
.texto p{margin:0;font-size:var(--t-texto);line-height:1.5;color:var(--suave);max-width:38em}
.titulo{margin:0;font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-weight:500;font-size:var(--t-titulo);line-height:1.08;color:var(--salvia-tinta);letter-spacing:-.01em;text-wrap:balance}
.titulo:focus,.nota h2:focus,.paso > legend:focus,.tapa__logo:focus{outline:none}
.texto p.entrada{font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-size:var(--t-entrada);color:var(--salvia-tinta);line-height:1.45}
.texto p.firma-corta{font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-style:italic;font-size:var(--t-entrada);color:var(--oliva);line-height:1.45}
.texto strong{font-weight:600;color:var(--salvia-tinta)}
/* enlaces: fucsia hondo sobre claro, champaña sobre ciruela (:where no suma especificidad) */
:where(.hoja, .pliego) a{color:var(--acento);text-underline-offset:3px}
:where(.sobre-salvia) a{color:var(--crema)}
:where(.sobre-salvia) :where(.nota) a{color:var(--acento)}

/* [FALTA] visible, para que nadie lo confunda con copy terminado */
mark.falta{
  background:none;color:var(--oliva);font-family:var(--f-texto);font-style:normal;font-size:.82em;
  border:1px dashed color-mix(in srgb, var(--oliva) 70%, transparent);border-radius:4px;
  padding:0 .3em;white-space:normal;
}
.sobre-salvia mark.falta{color:var(--crema);border-color:color-mix(in srgb, var(--crema) 60%, transparent)}
.sobre-contacto mark.falta{color:var(--sobre-acento);border-color:color-mix(in srgb, var(--sobre-acento) 60%, transparent)}

/* sello «del recetario» */
.sello{
  display:inline-block;vertical-align:.12em;margin-left:.3em;
  font-family:var(--f-texto);font-style:normal;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--oliva);border:1px solid var(--oliva);border-radius:999px;padding:0 .55em;line-height:1.6;
  white-space:nowrap;
}
.rc{color:var(--salvia-tinta)}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.35em;
  min-height:48px;padding:.55em 1.3em;border-radius:999px;
  font-family:var(--f-texto);font-weight:600;font-size:var(--t-texto);line-height:1.25;text-decoration:none;cursor:pointer;
  border:1px solid var(--salvia-tinta);background:var(--salvia-tinta);color:var(--marfil);
  --am-color:var(--crema);--cf-color:var(--crema);
  transition:transform .15s ease, background-color .15s ease;
}
.boton:hover{transform:translateY(-1px)}
.boton .cf,.boton .am{font-weight:500}
/* sobre ciruela */
.boton--claro{background:var(--marfil);border-color:var(--marfil);color:var(--salvia-tinta);--am-color:var(--acento);--cf-color:var(--acento)}
.boton--linea{background:transparent;border-color:var(--crema);color:var(--marfil)}
/* sobre fucsia: tinta de campo y marfil de letra (el fucsia nunca es letra) */
.boton--tinta{background:var(--tinta);border-color:var(--tinta);color:var(--marfil);--am-color:var(--marfil);--cf-color:var(--marfil)}
.boton--chico{min-height:44px;padding:.4em 1em;font-size:var(--t-chico)}
.boton:disabled{opacity:.6;cursor:progress;transform:none}
.boton-texto{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;font-size:inherit;min-height:44px;color:var(--acento);text-underline-offset:3px}

/* enlaces secundarios: uno por renglón, cada uno de 44 px */
.enlaces{margin:0;padding:0;list-style:none;font-size:var(--t-chico);line-height:1.45;color:var(--suave);display:flex;flex-wrap:wrap;gap:0 1.2em}
.enlaces > li,.enlaces > span{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 .3em}
.enlaces a{display:inline-flex;align-items:center;min-height:44px;padding:0 .15em}
/* enlaces dentro de un párrafo: el área táctil crece hacia arriba y abajo sin mover el renglón */
:where(.texto p, .nota p, .aviso, .ayuda) a{padding-block:12.5px}

/* ---------- fotos: polaroid sobre el papel ---------- */
.foto{
  flex:1 1 0;min-height:0;position:relative;
  container-type:size;container-name:foto;
  display:flex;align-items:center;justify-content:center;gap:4%;
}
.polaroid{
  margin:0;background:#fff;padding:8px 8px 26px;
  box-shadow:0 2px 3px rgba(40,55,44,.12), var(--sombra);
  transform:rotate(-2.2deg);position:relative;
  /* mide contra su caja (.foto es contenedor de tamaño): nunca más alta ni más ancha que ella */
  height:min(100cqh, 520px, 117cqw);aspect-ratio:4/5;
  display:flex;flex-direction:column;
}
.polaroid:nth-child(2){transform:rotate(2.6deg)}
.polaroid::before{   /* cinta adhesiva */
  content:"";position:absolute;top:-10px;left:50%;width:74px;height:20px;transform:translateX(-50%) rotate(3deg);
  background:color-mix(in srgb, var(--crema) 45%, transparent);
}
.polaroid img{width:100%;flex:1 1 0;min-height:0;object-fit:cover}
.polaroid figcaption{position:absolute;left:8px;right:8px;bottom:4px;font-size:.72rem;line-height:1.25;color:var(--suave);text-align:center}
.polaroid.pendiente .hueco{
  flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--papel-2);
  background-image:repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--salvia-tinta) 6%, transparent) 14px 15px);
  font-family:var(--f-titulo);font-style:italic;color:var(--oliva);font-size:clamp(.9rem, 2.2vh, 1.15rem);
}
/* la foto cede: si el espacio que queda no alcanza para que se lea como foto, se va */
@container foto (max-height: 110px){ .polaroid{display:none} .foto{flex:0 0 0} }
.foto:has(> .polaroid + .polaroid) > .polaroid{height:min(94cqh, 480px, 55cqw)}
@container foto (max-width: 330px){
  .polaroid + .polaroid{display:none}
  .foto:has(> .polaroid + .polaroid) > .polaroid:first-child{height:min(100cqh, 520px, 117cqw)}
}

/* ---------- tapa y contratapa: la tapa del recetario, ciruela con filete champaña ---------- */
.tapa,.contratapa{
  background:var(--salvia-tinta);color:var(--marfil);
  padding:clamp(12px,2.4vh,26px) var(--pad-der) clamp(8px,1.6vh,16px) var(--pad-x);
  display:flex;flex-direction:column;
}
.tapa__marco{
  flex:1 1 auto;min-height:0;
  border:1px solid color-mix(in srgb, var(--crema) 60%, transparent);border-radius:14px;
  padding:clamp(10px, 2.4vh, 30px) clamp(12px, 3vw, 40px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px, 2vh, 22px);text-align:center;
}
/* el logo de Sandra es el protagonista: grande, sin caja ni sello alrededor */
.tapa__logo{margin:0;line-height:0;flex:0 1 auto;min-height:0;display:flex;justify-content:center}
.logo{width:auto;height:clamp(180px, 40vh, 380px);max-width:100%;object-fit:contain}
.claim{margin:0;display:flex;flex-direction:column;gap:.2em;font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;line-height:1.45;text-wrap:balance}
.claim strong{font-weight:500;font-size:clamp(1.2rem, min(5.6vw, 3.3vh), 1.75rem);line-height:1.25;color:var(--marfil)}
.claim em{font-size:clamp(1rem, min(4.5vw, 2.7vh), 1.35rem);color:var(--crema)}
.puertas{display:flex;flex-direction:column;gap:10px;width:min(100%, 320px)}
.eventos{margin:0;font-size:var(--t-chico);line-height:1.45;letter-spacing:.02em;color:color-mix(in srgb, var(--marfil) 82%, transparent)}
/* Temporada de fin de año: «Empresas» en la tapa enlaza a la campaña. */
.eventos a{color:var(--crema);text-decoration-thickness:1px;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.credito{margin:clamp(4px,1vh,10px) 0 0;text-align:center;font-size:.8rem;line-height:1.45;color:color-mix(in srgb, var(--marfil) 78%, transparent)}
.credito a{color:var(--crema);display:inline-flex;align-items:center;min-height:44px}

/* ---------- hoja 2: la mesa ---------- */
.adorno{color:var(--oliva);font-family:var(--f-titulo);font-size:1.5rem;line-height:1;letter-spacing:.4em;margin:0}
.texto p.cita{font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-style:italic;color:var(--salvia-tinta);font-size:var(--t-entrada);line-height:1.45;padding-left:.9em;border-left:1px solid var(--oliva)}

/* ---------- hoja 5: el equipo ---------- */
.roles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.roles button,.chip{
  min-height:44px;padding:.35em .9em;border-radius:999px;border:1px solid var(--borde);background:#fff;
  font-size:var(--t-chico);color:var(--salvia-tinta);cursor:pointer;text-align:left;line-height:1.25;
  display:inline-flex;align-items:center;gap:.35em;
}
.roles button[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--salvia-tinta);color:var(--marfil);border-color:var(--salvia-tinta)}
/* el estado no se dice solo con color: lleva su marca */
.roles button[aria-pressed="true"]::before,.chip[aria-pressed="true"]::before{content:"✓";font-weight:700}
.roles mark.falta{font-size:.9em}
.roles button[aria-pressed="true"] mark.falta{color:var(--crema);border-color:var(--crema)}
.ficha{display:flex;align-items:center;gap:14px;height:100%;width:100%;justify-content:center}
.ficha .polaroid{height:min(100cqh, 300px, 50cqw)}
.ficha__texto{display:flex;flex-direction:column;gap:6px;max-width:16em}
.ficha__texto h3{margin:0;font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-weight:500;font-size:var(--t-entrada);color:var(--salvia-tinta)}
.ficha__texto p{margin:0;font-size:var(--t-chico);line-height:1.45}

/* ---------- hoja 6: la preparación ---------- */
.pasos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;counter-reset:paso}
.pasos li{counter-increment:paso;font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-size:var(--t-entrada);color:var(--salvia-tinta)}
.pasos li::before{content:counter(paso) " ";font-family:var(--f-texto);font-size:.62em;color:var(--oliva);vertical-align:.3em}

/* ---------- hoja 7: favoritas ---------- */
.favoritas{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.favoritas li{font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-size:var(--t-texto);line-height:1.45;color:var(--salvia-tinta);padding:.1em 0;border-bottom:1px dotted var(--borde)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- hoja 10: experiencias ---------- */
.testimonio{margin:0;display:flex;flex-direction:column;gap:6px}
.testimonio blockquote{margin:0;font-family:var(--f-titulo);font-style:italic;font-size:var(--t-entrada);color:var(--salvia-tinta);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.testimonio figcaption{font-size:var(--t-chico);color:var(--suave)}
.vacio{border:1px dashed var(--borde);border-radius:8px;padding:.8em 1em;background:var(--papel)}
.vacio p{margin:0}
.otra{display:flex;gap:8px;align-items:center;font-size:var(--t-chico)}

/* ---------- hoja 11: el cafecito, contacto directo con Mimi ---------- */
.hoja__cuerpo.caf{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-areas:"texto" "ficha" "pie";align-content:start;gap:var(--aire)}
.caf > .texto{grid-area:texto}
.caf > .ficha-caf{grid-area:ficha}
.caf > .caf__pie{grid-area:pie}
.cafecito .titulo{font-size:clamp(1.5rem, min(6.4vw, 4vh), 2.5rem)}
.celebra{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:4px}
.celebra__t{margin:0;font-size:var(--t-chico)!important;font-weight:600;color:var(--salvia-tinta)!important}
/* en el celular los chips van en una sola fila que se desliza (siete chips en tres filas no caben
   en la hoja); el que queda cortado en el borde avisa que hay más */
.chips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px;margin:-4px}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:0 0 auto}
.desde-catalogo{font-size:var(--t-chico)!important}
.firma{margin:0;font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-style:italic;font-size:var(--t-entrada);line-height:1.45;color:var(--acento)}
.caf__pie{display:flex;flex-direction:column;gap:0}
.caf__pie .enlaces{flex-direction:column;align-items:flex-start;gap:0}

/* la ficha fucsia: una sola acción, pedirle el cafecito a Mimi */
.ficha-caf{
  margin:0;border-radius:6px 18px 18px 6px;padding:clamp(12px, 2vh, 22px) clamp(14px, 3vw, 24px);
  box-shadow:var(--sombra);display:flex;flex-direction:column;gap:clamp(6px, 1.2vh, 12px);
}
.ficha-caf fieldset{border:0;margin:0;padding:0;min-width:0}
.ficha-caf legend,.ficha-caf label{font-size:.875rem;font-weight:600;line-height:1.3;color:var(--sobre-acento)}
.ficha-caf legend{padding:0;margin-bottom:4px}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.op{position:relative;display:flex}
.op input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.op span{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:.3em;text-align:center;
  min-height:44px;padding:.3em .6em;border-radius:12px;border:1px solid var(--sobre-acento);
  font-size:.875rem;font-weight:600;line-height:1.2;color:var(--sobre-acento);cursor:pointer;
}
.op input:checked + span{background:var(--sobre-acento);color:var(--marfil)}
.op input:checked + span::before{content:"✓"}
.op input:focus-visible + span{outline:3px solid var(--teal);outline-offset:2px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.campo{display:flex;flex-direction:column;gap:3px;min-width:0}
.opc{font-weight:400}
.ficha-caf input[type=text],.ficha-caf input[type=number],.ficha-caf input[type=date]{
  width:100%;min-height:44px;padding:.4em .6em;border:1px solid var(--sobre-acento);border-radius:10px;background:var(--marfil);
  font:inherit;font-size:16px;color:var(--tinta);min-width:0;
}
.ficha-caf input[aria-invalid="true"]{border-width:2px}
.ficha-caf .boton{width:100%}
.ficha-caf .aviso{background:var(--marfil);color:var(--tinta);border-color:var(--sobre-acento)}
.ficha-caf .aviso a{color:var(--acento)}

/* ---------- contratapa ---------- */
.contratapa .tapa__marco{gap:clamp(8px, 2vh, 20px)}
.contratapa .logo{height:clamp(120px, 26vh, 280px)}
.contratapa .tapa__marco:has(.nota:not([hidden])) .logo{height:clamp(84px, 14vh, 170px)}
.nota{
  background:var(--marfil);color:var(--tinta);border-radius:6px 18px 18px 6px;padding:clamp(12px, 2.4vh, 22px) clamp(14px, 3vw, 28px);
  max-width:30em;text-align:left;box-shadow:0 18px 30px -18px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:8px;
  --am-color:var(--acento);--cf-color:var(--acento);
}
.nota h2{margin:0;font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-weight:500;font-size:var(--t-titulo);color:var(--salvia-tinta);line-height:1.1}
.nota p{margin:0;font-size:var(--t-texto);line-height:1.5;color:var(--suave)}
.nota a{color:var(--acento)}
.nota mark.falta{color:var(--oliva);border-color:color-mix(in srgb, var(--oliva) 70%, transparent)}
.contratapa .enlaces{justify-content:center;color:color-mix(in srgb, var(--marfil) 85%, transparent)}
.contratapa .enlaces a{color:var(--crema)}

/* ---------- cintas marcapáginas ---------- */
.cintas{list-style:none;margin:0;padding:0}
.cinta{
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:var(--salvia-tinta);color:var(--crema);font-family:var(--f-texto);font-weight:600;letter-spacing:.02em;
  border:1px solid transparent;
  box-shadow:-1px 1px 0 rgba(40,55,44,.35);
}
.cinta .cf{color:inherit;font-weight:500;font-size:1.12em;letter-spacing:0}
.cinta--cafecito{background:var(--acento);color:var(--tinta)}
.cinta--receta{background:var(--crema);color:var(--salvia-tinta)}
.cinta__n{font-family:var(--f-titulo);font-weight:600}

/* ---------- barra de hojeo ---------- */
.barra{display:none}
.indicador{grid-column:2;margin:0;font-size:var(--t-chico);line-height:1.3;color:var(--suave);text-align:center;letter-spacing:.02em}

/* ---------- avisos ---------- */
.aviso{margin:0;padding:.6em .8em;border-radius:8px;font-size:var(--t-chico);line-height:1.45;background:var(--papel);border:1px solid var(--borde);color:var(--tinta)}
.aviso a{color:var(--acento)}

/* ---------- pliego: contar mi experiencia (<dialog>) ---------- */
.pliego{
  border:0;padding:0;color:var(--tinta);background:var(--marfil);
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;
  background-image:repeating-linear-gradient(180deg, transparent 0 31px, var(--linea) 31px 32px);
}
.pliego::backdrop{background:color-mix(in srgb, var(--salvia-honda) 72%, transparent)}
.pliego form{height:100%;display:flex;flex-direction:column;padding:clamp(10px,2vh,22px) var(--pad-x) clamp(10px,2vh,18px)}
.pliego__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
.pliego__cab .pliego__t{margin:0;font-size:var(--t-chico);font-weight:600;color:var(--suave)}
.cerrar{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:transparent;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--salvia-tinta)}
.paso{border:0;margin:0;padding:0;min-width:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(var(--aire) * .9);padding-top:var(--aire)}
.paso[hidden]{display:none}
.paso > legend{padding:0;float:left;width:100%;font-family:var(--f-titulo);font-variation-settings:"SOFT" 100;font-weight:500;font-size:var(--t-titulo);color:var(--salvia-tinta);line-height:1.1;margin-bottom:2px}
.paso > legend + *{clear:both}
.pliego .campo > label,.pliego .campo > .etq{font-size:var(--t-chico);font-weight:600;color:var(--salvia-tinta)}
.pliego .campo input[type=text],.pliego .campo input[type=date],.pliego .campo select,.pliego .campo textarea{
  width:100%;min-height:44px;padding:.45em .7em;border:1px solid var(--borde);border-radius:8px;background:#fff;
  font:inherit;font-size:16px;line-height:1.45;color:var(--tinta);
}
.pliego .campo textarea{resize:none;min-height:0}
.ayuda{margin:0;font-size:var(--t-chico);line-height:1.45;color:var(--suave)}
.pliego .am{color:var(--acento)}
.pliego__pie{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:var(--aire)}
.boton--atras{background:transparent;color:var(--salvia-tinta);border-color:var(--borde)}
.check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:var(--t-chico);line-height:1.45;color:var(--suave)}
.check input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--salvia-tinta)}
.subir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.subir input[type=file]{position:absolute;opacity:0;width:1px;height:1px}
.miniaturas{display:flex;gap:6px;flex-wrap:wrap}
.miniaturas img{width:56px;height:56px;object-fit:cover;border-radius:4px;border:2px solid #fff;box-shadow:0 1px 3px rgba(40,55,44,.3)}

/* =====================================================================
   MODO HOJEO — solo con JS. Sin la clase, las hojas se apilan y se leen.
   ===================================================================== */
.js body{overflow:hidden;height:100dvh}
.js .libro{position:fixed;inset:0}
.js .hojas{position:absolute;inset:0 0 var(--barra) 0;perspective:2400px;overflow:clip}
.js .hoja{
  position:absolute;inset:0;overflow:clip;
  visibility:hidden;z-index:0;
  transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.js .hoja.es-actual{visibility:visible;z-index:2}
.js .hoja.es-debajo{visibility:visible;z-index:1}
.js .hoja.es-encima{visibility:visible;z-index:3}
.sombra{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, rgba(40,55,44,0), rgba(40,55,44,.35))}
.js .barra{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;
  position:absolute;left:0;right:0;bottom:0;height:var(--barra);padding:0 8px 0 12px;
  background:var(--papel-2);border-top:1px solid var(--borde);z-index:5;
}
.barra__tapa{justify-self:start;font-size:var(--t-chico);color:var(--salvia-tinta);text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.barra__tapa[hidden]{display:none}
.barra__flechas{grid-column:3;justify-self:end;display:flex;gap:4px}
.flecha{width:44px;height:44px;border-radius:50%;border:1px solid var(--borde);background:var(--marfil);cursor:pointer;color:var(--salvia-tinta);font-size:1.25rem;line-height:1}
.flecha:disabled{opacity:.3;cursor:default}
.pista{display:block;font-size:.75rem;color:var(--suave)}
.pista[hidden]{display:none}

/* cintas en el celular: pestañas de 44 px en el borde derecho, etiqueta en vertical de 13 px.
   Viven fuera de la barra: no se desplazan ni se esconden. */
.js .cintas{position:absolute;right:0;top:10px;z-index:6;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.js .cinta{
  writing-mode:vertical-rl;transform:rotate(180deg);
  width:44px;min-height:60px;padding:10px 0;font-size:.8125rem;line-height:1;
  border-radius:0 6px 6px 0;transition:width .2s ease;
}
.js .cinta[aria-current="true"]{width:52px}
.js .cinta__n{writing-mode:horizontal-tb;margin-bottom:4px;font-size:.85rem}
.cinta[hidden]{display:none!important}
/* en la tapa y la contratapa la cinta ciruela se pierde contra el ciruela: lleva filete champaña */
.js .libro[data-hoja="tapa"] .cinta:not(.cinta--cafecito):not(.cinta--receta),
.js .libro[data-hoja="contratapa"] .cinta:not(.cinta--cafecito):not(.cinta--receta){border-color:color-mix(in srgb, var(--crema) 70%, transparent)}

/* sin JS: las cintas quedan como índice al pie de la pantalla y la ficha del cafecito no existe */
html:not(.js) .cintas-nav{position:sticky;bottom:0;z-index:6;background:var(--salvia-honda);padding:6px 8px}
html:not(.js) .cintas{display:flex;flex-wrap:wrap;gap:4px}
html:not(.js) .cinta{padding:8px 12px;font-size:.8125rem;min-height:44px;border-radius:4px}
html:not(.js) .hoja{min-height:100vh}
html:not(.js) .hoja__cuerpo{height:auto}
html:not(.js) .foto{flex:0 0 auto;height:320px}
html:not(.js) .requiere-js{display:none}

/* ===================== el único breakpoint: 900px ===================== */
@media (min-width:900px){
  :root{
    --barra:60px;
    --pad-x:clamp(48px, 5vw, 72px);
    --pad-der:clamp(40px, 4vw, 64px);
    --t-titulo:clamp(2rem, 5.2vh, 3rem);
    --t-entrada:clamp(1.08rem, 2.7vh, 1.45rem);
    --t-texto:clamp(.98rem, 2.15vh, 1.1rem);
  }
  .hoja__cuerpo.dos{display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);align-items:center;gap:clamp(24px, 4vw, 56px)}
  .hoja__cuerpo.dos > .foto{height:100%}
  .hoja__cuerpo.dos > .texto{max-height:100%}
  .puertas{flex-direction:row;width:auto}
  .logo{height:clamp(200px, 44vh, 400px)}
  .hoja__cuerpo.caf{
    grid-template-columns:minmax(0, 1fr) minmax(0, .92fr);grid-template-areas:"texto ficha" "pie ficha";
    align-content:center;align-items:start;column-gap:clamp(24px, 4vw, 56px);row-gap:var(--aire);
  }
  .chips{flex-wrap:wrap;overflow:visible}
  .caf > .ficha-caf{align-self:center}
  .caf__pie{align-self:start}
  .pliego{
    width:min(720px, calc(100vw - 48px));height:min(760px, calc(100dvh - 48px));margin:auto;border-radius:6px;
    box-shadow:0 30px 80px rgba(40,55,44,.6);
  }
  .pliego form{padding:28px 44px 22px}

  /* el libro se apoya en la mesa: centrado, con cantos de hojas debajo */
  .js .libro{
    inset:auto;left:50%;top:50%;transform:translate(calc(-50% - 60px), -50%);
    width:min(1000px, calc(100vw - 270px));height:min(calc(100dvh - 40px), 880px);
  }
  .js .hojas{border-radius:3px 6px 6px 3px;
    box-shadow:2px 2px 0 var(--papel-2), 4px 4px 0 var(--marfil), 6px 6px 0 var(--papel-2), 0 30px 60px rgba(0,0,0,.45)}
  .js .barra{border-radius:0 0 6px 3px}
  /* cintas colgando del borde derecho de la hoja, etiqueta horizontal */
  .js .cintas{right:auto;left:100%;top:36px;gap:6px;align-items:flex-start}
  .js .cinta{
    writing-mode:horizontal-tb;transform:none;width:124px;min-height:44px;padding:0 18px 0 14px;justify-content:flex-start;
    font-size:.875rem;border-radius:0;clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
  }
  .js .cinta[aria-current="true"]{width:142px}
  .js .cinta__n{margin:0 0 0 6px}
  .js .cinta .cinta__txt{order:-1}
}

/* V4 · Salvia de cocina: la referencia elegida vive como libreta abierta.
   La fotografía es una preparación real del cliente; la muestra usa un kuchen ilustrativo. */
body{background:var(--papel)}
.hoja{background-color:var(--crema);background-image:none}
.tapa,.contratapa{background:var(--crema);color:var(--tinta)}
.tapa__marco{border:0}
.claim strong,.claim em{color:var(--salvia-tinta)}
.eventos,.eventos a,.credito,.credito a{color:var(--suave)}
.portada-abierta{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:10px;padding:0;text-align:center}
.portada__texto{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,20px);min-height:0}
.portada__marca{display:block;line-height:0}
.portada__marca .logo{height:clamp(94px,17vh,160px);width:auto;max-width:100%}
.portada__titulo{font-family:var(--f-titulo);font-weight:600;font-size:clamp(28px,min(7.7vw,4.7vh),66px);line-height:1.06;letter-spacing:-.035em;color:var(--salvia-tinta);margin:0;text-wrap:balance}
.portada__titulo em{font-weight:500}
.portada__bajada{font-size:clamp(14px,2vh,20px);margin:0;color:var(--tinta)}
.portada__texto .puertas{flex-direction:row;justify-content:center;flex-wrap:wrap;width:100%;gap:4px 18px}
.portada__accion{background:var(--acento);color:var(--crema);border-color:var(--acento)}
.portada__abrir{min-height:44px;display:inline-flex;align-items:center;font-size:var(--t-texto);color:var(--salvia-tinta);text-underline-offset:5px}
.portada__texto .eventos{display:none}
.portada__foto{margin:0;min-width:0;min-height:0;align-self:stretch;display:flex;flex-direction:column;background:var(--crema);padding:10px 10px 12px;box-shadow:var(--sombra);transform:rotate(1.4deg)}
.portada__foto img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 46%}
.portada__foto figcaption{font:italic 500 clamp(14px,2.1vh,24px)/1.4 var(--f-titulo);color:var(--oliva);padding-top:8px}
.ficha-caf{background:var(--papel-contacto);color:var(--tinta);border:1px solid var(--borde)}
.ficha-caf :where(legend,label,.op span){color:var(--tinta)}
.ficha-caf :where(input[type=text],input[type=number],input[type=date],.op span){border-color:var(--borde)}
.op input:checked + span{background:var(--salvia-tinta);color:var(--crema)}
.cinta{background:var(--lino);color:var(--salvia-tinta);box-shadow:var(--sombra)}
.cinta[aria-current="true"]{background:var(--salvia-tinta);color:var(--crema)}
.cinta--cafecito{background:var(--acento);color:var(--crema)}
.cinta--receta{background:var(--salvia-tinta);color:var(--crema)}
.cinta[data-cinta="historia"]{background:var(--oliva);color:var(--crema)}
.js .cinta{clip-path:none;border-radius:0 8px 8px 0}
.js .hojas{background-image:url('/assets/landing/libreta-salvia-V4.webp');background-size:200% 100%;background-position:left center;border-radius:4px 14px 14px 4px}
.js .hoja{background:transparent;padding:28px 60px 18px 24px}
.js .tapa{padding:30px 64px 16px 25px}
.js .tapa__marco{grid-template-rows:auto minmax(90px,1fr);gap:16px}
.js .tapa .credito{font-size:11px;margin:4px 0 0}
.js .tapa .credito a{min-height:32px}
.js .barra{background:var(--crema);color:var(--salvia-tinta)}
.contratapa .enlaces,.contratapa .enlaces a{color:var(--salvia-tinta)}
html:not(.js) .portada__foto{height:400px}
@media(min-width:900px){
  .js .libro{left:50%;top:50%;inset:auto;left:50%;top:50%;transform:translate(calc(-50% - 28px),-50%);width:min(1320px,calc(100vw - 150px));height:min(940px,calc(100dvh - 36px))}
  .js .hojas{background-size:100% 100%;box-shadow:0 16px 40px -18px rgba(40,55,44,.35);border-radius:10px 16px 16px 10px}
  .js .hoja{padding:6% 6% 4%;background:transparent}
  .js .tapa{padding:6% 7% 3% 5%}
  .js .tapa__marco{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(40px,5vw,90px)}
  .portada__texto{gap:clamp(12px,2.4vh,24px)}
  .portada__marca .logo{height:clamp(130px,27vh,286px)}
  .portada__titulo{font-size:clamp(32px,min(4.5vw,6.6vh),68px)}
  .portada__bajada{max-width:26ch;font-size:clamp(15px,1.5vw,21px)}
  .portada__foto{margin:0;align-self:stretch;max-height:100%;padding:14px 14px 20px}
  .portada__foto img{flex:1;min-height:0;height:0;object-position:center 43%}
  .portada__foto figcaption{flex:0 0 auto;padding-top:14px}
  .portada__texto .eventos{display:block;font-size:11px;max-width:40ch;line-height:1.3}
  .portada__texto .eventos a{min-height:28px}
  .js .tapa .credito{position:absolute;bottom:6px;left:0;right:0;font-size:11px}
  .js .barra{height:48px;--barra:48px}
  .js .cintas{top:10%;gap:8px}
  .js .cinta{width:72px;min-height:66px;padding:10px 6px;text-align:center;justify-content:center;font-size:12px;border-radius:0 9px 9px 0}
  .js .cinta[aria-current="true"]{width:82px}
}
@media(max-width:899px) and (max-height:720px){
  .portada__marca .logo{height:76px}
  .portada__titulo{font-size:26px}
  .portada__texto{gap:8px}
  .js .tapa__marco{gap:8px;grid-template-rows:auto minmax(72px,1fr)}
  .portada__foto{padding:6px}
  .portada__foto figcaption{font-size:12px;padding-top:4px}
}

/* V6 · encuadernación fija y papel flexible, sin perspectiva expansiva. */
:root{--libro-abierto:no}
.js .hojas{perspective:none}
.js .hoja.hoja-en-giro{visibility:hidden!important}
.papel-giro{position:absolute;overflow:hidden;pointer-events:none;z-index:9;isolation:isolate;border-radius:6px}
.papel-giro__fija,.papel-giro__banda,.papel-giro__cara{position:absolute;top:0;height:100%}
.papel-giro__fija{overflow:hidden;background:var(--crema);z-index:0}
.papel-giro__banda{transform-style:preserve-3d;will-change:transform}
.papel-giro__cara{inset:0;overflow:hidden;background:var(--crema);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.papel-giro__dorso{transform:rotateY(180deg)}
.papel-giro__cara::after{content:"";position:absolute;inset:0;background:rgba(40,55,44,var(--sombra-papel,0));pointer-events:none}
.papel-giro__textura{position:absolute;background-repeat:no-repeat}
.js .hoja.papel-giro__contenido{inset:auto;position:absolute;visibility:visible;z-index:auto;transform:none!important;background:transparent;overflow:hidden;backface-visibility:visible}
.papel-giro__sombra{position:absolute;top:0;height:100%;z-index:1;background:linear-gradient(90deg,rgba(40,55,44,.55),transparent);pointer-events:none}
@media(min-width:900px){:root{--libro-abierto:si}}
/* La ficha clara usa tinta oscura; el botón conserva sus nombres en crema. */
.ficha-caf legend,.ficha-caf label,.ficha-caf .op span{color:var(--tinta)}
.ficha-caf .op span,.ficha-caf input[type=text],.ficha-caf input[type=number],.ficha-caf input[type=date]{border-color:var(--borde)}
.op input:checked + span{color:var(--crema)}
.boton .am,.boton .cf{color:inherit}
/* La hoja quieta se pinta en plano; solo la que gira necesita ocultar el dorso. */
.js .hoja{overflow:hidden;backface-visibility:visible;-webkit-backface-visibility:visible}
@media(max-width:899px){
 .js .hojas{background-size:200% calc(100% + 44px);background-position:-22px -22px}
}

/* V7 · la bienvenida es la tapa de tela. La historia empieza al abrir. */
.js .libro[data-hoja="tapa"] .hojas,.js .libro.tapa-en-giro .hojas{background-image:none;box-shadow:none}
.js .libro[data-hoja="tapa"] .cintas-nav,.js .libro[data-hoja="tapa"] .barra{visibility:hidden;pointer-events:none}
.js .tapa{
 left:4%;top:3%;right:auto;bottom:auto;width:92%;height:92%;padding:30px 24px 32px;
 color:var(--crema);border:1px solid rgba(40,55,44,.3);border-radius:6px 20px 20px 6px;
 background-color:var(--salvia);
 background-image:linear-gradient(90deg,rgba(40,55,44,.22),transparent 6%,transparent 97%,rgba(40,55,44,.18)),repeating-linear-gradient(0deg,rgba(247,241,229,.055) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(40,55,44,.055) 0 1px,transparent 1px 3px);
 box-shadow:4px 3px 0 var(--lino),7px 5px 0 var(--crema),10px 7px 0 var(--lino),0 20px 38px -14px rgba(40,55,44,.5);
}
.js .tapa::before{content:"";position:absolute;inset:13px;border:1px solid rgba(247,241,229,.48);border-radius:2px 12px 12px 2px;pointer-events:none}
.js .tapa__marco.portada-cerrada{height:100%;display:flex;align-items:center;justify-content:center;padding:0;border:0}
.portada-cerrada .portada__texto{gap:clamp(14px,2.2vh,24px);width:100%}
.portada-cerrada .portada__marca{padding:10px 14px;background:var(--crema);border-radius:18px;box-shadow:0 4px 16px rgba(40,55,44,.12)}
.portada-cerrada .portada__marca .logo{height:clamp(110px,20vh,180px)}
.portada-cerrada .portada__titulo{color:var(--crema);font-size:clamp(30px,4.6vh,46px);line-height:1.12}
.portada-cerrada .portada__bajada{color:var(--crema);font-size:16px;max-width:26ch}
.portada-cerrada .puertas{flex-direction:column;gap:6px}
.portada-cerrada .portada__accion{background:var(--crema);color:var(--salvia-tinta);border-color:var(--crema)}
.portada-cerrada .portada__abrir{color:var(--crema)}
.portada-cerrada .eventos,.portada-cerrada .eventos a{color:var(--crema)}
.js .tapa .credito{position:absolute;bottom:17px;left:0;right:0;color:var(--crema);text-align:center;font-size:11px}
.js .tapa .credito a{color:var(--crema)}
.tapa-giro{position:absolute;z-index:10;pointer-events:none;transform-origin:left center;transform-style:preserve-3d}
.tapa-giro__cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}
.tapa-giro__dorso{transform:rotateY(180deg);overflow:hidden;background:var(--crema);border-radius:12px 2px 2px 12px;box-shadow:0 2px 12px rgba(40,55,44,.18)}
.js .tapa-giro .tapa{inset:0;width:100%;height:100%;visibility:visible}
.js .tapa-giro .tapa.hoja-en-giro{visibility:visible!important}
.js .hoja.tapa-giro__historia{position:absolute;visibility:visible;transform:none!important;background:transparent;z-index:1}
.tapa-giro__textura{position:absolute;background-repeat:no-repeat}
.fondo-apertura{position:absolute;inset:0;pointer-events:none;z-index:0;background:url('/assets/landing/libreta-salvia-V4.webp') left center/200% calc(100% + 44px);background-position:-22px -22px}
@media(min-width:900px){
 .js .tapa{left:27.2%;top:5.4%;width:45.6%;height:87.6%;padding:36px 40px 44px}
 .portada-cerrada .portada__marca .logo{height:clamp(135px,20vh,205px)}
 .portada-cerrada .puertas{flex-direction:row;gap:14px}
 .portada-cerrada .eventos{font-size:11px;max-width:36ch;line-height:1.5}
 .fondo-apertura{background-size:100% 100%;background-position:0 0}
}
@media(max-height:720px){
 .portada-cerrada .portada__texto{gap:10px}
 .portada-cerrada .portada__marca .logo{height:88px}
 .portada-cerrada .portada__titulo{font-size:28px}
 .js .tapa{padding-top:25px;padding-bottom:34px}
}

.portada-cerrada .portada__abrir{justify-content:center}


/* V9 · cuaderno manuscrito: la composición acompaña el sentido de cada hoja. */
@font-face{font-family:AmaliaTitulos;src:url('/assets/marca/fuentes/caveat-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:AmaliaNotas;src:url('/assets/marca/fuentes/patrick-hand-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--f-mano:AmaliaTitulos,cursive;--f-nota:AmaliaNotas,cursive}
.hoja--cuaderno .texto{gap:clamp(12px,2.3vh,24px);justify-content:flex-start;align-self:stretch}
.hoja--cuaderno .texto .cuaderno-meta{font:600 clamp(17px,2.5vh,23px)/1.2 var(--f-mano);color:var(--oliva);margin:0 0 2px;text-align:right;padding-right:6px}
.cuaderno-numero{font-variant-numeric:tabular-nums;margin-left:10px;color:var(--suave)}
.hoja--cuaderno .titulo{font-family:var(--f-mano);font-weight:600;font-size:clamp(40px,6.3vh,66px);line-height:.98;letter-spacing:0;margin:0 0 12px;padding:0 0 15px;border:0;border-bottom:1px solid var(--borde);max-width:95%}
.hoja--cuaderno .titulo :is(.am,.cf){font:inherit;color:inherit}
.hoja--cuaderno .texto p{font:400 clamp(20px,2.7vh,27px)/1.48 var(--f-nota);color:var(--tinta);max-width:33ch}
.hoja--cuaderno .texto p.entrada{font:400 clamp(24px,3.4vh,34px)/1.3 var(--f-mano);color:var(--salvia-tinta);max-width:28ch}
.hoja--cuaderno .texto p:not(.entrada):not(.cuaderno-meta):not(.apunte):nth-of-type(even){margin-left:clamp(8px,1.8vw,25px)}
.hoja--cuaderno .texto p :is(.am,.cf,.rc){font-family:inherit}
.frase-cariño{display:block;font:600 clamp(28px,3.9vh,40px)/1.12 var(--f-mano);max-width:23ch;margin:10px 0 0}
.hoja--cuaderno .texto p.cita,.hoja--cuaderno .texto p.apunte{font:600 clamp(27px,3.7vh,38px)/1.2 var(--f-mano);align-self:flex-end;max-width:23ch;color:var(--oliva);padding:6px 0 0;border:0;margin:0 0 0 20px}
.cuaderno-subtitulo{font:600 clamp(24px,3.2vh,32px)/1.2 var(--f-mano);color:var(--oliva);margin:0}
.lista-cuaderno{list-style:none;margin:0;padding:0;display:grid;gap:7px;font:400 clamp(20px,2.7vh,27px)/1.35 var(--f-nota);color:var(--tinta)}
.lista-cuaderno > li{padding:2px 0 5px 15px;border-bottom:1px solid var(--linea)}
.lista-cuaderno--dos{grid-template-columns:1fr 1fr;gap:6px 15px}
.lista-cuaderno .sello{font:500 10px var(--f-texto)}
.hoja--cuaderno .roles.lista-equipo{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;margin:0;padding:0}
.lista-equipo li{border-bottom:1px solid var(--linea);display:flex;align-items:center}
.hoja--cuaderno .lista-equipo button{font:400 22px/1.2 var(--f-nota);border:0;border-radius:0;background:transparent;color:var(--tinta);text-align:left;padding:7px 0;min-height:44px;width:100%}
.hoja--cuaderno .lista-equipo button[aria-pressed=true]{color:var(--oliva);text-decoration:underline;text-underline-offset:5px}
.lista-equipo button[aria-pressed=true]::before{display:none}
.lista-equipo button[aria-pressed=true] mark.falta{color:var(--oliva);border-color:var(--borde)}
.hoja--cuaderno .pasos{display:grid;grid-template-columns:1fr;gap:3px;list-style:decimal;list-style-position:inside;margin:0;padding:0 0 0 10px}
.hoja--cuaderno .pasos li{display:list-item;border:0;background:transparent;border-radius:0;padding:0;min-height:0;font:400 clamp(21px,2.8vh,28px)/1.45 var(--f-nota);color:var(--tinta)}
.hoja--cuaderno .pasos li::before,.hoja--cuaderno .pasos li::after{display:none}
.hoja--cuaderno .nota-margen{font:600 clamp(25px,3.5vh,36px)/1.16 var(--f-mano);color:var(--oliva);max-width:22ch;margin:25px 5% 0 14%;transform:rotate(-3deg);text-align:center;flex:none}
.hoja--cuaderno .foto{flex-wrap:wrap;align-content:center;gap:3%}
.hoja--cuaderno .polaroid{height:min(64cqh,400px,97cqw)}
.hoja--cuaderno .foto:has(> .polaroid + .polaroid) > .polaroid{height:min(52cqh,310px,54cqw)}
.hoja--cuaderno .polaroid.pendiente{height:min(55cqh,300px,82cqw);background:var(--crema);box-shadow:0 4px 14px rgba(40,55,44,.1);border:1px solid var(--borde)}
.hoja--cuaderno .polaroid.pendiente .hueco{background:none;font:600 28px var(--f-mano);color:var(--suave)}
.hoja--cuaderno .polaroid figcaption{font:400 14px/1.2 var(--f-nota)}
.hoja--cuaderno .ficha .polaroid{height:min(60cqh,260px,52cqw)}
.hoja--cuaderno .texto mark.falta{font-size:.66em;font-family:var(--f-texto)}
.hoja--cuaderno .vacio{background:transparent;border:0;border-left:1px solid var(--borde);border-radius:0;padding:8px 0 8px 22px;margin-top:10px}
.barra__lectura{grid-column:2;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.ver-texto{background:none;border:0;color:var(--salvia-tinta);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 5px;cursor:pointer;white-space:nowrap}
.hoja--cuaderno.cafecito .texto{gap:var(--aire);justify-content:center}
.hoja--cuaderno.cafecito .titulo{font-size:clamp(33px,4.8vh,48px);line-height:1.06;padding-bottom:10px;margin-bottom:0}
.hoja--cuaderno.cafecito .texto p:not(.cuaderno-meta){font-family:var(--f-texto);font-size:var(--t-texto);line-height:1.45;margin-left:0;max-width:none}
@media(min-width:900px){
 .hoja--cuaderno .hoja__cuerpo.dos{align-items:start;padding-top:12px}
 .hoja--cuaderno .hoja__cuerpo.dos > .foto{height:100%;align-self:stretch;padding-bottom:24px}
}
@media(max-width:899px){
 .hoja--cuaderno .texto{gap:10px}
 .hoja--cuaderno .titulo{font-size:clamp(34px,5.4vh,46px);padding-bottom:7px;margin-bottom:0;line-height:.97}
 .hoja--cuaderno .texto .cuaderno-meta{font-size:17px;margin:0;text-align:left}
 .hoja--cuaderno .texto p{font-size:clamp(18px,2.5vh,22px);line-height:1.35;max-width:none}
 .hoja--cuaderno .texto p.entrada{font-size:clamp(23px,3.2vh,28px);line-height:1.18}
 .frase-cariño{font-size:29px;line-height:1.1;margin-top:6px}
 .hoja--cuaderno .texto p.cita,.hoja--cuaderno .texto p.apunte{font-size:27px;line-height:1.12}
 .cuaderno-subtitulo{font-size:25px}
 .lista-cuaderno{font-size:20px;line-height:1.25;gap:3px}
 .lista-cuaderno > li{padding:1px 0 3px 8px}
 .hoja--cuaderno .lista-equipo button{font-size:17px;line-height:1.15;padding:4px 0}
 .hoja--cuaderno .pasos li{font-size:21px;line-height:1.25}
 .hoja--cuaderno .nota-margen{font-size:24px;line-height:1.1;margin:10px 2% 0 8%;max-width:23ch}
 .hoja--cuaderno .polaroid{height:min(68cqh,300px,95cqw)}
 .hoja--cuaderno .polaroid.pendiente{height:min(58cqh,235px,80cqw)}
 .hoja--cuaderno .foto{gap:5px;align-content:center}
 .hoja--cuaderno .foto .nota-margen{flex-basis:100%}
 .hoja--cuaderno.cafecito .titulo{font-size:clamp(29px,4vh,35px);padding-bottom:4px;line-height:1.03}
 .hoja--cuaderno.cafecito .texto{gap:5px}
 .hoja--cuaderno.cafecito .hoja__cuerpo{gap:6px}
 .hoja--cuaderno.cafecito .ficha-caf{padding-block:12px}
 .barra__lectura{gap:5px}
 .libro[data-escribiendo] .indicador{display:none}
}
@media(prefers-reduced-motion:reduce){.hoja--cuaderno [style*="clip-path"]{clip-path:none!important}}

.hoja--cuaderno .texto p:not(.cuaderno-meta):not(.entrada):not(.apunte):not(.cita){text-decoration:underline;text-decoration-color:var(--linea);text-decoration-thickness:1px;text-underline-offset:.3em}
.hoja--cuaderno.cafecito .texto p{text-decoration:none}
/* En pantallas bajas, la lectura continúa dentro de la hoja. */
.js .hoja--cuaderno{overflow-x:hidden;overflow-y:auto}
@media(max-width:899px){.hoja--cuaderno .foto{padding-bottom:14px}}
@media(max-width:899px) and (max-height:740px){
 .hoja--cuaderno .hoja__cuerpo.dos{height:auto;min-height:100%}
 .hoja--cuaderno .foto{height:260px;min-height:260px;flex:0 0 260px}
}
/* V10 · cada pliego tiene su propia composición de libreta. */
.hoja--editorial .texto{gap:clamp(10px,1.6vh,18px);min-height:0}
.hoja--editorial .titulo{font-size:clamp(39px,5.7vh,59px);line-height:1.02;padding-bottom:12px;margin-bottom:5px}
.hoja--editorial .texto .cuaderno-meta{font-size:20px}
.hoja--editorial .texto p{font-size:clamp(20px,2.5vh,25px);line-height:1.4;max-width:none;margin-left:0!important;text-decoration:none!important}
.hoja--editorial .texto p.entrada{font-size:clamp(25px,3.2vh,33px);line-height:1.2}
.hoja--editorial .foto{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;gap:20px;padding:0;min-height:0}
.hoja--editorial .foto > *{flex-shrink:0}
.hoja--editorial .foto .polaroid{height:min(45cqh,330px,91cqw);margin:0;flex:0 0 auto}
.hoja--editorial .foto .polaroid.pendiente{height:min(39cqh,260px,78cqw);background:var(--crema)}
.hoja--editorial .foto .nota-margen{font-size:clamp(26px,3.2vh,33px);line-height:1.18;transform:none;text-align:left;margin:0;max-width:none}
.hoja--editorial .foto p:not(.nota-margen){font:400 clamp(21px,2.7vh,27px)/1.35 var(--f-nota);margin:0;color:var(--tinta)}
.rotulo-editorial{font:600 26px/1.15 var(--f-mano);color:var(--oliva);margin:0 0 13px;padding-bottom:7px;border-bottom:1px solid var(--borde)}
.cuadro-apunte,.cuadro-servicio,.cuadro-acompanar{padding:22px 25px;border:1px solid var(--borde);background:var(--crema);border-radius:5px;width:min(100%,430px);box-shadow:0 5px 16px -10px rgba(40,55,44,.2)}
.cuadro-apunte--miel{background:#EEE2CC;border-color:#D3C3A4}
.cuadro-apunte--salvia{background:#E2E8DC;border-color:#ADBCA2}
.frase-destacada{border:1px solid var(--borde);padding:24px 22px;background:rgba(247,241,229,.72)}
.frase-destacada .frase-cariño{font-size:clamp(30px,3.8vh,39px);margin-top:14px}
.recuadro-lineas{padding:25px 22px;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.pie-de-foto{border-left:3px solid var(--salvia);padding:8px 0 8px 20px;width:85%}
.fichas-recetario .lista-cuaderno{gap:12px;margin:0}
.fichas-recetario li{padding:14px 18px;border:1px solid var(--borde);background:var(--crema)}
.fichas-recetario li:last-child{padding:7px 0;background:transparent;border:0}
.tarjeta-mimi{padding:24px;background:#EEE2CC;border:1px solid #D3C3A4}
.panel-equipo{border:1px solid var(--borde);padding:8px 18px;background:rgba(247,241,229,.62)}
.hoja--editorial .lista-equipo button{font-size:20px;line-height:1.2;min-height:48px}
.cuadro-servicio p + p{margin-top:13px!important}
.panel-pasos{padding:18px 24px;border:1px solid var(--salvia);background:rgba(247,241,229,.75)}
.hoja--editorial .panel-pasos .pasos{gap:7px;padding:0}
.hoja--editorial .panel-pasos li{padding:7px 0;border-bottom:1px solid var(--linea);font-size:26px}
.panel-montaje{padding:18px;border:1px solid var(--salvia);background:rgba(247,241,229,.75)}
.tarjetas-carrito{counter-reset:tarjeta;display:grid;gap:16px}
.hoja--editorial .tarjetas-carrito p{counter-increment:tarjeta;position:relative;border:1px solid var(--borde);padding:20px 20px 20px 58px;background:#EEE2CC}
.paso-carrito::before{content:counter(tarjeta);position:absolute;left:20px;top:14px;font:600 38px var(--f-mano);color:var(--oliva)}
.panel-testimonios{padding:22px;border:1px solid var(--borde);background:var(--crema);min-height:200px}
.panel-testimonios .vacio{border:0;padding:0;margin:0}
.foto-compartida{height:42%;width:100%;display:flex;justify-content:center}
.foto-compartida:empty{display:none}
.hoja--editorial .tarjeta-invitacion{padding:25px 22px;background:rgba(247,241,229,.75);border:1px solid var(--borde)}
.hoja--editorial .tarjeta-invitacion .titulo{font-size:clamp(34px,4.5vh,46px)}
.detalle-cuaderno{display:block;width:175px;height:94px;background-position:center;background-size:contain;background-repeat:no-repeat;flex-shrink:0;pointer-events:none;margin:12px auto 0;opacity:.94}
.detalle-utensilios{background-image:url('/assets/landing/ilustraciones/utensilios-V1.png')}
.detalle-ingredientes{background-image:url('/assets/landing/ilustraciones/ingredientes-V1.png');width:116px;height:116px}
.pagina--memoria .detalle-cuaderno,.pagina--editorial .detalle-cuaderno,.pagina--postales .detalle-cuaderno{margin-top:auto}
.pagina--editorial .foto .polaroid{height:min(64cqh,430px,98cqw)}
.pagina--fichas .cuadro-apunte{padding:30px;width:95%}
.pagina--fichas .foto .polaroid.pendiente{height:min(30cqh,210px,60cqw)}
.pagina--pasos .cuadro-apunte{align-self:flex-end;width:94%}
.pagina--collage .foto,.pagina--cuadros .foto{flex-direction:row;flex-wrap:wrap;align-content:center;gap:14px}
.pagina--collage .foto>.polaroid,.pagina--cuadros .foto>.polaroid{height:min(37cqh,270px,52cqw)}
.pagina--collage .cuadro-acompanar,.pagina--cuadros .cuadro-apunte{flex-basis:100%;width:100%}
.cuadro-acompanar .cuaderno-subtitulo{font-size:29px;margin:0 0 10px}
.pagina--visitas .foto .detalle-cuaderno{width:150px;height:150px;margin-top:22px}
@media(min-width:900px){
 .hoja--editorial .hoja__cuerpo.dos{padding-top:0;align-items:stretch;grid-template-areas:"relato imagen";grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hoja--editorial .dos>.texto{grid-area:relato;height:100%}
 .hoja--editorial .dos>.foto{grid-area:imagen;padding-bottom:0;height:100%}
 .pagina--editorial .hoja__cuerpo.dos,.pagina--postales .hoja__cuerpo.dos{grid-template-areas:"imagen relato"}
 .pagina--editorial .foto{padding-right:18px}
 .pagina--editorial .texto{padding-top:22px}
 .pagina--postales .texto{justify-content:center}
 .pagina--memoria .foto{padding-top:35px}
}
@media(max-width:899px){
 .hoja--editorial .hoja__cuerpo.dos{height:auto;min-height:100%;gap:15px}
 .hoja--editorial .texto{gap:10px}
 .hoja--editorial .titulo{font-size:36px;margin:0;padding-bottom:8px;max-width:100%}
 .hoja--editorial .texto .cuaderno-meta{font-size:17px}
 .hoja--editorial .texto p{font-size:20px;line-height:1.25}
 .hoja--editorial .texto p.entrada{font-size:25px;line-height:1.18}
 .frase-destacada{padding:17px}
 .frase-destacada .frase-cariño{font-size:29px;margin-top:10px}
 .hoja--editorial .foto{height:auto;min-height:0;container-type:inline-size;flex:0 0 auto;gap:13px;padding:0 0 12px}
 .hoja--editorial .foto .polaroid,.pagina--editorial .foto .polaroid{height:220px;max-width:90%}
 .hoja--editorial .foto .polaroid.pendiente{height:185px}
 .hoja--editorial .foto .nota-margen{font-size:27px;line-height:1.14}
 .hoja--editorial .foto p:not(.nota-margen){font-size:21px;line-height:1.25}
 .cuadro-apunte,.cuadro-servicio,.cuadro-acompanar{width:100%;padding:17px}
 .rotulo-editorial{font-size:24px;margin-bottom:10px}
 .recuadro-lineas{padding:17px}
 .tarjeta-mimi{padding:17px}
 .fichas-recetario li{padding:9px 13px}
 .panel-equipo{padding:4px 12px}
 .hoja--editorial .lista-equipo button{font-size:17px;min-height:44px}
 .panel-pasos{padding:10px 18px}
 .hoja--editorial .panel-pasos li{font-size:22px;padding:4px 0}
 .panel-montaje{padding:12px}
 .hoja--editorial .tarjetas-carrito p{padding:15px 15px 15px 47px}
 .paso-carrito::before{left:14px;top:10px;font-size:32px}
 .panel-testimonios{padding:17px;min-height:150px}
 .detalle-cuaderno{width:120px;height:60px;margin:8px auto!important}
 .detalle-ingredientes{width:75px;height:75px}
 .pagina--collage .foto,.pagina--cuadros .foto{display:flex;flex-direction:row;flex-wrap:wrap}
 .pagina--collage .foto>.polaroid,.pagina--cuadros .foto>.polaroid{height:152px;display:flex!important}
 .pagina--collage .cuadro-acompanar,.pagina--cuadros .cuadro-apunte{flex-basis:100%}
 .pagina--collage .detalle-cuaderno{display:none}
 .pagina--fichas .foto .polaroid.pendiente{height:160px}
 .pagina--fichas .cuadro-apunte{padding:18px;width:100%}
 .pagina--visitas .foto .detalle-cuaderno{width:88px;height:88px;margin:5px auto 0}
 .hoja--editorial .tarjeta-invitacion{padding:12px}
 .hoja--editorial .tarjeta-invitacion .titulo{font-size:30px}
 .hoja--editorial.cafecito .texto p:not(.cuaderno-meta){font-size:15px}
}
/* El texto entra oculto también en las caras de papel que se usan durante el giro. */
.js:not(.edicion) .hoja[data-escritura="pendiente"] [data-trazo]{clip-path:inset(0 100% 100% 0)}
@media(prefers-reduced-motion:reduce){.js .hoja[data-escritura] [data-trazo]{clip-path:none!important}}
.pagina--collage .titulo{font-family:var(--f-texto);font-size:clamp(29px,4vh,41px);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-transform:uppercase}
.pagina--collage .texto .cuaderno-meta{font-family:var(--f-texto);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:899px){.pagina--collage .titulo{font-size:29px}.pagina--collage .texto .cuaderno-meta{font-size:10px}}
@media(max-width:899px){
 .pagina--memoria .frase-destacada{padding:14px}
 .pagina--memoria .foto .polaroid.pendiente{height:170px}
 .pagina--memoria .foto .cuadro-apunte{padding:15px}
 .pagina--fichas .foto .polaroid.pendiente{height:130px}
 .pagina--fichas .fichas-recetario li{padding-block:7px}
 .pagina--fichas .cuadro-apunte{padding:16px}
 .pagina--fichas .foto .nota-margen{font-size:25px}
 .pagina--recuadros .foto .polaroid.pendiente{height:130px}
 .pagina--recuadros .foto .ficha__texto p{font:400 14px/1.35 var(--f-texto)}
 .pagina--recuadros .cuadro-servicio{padding:14px}
 .pagina--recuadros .cuadro-servicio .rotulo-editorial{font-size:22px}
 .pagina--pasos .detalle-cuaderno{display:none}
 .pagina--pasos .panel-pasos .pasos{grid-template-columns:1fr 1fr;gap:4px 12px}
 .pagina--pasos .panel-pasos li{font-size:21px}
 .pagina--pasos .foto .polaroid{height:180px}
 .pagina--pasos .foto .nota-margen{font-size:25px}
}
@media(max-width:899px){
 .pagina--recuadros .foto .polaroid{height:105px!important}
 .pagina--recuadros .cuadro-servicio{padding:12px}
}
.pagina--recuadros .foto>.ficha{height:auto;max-height:45%;flex:0 0 auto}
@media(max-width:899px){.pagina--recuadros .foto>.ficha{max-height:none}}
@media(min-width:900px) and (max-height:850px){
 .hoja--editorial .texto{gap:10px}
 .hoja--editorial .titulo{padding-bottom:7px;margin-bottom:2px}
 .detalle-cuaderno{height:54px}
 .detalle-ingredientes{height:72px}
 .hoja--editorial .panel-pasos li{font-size:20px;padding:3px 0}
 .panel-pasos{padding:13px 20px}
}

/* V11 · tapa y celebraciones por fuera de la libreta. */
.escena-libro{position:relative}
.js .escena-libro{height:100dvh}
.js body.en-tapa{height:auto;overflow-y:auto}
.js body.en-tapa .escena-libro>.libro{position:absolute}
.celebraciones-fuera{max-width:1160px;margin:auto;padding:12px 28px 64px;color:var(--crema)}
.js body:not(.en-tapa) .celebraciones-fuera{display:none}
.celebraciones-fuera .ceja{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--lino)}
.celebraciones-fuera h2{font:500 clamp(30px,4vw,46px)/1.1 var(--f-titulo);margin:0 0 30px}
.celebraciones-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.celebracion-tarjeta{display:flex;flex-direction:column;padding:26px;gap:14px;border:1px solid var(--lino);border-radius:3px 16px 4px 4px;color:var(--tinta);background:var(--marfil);text-decoration:none;box-shadow:3px 3px 0 var(--oliva)}
.celebracion-tarjeta h3{font:500 25px var(--f-titulo);color:var(--salvia-tinta);margin:0}
.celebracion-tarjeta p{font-size:15px;line-height:1.6;margin:0;flex:1}
.celebracion-tarjeta span{font-size:14px;text-decoration:underline;text-underline-offset:4px;color:var(--salvia-tinta)}
.credito-exterior{text-align:center;font-size:12px;margin-top:32px}
.portada__evento{position:absolute;top:30px;right:28px;z-index:2;font-size:13px;min-height:44px;padding:8px 16px}
.portada__viaje{position:absolute;bottom:48px;right:28px;max-width:230px;font-family:var(--f-titulo);font-style:italic;font-size:20px;line-height:1.2;text-align:right;text-decoration:none;gap:10px;min-height:48px}
.portada__viaje span{font-size:28px}
.portada-cerrada .portada__texto{padding:52px 0 70px}
.reserva-titulo{font-family:var(--f-cuaderno,var(--f-titulo));font-size:30px;color:var(--salvia-tinta);margin:0 0 8px}
@media(max-width:899px){.celebraciones-grid{grid-template-columns:1fr}.celebraciones-fuera{padding:20px 24px 48px}.portada__viaje{right:24px;font-size:19px}.portada__evento{top:24px;right:24px}}
@media(max-height:700px){.portada-cerrada .portada__texto{gap:8px}.portada-cerrada .portada__marca .logo{height:90px}.portada-cerrada .portada__titulo{font-size:28px}.portada__viaje{bottom:38px;font-size:17px}.portada__evento{top:20px}}

.celebraciones-fuera{color:var(--tinta)}
.celebraciones-fuera .ceja{color:var(--oliva)}
.tapa .portada__viaje{color:var(--crema)}
.tapa .portada__evento{background:var(--crema);border-color:var(--crema);color:var(--salvia-tinta)}