/* =========================================================
   Casa Gras 1960
   Sistema visual: el xamfrà — la esquina achaflanada de la
   manzana del Eixample. Es la forma del sitio donde está la
   tienda, y aquí es la forma de todo.
   ========================================================= */

:root{
  /* --- Color -------------------------------------------- */
  --paper:      #f0f3e8;   /* fondo: blanco vegetal, no crema */
  --paper-hond: #e5eada;   /* fondo de secciones alternas     */
  --persiana:   #16362a;   /* verde de persiana de barrio     */
  --taronja:    #e8541f;   /* naranja de fruta, no terracota  */
  --taronja-tx: #b8400c;   /* su versión legible sobre el fondo */
  --moscatell:  #e9c63f;   /* amarillo de uva moscatel        */
  --figa:       #9e2b5e;   /* magenta de higo abierto         */
  --tinta:      #12201a;   /* texto                           */
  --tinta-2:    #55665c;   /* texto secundario                */
  --linea:      rgba(22,54,42,.14);
  --linea-sol:  #ccd3c2;   /* la misma línea, opaca             */
  --wa:         #25d366;   /* solo para la marca de WhatsApp  */

  /* --- Forma -------------------------------------------- */
  --cut: 16px;             /* el chaflán                      */
  --cut-sm: 9px;

  /* --- Tipografía --------------------------------------- */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --body:    'Petrona', Georgia, serif;

  /* --- Medidas ------------------------------------------ */
  --wrap: 1180px;
  --pad-y: clamp(4.5rem, 8vw, 7.5rem);
}

/* =========================================================
   Chaflanes
   ========================================================= */
/* El chaflán en diagonal: dos esquinas opuestas cortadas.
   Es la forma de las tarjetas y los paneles. */
.season-card,
.order-box,
.horeca-card,
.visit-card,
.polaroid{
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* La manzana del Eixample: cuadrado con las cuatro esquinas cortadas.
   Es la forma del sello, de los chips de producto y de los números. */
.canasta::before,
.canasta::after,
.sello,
.prod-chip,
.steps span,
.media::before,
.polaroid-img::before{
  clip-path:polygon(26% 0, 74% 0, 100% 26%, 100% 74%,
                    74% 100%, 26% 100%, 0 74%, 0 26%);
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--tinta);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.09rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
ul,ol{ margin:0; padding:0; list-style:none }
p{ margin:0 0 1rem }
p:last-child{ margin-bottom:0 }

a{ color:inherit; text-decoration:none }

:focus-visible{ outline:3px solid var(--figa); outline-offset:3px; border-radius:2px }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }
.section{ padding-block:var(--pad-y) }
.section-alt{ background:var(--paper-hond) }
.muted{ color:var(--tinta-2) }
.small{ font-size:.88rem }
.nowrap{ white-space:nowrap }
/* solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   Tipografía
   ---------------------------------------------------------
   Display  → Bricolage Grotesque 800, ancho normal
   Utility  → Bricolage Grotesque 600, ancho estrecho, versales
   Cuerpo   → Petrona
   ========================================================= */
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:'wdth' 100;
  line-height:.98;
  letter-spacing:-.03em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.9rem,7.4vw,5.3rem) }
h2{ font-size:clamp(2.1rem,4.6vw,3.5rem) }
h3{ font-size:1.18rem; line-height:1.15; letter-spacing:-.015em }

/* la voz de las etiquetas del mostrador */
.util,.eyebrow,.tab,.btn,.precio,.cinta-track span,.nav-links a,
.footer-links a,.cesta-titulo,.field label,.field legend,.hero-facts strong,
.chip,.pref-titulo,.repetir,.segmento span,.idiomas button,.formato,
.fact strong,.horeca-card .big,.logo-year,.sello span{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.76rem;
}

.eyebrow{
  display:inline-block;
  color:var(--taronja-tx);
  margin-bottom:.9rem;
}

/* =========================================================
   Botones
   ---------------------------------------------------------
   El fondo lo pinta un ::before recortado, para que el
   anillo de foco del teclado no se recorte también.
   ========================================================= */
.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1rem 1.6rem;
  background:transparent;
  border:0;
  color:var(--paper);
  cursor:pointer;
  font-size:.8rem;
  transition:transform .16s ease;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--taronja);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-sm)),
                    calc(100% - var(--cut-sm)) 100%,0 100%);
  transition:background .16s ease;
}
.btn:hover{ transform:translateY(-2px) }
.btn:hover::before{ background:var(--figa) }
.btn:active{ transform:translateY(0) }

