/* ============================================================
   LE MORITA — catálogo mayorista (brochure)
   Se lee en pantalla (tablet del asesor, móvil del cliente) y se
   imprime en A4: portada, condiciones, tortas, complementos y hoja
   de pedido caen cada una en su página.
   ============================================================ */

.bro{
  --paper:#FFFFFF;
  --line:rgba(2,43,59,.14);
  --col:1160px;
  background:var(--cream);
  font-variant-numeric:lining-nums tabular-nums;
}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.print-only{ display:none; }

.bro-sec{
  padding-block:clamp(3.5rem,7vw,6rem);
  padding-inline:max(var(--pad), calc((100% - var(--col)) / 2));
}
.bro-sec:nth-of-type(even){ background:var(--paper); }

.bro-head{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem); }
.bro-head__title{
  font-family:var(--display);
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  line-height:1.12;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.bro-head__lead{ margin-top:.9rem; color:var(--muted); max-width:56ch; text-wrap:pretty; }

.bro .btn{ font-family:var(--sans); font-size:.8rem; letter-spacing:.08em; cursor:pointer; }
.btn:focus-visible,
.bro input:focus-visible,
.bro textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- portada ---------- */
.bro-cover{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  background:var(--navy);
  color:var(--cream);
  padding-block:clamp(3rem,7vw,6rem);
  padding-inline:max(var(--pad), calc((100% - var(--col)) / 2));
}
.bro-cover__logo{ width:clamp(84px,9vw,112px); margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.bro-cover__kicker{ font-family:var(--script); color:var(--gold); font-size:clamp(1.7rem,3vw,2.3rem); line-height:1; }
.bro-cover__title{
  font-family:var(--display);
  font-size:clamp(2.6rem,6.2vw,5rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:.5rem 0 1.4rem;
  text-wrap:balance;
}
.bro-cover__lead{ color:rgba(248,245,240,.74); max-width:46ch; text-wrap:pretty; }
.bro-cover__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.bro-cover__photo{ margin:0; justify-self:end; width:min(100%,440px); }
.bro-cover__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%;
  border-radius:999px 999px 10px 10px;
  border:1px solid rgba(176,121,8,.55);
  padding:10px;
}

/* ---------- condiciones ---------- */
.bro-terms__list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem clamp(1.5rem,3vw,2.8rem);
  margin:0;
}
.bro-terms__list > div{ border-top:1px solid rgba(176,121,8,.45); padding-top:1rem; }
.bro-terms__list dt{ font-family:var(--display); font-style:italic; font-size:1.2rem; margin-bottom:.4rem; }
.bro-terms__list dd{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.6; }
.bro-terms__tasting{
  margin-top:clamp(2rem,4vw,3rem);
  background:var(--rose);
  border-radius:10px;
  padding:1.1rem 1.4rem;
  font-size:1rem;
  max-width:none;
}

/* ---------- tamaños ---------- */
/* el dibujo vive en <symbol>: los colores entran por variables, que sí heredan dentro de <use> */
.corte{ --corte-bg:#fff; --corte-line:var(--gold); --corte-slice:var(--rose); --corte-w:1.4; --corte-lw:.9; }
.corte--mini{ --corte-w:4; --corte-lw:2.4; width:22px; height:22px; flex:none; }

.bro-sizes__row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,3vw,3rem);
}
.bro-size{ margin:0; }
/* a escala: todas las cajas miden lo mismo y el dibujo se encoge a su diámetro,
   así los pies de foto quedan alineados */
.bro-size .corte{
  display:block;
  width:min(100%, 240px);
  aspect-ratio:1;
  height:auto;
  transform:scale(calc(var(--d) / 26));
  transform-origin:0 100%;
}
.bro-size figcaption{
  display:flex; flex-direction:column;
  margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid var(--line);
  width:100%;
  font-size:.95rem; color:var(--muted);
}
.bro-size strong{ font-family:var(--display); font-weight:400; font-size:1.5rem; color:var(--navy); margin-bottom:.2rem; }
.bro-size__use{ margin-top:.6rem; font-size:.88rem; line-height:1.5; }

/* ---------- fichas de tortas ---------- */
.ficha{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(1.6rem,4vw,4rem);
  align-items:center;
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);
}
.ficha:nth-of-type(even) .ficha__photo{ order:2; }
.ficha__photo{ margin:0; }
.ficha__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:10px; }
.ficha__photo--top img{ object-position:50% 4%; }

