/* ===========================================================================
   Rosselot — paginas.css   (19 sep 2026)
   Hoja compartida de las páginas nacidas para búsqueda: las catorce fichas de
   sabor y las páginas de ocasión. Reusa las variables y el ritmo de styles.css;
   las reglas de lista vienen del <style> de menu.html, que estaban atrapadas
   dentro de esa página y no las podía usar nadie más.
   =========================================================================== */

.menu-sec{padding-top:36px;padding-bottom:2px;scroll-margin-top:132px}
.menu-sec h2{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin-bottom:2px}
.menu-sec .note{font-size:.88rem;color:var(--olivo);margin:2px 0 6px;max-width:60ch;line-height:1.6}
.menu-sec .note a{color:var(--cafe);border-bottom:1px solid var(--salmon)}

.mlist{margin-top:6px}
.mrow{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px dotted rgba(68,40,35,.20)}
.mrow .tx{flex:1;min-width:0}
.mrow .nm{font-family:var(--serif);font-size:1.05rem;line-height:1.25;color:var(--cacao)}
.mrow .nm a{color:var(--cacao);border-bottom:1px solid var(--salmon)}
.mrow .nm a:hover{color:var(--cafe)}
.mrow .fav{font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;background:var(--dorado);color:#442823;border-radius:999px;padding:2px 8px;vertical-align:2px;margin-left:8px;white-space:nowrap}
.mrow .pres{font-size:.8rem;color:var(--olivo);margin-top:2px;line-height:1.45}
.mrow .pr{font-size:.98rem;color:var(--cafe);white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto;flex:none}

/* la foto grande de la ficha de sabor */
.ficha-foto{margin:18px 0 0;border-radius:18px;overflow:hidden;background:var(--crema,#f6ded5)}
.ficha-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

.menu-sec .branch-actions{margin-top:18px}

@media (min-width:860px){
  .mlist{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .menu-sec{padding-top:44px}
  .ficha-foto img{aspect-ratio:16/9}
}

/* el botón para llevarse la porción sin salir de la ficha */
.ros-add-porcion{margin-left:8px;border:1px solid rgba(68,40,35,.25);background:transparent;color:var(--cafe);
  border-radius:999px;padding:4px 14px;font-family:var(--sans);font-size:.78rem;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.ros-add-porcion:hover{background:var(--cafe);border-color:var(--cafe);color:#fff}

/* Plazo por tamaño en las fichas de torta (19 sep 2026). Sustituye al párrafo
   que repetía todas las excepciones en todas las fichas. */
.mrow .plazo{margin-top:6px;font-size:.85rem;display:inline-block;
  padding:4px 10px;border-radius:99px;background:#f1e7df;color:#5c4a40}
.mrow .plazo:empty{display:none}
.mrow .plazo.corre{background:#e6efe6;color:#33603c;font-weight:600}
.mrow .plazo.urge{background:#f9e6c9;color:#7d5602;font-weight:600}
.mrow .plazo.cerrado{background:#f3ece7;color:#7b6a60}

/* ===========================================================================
   Fichas de torta · bloque de compra (30 sep 2026; registro en
   Sistema_Pedido/ficha_tamanos_260929/). Un selector de tamaño, UN plazo, UN
   botón que dice qué se encarga; la porción suelta aparte porque es otro
   producto (vitrina, no encargo). Colores de la hoja congelada (9 sep 2026).
   =========================================================================== */

.compra{display:grid;gap:14px;margin-top:14px}

/* panel del encargo: salmón, como el resumen del armador y del checkout */
.compra-panel{background:var(--blush);border-radius:12px;padding:18px 16px 16px}
.tam-opc{border:0;margin:0;padding:0;min-width:0}
.tam-opc legend{padding:0;margin-bottom:10px;font-size:.86rem;color:var(--olivo)}
.opc-grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}

/* cada tamaño es un radio de verdad: se elige con el dedo, el teclado o sin JS */
.opc{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.opc input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opc .caja{display:flex;flex-direction:column;gap:2px;height:100%;padding:12px 10px 11px;border-radius:10px;
  background:var(--beige);border:1px solid rgba(68,40,35,.16);color:var(--cacao);
  transition:border-color .18s,background .18s,color .18s}
.opc:hover .caja{border-color:var(--linea)}
.opc input:checked + .caja{background:var(--cafe);border-color:var(--cafe);color:var(--crema)}
.opc input:focus-visible + .caja{outline:2px solid var(--linea);outline-offset:2px}
.opc .l{font-family:var(--serif);font-size:1.02rem;line-height:1.1}
.opc .n{font-size:.76rem;line-height:1.3;color:var(--olivo)}
.opc .p{margin-top:auto;padding-top:8px;font-size:.98rem;font-weight:500;color:var(--cafe);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:space-between;gap:6px}
/* la marca del radio: anillo vacío = se puede elegir; lleno con visto = elegido.
   Así la selección no depende solo del cambio de color (Astra 11). */
.opc .p::after{content:"";flex:none;width:16px;height:16px;border-radius:999px;box-sizing:border-box;border:1.5px solid var(--linea)}
.opc input:checked + .caja .p::after{border:0;background:var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5.2-5.3' fill='none' stroke='%23653215' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (forced-colors:active){
  .opc input:checked + .caja{outline:3px solid Highlight;outline-offset:1px}
  .opc input:checked + .caja .p::after{background:Highlight;forced-color-adjust:none}
}
.opc .f{font-size:.68rem;letter-spacing:.04em;color:var(--olivo);margin-top:2px}
.opc input:checked + .caja .n,
.opc input:checked + .caja .f{color:rgba(246,238,225,.82)}
.opc input:checked + .caja .p{color:var(--crema)}

/* el plazo, una sola vez: vale igual para los tres tamaños desde el 25 sep */
.compra .plazo{display:flex;align-items:flex-start;gap:9px;margin:14px 0;font-size:.86rem;line-height:1.45;color:var(--cacao)}
.compra .plazo::before{content:"";flex:none;width:6px;height:6px;margin-top:.5em;border-radius:999px;background:var(--dorado)}
.compra .plazo:empty{display:none}
.compra .plazo.corre{color:var(--exito);font-weight:600}
.compra .plazo.corre::before{background:var(--exito)}
.compra .plazo.urge{color:#7d5602;font-weight:600}
.compra .plazo.urge::before{background:#7d5602}

/* fichas sin armador: el panel explica y manda a WhatsApp, sin plazo */
.compra-consulta{margin:0 0 14px;font-size:.92rem;line-height:1.55;color:var(--cacao)}
.tam-opc + .compra-consulta{margin-top:14px}
.compra-cta{width:100%}
.compra-nota{margin-top:10px;font-size:.84rem;line-height:1.5;color:var(--olivo);text-align:center}
.compra-nota a{color:var(--cafe);border-bottom:1px solid var(--linea)}

/* la porción suelta: otro producto, con su foto y su botón */
.porcion-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;
  padding:10px 14px 10px 10px;border-radius:12px;background:var(--beige);border:1px solid rgba(68,40,35,.12)}
.porcion-card img{width:88px;height:88px;object-fit:cover;border-radius:8px}
.porcion-card.sin-foto{grid-template-columns:1fr}
.porcion-card .cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.porcion-card .nm{font-family:var(--serif);font-size:1.08rem;line-height:1.2;color:var(--cacao)}
.porcion-card .pr{font-size:.98rem;font-weight:500;color:var(--cafe);font-variant-numeric:tabular-nums;white-space:nowrap}
.porcion-card .pres{margin:2px 0 8px;font-size:.8rem;line-height:1.4;color:var(--olivo)}
.porcion-card .ros-add-porcion{margin:0;min-height:44px;padding:0 16px;font-size:.8rem;border-color:var(--linea);background:var(--papel)}
.porcion-card .ros-add-porcion:hover{background:var(--cafe);border-color:var(--cafe);color:var(--hueso)}
.porcion-card .ros-add-porcion:focus-visible{outline:2px solid var(--linea);outline-offset:2px}

/* varias porciones: tras el primer «Agregar», el mismo − n + del carrito, con la cantidad que ya hay en el pedido */
.porcion-accion{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.porcion-accion [hidden]{display:none!important}
.porcion-qty{border-color:var(--linea);background:var(--papel)}
.porcion-qty button{width:44px;height:44px;font-size:1.15rem;color:var(--cafe)}
.porcion-qty button:hover{background:var(--blush)}
.porcion-qty button:focus-visible{outline:2px solid var(--linea);outline-offset:-2px}
.porcion-qty .n{min-width:24px;font-weight:500;color:var(--cacao)}
.en-pedido{font-size:.8rem;line-height:1.3;color:var(--olivo)}

@media (min-width:420px){
  .opc .caja{padding:13px 13px 12px}
  .opc .l{font-size:1.12rem}
}

@media (min-width:860px){
  .compra{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px;align-items:stretch}
  .compra--solo{grid-template-columns:minmax(0,720px)}   /* fichas sin porción suelta */
  .compra-panel{padding:26px 28px 24px}
  .opc .caja{min-height:118px}
  .compra-cta{width:auto;min-width:300px}
  .compra-nota{text-align:left}
  .porcion-card{grid-template-columns:1fr;gap:0;padding:0;overflow:hidden;align-items:start}
  .porcion-card img{width:100%;height:auto;aspect-ratio:16/9;border-radius:0}
  .porcion-card .tx{padding:14px 18px 18px}
}

/* 360-389 px (la mayoría de los Android y el iPhone de 375): precio y marca caben sin rozar el borde */
@media (max-width:389px){
  .opc .caja{padding:12px 8px 11px 10px}
  .opc .l{font-size:clamp(.92rem,4.2vw,1.02rem)}
  .opc .p{font-size:.92rem;gap:4px}
  .opc .p::after{width:14px;height:14px}
  .opc input:checked + .caja .p::after{background-size:14px}
}

/* teléfonos muy angostos: los tamaños se apilan */
@media (max-width:340px){
  .opc-grid{grid-template-columns:1fr}
  .opc .caja{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .opc .p{margin:0 0 0 auto;padding-top:0}
}

/* ===========================================================================
   Otras tortas: tarjetas con la foto de la porción (30 sep 2026)
   El SEO no se mueve: los mismos 14 enlaces, con el mismo texto de enlace y en el
   mismo orden. Dentro del <a> va solo el nombre; la foto (alt vacío: es decorativa,
   el nombre está al lado) y el precio quedan fuera, y el enlace estira su área a
   toda la tarjeta. Miniaturas de 480 px (14-28 KB), diferidas y con medidas fijas.
   En el celular se deslizan de lado; en la computadora, dos filas de siete. El relleno
   de arriba (6 px) deja ver entero el anillo de foco de la tarjeta (Astra, 30 sep).
   =========================================================================== */
.otras{list-style:none;margin:10px -24px 0;padding:6px 24px 10px;display:grid;grid-auto-flow:column;
  grid-auto-columns:40%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none}
.otras::-webkit-scrollbar{display:none}
.otra{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;min-width:0}
.otra img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--beige)}
.otra a{margin-top:8px;font-family:var(--serif);font-size:1rem;line-height:1.25;color:var(--cacao)}
.otra a::after{content:"";position:absolute;inset:0;border-radius:10px}
.otra:hover a{color:var(--cafe);text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:3px}
.otra a:focus-visible{outline:none}
.otra a:focus-visible::after{outline:2px solid var(--linea);outline-offset:3px}
.otra .desde{margin-top:2px;font-size:.8rem;color:var(--olivo);font-variant-numeric:tabular-nums}
@media (min-width:560px){ .otras{grid-auto-columns:26%} }
@media (min-width:860px){
  .otras{margin:16px 0 0;padding:0;overflow:visible;grid-auto-flow:row;
    grid-template-columns:repeat(7,minmax(0,1fr));gap:26px 16px}
}