/* ============================================================
   LE MORITA — servicios: tortas para celebrar y eventos
   Pensada para el cliente final: se arma la torta, se ve el
   precio al momento y el pedido sale por WhatsApp.
   ============================================================ */

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

.srv .btn{ font-family:var(--sans); font-size:.8rem; letter-spacing:.08em; cursor:pointer; }
.srv :is(.btn, input, select, textarea, summary):focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.nav__links a[aria-current="page"]{ color:var(--gold); }

.srv-sec{
  padding-block:clamp(3.5rem,7vw,6rem);
  padding-inline:max(var(--pad), calc((100% - var(--col)) / 2));
}

.srv-head{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem); }
.srv-head__kicker{ font-family:var(--script); color:var(--gold); font-size:clamp(1.5rem,2.6vw,2rem); line-height:1; }
.srv-head__title{
  font-family:var(--display);
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  line-height:1.12;
  margin-top:.3rem;
  text-wrap:balance;
}
.srv-head__lead{ margin-top:.9rem; color:var(--muted); max-width:56ch; text-wrap:pretty; }

/* ---------- portada ---------- */
.srv-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  background:var(--blush);
  padding-block:clamp(3rem,7vw,6rem);
  padding-inline:max(var(--pad), calc((100% - var(--col)) / 2));
}
.srv-hero__kicker{ font-family:var(--script); color:var(--gold); font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1; }
.srv-hero__title{
  font-family:var(--display);
  font-size:clamp(2.4rem,5.6vw,4.4rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:.5rem 0 1.3rem;
  text-wrap:balance;
}
.srv-hero__lead{ color:var(--muted); max-width:48ch; text-wrap:pretty; }
.srv-hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.srv-hero__facts{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  margin-top:2.2rem; padding-top:1.2rem;
  border-top:1px solid rgba(176,121,8,.4);
  font-size:.88rem; color:var(--muted);
}
.srv-hero__facts strong{ display:block; font-family:var(--display); font-weight:400; font-size:1.15rem; color:var(--navy); }
.srv-hero__photo{ margin:0; justify-self:end; width:min(100%,440px); }
.srv-hero__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 40%;
  border-radius:999px 999px 10px 10px;
  border:1px solid rgba(176,121,8,.55);
  padding:10px;
}

/* ---------- cómo funciona ---------- */
.srv-steps{ background:var(--navy); color:var(--cream); padding-block:clamp(2.4rem,5vw,3.6rem); }
.srv-steps__list{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.6rem clamp(1.2rem,3vw,2.6rem);
  margin:0; padding:0; list-style:none;
  font-size:.92rem; color:rgba(248,245,240,.72); line-height:1.55;
}
.srv-steps__list span{
  display:grid; place-items:center;
  width:2.1rem; height:2.1rem; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold);
  font-family:var(--display); margin-bottom:.8rem;
}
.srv-steps__list strong{ display:block; font-family:var(--display); font-weight:400; font-size:1.15rem; color:var(--cream); margin-bottom:.2rem; }

/* ---------- configurador ---------- */
.cake{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
.cake__steps{ display:grid; gap:clamp(2.4rem,4vw,3.2rem); }
.cake__step{ border:0; margin:0; padding:0; min-width:0; }
.cake__step legend{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--display); font-size:clamp(1.25rem,2.2vw,1.55rem);
  padding:0; margin-bottom:1.2rem;
}
.cake__step legend small{ font-family:var(--sans); font-size:.85rem; color:var(--muted); }
.cake__n{
  display:grid; place-items:center; flex:none;
  width:2rem; height:2rem; border-radius:50%;
  background:var(--gold); color:#fff;
  font-size:.95rem;
}
.cake__hint{ margin-top:1rem; font-size:.9rem; color:var(--muted); }
.cake__hint[data-deco-show]{ background:var(--rose); border-radius:8px; padding:.8rem 1rem; color:var(--navy); }

/* tarjetas de opción */
.pick{ display:grid; gap:.9rem; }
.pick--flavor{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
.pick--size,
.pick--deco{ grid-template-columns:repeat(3,1fr); }
.pick--delivery{ grid-template-columns:repeat(2,1fr); margin-bottom:1.2rem; }

.pick__opt{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--paper);
  border:1.5px solid transparent;
  border-radius:14px;
  padding:1rem .9rem 1.1rem;
  box-shadow:0 8px 20px rgba(2,43,59,.06);
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pick__opt:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,43,59,.1); }
.pick__opt input{ position:absolute; opacity:0; pointer-events:none; }
.pick__opt:has(input:checked){ border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,121,8,.14); }
.pick__opt:has(input:focus-visible){ outline:2px solid var(--gold); outline-offset:3px; }
.pick__opt:has(input:checked)::after{
  content:""; position:absolute; top:.6rem; right:.6rem;
  width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat;
}

