/* ==========================================================================
   Catering de Lisi — hoja de estilo
   UEYIA 2026. Sin framework, sin dependencias.

   La paleta sale del sitio actual (negro, blanco y grises) y es deliberada:
   en una web de catering el color lo pone la comida. Todo lo demas se aparta.
   ========================================================================== */

:root {
  --tinta:        #1a1a1a;
  --tinta-suave:  #5c5c5c;
  --tenue:        #8a8a8a;
  --papel:        #ffffff;
  --papel-hueso:  #f6f4f1;
  --linea:        #e4e0da;

  /* Un unico acento, calido, para lo que hay que pulsar. */
  --acento:       #9a6b2f;
  --acento-vivo:  #b8823d;
  --wasap:        #25d366;

  --ancho:        1180px;
  --gutter:       clamp(1rem, 4vw, 2.5rem);

  --titular: "Raleway", "Segoe UI", system-ui, sans-serif;
  --prosa:   "Raleway", "Segoe UI", system-ui, sans-serif;
  --floreo:  "Libre Baskerville", Georgia, serif;

  --sombra:    0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --sombra-alta: 0 4px 8px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.14);
  --curva:     cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------- cimientos */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--prosa);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--titular);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

.envoltura {
  width: min(100% - var(--gutter) * 2, var(--ancho));
  margin-inline: auto;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: 50%; translate: -50% -120%;
  z-index: 200; background: var(--tinta); color: #fff;
  padding: .8rem 1.4rem; font-weight: 600; text-decoration: none;
  transition: translate .2s var(--curva);
}
.saltar:focus { translate: -50% 0; }

/* ------------------------------------------------------------------ titulos */

.rotulo {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--acento);
  margin-bottom: 1rem;
  display: block;
}

.titulo-seccion {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: -.01em;
}

.entradilla {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--tinta-suave);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ botones */

.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.8rem;
  font-family: var(--titular);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: all .25s var(--curva);
  white-space: nowrap;
}
.boton--solido { background: var(--acento); color: #fff; border-color: var(--acento); }
.boton--solido:hover { background: var(--acento-vivo); border-color: var(--acento-vivo); translate: 0 -2px; box-shadow: var(--sombra); }
.boton--linea { border-color: currentColor; color: inherit; }
.boton--linea:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton--claro { border-color: #fff; color: #fff; }
.boton--claro:hover { background: #fff; color: var(--tinta); }
.boton--wasap { background: var(--wasap); border-color: var(--wasap); color: #06301a; }
.boton--wasap:hover { filter: brightness(1.08); translate: 0 -2px; }

/* --------------------------------------------------------------- barra alta */

.barra-alta {
  background: var(--tinta); color: #fff;
  font-size: .82rem;
}
.barra-alta__fila {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem, 3vw, 2.2rem); flex-wrap: wrap;
  padding: .5rem 0; text-align: center;
}
.barra-alta a {
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; padding: .2rem;
}
.barra-alta a:hover { color: var(--acento-vivo); }
.barra-alta svg { width: 1em; height: 1em; flex: none; }

/* ---------------------------------------------------------------- cabecera */

/* Sin backdrop-filter a proposito: crea un bloque contenedor y el panel del
   menu movil, que es position:fixed, dejaria de medirse contra la ventana
   para medirse contra la cabecera. En vez de superponerse, ensancha la
   pagina. El desenfoque aqui no aportaba casi nada y ademas cuesta en movil. */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .3s var(--curva);
}
.cabecera.esta-abajo { box-shadow: var(--sombra); }

.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .6rem 0;
  transition: padding .25s var(--curva);
}
.cabecera.esta-abajo .cabecera__fila { padding: .45rem 0; }

/* El logo del cliente: gorro de chef sobre el rotulo, casi cuadrado (413x430).
   Se dimensiona por altura y el ancho sale solo, para que no se deforme.

   Grande arriba del todo, que es donde luce, y se encoge al hacer scroll para
   que la cabecera pegajosa no se coma media pantalla en movil. */
.marca { display: flex; align-items: center; text-decoration: none; flex: none; }
.marca img {
  height: clamp(3.9rem, 6.5vw, 5rem); width: auto;
  transition: height .25s var(--curva);
}
.cabecera.esta-abajo .marca img { height: clamp(3rem, 4.5vw, 3.5rem); }

.nav { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.5rem); }
.nav a {
  text-decoration: none; font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem 0; position: relative; color: var(--tinta);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: .15rem;
  width: 0; height: 2px; background: var(--acento);
  transition: width .25s var(--curva);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

.hamburguesa {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .6rem; color: var(--tinta);
}
.hamburguesa svg { width: 26px; height: 26px; }

/* 75rem = 1200px. Con seis enlaces mas el boton, el menu horizontal
   deja de caber bastante antes de la tableta. */
@media (max-width: 75rem) {
  .hamburguesa { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(85vw, 22rem);
    background: var(--papel); flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0; padding: 5.5rem 1.8rem 2rem;
    translate: 100% 0; transition: translate .3s var(--curva);
    box-shadow: var(--sombra-alta); overflow-y: auto;
  }
  .nav[data-abierto="si"] { translate: 0 0; }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
  .nav .boton { margin-top: 1.2rem; justify-content: center; }
  .velo {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--curva); z-index: 99;
  }
  .velo[data-abierto="si"] { opacity: 1; pointer-events: auto; }
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative; display: grid; align-items: end;
  min-height: min(78vh, 42rem); color: #fff; overflow: hidden;
}
.hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.78) 100%);
}
.hero__caja { padding: clamp(3rem, 9vw, 6rem) 0; max-width: 46rem; }
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 4rem);
  letter-spacing: -.015em; margin-bottom: .5em;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero h1 em {
  font-family: var(--floreo); font-style: italic;
  font-weight: 400; display: block; font-size: .62em;
  color: #f0dcc0; margin-top: .18em; letter-spacing: 0;
}
.hero__texto {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  max-width: 44ch; color: rgba(255,255,255,.92);
}
.hero__botones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

