/* =============================================================================
   piel.css - Ruby's Pan Dulce. Modelo RETAIL / TIENDA, formato «EL MOSTRADOR».

   El quinto modelo y el tercer formato. Aqui no se reserva ni se cotiza: el
   PRODUCTO es la pagina, y la pagina se recorre de lado como se recorre una
   vitrina.

   Es la quinta temperatura del Estudio, y la primera con una base SATURADA en
   vez de casi-blanca o casi-negra:
     Gumba's    calida  oscura    espresso y ambar
     S&S Tire   fria    oscura    negro frio y rojo
     Keystone   calida  clara     papel y verde
     Impression fria    clara     palido y ciruela
     Ruby's     CREMA DE MASA, cacao y EL ROSA DE LA CONCHA

   El rosa no es decoracion ni es kitsch: es el color exacto del producto que
   la panaderia vende mas. Se usa poco y sobre una base seria, que es lo que lo
   separa de una fiesta infantil.

   Contrastes medidos ANTES de escribir una linea:
     cacao   #2A1C14 sobre masa #F7F0E4 -> 14,54:1
     rosa    #A8305B sobre masa         ->  5,72:1  (y masa encima, 5,72)
     rosa    #F0A2C0 sobre cacao        ->  8,34:1
     apagado #6B5A4C sobre masa         ->  5,81:1
     apagado #B3A296 sobre cacao        ->  6,69:1
   ========================================================================== */

/* Fraunces tiene eje SOFT: se ablandan los remates lo justo para que la letra
   se lea hecha a mano sin perder el oficio. Karla para el texto, que es una
   grotesca con una pizca de rareza y pesa 24 KB. */
@font-face{
  font-family:"Fraunces"; src:url(../fonts/fraunces-latin.woff2) format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Karla"; src:url(../fonts/karla-latin.woff2) format("woff2");
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --c-ink:#2A1C14;           /* cacao profundo */
  --c-paper:#F7F0E4;         /* crema de masa */
  --c-surface:#33231A;
  --c-deep:#1D120C;
  --c-muted-on-dark:#B3A296;
  --c-muted-on-light:#6B5A4C;

  --c-accent:#A8305B;        /* el rosa de la concha */
  --on-accent:#F7F0E4;       /* encima del rosa -> 5,72 */
  --c-accent-claro:#F0A2C0;  /* tinta de acento en oscuro -> 8,34 */
  --c-accent-oscuro:#A8305B; /* tinta de acento en claro  -> 5,72 */

  --c-ink-15:rgba(42,28,20,.15);
  --c-paper-15:rgba(247,240,228,.15);
  --c-paper-25:rgba(247,240,228,.25);

  --c-accent-t:#A8305B;
  /* El dominante medido de los estantes es #917258, pero con texto claro
     encima da 3,35: es lo que se veria si la foto no llega. Se oscurece hasta
     tener holgura. El velo es lo que sostiene el contraste sobre la foto; el
     fondo es lo que lo sostiene SIN ella. */
  --hero-fondo:#4A3829;
  --mapa-fondo:#EFE7D8;
  --split-bg:#EDE4D3; --split-ink:#2A1C14; --split-soft:#6B5A4C;
  --split-line:rgba(42,28,20,.16); --split-accent:#A8305B;
}

h1,h2,h3{font-variation-settings:"SOFT" 34,"WONK" 0; font-weight:600;
  letter-spacing:-.016em; line-height:1.02}
h4{font-variation-settings:"SOFT" 24; font-weight:600}

/* -- el heroe que se recorre de lado ------------------------------------ */
/* Las dos capas nacen ampliadas: sin margen a los lados, desplazarlas en X
   dejaria el borde vacio. La lamina viaja el TRIPLE que el fondo, y esa
   proporcion es la profundidad, igual que la escala lo era en la travesia. */
.tira__capa[data-lamina]{transform:scale(1.16)}
.tira__capa[data-fondo]{transform:scale(1.08)}
.tira__txt{text-align:left}
/* A 18ch y 5,4rem el titular se partia A MITAD DE PALABRA -«brea/d is»-:
   el motor deja `overflow-wrap:break-word` como ultimo recurso, y con una
   caja demasiado estrecha ese ultimo recurso se convierte en la norma. El
   tamano se elige para que NUNCA se dispare. */
.tira h1{font-size:clamp(1.9rem,4.2vw,3.9rem); color:#F7F0E4; max-width:16ch}
.tira h1 span{display:block}
.tira .fina{color:#E8DFD0; letter-spacing:.22em; text-transform:uppercase;
  margin-top:var(--s5)}
:root{--hero-velo:linear-gradient(100deg,
  rgba(24,14,9,.80) 0%, rgba(24,14,9,.62) 34%,
  rgba(24,14,9,.26) 58%, rgba(24,14,9,.10) 100%)}

/* -- la pista del mostrador --------------------------------------------- */
.pieza{background:var(--c-paper); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 2px 18px rgba(42,28,20,.10)}
.pieza__foto{aspect-ratio:4/5; background:var(--split-bg)}
.pieza__foto img{width:100%; height:100%; object-fit:cover; display:block}
.pieza__txt{padding:var(--s3) var(--s4) var(--s4)}
.pieza__n{font-family:var(--text); font-size:var(--t-1); font-weight:500;
  letter-spacing:.2em; color:var(--c-accent-t); font-variant-numeric:tabular-nums}
.pieza h3{font-size:var(--t1); margin:var(--s1) 0 var(--s2)}
.pieza p{margin:0; color:var(--fg-soft); font-size:.95em}
/* La escena esta FIJADA: el encabezado y la pista tienen que caber juntos en
   una pantalla. Con la ficha a 26em y el encabezado a tamano completo pedian
   900px de los 820 que hay, y el encabezado se salia por arriba. */
.mostrador__intro{width:min(var(--ancho),100% - var(--canal)*2);
  margin:0 auto var(--s4); max-width:40em}
.mostrador__intro h2{font-size:var(--t3)}
@media (min-width:992px){
  .mostrador__pieza{width:20em}
  .mostrador__intro{margin-bottom:var(--s3)}
  .mostrador__intro h2{font-size:var(--t2)}
}
@media (max-width:991px){
  .mostrador__intro{margin-bottom:var(--s5)}
  .mostrador__pieza{width:min(20em,74vw)}
}

/* -- lo demas que hacen, sin foto --------------------------------------- */
.tambien{display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s5) 0 0;
  padding:0; list-style:none}
.tambien li{font-family:var(--display); font-variation-settings:"SOFT" 30;
  font-size:var(--t1); padding:.28em .9em; border-radius:var(--r-pill);
  border:1px solid var(--hairline)}

/* -- el bloque de lo que falta por confirmar ---------------------------- */
/* En este negocio es lo mas importante de la pagina despues del producto:
   tres fuentes dan TRES horarios distintos, asi que no se publica ninguno. */
.confirmar{border:1px solid var(--c-accent); border-radius:var(--r-md);
  padding:var(--s5); background:color-mix(in srgb, var(--c-accent) 6%, transparent)}
.confirmar h3{margin-bottom:var(--s3)}
.confirmar ul{margin:var(--s4) 0 0; padding-left:1.2em; color:var(--fg-soft)}
.confirmar li{margin-bottom:var(--s2)}

.aviso{color:var(--c-accent-t); font-weight:500}