.pick__opt > img,
.pick__ph{
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  margin-bottom:.7rem;
}
.pick--deco .pick__opt > img{ width:100%; height:auto; aspect-ratio:4/3; border-radius:10px; }
.pick__ph{ display:grid; place-items:center; border:2px dashed rgba(176,121,8,.45); background:var(--cream); }
.pick__ph img{ width:40%; opacity:.6; }
.pick__name{ font-family:var(--display); font-size:1.05rem; line-height:1.2; }
.pick__desc{ font-size:.8rem; color:var(--muted); line-height:1.45; margin-top:.3rem; }
.pick__price{ margin-top:auto; padding-top:.7rem; font-family:var(--display); color:var(--gold); font-size:1.05rem; }

.pick--size .corte{
  --corte-bg:#fff; --corte-line:var(--gold); --corte-slice:var(--rose); --corte-w:1.4; --corte-lw:.9;
  width:calc(var(--d) * 1px); height:calc(var(--d) * 1px);
  margin:auto 0 .8rem;
}
.pick--size .pick__opt:nth-child(1){ --d:62; }
.pick--size .pick__opt:nth-child(2){ --d:76; }
.pick--size .pick__opt:nth-child(3){ --d:90; }
.pick--size .pick__opt{ justify-content:flex-end; }

.pick__opt--row{ flex-direction:row; justify-content:space-between; gap:1rem; padding:1rem 2.6rem 1rem 1.1rem; text-align:left; }
.pick__opt--row .pick__price{ margin:0; padding:0; font-size:.95rem; }
.pick__opt--row:has(input:checked)::after{ top:50%; transform:translateY(-50%); }