.hero__sello {
  position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%;
  width: clamp(5rem, 9vw, 7.5rem); opacity: .9;
}
@media (max-width: 48rem) { .hero__sello { display: none; } }

/* ----------------------------------------------------------------- bloques */

.bloque { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.bloque--hueso { background: var(--papel-hueso); }
.bloque--tinta { background: var(--tinta); color: #fff; }
.bloque--tinta .entradilla { color: rgba(255,255,255,.72); }

.bloque__cabeza { max-width: 56rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.bloque__cabeza--centro { margin-inline: auto; text-align: center; }
.bloque__cabeza--centro .entradilla { margin-inline: auto; }

/* --------------------------------------------------------- las tres puertas */

.puertas { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.puerta {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; color: #fff; min-height: 24rem;
  background: var(--tinta);
}
.puerta img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: scale .7s var(--curva); scale: 1;
}
.puerta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.82) 100%);
}
.puerta:hover img, .puerta:focus-visible img { scale: 1.06; }
.puerta__texto { position: relative; z-index: 1; padding: 1.9rem; margin-top: auto; }
.puerta { display: flex; flex-direction: column; justify-content: flex-end; }
.puerta__titulo {
  font-size: 1.45rem; margin-bottom: .35em;
  letter-spacing: .04em; text-transform: uppercase;
}
.puerta p { font-size: .94rem; color: rgba(255,255,255,.85); margin: 0; }
.puerta__mas {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #f0dcc0;
}
.puerta:hover .puerta__mas { gap: .8rem; }
.puerta__mas span { transition: gap .25s var(--curva); }

/* ---------------------------------------------------------------- pilares */

