/* Piacere Bakery — pizarra de horneada: crema cálida, bloques terracota, fichas con gramaje y precio */
:root{
  --crema:#FAF0DC;
  --crema-2:#FFF8EC;
  --naranja:#B05A1D;
  --naranja-osc:#8E4714;
  --dorado:#E8C27A;
  --cacao:#36220F;
  --cacao-2:#5C4328;
  --borde:#E3CFA9;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --texto:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--crema);color:var(--cacao);font-family:var(--texto);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--naranja-osc)}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.envoltura{width:100%;max-width:1100px;margin:0 auto;padding-inline:20px}

/* barra */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(250,240,220,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.barra .envoltura{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:12px}
.marca{flex:0 0 auto;display:block}
.marca img{height:32px;width:auto}
.menu-nav{display:flex;gap:16px;flex-wrap:wrap;flex:1 1 auto;min-width:0;list-style:none;margin:0;padding:0;font-size:15px;font-weight:700}
.menu-nav a{text-decoration:none;color:var(--cacao-2);padding-block:4px;border-bottom:2px solid transparent}
.menu-nav a:hover,.menu-nav a[aria-current="page"]{color:var(--naranja);border-bottom-color:var(--naranja)}

/* botones */
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.boton{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;padding:11px 20px;border-radius:999px;border:2px solid var(--naranja);background:var(--naranja);color:#FFF6E6;min-height:44px}
.boton:hover{background:var(--naranja-osc);border-color:var(--naranja-osc)}
.boton.hueco{background:transparent;color:var(--naranja-osc)}
.boton.hueco:hover{background:var(--naranja);color:#FFF6E6}

/* portada */
.portada{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.portada-texto{padding:60px 20px;max-width:580px;margin-left:auto;width:100%;display:flex;flex-direction:column;gap:18px}
.portada-foto{align-self:center;position:relative;aspect-ratio:5/4;max-height:540px;width:100%;border-radius:0}
.portada-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,54px);line-height:1.05;margin:0;text-wrap:balance;color:var(--naranja)}
h1 span{color:var(--cacao)}
.entradilla{font-size:19px;color:var(--cacao-2);margin:0;max-width:50ch}
.sello{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--dorado);color:var(--cacao);font-family:var(--display);font-weight:700;font-size:14px;padding:5px 14px;border-radius:999px}
@media (max-width:860px){.portada{grid-template-columns:1fr}.portada-foto{order:-1;aspect-ratio:16/10}.portada-texto{padding-block:38px;margin-inline:auto}}

/* secciones */
section{padding-block:56px}
.ladrillo{background:var(--naranja);color:#FFF4E2}
.ladrillo h2,.ladrillo h3{color:#FFF4E2}
.ladrillo p{color:#FBE7CF}
.ladrillo .boton{background:#FFF4E2;border-color:#FFF4E2;color:var(--naranja-osc)}
.ladrillo .boton:hover{background:#fff;border-color:#fff}
.ladrillo .boton.hueco{background:transparent;border-color:#FFF4E2;color:#FFF4E2}
.ladrillo .boton.hueco:hover{background:#FFF4E2;color:var(--naranja-osc)}
.ladrillo .sello{background:#FFF4E2;color:var(--naranja-osc)}
.ladrillo .ficha{background:rgba(255,244,226,.1);border-color:rgba(255,244,226,.3)}
.ladrillo .ficha p{color:#FBE7CF}
.ladrillo .gramaje{color:#FBE7CF}
.ladrillo .precio{color:#FFF4E2}

.etiqueta{display:inline-block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--naranja);margin-bottom:8px}
.ladrillo .etiqueta{color:#FFE7C4}
h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.12;margin:0 0 14px;text-wrap:balance}
h3{font-family:var(--display);font-weight:700;font-size:21px;margin:0 0 4px;line-height:1.2}
p{margin:0 0 16px;max-width:68ch}
.destacado{color:var(--naranja-osc);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ladrillo .destacado{color:#FFE7C4}

/* fichas de producto */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;list-style:none;margin:0;padding:0}
.ficha{background:var(--crema-2);border:1px solid var(--borde);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ficha img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ficha .cuerpo{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.ficha p{font-size:15px;color:var(--cacao-2);margin:0}
.fila-precio{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:auto;padding-top:10px}
.gramaje{font-size:13px;color:var(--cacao-2);font-variant-numeric:tabular-nums}
.precio{font-family:var(--display);font-weight:800;font-size:19px;color:var(--naranja);font-variant-numeric:tabular-nums;white-space:nowrap}

/* lista de carta */
.carta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.carta li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;padding-block:13px;border-bottom:1px dashed var(--borde)}
.carta li:last-child{border-bottom:0}
.carta .nombre{font-family:var(--display);font-weight:700;font-size:18px}
.carta .desc{grid-column:1/-1;font-size:15px;color:var(--cacao-2);max-width:62ch}

/* dos columnas */
.doble{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:820px){.doble{grid-template-columns:1fr;gap:24px}}

.tarjeta{background:var(--crema-2);border:1px solid var(--borde);border-radius:18px;padding:24px}
.ladrillo .tarjeta{background:rgba(255,244,226,.12);border-color:rgba(255,244,226,.35)}

/* sabores */
.sabores{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.sabores li{background:var(--crema-2);border:1px solid var(--borde);border-radius:999px;padding:6px 14px;font-size:15px}
.ladrillo .sabores li{background:rgba(255,244,226,.14);border-color:rgba(255,244,226,.35);color:#FFF4E2}

/* NAP */
.nap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.nap li{display:grid;grid-template-columns:110px 1fr;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--borde)}
.nap .et{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cacao-2);padding-top:3px}
@media (max-width:620px){.nap li{grid-template-columns:1fr;gap:0}}

/* preguntas */
.preguntas{max-width:78ch}
.preguntas details{border-bottom:1px solid var(--borde);padding-block:14px}
.preguntas summary{font-family:var(--display);font-weight:700;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:32px}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";color:var(--naranja);font-size:24px;line-height:1}
.preguntas details[open] summary::after{content:"–"}
.preguntas p{margin:8px 0 2px;color:var(--cacao-2)}

/* tabla de cookie cakes */
.tabla-envoltura{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--borde);font-size:16px}
th{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--cacao-2)}
td.num{text-align:right;font-weight:700;color:var(--naranja)}

.aviso{font-size:15px;color:var(--cacao-2);border-left:3px solid var(--dorado);padding-left:14px;max-width:66ch}

/* pie */
footer{background:var(--cacao);color:#E8D8C2;padding-block:40px;font-size:15px}
footer .columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
footer h3{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#FFF4E2;margin-bottom:10px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
footer a{color:#E8D8C2}
footer img{height:28px;width:auto;margin-bottom:12px}
.legal{margin-top:26px;padding-top:16px;border-top:1px solid rgba(232,216,194,.25);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---- móvil: cabecera compacta ---- */
@media (max-width:760px){
  .barra{position:static}
  .barra .envoltura{gap:12px;padding-block:10px}
  .marca img{height:28px}
  .menu-nav{gap:12px;font-size:14px;order:3;width:100%}
  .barra .boton{padding:10px 16px;font-size:15px}
}

/* ---- separador entre secciones ---- */
main > section:not(.ladrillo) + section:not(.ladrillo){position:relative}
main > section:not(.ladrillo) + section:not(.ladrillo)::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(620px,86%);height:1px;
  background:linear-gradient(90deg,transparent,var(--borde) 18%,var(--borde) 82%,transparent);
}
main > section:not(.ladrillo) + section:not(.ladrillo)::after{
  content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--dorado);
  box-shadow:0 0 0 5px var(--crema);
}

/* ---- mapa de Google ---- */
.mapa{margin-top:16px;border-radius:16px;overflow:hidden;line-height:0;background:rgba(0,0,0,.08)}
.mapa iframe{width:100%;height:280px;border:0;display:block}
@media (max-width:620px){.mapa iframe{height:230px}}

/* ---- estilos de menu.html ---- */
.indice{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.indice a{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;border:1px solid var(--borde);background:var(--crema-2);border-radius:999px;padding:8px 16px;color:var(--cacao-2);min-height:38px}
.indice a:hover{border-color:var(--naranja);color:var(--naranja)}
.bloque{padding-block:34px;border-top:1px solid var(--borde)}
.bloque:first-of-type{border-top:0}