/* ==========================================================================
   BLAT · DISEÑO
   --------------------------------------------------------------------------
   Los COLORES y los TAMAÑOS están todos juntos aquí arriba, en :root.
   Cambiá un valor ahí y cambia en toda la web de golpe.
   ========================================================================== */

/* ---- FUENTES: van dentro de la web (carpeta fonts/), no se piden a Google --- */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/fraunces-italica.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2");
}

:root {
  /* ---- COLORES ---------------------------------------------------------- */
  --fondo:        #1E1A16;   /* marrón tinta, fondo principal */
  --fondo-alt:    #262019;   /* secciones alternas, un punto más claro */
  --fondo-hondo:  #16130F;   /* pie de página */
  --texto:        #F2EADC;   /* crema cálida */
  --texto-suave:  #A2937F;   /* textos secundarios */
  --acento:       #D6A43C;   /* MOSTAZA: botones y acentos */
  --acento-claro: #E6B855;   /* mostaza al pasar el ratón */
  --sobre-acento: #201808;   /* texto encima de los botones mostaza */
  --arena:        #D9C4A0;   /* arena clara: detalles */
  --linea:        #3A3129;   /* líneas y bordes */
  --aviso:        #E3B341;   /* amarillo: marcas de "pendiente" */

  /* ---- LETRAS ----------------------------------------------------------- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;   /* títulos */
  --sans:  "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;  /* textos */

  /* ---- MEDIDAS ---------------------------------------------------------- */
  --ancho:   1180px;  /* ancho máximo del contenido en ordenador */
  --margen:  22px;    /* margen lateral en móvil */
  --radio:   10px;    /* redondeo de botones y tarjetas */
}

/* ==========================================================================
   SI EL NAVEGADOR NO EJECUTA JAVASCRIPT (por ejemplo el visor interno del
   iPhone al abrir el archivo desde WhatsApp): la web se ve entera igual.
   Se apagan los controles que necesitan JavaScript y se enseña toda la carta.
   ========================================================================== */
body:not(.con-js) .idiomas,
body:not(.con-js) .hamburguesa,
body:not(.con-js) .visor { display: none !important; }

/* ==========================================================================
   CURSOR DE ESPIGA DE TRIGO
   Se apaga desde contenido.js:  ajustes: { cursorEspiga: false }
   ========================================================================== */
body.cursor-espiga,
body.cursor-espiga * { cursor: url("../img/cursor-espiga.png") 3 2, auto; }
body.cursor-espiga a,
body.cursor-espiga button,
body.cursor-espiga [role="tab"],
body.cursor-espiga .galeria-item button,
body.cursor-espiga label { cursor: url("../img/cursor-espiga-activo.png") 3 2, pointer; }
body.cursor-espiga input,
body.cursor-espiga textarea { cursor: text; }

/* ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.aparece { opacity: 0; transform: translateY(24px); }
.animaciones .aparece {
  transition: opacity .75s cubic-bezier(.16,.8,.3,1), transform .75s cubic-bezier(.16,.8,.3,1);
  transition-delay: var(--retraso, 0ms);
}
.aparece.visible, body:not(.animaciones) .aparece { opacity: 1; transform: none; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Rótulos pequeños en versalitas ------------------------------------- */
.rotulo {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.rotulo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.rotulo-centro { justify-content: center; }
.rotulo-centro::before { content: ""; flex: 1; height: 1px; background: var(--linea); }

/* ---- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600;
  border: 0; border-radius: var(--radio); cursor: pointer;
  transition: background .18s, transform .18s, border-color .18s, color .18s;
  text-align: center; line-height: 1.2;
}
.boton { position: relative; overflow: hidden; isolation: isolate; }
.boton:active { transform: translateY(1px); }
.boton::after {
  content: ""; position: absolute; z-index: 1;
  top: -20%; left: -140%; width: 55%; height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,253,246,.42) 50%, transparent 100%);
  transform: skewX(-20deg); pointer-events: none;
}
/* el destello no para: barre de izquierda a derecha y descansa */
.boton::after { animation: brillo 4.4s cubic-bezier(.35,.6,.4,1) infinite; }
.boton:hover::after { animation-duration: 1.5s; }
@keyframes brillo {
  0%   { left: -140%; }
  30%  { left: 150%; }
  100% { left: 150%; }
}
.boton-borde::after { background: linear-gradient(100deg, transparent 0%, rgba(255,253,246,.22) 50%, transparent 100%); }

/* los botones no destellan todos a la vez */
.portada-botones .boton:nth-child(2)::after,
.contacto-botones .boton:nth-child(2)::after { animation-delay: 1.5s; }
.cabecera .boton::after { animation-delay: .8s; }
.domicilio .boton::after { animation-delay: 2.2s; }

/* ---- Borde fino que da vueltas alrededor del botón --------------------- */
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: conic-gradient(from var(--giro),
      transparent 0deg 232deg,
      rgba(255,248,232,.10) 268deg,
      rgba(255,248,232,.92) 312deg,
      rgba(255,248,232,.10) 348deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: giro 5.2s linear infinite;
}
.boton-borde::before {
  background: conic-gradient(from var(--giro),
      transparent 0deg 232deg,
      rgba(230,184,85,.10) 268deg,
      rgba(230,184,85,.95) 312deg,
      rgba(230,184,85,.10) 348deg,
      transparent 360deg);
}
.boton:hover::before { animation-duration: 2.2s; }
.portada-botones .boton:nth-child(2)::before,
.contacto-botones .boton:nth-child(2)::before { animation-delay: 2.6s; }
@keyframes giro { to { --giro: 360deg; } }
.boton-acento { background: var(--acento); color: var(--sobre-acento); }
.boton-acento:hover { background: var(--acento-claro); }
.boton-borde { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px rgba(242,234,220,.34); }
.boton-borde:hover { box-shadow: inset 0 0 0 1px var(--arena); background: rgba(242,234,220,.06); }
.boton-oscuro { background: var(--sobre-acento); color: var(--texto); }
.boton-oscuro:hover { background: #241d17; }
.boton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.cabecera.solida { background: rgba(23,19,15,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; gap: 18px; height: 76px; }
.cabecera-logo img { height: 34px; width: auto; }
.cabecera nav { display: flex; gap: 28px; margin-left: auto; }
.cabecera nav a { font-size: 14.5px; color: var(--texto-suave); transition: color .18s; }
.cabecera nav a:hover, .cabecera nav a.activo { color: var(--texto); }
.cabecera-fin { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cabecera nav + .cabecera-fin { margin-left: 0; }

/* Cambio de idioma */
.idiomas { display: flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; }
.idiomas button {
  background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 6px;
  color: var(--texto-suave); font: inherit; transition: color .18s, background .18s;
}
.idiomas button:hover { color: var(--texto); }
.idiomas button.activo { color: var(--fondo); background: var(--arena); }
.idiomas span { color: var(--linea); }

.cabecera .boton { padding: 11px 20px; font-size: 14px; }

/* Botón hamburguesa (solo móvil) */
.hamburguesa { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-right: -8px; }
.hamburguesa span { display: block; width: 22px; height: 2px; background: var(--texto); margin: 5px 0; transition: transform .25s, opacity .2s; }
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   INTRO AL CARGAR: primero el logo, después la foto, después el texto
   ========================================================================== */
/* El logo manda: sale solo durante 1,4 s, enorme, y después se asienta */
body.intro .portada-logo    { animation: introLogo 2600ms cubic-bezier(.16,.85,.3,1)  120ms both; }
body.intro .portada-foto    { animation: introVelo 1800ms ease                       1460ms both; }
body.intro .portada-foto img{ animation: introZoom 2600ms cubic-bezier(.2,.7,.3,1)   1460ms both,
                                         zoomLento  34s   ease-in-out                4100ms infinite alternate; }
body.intro #portada-titular { animation: introSube  950ms cubic-bezier(.16,.85,.3,1) 2100ms both; }
body.intro .portada-sub     { animation: introSube  950ms cubic-bezier(.16,.85,.3,1) 2290ms both; }
body.intro .portada-vacances,
body.intro .google          { animation: introSube  950ms cubic-bezier(.16,.85,.3,1) 2450ms both; }
body.intro .portada-botones { animation: introSube  950ms cubic-bezier(.16,.85,.3,1) 2590ms both; }
body.intro .cabecera        { animation: introSuave 900ms ease                       2760ms both; }
body.intro .servicios       { animation: introSube  900ms cubic-bezier(.16,.85,.3,1) 2880ms both; }

/* El logo entra gigante, se queda quieto un momento y luego baja a su sitio.
   Anima variables, no "transform", para no pisar el encogido del scroll. */
@keyframes introLogo {
  0%   { opacity: 0; --intro-escala: 1.90; --intro-y: 30px; filter: blur(12px); }
  18%  { opacity: 1; --intro-escala: 1.84; --intro-y: 0px;  filter: blur(0); }
  48%  { opacity: 1; --intro-escala: 1.80; }
  72%  { opacity: 1; --intro-escala: 1;    --intro-y: 0px;  filter: blur(0); }
  100% { opacity: 1; --intro-escala: 1;    --intro-y: 0px;  filter: blur(0); }
}
@keyframes introVelo { from { opacity: 0; } to { opacity: 1; } }
@keyframes introZoom { from { transform: scale(1.20); } to { transform: scale(1.05); } }
@keyframes introSube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes introSuave { from { opacity: 0; } to { opacity: 1; } }

/* En pantallas medianas y en móvil el logo crece menos, para que no se salga */
@media (max-width: 1000px) {
  @keyframes introLogo {
    0%   { opacity: 0; --intro-escala: 1.62; --intro-y: 24px; filter: blur(10px); }
    18%  { opacity: 1; --intro-escala: 1.58; --intro-y: 0px;  filter: blur(0); }
    48%  { opacity: 1; --intro-escala: 1.55; }
    72%  { opacity: 1; --intro-escala: 1;    --intro-y: 0px;  filter: blur(0); }
    100% { opacity: 1; --intro-escala: 1;    --intro-y: 0px;  filter: blur(0); }
  }
}
@media (max-width: 720px) {
  @keyframes introLogo {
    0%   { opacity: 0; --intro-escala: 1.26; --intro-y: 20px; filter: blur(8px); }
    18%  { opacity: 1; --intro-escala: 1.23; --intro-y: 0px;  filter: blur(0); }
    48%  { opacity: 1; --intro-escala: 1.21; }
    72%  { opacity: 1; --intro-escala: 1;    --intro-y: 0px;  filter: blur(0); }
    100% { opacity: 1; --intro-escala: 1;    --intro-y: 0px;  filter: blur(0); }
  }
}

/* Zoom lentísimo en bucle: 34 segundos de ida y 34 de vuelta */
@keyframes zoomLento { from { transform: scale(1.05); } to { transform: scale(1.17); } }

/* Red de seguridad: si la intro no llega a ejecutarse, la portada se ve igual */
body.intro-lista #portada-titular,
body.intro-lista .portada-sub,
body.intro-lista .portada-vacances,
body.intro-lista .google,
body.intro-lista .portada-botones,
body.intro-lista .cabecera,
body.intro-lista .servicios {
  animation: none !important; opacity: 1 !important; transform: none !important;
}
body.intro-lista .portada-foto { animation: none !important; opacity: 1 !important; }
body.intro-lista .portada-logo {
  animation: none !important; opacity: 1 !important; filter: none !important;
  --intro-escala: 1; --intro-y: 0px;
}
body.intro-lista .portada-foto img { animation: zoomLento 34s ease-in-out infinite alternate !important; }

/* ==========================================================================
   PORTADA
   ========================================================================== */
.portada { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 104px 0 58px; overflow: hidden; }
.portada-foto { position: absolute; left: 0; right: 0; top: -12%; height: 136%; overflow: hidden; will-change: transform; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.58) contrast(.92) saturate(.76); transform: scale(1.04); will-change: transform; }
.portada-velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 50% 46%, rgba(30,26,22,.62) 0%, rgba(30,26,22,.80) 55%, rgba(30,26,22,.94) 100%),
    linear-gradient(180deg, rgba(30,26,22,.86) 0%, rgba(30,26,22,.42) 34%, rgba(30,26,22,.58) 62%, rgba(30,26,22,1) 100%);
}
.portada .contenedor { position: relative; z-index: 2; }
.portada-caja { max-width: 800px; margin: 0 auto; text-align: center; }
@property --intro-escala { syntax: "<number>"; initial-value: 1; inherits: false; }
@property --intro-y      { syntax: "<length>"; initial-value: 0px; inherits: false; }
.portada-logo {
  width: min(37vw, 530px); height: auto; max-height: 30vh;
  margin: 0 auto 30px;
  transform-origin: center center;
  transform: translateY(var(--intro-y, 0px)) scale(calc(var(--intro-escala, 1) * var(--scroll-escala, 1)));
  will-change: transform;
}
.portada h1 { font-size: clamp(38px, 6.2vw, 70px); line-height: 1.04; margin-bottom: 20px; }
.portada h1 em { font-style: italic; color: var(--arena); }
.portada-sub { font-size: clamp(16.5px, 1.9vw, 19.5px); color: var(--texto-suave); max-width: 52ch; margin: 0 auto 26px; }
.portada-vacances {
  display: inline-flex; align-items: center; gap: 9px; margin: -6px auto 22px;
  padding: 10px 18px; border-radius: 99px; background: var(--acento); color: var(--sobre-acento);
  font-size: 15px; font-weight: 600; box-shadow: 0 8px 26px rgba(0,0,0,.35);
}
.portada-vacances:empty { display: none; }
.portada-vacances svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.portada-botones { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; }
.portada-botones .boton { min-width: 210px; }

/* Valoración de Google */
.google {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; margin-bottom: 26px;
  border: 1px solid var(--linea); border-radius: 99px;
  background: rgba(22,19,15,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 14.5px;
}
.google-estrellas { display: flex; gap: 2px; }
.google-estrellas svg { width: 15px; height: 15px; fill: var(--acento); }
.google-estrellas svg.media { fill: url(#media); }
.google b { font-weight: 600; }
.google span { color: var(--texto-suave); }

/* Franja de servicios */
.servicios { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--fondo-alt); }
.servicios ul { display: flex; flex-wrap: wrap; gap: 10px 30px; list-style: none; margin: 0; padding: 22px 0; justify-content: center; }
.servicios li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--texto-suave); --dest: calc(var(--i, 0) * .30s); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .servicios li .txt {
    background-image: linear-gradient(100deg,
      var(--texto-suave) 0%, var(--texto-suave) 36%,
      #FFF6E2 50%,
      var(--texto-suave) 64%, var(--texto-suave) 100%);
    background-size: 300% 100%;
    background-position: 130% 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: destelloTexto 9s linear infinite;
    animation-delay: var(--dest);
  }
}
@keyframes destelloTexto {
  0%   { background-position: 130% 0; }
  26%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
.servicios li svg { animation: destelloIcono 9s linear infinite; animation-delay: var(--dest); }
@keyframes destelloIcono {
  0%, 8%    { stroke: var(--acento); transform: none; }
  15%       { stroke: #FFF6E2; transform: translateY(-2px); }
  24%, 100% { stroke: var(--acento); transform: none; }
}
.servicios svg { width: 17px; height: 17px; stroke: var(--acento); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.seccion { padding: 104px 0; }
.seccion-alt { background: var(--fondo-alt); }
.seccion h2 { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 18px; }
.seccion h2 em { font-style: italic; color: var(--arena); }

/* ---- Qui som ------------------------------------------------------------ */
.quienes { display: grid; grid-template-columns: 1.05fr .95fr; gap: 66px; align-items: center; }
.quienes-texto p { color: var(--texto-suave); font-size: 17.5px; }
.destacado {
  font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.34; color: var(--arena);
  border-left: 2px solid var(--acento); padding: 4px 0 4px 24px; margin: 34px 0 0;
}
.quienes-foto { position: relative; display: grid; gap: 22px; }
.quienes-figura { margin: 0; }
.quienes-foto img { width: 100%; border-radius: var(--radio); aspect-ratio: 5/4; object-fit: cover; display: block; }
.quienes-figura.segunda img { aspect-ratio: 16/10; }
/* Sin fotos: una sola columna, centrada */
.quienes.sin-fotos { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; text-align: center; }
.quienes.sin-fotos .quienes-foto { display: none; }
.quienes.sin-fotos .rotulo { justify-content: center; }
.quienes.sin-fotos .rotulo::before { content: ""; flex: 1; height: 1px; background: var(--linea); }
.quienes.sin-fotos .destacado { border-left: 0; padding: 0; }
.quienes.sin-fotos .destacado::before { content: ""; display: block; width: 48px; height: 2px; background: var(--acento); margin: 0 auto 22px; }
.pie-foto { font-size: 13px; color: var(--texto-suave); margin-top: 12px; text-align: center; }

/* ---- Marca de foto pendiente -------------------------------------------- */
.pendiente {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background:
    repeating-linear-gradient(45deg, rgba(227,179,65,.09) 0 12px, transparent 12px 24px),
    var(--fondo-alt);
  border: 2px dashed rgba(227,179,65,.55);
  border-radius: var(--radio); color: var(--aviso);
  text-align: center; padding: 22px 16px; min-height: 160px;
}
.pendiente svg { width: 26px; height: 26px; stroke: var(--aviso); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pendiente b { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pendiente span { font-size: 13.5px; color: var(--arena); max-width: 22ch; line-height: 1.35; }
.quienes-foto .pendiente { aspect-ratio: 5/4; min-height: 0; }
.quienes-figura.segunda .pendiente { aspect-ratio: 16/10; }

/* ---- Nota provisional para los dueños ----------------------------------- */
.nota {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 30px; padding: 15px 18px;
  border: 1px dashed rgba(227,179,65,.5); border-radius: var(--radio);
  background: rgba(227,179,65,.06);
  font-size: 13.5px; line-height: 1.5; color: var(--aviso);
}
.nota svg { width: 17px; height: 17px; stroke: var(--aviso); fill: none; stroke-width: 1.7; flex: none; margin-top: 3px; }

/* ==========================================================================
   LA CARTA
   ========================================================================== */
.carta-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; }
.precio-medio { text-align: right; flex: none; }
.precio-medio b { display: block; font-family: var(--serif); font-size: 26px; color: var(--arena); }
.precio-medio span { font-size: 12.5px; color: var(--texto-suave); letter-spacing: .04em; }

/* Pestañas de categoría */
.carta-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 18px; margin-bottom: 26px; border-bottom: 1px solid var(--linea); scrollbar-width: none; }
.carta-tabs::-webkit-scrollbar { display: none; }
.carta-tabs label {
  flex: none; background: none; border: 1px solid var(--linea); color: var(--texto-suave);
  font: inherit; font-size: 14.5px; padding: 9px 18px; border-radius: 99px; cursor: pointer;
  white-space: nowrap; transition: all .18s; user-select: none;
}
.carta-tabs label:hover { color: var(--texto); border-color: var(--arena); }

/* ---- Las pestañas funcionan SIN JavaScript -----------------------------
   Son botones de radio escondidos: al tocar una etiqueta se marca su radio
   y el CSS enseña la categoría que le toca. Por eso siguen funcionando en
   el visor interno del iPhone, que no ejecuta JavaScript.              */
.carta-conmutador > input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0;
}
.categoria { display: none; }
#cat-0:checked ~ .carta-cuerpo > [data-cat="0"],
#cat-1:checked ~ .carta-cuerpo > [data-cat="1"],
#cat-2:checked ~ .carta-cuerpo > [data-cat="2"],
#cat-3:checked ~ .carta-cuerpo > [data-cat="3"],
#cat-4:checked ~ .carta-cuerpo > [data-cat="4"],
#cat-5:checked ~ .carta-cuerpo > [data-cat="5"],
#cat-6:checked ~ .carta-cuerpo > [data-cat="6"],
#cat-7:checked ~ .carta-cuerpo > [data-cat="7"],
#cat-8:checked ~ .carta-cuerpo > [data-cat="8"],
#cat-9:checked ~ .carta-cuerpo > [data-cat="9"] { display: block; animation: aparecer .3s ease both; }

#cat-0:checked ~ .carta-tabs label[for="cat-0"],
#cat-1:checked ~ .carta-tabs label[for="cat-1"],
#cat-2:checked ~ .carta-tabs label[for="cat-2"],
#cat-3:checked ~ .carta-tabs label[for="cat-3"],
#cat-4:checked ~ .carta-tabs label[for="cat-4"],
#cat-5:checked ~ .carta-tabs label[for="cat-5"],
#cat-6:checked ~ .carta-tabs label[for="cat-6"],
#cat-7:checked ~ .carta-tabs label[for="cat-7"],
#cat-8:checked ~ .carta-tabs label[for="cat-8"],
#cat-9:checked ~ .carta-tabs label[for="cat-9"] {
  background: var(--acento); border-color: var(--acento);
  color: var(--sobre-acento); font-weight: 600;
}
.carta-conmutador > input[type="radio"]:focus-visible ~ .carta-tabs label { outline: none; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.categoria-bajada { color: var(--texto-suave); font-size: 15.5px; font-style: italic; margin: -4px 0 26px; }

.platos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.plato { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--linea); }
.plato-nombre { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.plato-desc { font-size: 14.5px; color: var(--texto-suave); line-height: 1.45; margin-top: 3px; }
.plato-precio { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--acento); white-space: nowrap; }
.etiquetas { display: inline-flex; gap: 6px; margin-left: 9px; vertical-align: middle; }
.etiqueta { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: rgba(120,160,90,.18); color: #A8C98A; }
.etiqueta.picante { background: rgba(190,90,60,.20); color: #E29B7C; }

.aviso-carta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--aviso);
  border: 1px dashed rgba(227,179,65,.5); background: rgba(227,179,65,.06);
  border-radius: 99px; padding: 8px 16px; margin-bottom: 26px;
}
.aviso-carta svg { width: 15px; height: 15px; stroke: var(--aviso); fill: none; stroke-width: 1.7; }

/* ==========================================================================
   BANDA DE ENVÍO A DOMICILIO
   ========================================================================== */
.domicilio {
  background: var(--fondo-hondo);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.domicilio-rejilla {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding-top: 92px; padding-bottom: 92px;
}
.domicilio-caja { max-width: 500px; }
.domicilio h2 { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 16px; }
.domicilio-texto { color: var(--arena); font-size: 17.5px; margin-bottom: 28px; }
.domicilio .boton { font-size: 16.5px; padding: 18px 32px; }
.domicilio-datos { list-style: none; margin: -8px 0 32px; padding: 0; display: grid; gap: 11px; }
.domicilio-datos:empty { display: none; }
.domicilio-datos li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--texto); }
.domicilio-datos svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.domicilio-foto {
  margin: 0; border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.5); border: 1px solid var(--linea);
}
.domicilio-foto img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: center 56%; display: block; }