.pilares {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pilar { text-align: center; }
.pilar__icono {
  width: 3.4rem; height: 3.4rem; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border: 2px solid var(--acento); border-radius: 50%; color: var(--acento);
}
.pilar__icono svg { width: 1.5rem; height: 1.5rem; }
.pilar h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.pilar p { font-size: .92rem; color: var(--tinta-suave); margin: 0; }

/* --------------------------------------------------------------- servicios */

/* `align-items: start` y no el estirado de serie: una tarjeta sin foto media
   lo que mide su texto. Estirada hasta la altura de la fila dejaba debajo un
   hueco enorme en blanco, que es lo que parecia una foto que no carga. */
.servicios {
  display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.servicio {
  background: var(--papel); border: 1px solid var(--linea);
  text-decoration: none; color: inherit; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .3s var(--curva), translate .3s var(--curva);
}
.servicio:hover { box-shadow: var(--sombra-alta); translate: 0 -4px; }
.servicio img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.servicio__texto { padding: 1.3rem 1.4rem 1.5rem; }
.servicio h3 { font-size: 1.02rem; margin-bottom: .3em; }
.servicio p { font-size: .9rem; color: var(--tinta-suave); margin: 0; }

/* ------------------------------------------------------------- testimonios */

.testimonios { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

.testimonio {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  padding: 2rem 1.8rem; display: flex; flex-direction: column;
}
.testimonio__comillas { font-family: var(--floreo); font-size: 3rem; line-height: .6; color: var(--acento-vivo); margin-bottom: .6rem; }
.testimonio p { font-size: .96rem; color: rgba(255,255,255,.86); }
.testimonio footer {
  margin-top: auto; padding-top: 1.1rem; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento-vivo); font-weight: 700;
}

/* --------------------------------------------------------------- confianza */

.confianza { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.8rem, 5vw, 3.6rem); }
.confianza li { list-style: none; font-family: var(--titular); font-weight: 700; font-size: clamp(.9rem, 1.6vw, 1.1rem); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.confianza { padding: 0; margin: 0; }

/* -------------------------------------------------------------- cierre CTA */

.cierre { position: relative; color: #fff; text-align: center; overflow: hidden; }
.cierre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cierre::after { content: ""; position: absolute; inset: 0; background: rgba(15,12,10,.78); z-index: -1; }
.cierre h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); }
.cierre__botones { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }
.cierre__nota { margin-top: 1.6rem; font-size: .86rem; color: rgba(255,255,255,.6); }

/* ------------------------------------------------------- wasap flotante */

.wasap-flota {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--wasap); color: #06301a;
  display: grid; place-items: center;
  box-shadow: var(--sombra-alta); text-decoration: none;
  transition: scale .25s var(--curva);
}
.wasap-flota:hover { scale: 1.08; }
.wasap-flota svg { width: 1.7rem; height: 1.7rem; }


/* Instagram, Facebook, YouTube y WhatsApp: las cuatro que tiene el cliente.
   Area de pulsado de 40px, que es el minimo comodo en movil. */
.redes {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; padding: 0; margin: 0;
}
.redes a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  color: #fff; text-decoration: none;
  border-radius: 50%;
  transition: background .2s var(--curva), color .2s var(--curva), scale .2s var(--curva);
}
.redes svg { width: 1.15rem; height: 1.15rem; }
.redes a:hover { background: rgba(255,255,255,.14); color: var(--acento-vivo); scale: 1.08; }

.redes--pie { margin-top: 1.4rem; gap: .1rem; }
.redes--pie a { color: rgba(255,255,255,.72); }
.redes--pie a:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Con nueve resenas la rejilla se hace alta; en pantallas grandes van a tres
   columnas y el texto se queda corto de leer, asi que se aprieta un poco. */
.bloque--tinta .testimonios .testimonio { padding: 1.6rem 1.5rem; }
.bloque--tinta .testimonios .testimonio p { font-size: .92rem; }

/* ============================================================== EL PIE ==== */

.pie {
  /* Negro con una pizca de calido, no negro de terminal. */
  background: #151311;
  color: rgba(255,255,255,.66);
  font-size: .93rem;
  /* Un filo del color de acento arriba, que separa sin gritar. */
  border-top: 3px solid var(--acento);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.pie__rejilla {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  /* La marca ocupa algo mas que las columnas de enlaces. */
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 62rem) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .pie__rejilla { grid-template-columns: 1fr; } }