.btn-wa::before{ background:var(--persiana) }
.btn-wa:hover::before{ background:var(--figa) }

.btn-ghost,.btn-outline{ color:var(--persiana) }
.btn-ghost::before,.btn-outline::before{ background:var(--persiana) }
/* el relleno interior deja ver 2px del de abajo: es el contorno, y sí
   sigue la diagonal del chaflán (un box-shadow interior no lo haría) */
.btn-ghost::after,.btn-outline::after{
  content:'';
  position:absolute;
  inset:2px;
  z-index:-1;
  background:var(--paper);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
  transition:opacity .16s ease;
}
.btn-ghost:hover,.btn-outline:hover{ color:var(--paper) }
.btn-ghost:hover::after,.btn-outline:hover::after{ opacity:0 }

.btn-sm{ padding:.72rem 1.1rem; font-size:.72rem }
.btn-lg{ padding:1.25rem 2.2rem; font-size:.92rem }
.btn-block{ width:100%; justify-content:center }

.wa-icon{ width:1.15em; height:1.15em; fill:currentColor; flex:none }

/* =========================================================
   Barra de aviso
   ========================================================= */
.topbar{
  background:var(--persiana);
  color:var(--paper);
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.68rem;
  padding:.62rem 1.25rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
}
.topbar .sep{ opacity:.35 }
.estado{ color:var(--moscatell); display:inline-flex; align-items:center; gap:.45rem }
.estado::before{
  content:'';
  width:7px; height:7px;
  background:var(--moscatell);
  transform:rotate(45deg);
}
.estado.cerrado{ color:var(--figa) }
.estado.cerrado::before{ background:var(--figa) }

/* =========================================================
   Cabecera
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--linea);
}
.nav-inner{ display:flex; align-items:center; gap:1.75rem; padding-block:.85rem }
.nav-links{ display:flex; gap:1.4rem; margin-left:auto }
.nav-links a{ color:var(--tinta-2); transition:color .15s ease }
.nav-links a:hover{ color:var(--taronja-tx) }

/* --- Idioma: ES · CA · EN ------------------------------- */
.idiomas{ display:flex; align-items:center; color:var(--tinta-2) }
.idiomas .sep{ opacity:.45; font-size:.7rem }
.idiomas button{
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--tinta-2);
  padding:.55rem .4rem;
  font-size:.72rem;
  transition:color .15s ease;
}
.idiomas button:hover{ color:var(--taronja-tx) }
.idiomas button[aria-pressed="true"]{
  color:var(--persiana);
  text-decoration:underline 2px var(--taronja);
  text-underline-offset:.35em;
}

/* --- Logotipo ------------------------------------------- */
.logo{
  display:inline-flex;
  align-items:baseline;
  gap:.34rem;
  font-family:var(--display);
  line-height:1;
}
.logo-casa{
  font-weight:400;
  font-variation-settings:'wdth' 100;
  font-size:1.28rem;
  letter-spacing:-.01em;
  color:var(--taronja);
}
.logo-gras{
  font-weight:800;
  font-variation-settings:'wdth' 100;
  font-size:1.62rem;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--persiana);
}
.logo-year{
  font-size:.6rem;
  color:var(--paper);
  background:var(--persiana);
  padding:.2rem .38rem .16rem;
  letter-spacing:.13em;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
}
.logo-light .logo-gras{ color:var(--paper) }
.logo-light .logo-year{ background:var(--moscatell); color:var(--persiana) }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem) }
.hero-inner{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}

.rating{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.84rem;
  margin-bottom:1.6rem;
  color:var(--tinta-2);
}
.rating .stars{ color:var(--moscatell); letter-spacing:.08em; font-size:.95rem }
.rating strong{ color:var(--tinta) }
.rating:hover{ color:var(--taronja-tx) }

h1 em{
  font-style:normal;
  color:var(--taronja);
}

.lead{
  font-size:clamp(1.06rem,1rem + .4vw,1.24rem);
  color:var(--tinta-2);
  max-width:44ch;
  margin:1.6rem 0 2.1rem;
}

.hero-cta{ display:flex; gap:.85rem; flex-wrap:wrap }