/* campos */
.cake__fields{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.2rem; margin-top:1.2rem;
}
.cake__fields label{ display:flex; flex-direction:column; gap:.35rem; font-size:.88rem; color:var(--muted); }
.cake__fields label small{ font-size:.8rem; }
.cake__wide{ grid-column:1 / -1; }
.cake__fields :is(input, select, textarea){
  font:inherit; font-size:1rem; color:var(--navy);
  background:var(--paper);
  border:1px solid var(--line); border-radius:8px;
  padding:.75rem .85rem;
  width:100%;
}
.cake__fields textarea{ resize:vertical; }
.cake__fields .is-invalid{ border-color:#B3261E; }
.cake__err{ color:#B3261E; min-height:0; }
.cake__err:empty{ display:none; }

[data-deco-show][hidden],
[data-entrega-show][hidden]{ display:none; }

/* complementos */
.extras{ display:grid; gap:.7rem; }
.extras__row{
  display:grid; grid-template-columns:56px 1fr auto 70px;
  align-items:center; gap:1rem;
  background:var(--paper); border-radius:12px;
  padding:.7rem 1rem .7rem .7rem;
  font-size:.85rem; color:var(--muted); line-height:1.45;
}
.extras__row img,
.extras__icon{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.extras__icon{ display:grid; place-items:center; background:var(--blush); }
.extras__icon svg{ width:26px; fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linejoin:round; }
.extras__row strong{ display:block; font-family:var(--display); font-weight:400; font-size:1rem; color:var(--navy); }
.extras__price{ font-family:var(--display); color:var(--navy); font-size:1rem; white-space:nowrap; }
.extras__row input{
  font:inherit; font-size:1rem; text-align:center; color:var(--navy);
  border:1px solid var(--line); border-radius:8px; padding:.55rem .3rem; width:100%;
}
.extras__row input.has-value{ border-color:var(--gold); background:rgba(176,121,8,.07); }

/* resumen */
.ticket{ position:sticky; top:calc(var(--nav-h) + 1.5rem); scroll-margin-top:calc(var(--nav-h) + 1rem); }
.ticket__card{
  background:var(--navy); color:var(--cream);
  border-radius:16px;
  padding:1.6rem 1.5rem;
}
.ticket__title{ font-family:var(--display); font-size:1.4rem; padding-bottom:.9rem; border-bottom:1px solid rgba(248,245,240,.18); }
.ticket__lines{ display:grid; gap:.55rem; padding:1rem 0; font-size:.9rem; }
.ticket__lines li{ display:flex; justify-content:space-between; gap:1rem; color:rgba(248,245,240,.8); }
.ticket__lines li span:last-child{ white-space:nowrap; color:var(--cream); }
.ticket__lines .is-sub{ font-size:.82rem; color:rgba(248,245,240,.55); padding-left:.8rem; }
.ticket__total{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid rgba(248,245,240,.18); padding-top:1rem;
}
.ticket__total output{ font-family:var(--display); font-size:1.9rem; color:var(--cream); }
.ticket__deposit{ font-size:.85rem; color:var(--mint); margin-top:.2rem; }
.ticket__send{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; margin-top:1.3rem; padding-inline:1rem;
}
.ticket__send svg{ width:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.ticket__note{ font-size:.8rem; color:rgba(248,245,240,.6); margin-top:.9rem; line-height:1.5; }

.ticket-bar{ display:none; }

/* ---------- eventos ---------- */
.srv-events{ background:var(--paper); }
.events{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.6vw,2.2rem);
}
.event img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; margin-bottom:1rem; }
.event h3{ font-family:var(--display); font-size:1.35rem; }
.event p{ color:var(--muted); font-size:.92rem; margin-top:.35rem; }
.event .event__from{ color:var(--gold); font-size:.85rem; letter-spacing:.04em; }

.event-form{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  background:var(--cream);
  border-radius:16px;
  padding:clamp(1.4rem,3vw,2.2rem);
}
.event-form__title{ font-family:var(--display); font-size:1.4rem; }
.event-form .cake__fields{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.event-form .btn{ margin-top:1.4rem; }

/* ---------- preguntas ---------- */
.faq{ max-width:780px; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 0;
  font-family:var(--display); font-size:1.12rem;
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--sans); font-size:1.5rem; color:var(--gold); line-height:1; transition:transform .25s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--muted); padding:0 0 1.2rem; max-width:64ch; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cake{ grid-template-columns:1fr; }
  .ticket{ position:static; }
  .srv-steps__list{ grid-template-columns:repeat(2,1fr); }
  .event-form .cake__fields{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .ticket-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    background:var(--navy); color:var(--cream);
    padding:.75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(2,43,59,.18);
    transition:transform .3s ease;
  }
  /* se anima al salir, pero escondida no debe recibir el foco */
  .ticket-bar{ transition:transform .3s ease, visibility 0s; }
  .ticket-bar[hidden]{ display:flex; transform:translateY(110%); visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s; }
  .ticket-bar p{ display:flex; flex-direction:column; font-size:.75rem; line-height:1.2; color:rgba(248,245,240,.7); }
  .ticket-bar strong{ font-family:var(--display); font-weight:400; font-size:1.35rem; color:var(--cream); }
  .ticket-bar .btn{ padding:.8rem 1.4rem; white-space:nowrap; }
}

@media (max-width:760px){
  .srv-hero{ grid-template-columns:1fr; }
  .srv-hero__photo{ justify-self:center; width:min(78%,340px); order:-1; }
  .pick--size,
  .pick--deco{ grid-template-columns:1fr; }
  .pick--size .pick__opt,
  .pick--deco .pick__opt{
    display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
    column-gap:1rem; align-items:center; text-align:left; padding:.9rem 2.6rem .9rem .9rem;
  }
  .pick--size .pick__opt > :is(svg, img),
  .pick--deco .pick__opt > img{ grid-row:1 / span 2; margin:0; }
  .pick--size .pick__opt:nth-child(1){ --d:48; }
  .pick--size .pick__opt:nth-child(2){ --d:56; }
  .pick--size .pick__opt:nth-child(3){ --d:64; }
  .pick--deco .pick__opt > img{ width:72px; height:72px; aspect-ratio:1; border-radius:50%; }
  .pick--size .pick__price{ grid-column:3; grid-row:1 / span 2; padding:0; margin:0; font-size:.95rem; }
  .pick--deco .pick__opt{ grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; }
  .pick--deco .pick__opt > img{ grid-row:1 / span 3; }
  .pick--deco .pick__price{ grid-column:2; padding-top:.35rem; font-size:.95rem; }
  .pick--size .pick__opt:has(input:checked)::after,
  .pick--deco .pick__opt:has(input:checked)::after{ top:50%; transform:translateY(-50%); }
  .pick--flavor{ grid-template-columns:repeat(2,1fr); }
  .events{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .srv-steps__list{ grid-template-columns:1fr; }
  .cake__fields,
  .event-form .cake__fields{ grid-template-columns:1fr; }
  .pick--delivery{ grid-template-columns:1fr; }
  .extras__row{ grid-template-columns:48px 1fr 64px; row-gap:.2rem; }
  .extras__row img, .extras__icon{ width:48px; height:48px; grid-row:1 / span 2; }
  .extras__price{ grid-column:2; grid-row:2; font-size:.95rem; }
  .extras__row input{ grid-column:3; grid-row:1 / span 2; }
  .srv{ padding-bottom:4.5rem; }
}