.pie h3 {
  color: #fff; font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 1.3rem;
  position: relative; padding-bottom: .7rem;
}
/* Subrayado corto bajo cada titulo de columna. */
.pie h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2rem; height: 2px; background: var(--acento);
}

.pie a { color: rgba(255,255,255,.66); text-decoration: none; transition: color .2s var(--curva); }
.pie a:hover { color: #fff; }

/* ---- columna de marca ---- */

.pie__marca img { height: 6.5rem; width: auto; }
.pie__lema { margin-top: 1.2rem; max-width: 32ch; line-height: 1.7; }

/* ---- enlaces ---- */

.pie__enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.pie__enlaces a {
  display: inline-block; position: relative; padding-left: 0;
  transition: padding-left .2s var(--curva), color .2s var(--curva);
}
/* Al pasar por encima, el enlace se corre un poco y asoma una rayita. */
.pie__enlaces a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--acento-vivo);
  transition: width .2s var(--curva);
}
.pie__enlaces a:hover { padding-left: 1.1rem; }
.pie__enlaces a:hover::before { width: .7rem; }

/* ---- contacto ---- */

.pie__contacto { font-style: normal; display: grid; gap: 1rem; }
.pie__contacto a {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  align-items: start; line-height: 1.5;
}
.pie__contacto svg {
  width: 1.1rem; height: 1.1rem; margin-top: .18rem;
  color: var(--acento-vivo); flex: none;
}
.pie__contacto a:hover svg { color: #fff; }

/* ---- redes ---- */

.redes { display: flex; align-items: center; gap: .15rem; list-style: none; padding: 0; margin: 0; }
.redes a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  color: #fff; text-decoration: none; border-radius: 50%;
  transition: background .2s var(--curva), color .2s var(--curva), scale .2s var(--curva);
}
.redes svg { width: 1.15rem; height: 1.15rem; }
.redes a:hover { background: rgba(255,255,255,.14); color: var(--acento-vivo); scale: 1.08; }

/* `.pie ul` valia mas que `.redes` y convertia los iconos en una columna:
   salian uno encima de otro en escritorio. Por eso esta regla lleva `.pie`
   delante. Si se toca, comprobar el pie en escritorio. */
.pie ul.redes--pie {
  display: flex; gap: .2rem; margin-top: 1.6rem;
}
.pie ul.redes--pie a {
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.14);
}
.pie ul.redes--pie a:hover {
  color: #151311; background: var(--acento-vivo); border-color: var(--acento-vivo);
}

/* ---- newsletter ---- */

.pie__boletin {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 2.6rem) 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 54rem) { .pie__boletin { grid-template-columns: 1fr; } }

.pie__boletin h3 { margin-bottom: .6rem; padding-bottom: 0; }
.pie__boletin h3::after { display: none; }
.pie__boletin p { margin: 0; font-size: .9rem; }

.boletin { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; }
@media (max-width: 44rem) { .boletin { grid-template-columns: 1fr; } }

.boletin input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; padding: .85rem 1rem;
  font-family: var(--prosa); font-size: .92rem;
  transition: border-color .2s var(--curva), background .2s var(--curva);
  min-width: 0;
}
.boletin input::placeholder { color: rgba(255,255,255,.4); }
.boletin input:focus {
  outline: none; border-color: var(--acento-vivo); background: rgba(255,255,255,.1);
}
.boletin button { justify-content: center; }
.boletin__aviso {
  grid-column: 1 / -1; margin: .2rem 0 0;
  font-size: .78rem; color: rgba(255,255,255,.45);
}
.boletin__aviso a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- barra final ---- */

.pie__cierre {
  padding: 1.6rem 0 2rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: .84rem;
}
.pie__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; padding: 0; margin: 0; }