/* ==========================================================================
   GALERÍA
   ========================================================================== */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galeria-item { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--fondo-alt); }

.galeria-item button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; aspect-ratio: 1; transition: transform .5s cubic-bezier(.2,.7,.3,1); }

.galeria-item:hover img { transform: scale(1.055); }
.galeria-item .pendiente { height: 100%; aspect-ratio: 1; min-height: 0; border-radius: var(--radio); }

/* Visor de fotos ampliadas */
.visor { position: fixed; inset: 0; z-index: 200; background: rgba(14,11,9,.96); display: none; align-items: center; justify-content: center; padding: 26px; }
.visor.abierto { display: flex; animation: aparecer .22s ease both; }
.visor img { max-width: 100%; max-height: 82vh; border-radius: var(--radio); object-fit: contain; }
.visor-pie { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: var(--texto-suave); font-size: 14.5px; }
.visor button { position: absolute; background: rgba(242,234,220,.1); border: 0; color: var(--texto); width: 46px; height: 46px; border-radius: 99px; cursor: pointer; font-size: 22px; line-height: 1; transition: background .18s; }
.visor button:hover { background: rgba(242,234,220,.22); }
.visor .cerrar { top: 22px; right: 22px; }
.visor .ant { left: 22px; top: 50%; transform: translateY(-50%); }
.visor .sig { right: 22px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   HORARIOS Y UBICACIÓN
   ========================================================================== */
.horarios-bloque { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.estado { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; padding: 9px 16px; border-radius: 99px; margin-bottom: 26px; }
.estado.si { background: rgba(120,170,95,.16); color: #9DD07C; }
.estado.no { background: rgba(200,110,80,.14); color: #E09A7C; }
.estado .punto { width: 8px; height: 8px; border-radius: 99px; background: currentColor; }
.estado .punto.late { animation: latir 2.2s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.tabla-horario { width: 100%; border-collapse: collapse; }
.tabla-horario td { padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; vertical-align: top; }
.tabla-horario td:first-child { color: var(--texto-suave); }
.tabla-horario td:last-child { text-align: right; }
.tabla-horario tr.hoy td { color: var(--texto); font-weight: 600; }
.tabla-horario tr.hoy td:first-child { color: var(--acento); }
.tabla-horario .turno { display: block; }
.tabla-horario .cerrado { color: var(--texto-suave); font-style: italic; }

.horario-nota { margin: 14px 0 0; font-size: 14px; color: var(--texto-suave); font-style: italic; }
.direccion-bloque { margin-top: 34px; }
.direccion-bloque address { font-style: normal; color: var(--texto-suave); font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.direccion-bloque address strong { color: var(--texto); font-weight: 600; display: block; }

.mapa { position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: var(--fondo-alt); }
.mapa-respaldo {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(217,196,160,.05) 0 14px, transparent 14px 28px), var(--fondo-alt);
}
.mapa-respaldo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-respaldo path { fill: none; stroke: var(--linea); stroke-width: 14; stroke-linecap: round; }
.mapa-respaldo path.fina { stroke-width: 6; opacity: .8; }
.mapa iframe { position: relative; z-index: 1; }
.mapa iframe { display: block; width: 100%; height: 470px; border: 0; filter: grayscale(.25) invert(.9) hue-rotate(180deg) contrast(.9) brightness(.96); }

/* Antes de tocar "Veure el mapa": tapa con la dirección. El mapa de Google
   no se carga hasta entonces (así no pone cookies sin permiso). */
.mapa:not(.cargado) iframe { display: none; }
.mapa.cargado .mapa-cubierta { display: none; }
.mapa-cubierta {
  position: relative; z-index: 2; min-height: 470px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 34px 24px; text-align: center;
  background: radial-gradient(closest-side, rgba(30,26,22,.92), rgba(30,26,22,.55) 70%, transparent);
}
.mapa-pin { width: 46px; height: 46px; fill: none; stroke: var(--acento); stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.mapa-dir { margin: 0 0 6px; color: var(--texto-suave); font-size: 15.5px; line-height: 1.55; }
.mapa-dir strong { display: block; color: var(--texto); font-family: var(--serif); font-size: 21px; font-weight: 600; }
.mapa-nota { margin: 2px 0 0; max-width: 300px; font-size: 13px; color: var(--texto-suave); }

/* ==========================================================================
   RESERVAS Y PEDIDOS
   ========================================================================== */
.contacto { text-align: center; max-width: 660px; margin: 0 auto; }
.contacto p { color: var(--texto-suave); font-size: 18px; margin-bottom: 34px; }
.contacto-botones { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.contacto-botones .boton { min-width: 245px; font-size: 16.5px; padding: 19px 30px; }
.telefono-grande {
  display: inline-block; font-family: var(--serif); font-size: clamp(30px, 5vw, 46px);
  color: var(--arena); margin-bottom: 30px; letter-spacing: -.01em; transition: color .18s;
}
.telefono-grande:hover { color: var(--acento); }

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */
.pie { background: var(--fondo-hondo); border-top: 1px solid var(--linea); padding: 64px 0 34px; }
.pie-columnas { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; margin-bottom: 46px; }
.pie-logo { height: 46px; width: auto; margin-bottom: 20px; }
.pie h3 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); margin-bottom: 16px; }
.pie address, .pie p { font-style: normal; color: var(--texto-suave); font-size: 15.5px; line-height: 1.7; margin: 0; }
.pie address strong { display: block; color: var(--texto); font-weight: 600; }
.pie a:hover { color: var(--texto); }
.instagram { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); font-size: 16px; font-weight: 500; }
.instagram svg { width: 20px; height: 20px; stroke: var(--acento); fill: none; stroke-width: 1.6; }
.pie-fin { border-top: 1px solid var(--linea); padding-top: 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--texto-suave); }
.pie-fin .aviso-maqueta { color: var(--aviso); }
.pie-legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pie-legal:empty { display: none; }
.pie-legal label { color: var(--texto-suave); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; transition: color .18s; }
.pie-legal label:hover, .pie-legal label:focus-visible { color: var(--texto); }

/* ==========================================================================
   AVÍS LEGAL · PRIVACITAT · COOKIES
   Igual que la carta: radios escondidos + etiquetas. Funciona SIN JavaScript.
   legal-0 marcado = ventana cerrada.
   ========================================================================== */
.legal-radio { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.legal { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 26px; }
#legal-1:checked ~ .legal, #legal-2:checked ~ .legal, #legal-3:checked ~ .legal { display: flex; animation: aparecer .22s ease both; }
body:has(#legal-1:checked), body:has(#legal-2:checked), body:has(#legal-3:checked) { overflow: hidden; }
.legal-fondo { position: absolute; inset: 0; background: rgba(14,11,9,.9); }
.legal-caja {
  position: relative; width: 100%; max-width: 760px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo-alt); border: 1px solid var(--linea); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.legal-cabecera {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 16px 26px; background: var(--fondo-alt); border-bottom: 1px solid var(--linea);
}
.legal-tabs { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.legal-tabs label {
  padding: 9px 16px; border: 1px solid var(--linea); border-radius: 99px;
  font-size: 14px; color: var(--texto-suave); transition: color .18s, border-color .18s, background .18s;
}
.legal-tabs label:hover { color: var(--texto); border-color: var(--arena); }
#legal-1:checked ~ .legal .legal-tabs label[for="legal-1"],
#legal-2:checked ~ .legal .legal-tabs label[for="legal-2"],
#legal-3:checked ~ .legal .legal-tabs label[for="legal-3"] {
  background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600;
}
.legal-cerrar {
  flex: none; width: 44px; height: 44px; border-radius: 99px; display: grid; place-items: center;
  background: rgba(242,234,220,.08); color: var(--texto); font-size: 18px; transition: background .18s;
}
.legal-cerrar:hover { background: rgba(242,234,220,.18); }
.legal-texto { display: none; padding: 30px 34px 40px; }
#legal-1:checked ~ .legal [data-legal="1"],
#legal-2:checked ~ .legal [data-legal="2"],
#legal-3:checked ~ .legal [data-legal="3"] { display: block; }
.legal-texto h2 { font-size: clamp(27px, 4vw, 34px); margin-bottom: 8px; }
.legal-texto h3 {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento); margin: 30px 0 10px;
}
.legal-texto p, .legal-texto li { color: var(--texto-suave); font-size: 15.5px; line-height: 1.7; }
.legal-texto p { margin: 0 0 12px; }
.legal-texto ul { margin: 0 0 12px; padding-left: 20px; }
.legal-texto li { margin-bottom: 4px; }
.legal-texto li::marker { color: var(--acento); }
.legal-texto b { color: var(--texto); font-weight: 600; }
.legal-texto a { color: var(--arena); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-texto a:hover { color: var(--texto); }

/* Mensaje flotante (aviso de WhatsApp pendiente) */
.mensaje {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--aviso); color: #22190A; padding: 14px 22px; border-radius: 99px;
  font-size: 14.5px; font-weight: 600; z-index: 300; box-shadow: 0 10px 34px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.mensaje.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   MÓVIL Y TABLET
   ========================================================================== */
@media (max-width: 1000px) {
  .quienes { grid-template-columns: 1fr; gap: 42px; }
  .quienes-foto { max-width: 400px; }
  .horarios-bloque { grid-template-columns: 1fr; gap: 42px; }
  .mapa iframe { height: 340px; }
  .pie-columnas { grid-template-columns: 1fr 1fr; gap: 34px; }
  .platos { grid-template-columns: 1fr; gap: 0; }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .domicilio-rejilla { gap: 40px; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  html { scroll-padding-top: 74px; }
  .seccion { padding: 74px 0; }
  .cabecera .contenedor { height: 64px; gap: 12px; }
  .cabecera-logo img { height: 27px; }
  .cabecera .boton { display: none; }
  .hamburguesa { display: block; }

  /* Menú desplegable en móvil */
  .cabecera nav {
    position: fixed; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    /* Fondo TOTALMENTE opaco y sin difuminado: Safari en iPhone lo dibujaba
       translúcido al combinar el difuminado con la animación de aparecer. */
    background: #14100D;
    border-bottom: 1px solid var(--linea);
    padding: 8px var(--margen) 20px;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s;
  }
  .menu-abierto .cabecera nav { transform: none; opacity: 1; pointer-events: auto; }
  .cabecera nav a { padding: 15px 0; font-size: 17px; border-bottom: 1px solid var(--linea); color: var(--texto); }
  .cabecera nav a:last-child { border-bottom: 0; }
  /* El idioma y el menú, pegados a la derecha. Hace falta repetir el
     selector completo: la regla de ordenador es más específica y ganaba. */
  .cabecera nav + .cabecera-fin, .cabecera-fin { margin-left: auto; }

  .portada { padding: 106px 0 56px; min-height: 92vh; min-height: 92svh; }
  .portada h1 { font-size: clamp(33px, 9vw, 46px); }
  .portada-botones { flex-direction: column; }
  .portada-botones .boton { width: 100%; min-width: 0; }
  .google { font-size: 13.5px; padding: 9px 15px; gap: 9px; }

  /* Zonas para el dedo: mínimo cómodo de 44 px. Se agranda el área que se
     puede tocar, sin cambiar el tamaño de las letras. */
  .idiomas button { padding: 13px 12px; }
  .hamburguesa { padding: 11px; margin-right: -11px; }
  .cabecera-logo { display: flex; align-items: center; padding: 9px 0; }
  .direccion-bloque address a,
  .pie address a,
  .instagram { display: inline-block; padding: 11px 0; }
  .instagram { display: inline-flex; }

  .servicios ul { justify-content: flex-start; gap: 9px 20px; padding: 18px 0; }
  .servicios li { font-size: 13px; }

  .carta-cabecera { margin-bottom: 22px; }
  .precio-medio { text-align: left; }
  .carta-tabs { margin-left: calc(var(--margen) * -1); margin-right: calc(var(--margen) * -1); padding-left: var(--margen); padding-right: var(--margen); }
  .plato { padding: 15px 0; }
  .plato-nombre { font-size: 17px; }

  .galeria { grid-template-columns: repeat(2, 1fr); gap: 9px; }

  .visor { padding: 14px; }
  .visor .ant { left: 10px; } .visor .sig { right: 10px; }
  .visor button { width: 40px; height: 40px; }

  .domicilio-rejilla { grid-template-columns: 1fr; gap: 30px; padding-top: 64px; padding-bottom: 64px; }
  .domicilio-foto { order: -1; }
  .domicilio-foto img { aspect-ratio: 4 / 5; }
  .domicilio .boton { width: 100%; }

  .contacto-botones { flex-direction: column; }
  .contacto-botones .boton { width: 100%; min-width: 0; }

  .pie-columnas { grid-template-columns: 1fr; gap: 32px; }
  .pie-fin { flex-direction: column; gap: 10px; }
  .pie-legal label { display: inline-block; padding: 11px 0; }

  .mapa-cubierta { min-height: 340px; }

  .legal { padding: 0; align-items: stretch; }
  .legal-caja { max-width: none; border-radius: 0; border: 0; }
  .legal-cabecera { padding: 10px 12px 10px var(--margen); }
  .legal-tabs { gap: 6px; }
  .legal-tabs label { padding: 11px 13px; font-size: 13.5px; }
  .legal-texto { padding: 24px var(--margen) 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---- Subapartados dentro de una categoría (las pizzas) ------------------ */
.grupo { margin-bottom: 54px; }
.grupo:last-child { margin-bottom: 0; }
.grupo-cabecera {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; margin: 0 0 26px; padding: 22px 0 20px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(214,164,60,.055), transparent 70%);
}
.grupo-titulo {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--acento); margin: 0;
}
.grupo-titulo svg { width: 34px; height: 13px; stroke: var(--acento); fill: none; stroke-width: 1.3; stroke-linecap: round; opacity: .75; }
.grupo-titulo svg.der { transform: scaleX(-1); }
.grupo-sub { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--arena); margin: 0; }
.grupo .platos { margin-top: 6px; }

/* ---- Notas (suplementos, salsas, IVA) ----------------------------------- */
.notas { margin-top: 26px; display: flex; flex-direction: column; gap: 7px; }
.notas li { list-style: none; font-size: 14px; color: var(--texto-suave); padding-left: 18px; position: relative; line-height: 1.5; }
.notas li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 1px; background: var(--acento); }
.notas-generales { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea); }
.notas-generales li { font-size: 13.5px; }

/* ==========================================================================
   SECCIÓN DE GOOGLE
   ========================================================================== */
.google-caja { text-align: center; max-width: 620px; margin: 0 auto; }
.google-nota { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 6px 0 14px; }
.google-nota b { font-family: var(--serif); font-size: clamp(64px, 12vw, 108px); font-weight: 600; line-height: 1; color: var(--texto); letter-spacing: -.02em; }
.google-sobre { font-size: 15px; color: var(--texto-suave); }
.google-estrellas.grandes { justify-content: center; margin-bottom: 22px; gap: 5px; }
.google-estrellas.grandes svg { width: 27px; height: 27px; }
.google-resenas-linea {
  font-family: var(--serif); font-size: clamp(20px, 3vw, 26px); color: var(--arena);
  margin: 0 0 12px; letter-spacing: -.01em;
}
.google-resenas-linea b { color: var(--texto); font-weight: 600; }
.google-texto { color: var(--texto-suave); font-size: 16.5px; margin-bottom: 28px; }

/* ==========================================================================
   AJUSTES DE MÓVIL AÑADIDOS
   ========================================================================== */
@media (max-width: 720px) {
  .portada-logo { width: min(72vw, 350px); max-height: 20vh; margin-bottom: 22px; }
  .grupo-titulo { font-size: 11.5px; letter-spacing: .2em; gap: 10px; }
  .grupo-titulo svg { width: 26px; }
  .grupo-sub { font-size: 15.5px; }
  .grupo-cabecera { padding: 18px 0 16px; margin-bottom: 20px; }
  .grupo { margin-bottom: 42px; }
  .google-nota b { font-size: 76px; }
  .google-estrellas.grandes svg { width: 23px; height: 23px; }
  .google-caja .boton { width: 100%; }
}


/* ==========================================================================
   EFECTOS DE LA CARTA
   Se apagan desde contenido.js:  ajustes: { efectosCarta: false }
   ========================================================================== */

/* ---- Dibujito que cae girando al tocar una pestaña ------------------------ */
.dibujo-caida {
  position: fixed; z-index: 90; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  pointer-events: none;
  animation: dibujoCae 1.3s both;
}
.dibujo-caida img {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
  animation: dibujoGira 1.3s linear both;
}
@keyframes dibujoCae {
  0%   { transform: translateY(6px) scale(.35); opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  16%  { transform: translateY(-26px) scale(1.05); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.45); }
  82%  { opacity: 1; }
  100% { transform: translateY(210px) scale(.92); opacity: 0; }
}
/* 3 vueltas y media, en el sentido de las agujas del reloj */
@keyframes dibujoGira { from { transform: rotate(0deg); } to { transform: rotate(1260deg); } }

/* ---- Títulos de pizzas: el texto por encima del efecto -------------------- */
.grupo-cabecera .grupo-titulo, .grupo-cabecera .grupo-sub { position: relative; z-index: 2; }
.grupo-titulo > span { transition: color .45s, text-shadow .45s; }
.grupo-titulo svg { transition: stroke .45s, opacity .45s; }
.grupo-sub { transition: color .45s, text-shadow .45s; }
.grupo-cabecera[data-efecto="verdures"] { padding-top: 30px; padding-bottom: 28px; }

/* ---- Líquidos: salsa de tomate y aceite de oliva --------------------------
   La capa es 90 px más ancha que el recuadro: esos 90 px son el borde
   irregular del cucharón. Se desliza de izquierda a derecha.            */
.grupo-liquido {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
  width: calc(100% + 90px);
  transform: translateX(-100%);
  transition: transform .6s cubic-bezier(.5,0,.75,0);
  -webkit-mask-image: linear-gradient(#000, #000), url("../img/borde-salsa.svg");
          mask-image: linear-gradient(#000, #000), url("../img/borde-salsa.svg");
  -webkit-mask-size: calc(100% - 90px) 100%, 90px 100%;
          mask-size: calc(100% - 90px) 100%, 90px 100%;
  -webkit-mask-position: 0 0, 100% 0;
          mask-position: 0 0, 100% 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.liquido-tomate {
  background:
    url("../img/salsa-textura.svg") 0 0 / 220px 110px repeat,
    url("../img/salsa-textura.svg") 97px 41px / 310px 155px repeat,
    radial-gradient(60% 90% at 25% 30%, rgba(255,140,110,.30), transparent 60%),
    radial-gradient(50% 80% at 75% 70%, rgba(90,10,4,.35), transparent 65%),
    linear-gradient(180deg, #C7361F 0%, #A82716 55%, #8E1E10 100%);
}
.liquido-tomate::before {        /* brillo de salsa recién puesta */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(172deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(40% 50% at 30% 18%, rgba(255,215,195,.18), transparent 70%);
}
.liquido-oli {
  -webkit-mask-image: linear-gradient(#000, #000), url("../img/borde-oli.svg");
          mask-image: linear-gradient(#000, #000), url("../img/borde-oli.svg");
  background:
    radial-gradient(40% 70% at 20% 40%, rgba(236,220,120,.28), transparent 70%),
    radial-gradient(45% 80% at 70% 60%, rgba(150,170,50,.22), transparent 70%),
    linear-gradient(180deg, rgba(198,206,98,.40) 0%, rgba(168,182,62,.34) 60%, rgba(140,156,44,.30) 100%);
  overflow: hidden;
}
.liquido-oli::after {            /* el reflejo dorado que se desliza despacio */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255,238,165,.34) 50%, transparent);
  transform: skewX(-18deg);
  animation: brilloAceite 5.5s ease-in-out infinite;
}
@keyframes brilloAceite { 0% { left: -40%; } 60%, 100% { left: 110%; } }

.burbuja {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,248,210,.55);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,240,.75) 0 18%, rgba(255,250,220,.08) 48%, rgba(200,210,120,.14) 100%);
  box-shadow: inset 0 -1px 2px rgba(120,130,40,.3);
}
.burbuja.b1 { width: 11px; height: 11px; left: 22%; top: 56%; animation: burbuja 4.2s ease-in-out infinite; }
.burbuja.b2 { width: 7px;  height: 7px;  left: 63%; top: 28%; animation: burbuja 5s ease-in-out 1.2s infinite; }
@keyframes burbuja { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -4px); } }

/* ---- Verduras de "Especials" ------------------------------------------- */
.grupo-verduras { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pieza {
  position: absolute; left: var(--x); top: var(--y);
  background: center / contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-130px) rotate(calc(var(--rot) - 720deg));
  transition: transform .4s cubic-bezier(.5,0,.75,0), opacity .3s;
}
.pieza.cebolla-1 { width: 48px; height: 17px; background-image: url("../img/cebolla-juliana.svg"); }
.pieza.cebolla-2 { width: 44px; height: 17px; background-image: url("../img/cebolla-juliana-2.svg"); }
.pieza.pim-verde { width: 15px; height: 34px; background-image: url("../img/pimiento-verde.svg"); }
.pieza.pim-rojo  { width: 15px; height: 34px; background-image: url("../img/pimiento-rojo.svg"); }

/* ---- Texto legible cuando el recuadro está lleno ----------------------- */
.grupo-cabecera[data-efecto="tomate"].lleno .grupo-titulo > span,
.grupo-cabecera[data-efecto="oli"].lleno .grupo-titulo > span { color: #FFF4E2; text-shadow: 0 1px 3px rgba(30,6,0,.75); }
.grupo-cabecera[data-efecto="tomate"].lleno .grupo-titulo svg,
.grupo-cabecera[data-efecto="oli"].lleno .grupo-titulo svg { stroke: #FFF4E2; opacity: .95; }
.grupo-cabecera[data-efecto="tomate"].lleno .grupo-sub,
.grupo-cabecera[data-efecto="oli"].lleno .grupo-sub { color: #FFEBD8; text-shadow: 0 1px 3px rgba(30,6,0,.75); }

/* ---- ORDENADOR: al pasar el ratón -------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .grupo-cabecera:hover .grupo-liquido {
    transform: translateX(0);
    transition: transform 1s cubic-bezier(.33,.05,.25,1);
  }
  .grupo-cabecera:hover .pieza {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) rotate(var(--rot));
    transition: transform .8s cubic-bezier(.34,1.25,.5,1), opacity .2s;
    transition-delay: calc(var(--i) * 70ms);
  }
  .grupo-cabecera[data-efecto="tomate"]:hover .grupo-titulo > span,
  .grupo-cabecera[data-efecto="oli"]:hover .grupo-titulo > span { color: #FFF4E2; text-shadow: 0 1px 3px rgba(30,6,0,.75); }
  .grupo-cabecera[data-efecto="tomate"]:hover .grupo-titulo svg,
  .grupo-cabecera[data-efecto="oli"]:hover .grupo-titulo svg { stroke: #FFF4E2; opacity: .95; }
  .grupo-cabecera[data-efecto="tomate"]:hover .grupo-sub,
  .grupo-cabecera[data-efecto="oli"]:hover .grupo-sub { color: #FFEBD8; text-shadow: 0 1px 3px rgba(30,6,0,.75); }
}

/* ---- MÓVIL: se llena con el scroll -------------------------------------- */
@media (hover: none) {
  .grupo-liquido {
    transform: translateX(calc((var(--llenado, 0) - 1) * 100%));
    transition: transform .12s linear;
  }
  .pieza.cae {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) rotate(var(--rot));
    transition: transform .75s cubic-bezier(.34,1.25,.5,1), opacity .2s;
  }
}

@media (max-width: 720px) {
  .dibujo-caida { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .pieza.cebolla-1 { width: 30px; height: 11px; }
  .pieza.cebolla-2 { width: 28px; height: 11px; }
  .pieza.pim-verde, .pieza.pim-rojo { width: 10px; height: 22px; }
}

/* Quien tiene activado "reducir movimiento" no ve nada de esto */
@media (prefers-reduced-motion: reduce) {
  .dibujo-caida, .grupo-liquido, .grupo-verduras { display: none !important; }
}

/* ==========================================================================
   BOTÓN FLOTANTE DE LLAMAR (solo en el móvil)
   Sin JavaScript se ve siempre; con JavaScript aparece pasada la portada y
   se esconde mientras se ve la sección de Reserves (que ya tiene su botón).
   ========================================================================== */
.flotante-trucar { display: none; }
@media (max-width: 720px) {
  .flotante-trucar {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 150;
    display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 22px 0 18px;
    border-radius: 99px; background: var(--acento); color: var(--sobre-acento);
    font-size: 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.5);
    transition: opacity .25s, transform .25s;
  }
  .flotante-trucar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  body.con-js .flotante-trucar:not(.visible),
  body.menu-abierto .flotante-trucar { opacity: 0; transform: translateY(18px); pointer-events: none; }
  .pie { padding-bottom: 100px; }        /* que el botón no tape el final del pie */
}

/* ==========================================================================
   FONDO FLOTANTE: espinacas, tomates, cebolla, pimientos y puntitos
   Una capa fija detrás del contenido: los textos y las fotos van por encima.
   La portada la tapa (empieza en la franja de servicios). Se apaga desde
   contenido.js → ajustes.fondoFlotante.
   ========================================================================== */
.fondo-flotante { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.portada { z-index: 3; }
main > section:not(.portada) > .contenedor,
.servicios > .contenedor,
.pie > .contenedor { position: relative; z-index: 2; }

.fondo-flotante .fv,
.fondo-flotante .fp {
  position: absolute; display: block;
  -webkit-animation: flotar var(--d) ease-in-out var(--r) infinite alternate;
          animation: flotar var(--d) ease-in-out var(--r) infinite alternate;
  will-change: transform;
}
.fondo-flotante .fv { width: calc(var(--t) * 1px); height: auto; opacity: .5; }
.fondo-flotante .fp { width: calc(var(--t) * 1px); height: calc(var(--t) * 1px); border-radius: 50%; }
.fondo-flotante .mostaza { background: var(--acento); box-shadow: 0 0 calc(var(--t) * 2px) rgba(214,164,60,.6); }
.fondo-flotante .plata   { background: #CFD3D6;       box-shadow: 0 0 calc(var(--t) * 2px) rgba(207,211,214,.6); }
@-webkit-keyframes flotar {
  from { -webkit-transform: translate3d(0,0,0) rotate(var(--g0)); }
  to   { -webkit-transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--g1)); }
}
@keyframes flotar {
  from { transform: translate3d(0,0,0) rotate(var(--g0)); }
  to   { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--g1)); }
}
@media (max-width: 720px) {
  .fondo-flotante .solo-pc { display: none; }
  .fondo-flotante .fv { width: calc(var(--t) * .7px); }
}
@media (prefers-reduced-motion: reduce) {
  .fondo-flotante .fv, .fondo-flotante .fp { -webkit-animation: none !important; animation: none !important; }
}

/* ==========================================================================
   MÓVILES VIEJOS O LENTOS
   web.js pone body.equipo-lento si la página va a menos de ~40 imágenes por
   segundo: el fondo se queda quieto y con menos piezas, y se paran los
   efectos que no terminan nunca. Todo lo demás se ve igual.
   ========================================================================== */
body.equipo-lento .fondo-flotante .fv,
body.equipo-lento .fondo-flotante .fp { -webkit-animation-play-state: paused; animation-play-state: paused; will-change: auto; }
body.equipo-lento .fondo-flotante .solo-pc { display: none; }
body.equipo-lento .boton::after,
body.equipo-lento .boton::before,
body.equipo-lento .servicios li .txt,
body.equipo-lento .servicios li svg,
body.equipo-lento .liquido-oli::after,
body.equipo-lento .burbuja,
body.equipo-lento.intro-lista .portada-foto img { animation: none !important; }
body.equipo-lento .boton::before { opacity: 0; }

/* iPhones con iOS anterior a 16.4 (sin @property): el logo de la intro solo
   aparece (sin crecer y encogerse a saltos) y el borde de los botones no gira. */
@keyframes introLogoSimple {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}
html.sin-property body.intro .portada-logo { animation: introLogoSimple 1400ms ease 120ms both; --intro-escala: 1; --intro-y: 0px; }
html.sin-property .boton::before { animation: none; opacity: 0; }

/* La ventana legal no deja mover la página de fondo (para iPhones sin :has) */
body.legal-abierta { overflow: hidden; }