.ficha__name{ font-family:var(--display); font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.1; }
.ficha__desc{ color:var(--muted); margin:.7rem 0 1.6rem; max-width:48ch; text-wrap:pretty; }

.precios{ width:100%; border-collapse:collapse; }
.precios thead th{
  font-weight:400; font-size:.8rem; color:var(--muted);
  text-align:right; padding:0 0 .5rem;
  border-bottom:1px solid var(--navy);
}
.precios thead th:first-child{ text-align:left; }
.precios tbody th{
  display:flex; align-items:center; gap:.7rem;
  font-weight:400; text-align:left; font-size:.95rem;
  padding:.8rem 0;
}
.precios tbody td{ text-align:right; padding:.8rem 0 .8rem 1rem; white-space:nowrap; }
.precios tbody td:nth-child(2){ font-family:var(--display); font-size:1.3rem; }
.precios tbody td:nth-child(3){ color:var(--muted); font-size:.92rem; }
.precios tbody tr{ border-bottom:1px solid var(--line); }

.ficha__margin{
  margin-top:1.2rem;
  background:rgba(192,236,205,.6);
  border-radius:8px;
  padding:.8rem 1rem;
  font-size:.95rem;
}
.ficha__margin strong{ font-weight:500; }

.bro-also{
  border-top:1px solid var(--line);
  padding-top:clamp(2rem,4vw,3rem);
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:.6rem clamp(1.6rem,4vw,4rem);
}
.bro-also__title{ font-family:var(--display); font-size:clamp(1.4rem,2.6vw,1.9rem); }
.bro-also__note{ color:var(--muted); grid-column:1; }
.bro-also__list{ grid-column:2; grid-row:1 / span 2; display:grid; gap:1rem; }
.bro-also__list li{ color:var(--muted); }
.bro-also__list strong{ color:var(--navy); font-weight:500; }

/* ---------- complementos ---------- */
.bro-extras__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:2.4rem clamp(1.2rem,2.4vw,2rem);
}
.extra{ display:flex; flex-direction:column; }
.extra__photo{ width:118px; height:118px; border-radius:50%; object-fit:cover; margin-bottom:1rem; }
.extra__name{ font-family:var(--display); font-size:1.25rem; line-height:1.2; }
.extra__desc{ color:var(--muted); font-size:.9rem; margin:.35rem 0 .8rem; line-height:1.5; }
.extra__price{
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line); padding-top:.6rem;
  font-size:.9rem; color:var(--muted);
}
.extra__price strong{ font-family:var(--display); font-weight:400; font-size:1.2rem; color:var(--navy); }
.extra__resale{ font-size:.84rem; color:var(--muted); margin-top:.2rem; }

/* ---------- hoja de pedido ---------- */
.bro-steps{
  list-style:none; counter-reset:paso; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.4rem clamp(1.4rem,3vw,2.6rem);
  margin:0 0 clamp(2rem,4vw,3rem);
}
.bro-steps li{ counter-increment:paso; color:var(--muted); font-size:.95rem; }
.bro-steps li::before{
  content:counter(paso);
  display:block;
  font-family:var(--display); font-size:2rem; line-height:1; color:var(--gold);
  margin-bottom:.4rem;
}
.bro-steps strong{ color:var(--navy); font-weight:500; }

.order{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:12px;
  padding:clamp(1.2rem,3vw,2.4rem);
}
.order__client{
  border:0; margin:0 0 2rem; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.2rem 1.6rem;
}
.order label{ display:flex; flex-direction:column; font-size:.8rem; color:var(--muted); gap:.2rem; }
.order__client input{
  font:inherit; font-size:1rem; color:var(--navy);
  background:transparent;
  border:0; border-bottom:1px solid rgba(2,43,59,.35);
  padding:.35rem 0; border-radius:0;
}
.order__wide{ grid-column:span 2; }

.order__scroll{ overflow-x:auto; margin-bottom:1.6rem; }
.order__table{ width:100%; border-collapse:collapse; min-width:520px; }
.order__table th,
.order__table td{ padding:.6rem .5rem; border-bottom:1px solid var(--line); text-align:center; }
.order__table thead th{ font-weight:400; font-size:.8rem; color:var(--muted); border-bottom:1px solid var(--navy); }
.order__table th[scope="row"]{ text-align:left; font-weight:400; font-family:var(--display); font-size:1.02rem; padding-left:0; }
.order__table thead th:first-child{ text-align:left; padding-left:0; }
.order__table td span{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:.25rem; }
.order__table input{
  width:3.6rem; height:2.4rem;
  font:inherit; font-size:1rem; text-align:center; color:var(--navy);
  background:#fff;
  border:1px solid rgba(2,43,59,.3); border-radius:6px;
  -moz-appearance:textfield; appearance:textfield;
}
.order__table input::-webkit-outer-spin-button,
.order__table input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.order__table input.has-value{ border-color:var(--gold); background:rgba(176,121,8,.08); }
.order__table--extras{ margin-bottom:1.6rem; }
.order__table--extras td:nth-child(2){ color:var(--muted); font-size:.9rem; }