/* El credito de UEYIA. Va en toda web que construimos. */
.firma-ueyia { color: rgba(255,255,255,.45); margin: 0; }
.firma-ueyia a { color: var(--acento-vivo); font-weight: 600; }
.firma-ueyia a:hover { color: #fff; }

/* ======================================================= BLOQUES INTERIORES */

/* El "Ver mas" de las tarjetas migradas. */
.servicio__mas {
  display: inline-block; margin-top: .7rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento);
}
.servicio h3 { margin-bottom: 0; }

/* Imagen suelta dentro del contenido. */
.figura { margin: 2rem 0; }
.figura img { width: 100%; height: auto; }

/* La prosa migrada. Columna estrecha: el ancho completo no se lee. */
.prosa-larga h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 2.2rem; color: var(--tinta);
}
.prosa-larga h2:first-child { margin-top: 0; }
.prosa-larga h3 { font-size: 1.2rem; margin-top: 1.8rem; color: var(--tinta); }
.prosa-larga h4 { font-size: 1.05rem; margin-top: 1.4rem; color: var(--tinta); }
.prosa-larga ul, .prosa-larga ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prosa-larga li { margin-bottom: .45rem; }
.prosa-larga img { margin: 1.5rem 0; }
.prosa-larga a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.prosa-larga a:hover { color: var(--acento-vivo); }
.prosa-larga table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .94rem; }
.prosa-larga th, .prosa-larga td { padding: .7rem .8rem; border-bottom: 1px solid var(--linea); text-align: left; }
.prosa-larga th { font-weight: 700; background: var(--papel-hueso); }

/* --------------------------------------------------------- ficha de producto */

.ficha {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr 1fr; align-items: start;
}
@media (max-width: 54rem) { .ficha { grid-template-columns: 1fr; } }

.ficha__foto img { width: 100%; height: auto; }
.ficha__datos .prosa-larga { max-width: none; }

.ficha__precio {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1.6rem; padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--linea);
}
.ficha__precio strong { font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--acento); font-family: var(--titular); }
.ficha__precio span { color: var(--tenue); font-size: .9rem; }

.ficha__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.ficha__nota { margin-top: 1rem; font-size: .86rem; color: var(--tenue); }

/* ============================================================ FORMULARIOS == */

.contacto {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.6fr 1fr; align-items: start;
}
@media (max-width: 54rem) { .contacto { grid-template-columns: 1fr; } }

.campo { display: grid; gap: .4rem; margin: 0 0 1.2rem; }
.campo label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.campo label span { color: var(--acento); }

.campo input, .campo textarea, .campo select {
  font-family: var(--prosa); font-size: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(154,107,47,.16);
}