.hero-facts{
  display:flex;
  gap:2.2rem;
  margin-top:2.8rem;
  padding-top:1.6rem;
  border-top:1px solid var(--linea);
  flex-wrap:wrap;
}
.hero-facts li{ display:flex; flex-direction:column; gap:.28rem }
.hero-facts strong{ color:var(--taronja-tx); font-size:.82rem }
.hero-facts span{ font-size:.86rem; color:var(--tinta-2) }

/* --- La manzana del Eixample ---------------------------- */
.hero-art{ position:relative; display:flex; justify-content:center }

.illa-label{
  position:absolute;
  top:-.4rem; left:0;
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.62rem;
  color:var(--tinta-2);
}

.canasta{
  position:relative;
  width:min(100%,420px);
  aspect-ratio:1;
  background:var(--persiana);
  display:grid;
  place-items:center;
}
/* El perfil interior de la manzana, como en un plano.
   Son dos octógonos rellenos, uno encima del otro: el de abajo asoma
   1px y ese asomo ES la línea. Un `border` se cortaría en las diagonales. */
.canasta::before,
.canasta::after{
  content:'';
  position:absolute;
  z-index:0;
  pointer-events:none;
}
.canasta::before{ inset:13%;             background:rgba(240,243,232,.18) }
.canasta::after { inset:calc(13% + 1px); background:var(--persiana) }

.fruta{
  position:absolute;
  z-index:1;
  width:clamp(46px,11%,64px);
  animation:flotar 5.4s ease-in-out infinite;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.fruta svg{ width:100%; height:auto; display:block }

.f1{ top:16%; left:22% }
.f2{ top:11%; left:57%; animation-delay:.5s }
.f3{ top:33%; left:70%; animation-delay:1.05s }
.f4{ top:57%; left:73%; animation-delay:1.6s }
.f5{ top:74%; left:52%; animation-delay:2.15s }
.f6{ top:70%; left:22%; animation-delay:2.7s }
.f7{ top:45%; left:12%; animation-delay:3.25s }
.f8{ top:41%; left:43%; animation-delay:3.8s }

@keyframes flotar{
  0%,100%{ transform:translateY(0)      rotate(-5deg) }
  50%    { transform:translateY(-15px)  rotate(5deg)  }
}

/* --- El sello, encajado en el chaflán ------------------- */
.sello{
  position:absolute;
  right:-14px; bottom:-14px;
  width:118px; height:118px;
  background:var(--moscatell);
  color:var(--persiana);
  display:grid;
  place-content:center;
  text-align:center;
  gap:.1rem;
  transform:rotate(-8deg);
  z-index:2;
}
.sello span{ display:block; letter-spacing:.1em; font-size:.58rem }
.sello .sello-year{
  font-size:1.55rem;
  font-weight:800;
  font-variation-settings:'wdth' 100;
  letter-spacing:-.02em;
  color:var(--figa);
  line-height:1;
  margin:.12rem 0;
  text-transform:none;
}

/* =========================================================
   Cinta de temporada
   ========================================================= */
.cinta{
  background:var(--moscatell);
  color:var(--persiana);
  overflow:hidden;
  padding:.85rem 0;
  border-block:1px solid rgba(0,0,0,.08);
}
.cinta-track{
  display:flex;
  width:max-content;
  animation:desfile 42s linear infinite;
}
.cinta-track span{
  padding-inline:1.15rem;
  font-size:.74rem;
  display:inline-flex;
  align-items:center;
  gap:1.15rem;
  white-space:nowrap;
}
.cinta-track span::after{
  content:'';
  width:6px; height:6px;
  background:currentColor;
  opacity:.55;
  transform:rotate(45deg);
}
@keyframes desfile{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.cinta:hover .cinta-track{ animation-play-state:paused }

/* =========================================================
   Franja de datos  (antes: tarjetas de valores)
   ========================================================= */
.values{ border-bottom:1px solid var(--linea) }
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:2.6rem;
  gap:1px;
  background:var(--linea);
}
.fact{
  background:var(--paper);
  padding:0 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.fact:first-child{ padding-left:0 }
.fact:last-child{ padding-right:0 }
.fact strong{ color:var(--taronja-tx) }
.fact p{ font-size:.94rem; color:var(--tinta-2); line-height:1.5 }

/* =========================================================
   Encabezados de sección
   ========================================================= */
.section-head{ max-width:52ch; margin-bottom:3rem }
.section-head h2 + .section-sub{ margin-top:1.1rem }
.section-sub{ color:var(--tinta-2); font-size:1.04rem }

/* =========================================================
   De temporada
   ========================================================= */
.season-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}
.season-card{
  background:var(--paper-hond);
  transition:transform .2s ease;
}
.section-alt .season-card{ background:var(--paper) }
.season-card:hover{ transform:translateY(-4px) }

.media{
  aspect-ratio:4/3;
  background:var(--c,var(--persiana));
  display:grid;
  place-items:center;
  overflow:hidden;
}
.media img{ width:100%; height:100%; object-fit:cover }
.media::before{
  content:'';
  width:38%;
  aspect-ratio:1;
  background:rgba(255,255,255,.22);
}
.media:has(img)::before{ display:none }

.season-body{ padding:1.35rem 1.4rem 1.6rem }
.season-body p{ font-size:.94rem; color:var(--tinta-2); margin:.6rem 0 1rem; line-height:1.5 }

.precio{
  display:inline-block;
  background:var(--persiana);
  color:var(--moscatell);
  padding:.42rem .7rem .36rem;
  font-size:.65rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
}

/* =========================================================
   Catálogo
   ========================================================= */
.tabs{
  display:flex;
  gap:.5rem;
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.tab{
  position:relative;
  isolation:isolate;
  border:0;
  cursor:pointer;
  padding:.78rem 1.25rem;
  background:transparent;
  color:var(--tinta-2);
  transition:color .15s ease;
}
.tab::before,.tab::after{
  content:'';
  position:absolute;
  z-index:-1;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
  transition:background .15s ease, opacity .15s ease;
}
.tab::before{ inset:0;   background:var(--linea-sol) }
.tab::after { inset:1px; background:var(--paper-hond) }
.tab:hover{ color:var(--taronja-tx) }
.tab[aria-selected="true"]{ color:var(--paper) }
.tab[aria-selected="true"]::before{ background:var(--persiana) }
.tab[aria-selected="true"]::after{ opacity:0 }

.prod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--linea);
  box-shadow:0 0 0 1px var(--linea);
}
.prod{
  background:var(--paper-hond);
  padding:1.5rem 1.4rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  transition:background .18s ease;
}
.section-alt .prod{ background:var(--paper-hond) }
.prod:hover{ background:var(--paper) }