.order__notes textarea{
  font:inherit; font-size:.95rem; color:var(--navy);
  background:#fff; border:1px solid rgba(2,43,59,.3); border-radius:6px;
  padding:.6rem .8rem; resize:vertical;
}

.order__foot{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:.4rem 2rem;
  margin-top:1.8rem; padding-top:1.4rem;
  border-top:1px solid var(--navy);
}
.order__total{ display:flex; align-items:baseline; gap:1rem; font-size:.95rem; color:var(--muted); }
.order__total output{ font-family:var(--display); font-size:clamp(1.7rem,3vw,2.2rem); color:var(--navy); }
.order__min{ grid-column:1; font-size:.88rem; color:var(--muted); }
.order__min.is-ok{ color:#2F6B45; }
.order__actions{ grid-column:2; grid-row:1 / span 2; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end; }

.bro-contact{ margin-top:clamp(2rem,4vw,3rem); display:grid; gap:.3rem; }
.bro-contact p:first-child{ font-family:var(--display); font-size:1.3rem; }
.bro-contact a{ margin-right:1.4rem; border-bottom:1px solid rgba(176,121,8,.6); }
.bro-contact a:hover{ color:var(--gold); }
.bro-contact__legal{ margin-top:1rem; font-size:.82rem; color:var(--muted); max-width:70ch; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .bro-cover{ grid-template-columns:1fr; }
  .bro-cover__photo{ justify-self:center; width:min(80%,360px); grid-row:1; }
  .bro-terms__list{ grid-template-columns:repeat(2,1fr); }
  .ficha{ grid-template-columns:1fr 1.3fr; }
  .order__client{ grid-template-columns:repeat(2,1fr); }
  .order__foot{ grid-template-columns:1fr; }
  .order__actions{ grid-column:1; grid-row:auto; justify-content:flex-start; margin-top:1rem; }
}

@media (max-width:640px){
  .bro-cover__photo{ width:min(72%,300px); }
  .bro-cover__logo{ display:none; }
  .bro-terms__list{ grid-template-columns:1fr; gap:1.4rem; }
  .bro-sizes__row{ gap:.8rem; }
  .bro-size strong{ font-size:1.15rem; }
  .bro-size figcaption{ font-size:.82rem; }
  .bro-size__use{ display:none; }
  .ficha{ grid-template-columns:1fr; gap:1.4rem; }
  .ficha:nth-of-type(even) .ficha__photo{ order:0; }
  .ficha__photo img{ aspect-ratio:4/3; }
  .precios tbody th{ font-size:.86rem; gap:.5rem; }
  .precios tbody td:nth-child(2){ font-size:1.1rem; }
  .bro-also{ grid-template-columns:1fr; }
  .bro-also__note,
  .bro-also__list{ grid-column:1; grid-row:auto; }
  .bro-extras__grid{ grid-template-columns:1fr 1fr; gap:2rem 1rem; }
  .extra__photo{ width:92px; height:92px; }
  .bro-steps{ grid-template-columns:1fr; }
  .order__client{ grid-template-columns:1fr; }
  .order__wide{ grid-column:auto; }
  .order__table--extras thead th:nth-child(2),
  .order__table--extras td:nth-child(2){ display:none; }
  .order{ padding:1.1rem .9rem; }
  .order__table{ min-width:0; }
  .order__table th,
  .order__table td{ padding:.55rem .2rem; }
  .order__table thead th{ font-size:.72rem; line-height:1.3; }
  .order__table th[scope="row"]{ font-size:.92rem; line-height:1.25; }
  .order__table td span{ font-size:.72rem; }
  .order__table input{ width:3rem; height:2.4rem; }
}

/* ============================================================
   IMPRESIÓN — A4 vertical
   ============================================================ */
@page{ size:A4; margin:14mm 14mm 16mm; }
@page :first{ margin:0; }

@media print{
  html,body,.site{ background:#fff !important; }
  .site{ box-shadow:none; }
  body{ font-size:10pt; line-height:1.5; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .nav,.footer,.no-print{ display:none !important; }
  .print-only{ display:block; }
  .bro{ background:#fff; }

  .bro-sec,
  .bro-sec:nth-of-type(even){ background:#fff; padding:0; }
  .bro-head{ margin-bottom:7mm; }
  .bro-head__title{ font-size:22pt; }

  .bro-cover{
    height:297mm;
    padding:24mm 18mm;
    grid-template-columns:1fr;
    align-content:center;
    gap:12mm;
    break-after:page;
  }
  .bro-cover__logo{ display:none; }
  .bro-cover__title{ font-size:40pt; }
  .bro-cover__photo{ grid-row:1; width:96mm; justify-self:start; }
  .bro-cover__visit{ margin-top:14mm; font-size:10pt; color:rgba(248,245,240,.8); line-height:2.4; }
  .bro-line{ display:inline-block; width:62mm; border-bottom:1px solid rgba(248,245,240,.6); margin:0 8mm 0 2mm; vertical-align:bottom; }

  .bro-terms{ margin-bottom:12mm; }
  .bro-terms__list{ grid-template-columns:repeat(3,1fr); gap:6mm; }
  .bro-terms__list dd{ font-size:9pt; }
  .bro-size__use{ display:block; font-size:8.5pt; }
  .bro-size .corte{ width:48mm; }

  .bro-tortas,
  .bro-extras,
  .bro-order{ break-before:page; }

  .ficha{ grid-template-columns:50mm 1fr; gap:8mm; padding-block:4.5mm; break-inside:avoid; }
  .ficha:nth-of-type(even) .ficha__photo{ order:0; }
  .ficha__photo img{ aspect-ratio:1; }
  .ficha__name{ font-size:16pt; }
  .ficha__desc{ margin:1.5mm 0 2.5mm; font-size:9pt; }
  .precios thead th{ padding-bottom:1mm; }
  .precios tbody th,
  .precios tbody td{ padding:1.1mm 0; }
  .precios tbody td{ padding-left:4mm; }
  .precios tbody td:nth-child(2){ font-size:13pt; }
  .ficha__margin{ margin-top:2.5mm; padding:1.6mm 3mm; font-size:9pt; }
  .bro-also{ break-inside:avoid; padding-top:6mm; }

  .bro-extras__grid{ grid-template-columns:repeat(3,1fr); gap:8mm 7mm; }
  .extra{ break-inside:avoid; }
  .extra__photo{ width:26mm; height:26mm; }

  .bro-order .bro-head{ margin-bottom:4mm; }
  .bro-order .bro-head__lead{ display:none; }
  .bro-steps{ margin-bottom:5mm; gap:6mm; }
  .bro-steps li{ font-size:9pt; }
  .bro-steps li::before{ font-size:15pt; margin-bottom:1mm; }
  .order{ border:0; padding:0; background:#fff; }
  .order__client{ grid-template-columns:repeat(4,1fr); gap:3mm 6mm; margin-bottom:5mm; }
  .order__client label:first-child,
  .order__wide{ grid-column:span 2; }
  .order__client input{ padding:1mm 0; }
  .order input::-webkit-calendar-picker-indicator{ display:none; }
  .order input[type="date"]{ color:transparent; }
  .order textarea::placeholder{ color:transparent; }
  .order__scroll{ overflow:visible; margin-bottom:4mm; }
  .order__table{ min-width:0; }
  .order__table th,
  .order__table td{ padding:.7mm 1mm; }
  .order__table th[scope="row"]{ font-size:10pt; }
  .order__table td span{ display:inline-block; width:15mm; text-align:right; margin:0 2mm 0 0; font-size:8.5pt; }
  .order__table input{ width:12mm; height:6mm; background:#fff; vertical-align:middle; }
  .order__table--extras{ margin-bottom:4mm; }
  .order__table--extras thead th:nth-child(2),
  .order__table--extras td:nth-child(2){ display:table-cell; }
  .order__notes textarea{ height:10mm; }
  .order__foot{ margin-top:4mm; padding-top:3mm; }
  .order__min{ display:none; }
  .order__foot.is-empty output{ color:transparent; display:inline-block; min-width:45mm; border-bottom:1px solid var(--navy); }
  .bro-contact{ margin-top:4mm; display:flex; flex-wrap:wrap; align-items:baseline; gap:1mm 5mm; }
  .bro-contact p:first-child{ font-size:11pt; }
  .bro-contact__legal{ flex-basis:100%; margin-top:1mm; font-size:7.5pt; }
}