.campo--mal input, .campo--mal textarea { border-color: #b3261e; }
.campo__error { font-size: .85rem; color: #b3261e; }

.campos-pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 34rem) { .campos-pareja { grid-template-columns: 1fr; } }

.formulario__pie { display: grid; gap: .8rem; margin-top: 1.6rem; }
.formulario__pie small { color: var(--tenue); font-size: .84rem; }
.formulario__pie a { color: var(--acento); }

.aviso {
  padding: 1rem 1.2rem; margin-bottom: 1.8rem;
  border-left: 4px solid; font-size: .95rem;
}
.aviso--bien { background: #eef6ee; border-color: #2e7d32; color: #1b3d1d; }
.aviso--mal  { background: #fdeceb; border-color: #b3261e; color: #6b1711; }
.aviso small { color: inherit; opacity: .8; }

.contacto__datos {
  background: var(--papel-hueso); padding: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 3px solid var(--acento);
}
.contacto__datos h2 { font-size: 1.2rem; }
.contacto__datos p { margin-bottom: 1rem; }
.contacto__datos .boton { width: 100%; justify-content: center; }
.contacto__dir { font-size: .92rem; color: var(--tinta-suave); line-height: 1.7; }
.contacto__dir a { color: var(--acento); }

/* Tarjeta sin destino: se ve igual pero no invita a pulsar. */
.servicio--quieto { cursor: default; }
.servicio--quieto:hover { box-shadow: none; translate: none; }

/* ------------------------------------------------------------- imagenes */

/* Regla de fondo: una imagen NUNCA se estira por encima de su tamaño real.
   Muchas de las migradas miden 300 px; a 1180 saldrian borrosas. */
.figura img,
.galeria img,
.prosa-larga img { max-width: 100%; width: auto; height: auto; }

.figura { margin: 2rem 0; }
.figura img { margin-inline: auto; }

/* Imagenes sueltas seguidas: en rejilla, no una debajo de otra ocupando
   una fila entera cada una. */
.galeria {
  display: grid; gap: 1rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
.galeria img { width: 100%; border: 1px solid var(--linea); }
.galeria a { display: block; }

/* Dentro de la prosa, una imagen centrada y con aire. */
.prosa-larga img { display: block; margin: 1.6rem auto; }

/* Tarjeta sin fotografia.
   Hay paginas que en la web antigua nunca se mostraron como tarjeta y no
   tienen foto propia. Antes se les ponia el comodin del sitio y salian seis
   tarjetas identicas, que parece un error. Asi se ve honesto: sin foto, pero
   con presencia. */
.servicio--sinfoto .servicio__texto {
  padding: 2.2rem 1.4rem;
  border-top: 3px solid var(--acento);
  background: var(--papel-hueso);
  min-height: 9rem; display: flex; flex-direction: column; justify-content: center;
}
.servicio--sinfoto h3 { font-size: 1.1rem; }

/* Muro de logos de empresas. En gris y sin color hasta que pasas por encima:
   son marcas ajenas, no deben competir con el contenido del sitio. */
.logos {
  display: grid; gap: clamp(1rem, 2.5vw, 2rem); margin: 2rem 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  align-items: center; list-style: none;
}
.logos li { display: grid; place-items: center; }
.logos img {
  max-height: 4.5rem; width: auto; max-width: 100%;
  filter: grayscale(1); opacity: .62;
  transition: filter .25s var(--curva), opacity .25s var(--curva);
}
.logos a:hover img, .logos a:focus-visible img { filter: none; opacity: 1; }

/* ============================================== MENU CON DESPLEGABLES ==== */

.nav__grupo { position: relative; display: flex; align-items: center; }

.nav__padre { /* hereda el estilo de .nav a */ }

.nav__abrir {
  background: none; border: 0; padding: .35rem .15rem; cursor: pointer;
  color: inherit; display: inline-grid; place-items: center;
}
.nav__abrir svg { width: .85rem; height: .85rem; transition: rotate .2s var(--curva); }
.nav__abrir[aria-expanded="true"] svg { rotate: 180deg; }

.nav__sub {
  position: absolute; top: 100%; left: -.9rem; z-index: 30;
  min-width: 16rem; margin: 0; padding: .5rem 0; list-style: none;
  background: var(--papel); border: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; translate: 0 .4rem;
  transition: opacity .18s var(--curva), translate .18s var(--curva), visibility .18s;
}
.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub,
.nav__sub[data-abierto="si"] { opacity: 1; visibility: visible; translate: 0 0; }

.nav__sub a {
  display: block; padding: .6rem 1.1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  text-transform: none; color: var(--tinta-suave);
}
.nav__sub a::after { display: none; }
.nav__sub a:hover, .nav__sub a:focus-visible {
  background: var(--papel-hueso); color: var(--acento);
}

/* --- en movil el desplegable se abre hacia abajo, dentro del panel --- */
@media (max-width: 75rem) {
  .nav__grupo { display: block; border-bottom: 1px solid var(--linea); }
  .nav__grupo .nav__padre {
    display: inline-block; width: calc(100% - 3rem); border-bottom: 0;
  }
  .nav__abrir {
    float: right; width: 2.6rem; height: 3rem;
  }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; translate: none;
    border: 0; box-shadow: none; min-width: 0; padding: 0 0 .6rem;
    background: var(--papel-hueso);
    display: none;
  }
  .nav__grupo:hover .nav__sub, .nav__grupo:focus-within .nav__sub { display: none; }
  .nav__sub[data-abierto="si"] { display: block; }
  .nav__sub a { padding: .7rem 1.2rem; border-bottom: 0; }
}

/* ============================================ LISTADO DE PRODUCTOS ======= */

.productos {
  display: grid; gap: 1.2rem; margin: 2rem 0; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.productos__titulo { margin: 2.5rem 0 1rem; font-size: 1.3rem; }

.producto {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: box-shadow .25s var(--curva), translate .25s var(--curva);
}
.producto:hover { box-shadow: var(--sombra-alta); translate: 0 -3px; }
.producto img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--papel-hueso); }

/* Ficha sin fotografia. Son cuatro —bebidas y menaje— y no es un descuido
   nuestro: sus fotos dan 404 tambien en la web de Mamen. Se marcan como las
   tarjetas sin foto, para que se lean como una decision y no como un fallo. */
.producto--sinfoto .producto__texto {
  border-top: 3px solid var(--acento);
  background: var(--papel-hueso);
  padding: 1.6rem 1.1rem;
  min-height: 7rem; justify-content: center;
}

.producto__texto { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.producto__texto h3 { font-size: .98rem; margin-bottom: .4rem; line-height: 1.3; }

.producto__precio {
  font-family: var(--titular); font-weight: 700;
  font-size: 1.15rem; color: var(--acento); margin: 0 0 .6rem;
}

.producto__mas {
  margin-top: auto; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tenue);
}
.producto:hover .producto__mas { color: var(--acento); }

/* Opciones de un producto variable. Lista con precio a la derecha, que es
   como se lee un precio: en columna, no dentro de un desplegable. */
.variantes { margin: 1.8rem 0; }
.variantes h2 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; }
.variantes ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); }
.variantes li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--linea); font-size: .95rem;
}
.variantes li b { font-family: var(--titular); color: var(--acento); white-space: nowrap; }
.variantes__nota { margin-top: .9rem; font-size: .86rem; color: var(--tenue); }