/* la manzana del Eixample, en el color de la fruta */
.prod-chip{
  width:30px;
  aspect-ratio:1;
  background:var(--c,var(--taronja));
  margin-bottom:.75rem;
}
.prod p{ font-size:.88rem; color:var(--tinta-2); line-height:1.45; flex:1 }
/* «De ½ en ½ kg», «Por docena»: cómo se pide, justo encima del botón */
.formato{ margin-top:.7rem; font-size:.62rem; color:var(--tinta-2) }
.formato + .add,.formato ~ .qty-card{ margin-top:.5rem }

/* Sin chaflán a propósito: 28 botones pequeños no necesitan la forma,
   y un borde de verdad se dibuja bien en las cuatro esquinas. */
.add{
  margin-top:.9rem;
  cursor:pointer;
  align-self:flex-start;
  background:transparent;
  color:var(--persiana);
  border:1.5px solid var(--linea-sol);
  border-radius:0;
  padding:.55rem .9rem;
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.68rem;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.add:hover{ background:var(--persiana); border-color:var(--persiana); color:var(--paper) }
.add.puesto{ background:var(--taronja-tx); border-color:var(--taronja-tx); color:var(--paper) }

/* =========================================================
   Pedido
   ========================================================= */
.order-grid{
  display:grid;
  grid-template-columns:1.35fr .8fr;
  gap:2.4rem;
  align-items:start;
}
.order-box{
  background:var(--paper-hond);
  padding:clamp(1.6rem,3vw,2.4rem);
}

.cesta{ margin-bottom:1.8rem }
.cesta-titulo{ display:block; color:var(--taronja-tx); margin-bottom:.9rem }
.cesta-vacia{
  font-size:.94rem;
  color:var(--tinta-2);
  padding:1.1rem 1.2rem;
  background:rgba(22,54,42,.05);
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px);
}
.cesta-vacia a{ color:var(--taronja-tx); text-decoration:underline; text-underline-offset:2px }