/* Cuerpo de la ficha de producto: descripcion, tabla y otras cajas.
   Va debajo de la ficha y a todo lo ancho. Antes se pintaba dentro de la
   columna de la derecha y quedaba todo apretado en media pagina. */
.ficha__cuerpo { margin-top: 2.5rem; }
.ficha__cuerpo > .figura { max-width: 34rem; }
.ficha__cuerpo table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.ficha__cuerpo th,
.ficha__cuerpo td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--linea); }
.ficha__cuerpo th { width: 12rem; font-family: var(--titular); }

/* ======================================================= LLAMADA DEL MENU ===
   «Reservas / Contacto» era un rectangulo marron plano: heredaba a la vez el
   relleno de `.nav a` y el fondo de `.boton--solido`, y el caret quedaba
   flotando fuera. Parecia un bloque pegado encima del menu, no un boton.

   Ahora el grupo entero —enlace y caret— es UNA pieza: fondo con un punto de
   degradado para que tenga volumen, esquina apenas redondeada (2 px, que el
   resto del sitio es de angulos rectos) y una sombra tenida del propio acento,
   que es lo que separa un boton de un rectangulo de color.

   Solo en escritorio: por debajo de 75rem el menu es un panel lateral y el
   boton va a lo ancho, donde esto no aplica. */
@media (min-width: 75.0625rem) {

  .nav__grupo:has(> .boton--solido) {
    background: linear-gradient(175deg, var(--acento-vivo), var(--acento) 62%);
    border-radius: 2px;
    padding-right: .35rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 6px 18px rgba(154,107,47,.30);
    transition: translate .25s var(--curva), box-shadow .25s var(--curva),
                filter .25s var(--curva);
  }
  .nav__grupo:has(> .boton--solido):hover,
  .nav__grupo:has(> .boton--solido):focus-within {
    translate: 0 -2px;
    filter: brightness(1.07);
    box-shadow: 0 2px 5px rgba(0,0,0,.12), 0 14px 32px rgba(154,107,47,.40);
  }

  /* El enlace ya no pinta fondo: lo pone el grupo */
  .nav .boton--solido {
    background: none; border: 0; box-shadow: none; color: #fff;
    padding: .78rem .2rem .78rem 1.2rem;
    font-size: .76rem; letter-spacing: .11em;
  }
  .nav .boton--solido:hover {
    background: none; translate: 0; box-shadow: none; border: 0;
  }
  /* El subrayado del menu no pinta nada encima del marron */
  .nav .boton--solido::after { display: none; }

  .nav__grupo:has(> .boton--solido) .nav__abrir { color: #fff; padding: .5rem .45rem; }

  /* El desplegable cuelga alineado con el boton, no con la pagina */
  .nav__grupo:has(> .boton--solido) .nav__sub { right: 0; left: auto; }
}

/* ============================================= PASE DE LA PORTADA ========= */

/* Con una sola foto esto no se activa: la regla de arriba ya la coloca.
   Con varias, se apilan y se cruzan con una transicion de opacidad. */
.hero--pase .hero__foto {
  opacity: 0;
  transition: opacity 1.1s var(--curva);
}
.hero--pase .hero__foto.esta { opacity: 1; }

.hero__puntos {
  position: absolute; z-index: 2; bottom: 1.4rem; left: 50%; translate: -50% 0;
  display: flex; gap: .55rem;
}
.hero__puntos button {
  width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: background .25s, scale .25s var(--curva);
}
.hero__puntos button[aria-current="true"] { background: #fff; scale: 1.35; }
.hero__puntos button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Quien pide menos movimiento no ve el cruce ni el pase automatico.
   El JS tambien lo respeta: no es solo cosmetica. */
@media (prefers-reduced-motion: reduce) {
  .hero--pase .hero__foto { transition: none; }
}

/* ==================================================== EL BLOG ============= */

/* La ultima entrada, a lo ancho: en un blog lo que importa es lo de arriba. */
.entrada-destacada {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 0; margin: 2.5rem 0;
  background: var(--papel); border: 1px solid var(--linea);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: box-shadow .3s var(--curva), translate .3s var(--curva);
}
.entrada-destacada:hover { box-shadow: var(--sombra-alta); translate: 0 -3px; }
.entrada-destacada--sinfoto { grid-template-columns: 1fr; border-top: 3px solid var(--acento); }

.entrada-destacada__foto { overflow: hidden; }
.entrada-destacada__foto img {
  width: 100%; height: 100%; min-height: 17rem;
  object-fit: cover; display: block;
  transition: scale .5s var(--curva);
}
.entrada-destacada:hover .entrada-destacada__foto img { scale: 1.03; }

.entrada-destacada__texto {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; justify-content: center;
}
.entrada-destacada__texto h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.2; margin: .5rem 0 .7rem;
}
.entrada-destacada__texto p { color: var(--tinta-suave); margin: 0 0 1.2rem; }

/* El resto, en rejilla */
.entradas {
  display: grid; gap: 1.4rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.entrada {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: box-shadow .25s var(--curva), translate .25s var(--curva);
}
.entrada:hover { box-shadow: var(--sombra-alta); translate: 0 -3px; }
.entrada img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }

/* Catorce entradas viejas no tienen foto, y no es cosa nuestra: sus imagenes
   dan 404 tambien en la web de Mamen. Con filete de acento se leen como una
   decision de diseño y no como una foto que no carga. */
.entrada--sinfoto { border-top: 3px solid var(--acento); }
.entrada--sinfoto .entrada__texto { min-height: 9rem; justify-content: center; }

.entrada__texto { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.entrada__texto h2 { font-size: 1.02rem; line-height: 1.3; margin: .35rem 0 .5rem; }
.entrada__texto p { font-size: .88rem; color: var(--tinta-suave); margin: 0; }

.entrada time, .entrada-destacada time {
  font-family: var(--titular); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento);
}
.entrada__mas {
  font-family: var(--titular); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento);
}

@media (max-width: 54rem) {
  .entrada-destacada { grid-template-columns: 1fr; }
  .entrada-destacada__foto img { min-height: 12rem; }
}