.cesta-vacia p{ margin:0 }
.repetir{
  margin-top:.9rem;
  cursor:pointer;
  background:var(--persiana);
  color:var(--paper);
  border:0;
  padding:.6rem .95rem;
  font-size:.7rem;
}
.repetir:hover{ background:var(--figa) }

.cesta-lista{ display:flex; flex-direction:column; gap:1px; background:var(--linea) }
/* chip · nombre · cantidad · quitar
   debajo, a todo el ancho, las preferencias de la línea */
.cesta-item{
  background:var(--paper);
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  grid-template-areas:
    "chip nombre qty quitar"
    "prefs prefs prefs prefs";
  align-items:center;
  column-gap:.85rem;
  padding:.75rem .9rem .55rem;
}
.cesta-item .prod-chip{ grid-area:chip; width:18px; margin:0 }
.cesta-item .nombre{ grid-area:nombre; font-size:.98rem; line-height:1.25; min-width:0 }
.cesta-item .qty{ grid-area:qty }
.cesta-item .quitar{ grid-area:quitar }
.cesta-pie{ font-size:.84rem; color:var(--tinta-2); margin:.7rem 0 0 }

/* chips de elección: sin chaflán, como .add (borde de verdad en las cuatro esquinas) */
.chips{ display:flex; flex-wrap:wrap; gap:.35rem }
.chip{
  cursor:pointer;
  background:transparent;
  color:var(--persiana);
  border:1.5px solid var(--linea-sol);
  padding:.34rem .6rem;
  font-size:.64rem;
  line-height:1.2;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{ border-color:var(--persiana) }
.chip[aria-pressed="true"]{ background:var(--persiana); border-color:var(--persiana); color:var(--paper) }

.prefs{ grid-area:prefs; margin-top:.35rem }
.prefs summary{
  cursor:pointer;
  font-size:.84rem;
  color:var(--taronja-tx);
  padding:.15rem 0;
  list-style:none;
}
.prefs summary::-webkit-details-marker{ display:none }
.prefs summary::before{ content:'＋ '; font-size:.75rem }
.prefs[open] summary::before{ content:'− ' }
.prefs summary:hover{ text-decoration:underline; text-underline-offset:2px }
.pref{ padding:.45rem 0 .3rem }
.pref-titulo{ display:block; font-size:.62rem; color:var(--tinta-2); margin-bottom:.35rem }
.qty{ display:flex; align-items:center; gap:.55rem }
.qty button{
  width:27px; height:27px;
  border:0;
  cursor:pointer;
  background:var(--persiana);
  color:var(--paper);
  font-size:1rem;
  line-height:1;
  display:grid;
  place-items:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
}
.qty button:hover{ background:var(--figa) }
.qty .n{
  min-width:1.5rem;
  text-align:center;
  font-family:var(--display);
  font-weight:800;
  font-size:.95rem;
}
.quitar{
  border:0; cursor:pointer; background:transparent;
  color:var(--tinta-2); font-size:1.15rem; line-height:1; padding:.2rem .3rem;
}
.quitar:hover{ color:var(--figa) }

.qty .n{ white-space:nowrap }
.cesta-item .qty .n{ min-width:3.3rem }
/* en la tarjeta del catálogo, el mismo control en lugar de «Añadir» */
.qty-card{ margin-top:.9rem; align-self:flex-start }
.add[hidden]{ display:none }

.field{ margin-bottom:1.15rem; display:flex; flex-direction:column }
.field[hidden]{ display:none }
.field label,.field legend{ color:var(--taronja-tx); margin-bottom:.55rem }
fieldset.field{ border:0; padding:0; margin-inline:0; min-width:0 }
.opcional{ color:var(--tinta-2); text-transform:none; letter-spacing:0 }

/* recogida / reparto: dos mitades, la elegida en verde */
.segmento{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea-sol); border:1px solid var(--linea-sol) }
.segmento label{ position:relative; margin:0; cursor:pointer }
.segmento input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.segmento span{
  display:block;
  text-align:center;
  padding:.8rem .6rem;
  background:var(--paper);
  color:var(--persiana);
  font-size:.74rem;
  transition:background .15s ease,color .15s ease;
}
.segmento input:checked + span{ background:var(--persiana); color:var(--paper) }
.segmento input:focus-visible + span{ outline:3px solid var(--figa); outline-offset:-3px }
.segmento-3{ grid-template-columns:repeat(3,1fr) }
.aviso-pago{ margin-top:.6rem }

.reparto{
  border-left:3px solid var(--moscatell);
  padding-left:1rem;
  margin-bottom:1.15rem;
}
.casilla{ display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; cursor:pointer; margin-bottom:.8rem }
.casilla input{ width:auto; margin-top:.3rem; accent-color:var(--persiana) }
.aviso{ font-size:.84rem; color:var(--tinta-2); margin:0 }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem }
.field-row-cp{ grid-template-columns:2fr 1fr }
.franjas .field-row .field{ margin-bottom:0 }
.franjas .field label{ color:var(--tinta-2) }

/* lo que impide enviar: código postal fuera de Barcelona, franja pasada, sin forma de pago */
.alerta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  font-size:.9rem; line-height:1.45;
  background:var(--paper);
  border-left:3px solid var(--figa);
  padding:.7rem .9rem;
  margin:-.4rem 0 1.15rem;
}
.alerta:empty{ display:none }
.alerta .repetir{ margin-top:0 }
.field > .alerta{ margin:.6rem 0 0 }

/* pedido mínimo y reparto gratis: sin precios en la web, se dice con palabras */
.minimo{
  font-size:.9rem; line-height:1.5; color:var(--tinta-2);
  border-left:3px solid var(--taronja);
  padding:.15rem 0 .15rem 1rem;
  margin:.4rem 0 1.4rem;
}
.minimo strong{ color:var(--persiana); display:block; margin-bottom:.2rem }

input,textarea,select{
  font-family:var(--body);
  font-size:1rem;
  color:var(--tinta);
  background:var(--paper);
  border:1px solid var(--linea);
  border-radius:0;
  padding:.78rem .9rem;
  width:100%;
  transition:border-color .15s ease;
}
input:focus,textarea:focus,select:focus{ border-color:var(--persiana) }
/* el desplegable sin el aspecto del sistema, con una flecha dibujada */
select{
  appearance:none;
  cursor:pointer;
  padding-right:2.3rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--persiana) 50%),
    linear-gradient(135deg, var(--persiana) 50%, transparent 50%);
  background-position:calc(100% - 1.15rem) 52%, calc(100% - .8rem) 52%;
  background-size:.35rem .35rem;
  background-repeat:no-repeat;
}
textarea{ resize:vertical }
::placeholder{ color:var(--tinta-2); opacity:.65 }

.order-note{ font-size:.84rem; color:var(--tinta-2); margin-top:.9rem; text-align:center }

.order-side h3{ margin-bottom:1.4rem }
.steps{ display:flex; flex-direction:column; gap:1.3rem; margin-bottom:2rem }
.steps li{ display:flex; gap:.95rem }
.steps span{
  flex:none;
  width:30px; height:30px;
  background:var(--persiana);
  color:var(--moscatell);
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:800;
  font-size:.88rem;
}
.steps strong{ font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:-.015em }
.steps p{ font-size:.9rem; color:var(--tinta-2); margin-top:.25rem; line-height:1.5 }

.order-direct{ padding-top:1.6rem; border-top:1px solid var(--linea) }
.order-direct p{ font-size:.9rem; color:var(--tinta-2); margin-bottom:.7rem }
.wa-link{
  display:block;
  color:var(--taronja-tx);
  font-size:.95rem;
  padding:.2rem 0;
  text-decoration:underline;
  text-underline-offset:3px;
}
.wa-link:hover{ color:var(--figa) }

/* =========================================================
   Restauración
   ========================================================= */
.horeca{ background:var(--persiana); color:var(--paper) }
.horeca .eyebrow{ color:var(--moscatell) }
.horeca h2{ margin-bottom:1.3rem }
.horeca p{ color:rgba(240,243,232,.72) }
.horeca-inner{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.horeca-list{ margin:1.6rem 0 2.1rem; display:flex; flex-direction:column; gap:.65rem }
.horeca-list li{
  display:flex; align-items:baseline; gap:.75rem;
  font-size:.98rem; color:rgba(240,243,232,.86);
}
.horeca-list li::before{
  content:'';
  flex:none;
  width:7px; height:7px;
  background:var(--moscatell);
  transform:rotate(45deg);
}
.horeca .btn-wa{ color:var(--persiana) }
.horeca .btn-wa::before{ background:var(--moscatell) }
.horeca .btn-wa:hover::before{ background:var(--paper) }

.horeca-card{
  background:rgba(240,243,232,.07);
  padding:2rem 1.8rem;
}
.horeca-card .big{
  display:block;
  font-size:2.5rem;
  font-weight:800;
  font-variation-settings:'wdth' 100;
  letter-spacing:-.035em;
  text-transform:none;
  color:var(--moscatell);
  line-height:1;
}
.horeca-card p{ margin:.7rem 0 1.8rem; font-size:.92rem; line-height:1.5 }
.horeca-card p:last-child{ margin-bottom:0 }

/* =========================================================
   Franja de afirmación
   ========================================================= */
.statement{
  background:var(--moscatell);
  color:var(--persiana);
  padding-block:clamp(3.5rem,7vw,6rem);
  text-align:center;
}
.statement h2{
  font-size:clamp(3rem,10.5vw,8rem);
  letter-spacing:-.045em;
  line-height:.86;
}
.statement .desde{ color:var(--figa) }
.statement p{
  margin-top:1.5rem;
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.76rem;
}

/* =========================================================
   Nosotros
   ========================================================= */
.story-inner{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.polaroid{
  background:var(--persiana);
  padding:1rem 1rem 1.3rem;
  transform:rotate(-2.5deg);
}
.polaroid-img{
  aspect-ratio:4/5;
  background:var(--paper-hond);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.polaroid-img img{ width:100%; height:100%; object-fit:cover }
.polaroid-img::before{
  content:'';
  width:34%;
  aspect-ratio:1;
  background:var(--taronja);
}
.polaroid-img:has(img)::before{ display:none }
.polaroid p{
  margin-top:.9rem;
  text-align:center;
  color:var(--moscatell);
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.66rem;
}

.generaciones{
  display:flex;
  gap:1px;
  background:var(--linea);
  margin:1.5rem 0 1.8rem;
  box-shadow:0 0 0 1px var(--linea);
}
.generaciones li{
  background:var(--paper);
  flex:1;
  padding:.85rem .9rem;
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.66rem;
  color:var(--tinta-2);
}
.generaciones li:last-child{ color:var(--taronja-tx) }
.story-copy .btn{ margin-top:1.6rem }

/* =========================================================
   Visítanos
   ========================================================= */
.visit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem }
.visit-card{
  background:var(--paper);
  padding:1.8rem 1.7rem;
}
.visit-card h3{ color:var(--taronja-tx); margin-bottom:1rem }
.direccion-grande{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:'wdth' 100;
  font-size:1.35rem;
  letter-spacing:-.025em;
  line-height:1.1;
  margin-bottom:.5rem;
}
.horario-unico{ display:flex; flex-direction:column; gap:.15rem; margin-bottom:.6rem }
.horario-unico strong{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:'wdth' 100;
  font-size:1.85rem;
  letter-spacing:-.03em;
  line-height:1;
}
.horario-unico span{ font-size:.9rem; color:var(--tinta-2) }
.link-arrow{
  color:var(--taronja-tx);
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:.95rem;
}
.link-arrow:hover{ color:var(--figa) }

/* =========================================================
   CTA final
   ========================================================= */
.cta-final{
  background:var(--figa);
  color:var(--paper);
  padding-block:clamp(3.5rem,7vw,5.5rem);
  text-align:center;
}
.cta-final p{ margin:1rem 0 2rem; font-size:1.1rem; color:rgba(240,243,232,.88) }
.cta-final .btn-wa{ color:var(--persiana) }
.cta-final .btn-wa::before{ background:var(--moscatell) }
.cta-final .btn-wa:hover::before{ background:var(--paper) }

/* =========================================================
   Pie
   ========================================================= */
/* abajo, sitio para el botón flotante: si no, tapa los enlaces legales */
.footer{ background:var(--persiana); color:var(--paper); padding-block:3rem 6.5rem }
.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr auto;
  gap:2rem;
  align-items:center;
}
.footer .muted{ color:rgba(240,243,232,.72); font-size:.9rem; margin-top:.7rem }
.footer-links{ display:flex; gap:1.3rem; flex-wrap:wrap }
.footer-links a{ color:rgba(240,243,232,.75) }
.footer-links a:hover{ color:var(--moscatell) }
.footer-legal p{ margin:0 0 .35rem }
.footer-legal a{ text-decoration:underline; text-underline-offset:2px }
.footer-legal a:hover{ color:var(--moscatell) }

/* =========================================================
   Páginas legales (aviso-legal.html, privacidad.html)
   ========================================================= */
.legal{ padding-block:clamp(2.5rem,6vw,4.5rem) }
.legal .wrap{ max-width:46rem }
.legal h1{ font-size:clamp(2.2rem,5vw,3.2rem); margin-bottom:.6rem }
.legal h2{ font-size:1.35rem; margin:2.4rem 0 .8rem; letter-spacing:-.02em }
.legal p,.legal li{ color:var(--tinta-2) }
.legal ul{ list-style:disc; padding-left:1.3rem; margin:0 0 1rem }
.legal li{ margin-bottom:.4rem }
.legal a{ color:var(--taronja-tx); text-decoration:underline; text-underline-offset:2px }
.legal .actualizado{ font-size:.88rem }
.legal-datos{ background:var(--paper-hond); padding:1.2rem 1.4rem; margin:1rem 0 }
.legal-datos p{ margin:0 0 .25rem; color:var(--tinta) }

/* =========================================================
   Botón flotante
   ========================================================= */
.wa-float{
  position:fixed;
  right:1.15rem; bottom:1.15rem;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.95rem 1.3rem;
  background:var(--wa);
  color:var(--persiana);
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:'wdth' 78;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.72rem;
  filter:drop-shadow(0 8px 18px rgba(18,32,26,.34));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.wa-float svg{ width:1.3em; height:1.3em; fill:currentColor }
.wa-float .contador{
  display:none;
  min-width:1.35rem;
  padding:.1rem .3rem;
  background:var(--figa);
  color:#fff;
  font-size:.72rem;
  text-align:center;
}
.wa-float .contador.visible{ display:inline-block }

/* =========================================================
   Adaptación a pantallas pequeñas
   ========================================================= */
@media (max-width:1120px){
  .nav-links{ display:none }
  .idiomas{ margin-left:auto }
}

@media (max-width:1000px){
  .hero-inner,.horeca-inner,.story-inner,.order-grid{ grid-template-columns:1fr }
  .hero-art{ order:-1 }
  .canasta{ width:min(100%,340px) }
  .season-grid,.prod-grid,.values-grid{ grid-template-columns:repeat(2,1fr) }
  .visit-grid{ grid-template-columns:1fr }
  .fact{ padding:1.1rem 1.3rem }
  .fact:first-child,.fact:last-child{ padding-inline:1.3rem }
  .footer-inner{ grid-template-columns:1fr; text-align:left }
}

@media (max-width:620px){
  .season-grid,.values-grid{ grid-template-columns:1fr }
  /* dos columnas de producto, como en la app: 28 tarjetas en fila india se hacen eternas */
  .prod{ padding:1.1rem 1rem 1rem }
  .prod h3{ font-size:1.02rem }
  /* apilados, el margen de cada campo ya los separa */
  .field-row,.field-row-cp{ grid-template-columns:1fr; gap:0 }
  .franjas .field-row{ gap:1.15rem }
  /* en el móvil: nombre y × arriba; la cantidad debajo, a la derecha */
  .cesta-item{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "chip nombre quitar"
      ".    qty    qty"
      "prefs prefs prefs";
    column-gap:.6rem; row-gap:.45rem; padding-inline:.7rem;
  }
  .cesta-item .qty{ justify-self:end }
  .cesta-item .quitar{ justify-self:end }
  .cesta-item .qty .n{ min-width:2.9rem }
  .oculta-movil{ display:none }
  .hero-facts{ gap:1.4rem }
  .generaciones{ flex-direction:column }
  .wa-float .txt{ display:none }
  .sello{ width:92px; height:92px }
  .statement h2{ font-size:clamp(2.6rem,13vw,4rem) }
}

/* En un móvil estrecho no caben logo, idioma y botón: el botón flotante
   «Mi pedido» ya lleva al mismo sitio. */
@media (max-width:480px){
  .nav-inner{ gap:1rem }
  .nav .btn-sm{ display:none }
}

/* =========================================================
   Movimiento reducido
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .fruta{ animation:none }
  .cinta-track{
    animation:none;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
  .btn,.season-card{ transition:none }
  .btn:hover,.season-card:hover{ transform:none }
}