/* El Fogón de Don Camilo — hoja única.
   Reproduce la maqueta del Divi anterior midiendo el original con el navegador:
   contenedor al 80% con tope de 1400, secciones a 4% de padding vertical y filas
   a 2%, que es lo que daba 1140 / 57 / 28,5 px en una ventana de 1425.
   Ojo: la CSP es `style-src 'self'`, así que **ningún atributo style="" se
   aplica**. Todo estilo vive aquí. */

/* ---------- tipografías autoalojadas -------------------------------------
   El mismo fichero variable se declara con los pesos discretos que declaraba
   el tema (300/400/600/700/800). Divi pide font-weight:500 en el cuerpo y no
   había un 500: el navegador lo resuelve con el 400. Si se declarase un rango,
   el 500 se instanciaría de verdad y el texto ensancharía. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/opensans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/opensans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/opensans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/opensans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/opensans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(/fonts/opensans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Covered By Your Grace';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/coveredbyyourgrace-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Covered By Your Grace';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/coveredbyyourgrace-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- base --------------------------------------------------------- */
:root{
  --naranja:#e17e07;
  /* el naranja de marca sobre blanco da 2,92:1 y no llega al mínimo de las
     WCAG para texto. En los enlaces dentro de texto corrido se usa esta
     variante oscura, que sí pasa y se sigue leyendo como el mismo naranja. */
  --naranja-texto:#9c5600;
  --amarillo:#f9c229;
  --texto:#666;
  --titulo:#333;
  --oscuro:#222;
  --crema:#efece4;
  --pie-enlace:#bbb;
  --barra-alto:36px;
  --cabecera-alto:98px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.7;
  color:var(--texto);
  background:#fff;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;border:0;display:block}
a{color:var(--naranja);text-decoration:none}
a:hover{opacity:.7}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}
h1,h2,h3,h4,h5,h6{
  margin:0;padding-bottom:10px;
  color:var(--titulo);font-weight:700;line-height:1.2;
}
h1{font-size:36px;line-height:1.2}
h2{font-size:29px}
h3{font-size:24px}
h4{font-size:14px;line-height:1.2}

.oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* el enlace de salto sólo se ve con el teclado: se le pone el naranja oscuro,
   que sí pasa el umbral de contraste, sin tocar el de la barra */
.saltar{position:absolute;left:0;top:0;z-index:200000;padding:12px 18px;
  background:var(--naranja-texto);color:#fff;font-weight:700;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar:focus{width:auto;height:auto;overflow:visible;clip:auto}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}

/* contenedor y rejilla: los mismos porcentajes que usaba Divi */
.contenedor{width:80%;max-width:1400px;margin:0 auto}
main>section{padding:4% 0;position:relative}
.fila{width:80%;max-width:1400px;margin:0 auto;padding:2% 0;position:relative}
.fila::after{content:"";display:table;clear:both}
.fila-plana{padding:0}

/* Dos rejillas, las mismas que usaba Divi: «gutters1» sin canalón y
   «gutters3» con un canalón del 5,5%. Sólo cambian anchos por corte. */
.cols{display:flex;flex-wrap:wrap}
.cols>*{min-width:0}
.c1-4{width:25%}
.c1-3{width:33.333%}
.c2-3{width:66.667%}
.c1-2{width:50%}
.canal{display:flex;flex-wrap:wrap;column-gap:5.5%}
.canal>*{min-width:0}
.g3-5{width:57.8%}
.g2-5{width:36.7%}
.g1-4{width:20.875%}
.g1-2{width:47.25%}

/* ---------- barra superior y cabecera ------------------------------------
   Las dos van en un mismo bloque fijo: en el original la cabecera se apoya
   siempre justo debajo de la barra, y la barra crece a dos líneas en el
   móvil. Fijando el bloque entero eso sale solo, sin un `top` por corte. */
.cabecera-fija{position:fixed;top:0;left:0;width:100%;z-index:100000}
.barra{background:var(--naranja);color:#fff}
.barra .interior{padding:10.5px 0;line-height:15px;font-weight:600}
/* El relleno vertical de un enlace en línea no cambia la maqueta pero sí
   agranda la zona pulsable. Con él, estos enlaces pasan de 16-19 px a los
   24 px que pide el criterio 2.5.8 de las WCAG en pantalla táctil. */
.barra a{color:#fff;padding:5px 0}
.barra .dato{display:inline-block;white-space:nowrap}
.barra .dato+.dato{margin-left:13px}
.barra svg{width:14px;height:14px;fill:currentColor;display:inline-block;
  vertical-align:-2px;margin-right:5px}

/* ---------- cabecera ----------------------------------------------------- */
.cabecera{
  height:var(--cabecera-alto);
  background:rgba(255,255,255,.68);
}
.cabecera .contenedor{position:relative;height:100%;display:flex;align-items:center}
.cabecera .marca{display:block;line-height:0;margin-left:4px}
.cabecera .marca img{height:78px;width:78px}
/* Los 40 px de la derecha son el hueco de la lupa de búsqueda del Divi, que
   no se replica (abría el buscador de WordPress). Se reserva para que cada
   entrada del menú caiga en el mismo píxel que en el original. */
.cabecera nav{margin-left:auto;align-self:flex-start;padding:42px 40px 0 0}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start}
.menu li{margin-right:26px}
.menu li:last-child{margin-right:0}
.menu a{
  display:block;font-size:18px;font-weight:400;line-height:14px;
  text-transform:uppercase;color:rgba(0,0,0,.6);padding-bottom:42px;
}
.menu a:hover{opacity:.7}
.menu .activo>a,.menu a[aria-current="page"]{color:var(--naranja)}
.abrir{display:none}

/* la cabecera flota sobre el contenido; cada página reserva su hueco */
main{padding-top:0}

/* ---------- botones ------------------------------------------------------
   Todos los botones del original son cajas macizas de 104 px de alto: relleno
   de 40/20, 14 px en negrita, versalita y 4 px de espaciado entre letras. Lo
   que cambia entre ellos es el color. Esto no se ve hasta que Divi carga su
   hoja diferida: medido con la página ya asentada. */
.boton{
  display:inline-block;padding:40px 20px;border:0;border-radius:0;
  font-size:14px;font-weight:700;line-height:24px;letter-spacing:4px;
  text-transform:uppercase;text-align:center;
}
.boton:hover{opacity:.82}
.boton-amarillo{background:var(--amarillo);color:#000}
.boton-negro{background:#000;color:#fff}
.boton-ancho{padding:40px 60px}
.caja-boton{background:#000}

/* ---------- portada ------------------------------------------------------ */
.hero-inicio{
  padding:189px 0 0;
  background:url(/img/el-fogon-de-don-camilo-2048-5-2000x1500-2.jpg) center/cover no-repeat;
}
.hero-inicio .fila-marca{margin:8% auto;text-align:center}
.hero-inicio .logo-hero{width:96px;height:96px;margin:0 auto 31.34px}
.hero-inicio h1{color:#fff;letter-spacing:4px;text-align:center}
.fila-contacto{padding:2% 0 0;padding-left:270px}
.caja-amarilla{background:var(--amarillo);padding:16px 0;display:flex;
  align-items:center;justify-content:center}
.caja-amarilla .boton{background:var(--amarillo);color:#000}
.caja-blanca{background:rgba(255,255,255,.9);padding:24px 20px;text-align:center}
.telefono-grande{font-size:26px;font-weight:700;line-height:52px;margin:0}
.telefono-grande a{color:var(--amarillo)}
.caja-blanca .direccion{margin:0;line-height:23.8px}

.tras-hero{padding:0 0 4%}      /* el original no lleva relleno arriba aquí */
.catalogo{padding:0}
.catalogo .etiqueta{
  display:flex;align-items:center;justify-content:center;
  background:#fff;padding:40px 20px 30px;text-align:center;
}
.catalogo .etiqueta h2{font-size:18px;line-height:1.2;margin:0}
.catalogo .foto{padding:0}
.catalogo .foto img{width:100%;aspect-ratio:1/1;object-fit:cover}
.catalogo-hero .etiqueta{background:#fff}

.fila-vercarta{padding:0}
.fila-vercarta .hueco{width:75%}
.fila-vercarta .caja{width:25%}

/* ---------- quiénes somos ------------------------------------------------ */
.somos{background:linear-gradient(#fff 0%,var(--crema) 100%)}
.somos .fila{padding:0}
/* la columna izquierda del original lleva medio fondo amarillo: un degradado
   duro al 50%, no una caja aparte */
.somos .lado-foto{padding:200px 0;overflow:visible;
  background-image:linear-gradient(90deg,var(--amarillo) 50%,transparent 50%)}
/* la foto sube 200 px sobre el relleno de su columna, como en el original */
.somos .lado-foto img{width:163.8%;max-width:none;margin-left:-64.9%;
  transform:translateY(-200px)}
.somos .lado-texto{padding:100px 0 0}
.somos h2,.menus h2{
  font-family:'Covered By Your Grace',cursive;
  font-size:75px;font-weight:500;line-height:90px;letter-spacing:4px;
  padding-bottom:10px;
}
.somos p,.menus p{font-size:16px;line-height:32px;padding-bottom:16px;margin:0}
.somos p:last-child,.menus p:last-child{padding-bottom:0}
.somos .fila.fila-boton-somos{padding:2% 0}
.fila-boton-somos .g2-5{height:54px;text-align:center}
.fila-boton-somos .boton{margin-top:-50px}

/* ---------- menús diarios ------------------------------------------------ */
.menus{background:linear-gradient(var(--crema) 0%,#fff 60%)}
.menus .fila{padding:0}
.menus .lado-izq{padding-top:120px}
.menus .lado-izq img{width:50%;margin-top:-80px}
.menus .texto{padding:0 30px}
.menus .lado-der{padding:32.55px 0}
.menus .lado-der img{width:auto;max-width:100%;margin-top:-313.5px}

/* ---------- bloque de datos (pie de contenido) --------------------------- */
.datos .fila{padding:0;align-items:flex-start}
.datos .col-marca{padding:32.875px 0;text-align:center}
.datos .col-marca img{width:96px;height:96px;margin:0 auto 30px}
.datos .col-marca h4{margin:0}
.datos .col-horario{padding:32.875px 0}
.datos .col-horario .horario{line-height:28px;margin:0 0 31.34px}
.datos .col-horario .contacto{font-size:30px;font-weight:700;line-height:60px;
  color:var(--amarillo);margin:0}
.datos .col-horario .contacto a{color:var(--amarillo)}
.datos .col-horario .contacto h4{color:var(--titulo)}
.datos .col-horario .correo{font-size:16px;line-height:32px;margin:0}
.datos .col-horario .correo a{color:var(--texto);padding:4px 0}
.datos .col-ancha{padding:0 0 32px}
.datos .col-ancha>.cols{min-height:138px}
.datos .mapa{margin-top:31px;display:block}
/* el mapa del original es un iframe de alto fijo: aquí, imagen de alto fijo */
.datos .mapa img{width:100%;height:357px;object-fit:cover}
.redes{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.redes a{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:3px;color:#000}
.redes svg{width:16px;height:16px;fill:currentColor}

/* ---------- páginas interiores ------------------------------------------- */
.hero-interior{padding:191px 0 0;background-position:center;background-size:cover;
  background-repeat:no-repeat}
.hero-interior h1{
  font-family:'Covered By Your Grace',cursive;
  font-size:120px;font-weight:500;line-height:144px;letter-spacing:5px;
  color:var(--titulo);padding-bottom:10px;
}
.hero-carta{background-image:url(/img/pasta_28.jpg);padding-bottom:200px}
.hero-carta h1{text-align:right}
.hero-galeria{background-image:url(/img/pasta_16.jpg)}
.hero-contacto{background-image:url(/img/pasta_12.jpg)}
.hero-legal{background-image:url(/img/pasta_28.jpg);padding-bottom:60px}
.hero-legal h1{font-size:90px;line-height:110px}

/* ---------- carta -------------------------------------------------------- */
.pedido{margin-top:-157px}
.pedido .c1-2:first-child{text-align:right;padding-bottom:32.875px}
.pedido .recuadro-amarillo{text-align:left}
.recuadro-amarillo{background:var(--amarillo);color:rgba(0,0,0,.64);padding:60px}
.recuadro-amarillo h2{font-family:'Covered By Your Grace',cursive;font-size:60px;
  font-weight:500;line-height:72px;letter-spacing:4px;color:#000;
  padding-bottom:10px}
.recuadro-amarillo h3{font-size:18px;line-height:25.2px;font-weight:700;
  color:var(--titulo);padding-bottom:10px}
.recuadro-amarillo p{font-size:16px;line-height:32px}
.recuadro-amarillo li{font-size:16px;line-height:26px}
.recuadro-amarillo ul{padding-left:1.2em;margin-bottom:32px}
/* el mosaico mantiene dos celdas por fila hasta el móvil estrecho, como Divi */
.mosaico .cols>*{width:50%}
.mosaico .rotulo{display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--texto);padding:40px 20px 20px}
.mosaico img{width:100%}
.carta h2{
  font-family:'Covered By Your Grace',cursive;
  font-size:80px;font-weight:500;line-height:96px;letter-spacing:4px;
  text-align:center;padding-bottom:10px;margin-bottom:31.34px;
}
.tabla-scroll{overflow-x:auto;margin-bottom:31.34px}
.carta table{width:100%;border-collapse:collapse;border:1px solid #eee;margin:0}
.carta td{padding:6px 24px;border:1px solid #eee;line-height:23.8px}
.carta td:last-child{width:124px;white-space:nowrap}
.carta .centro td{text-align:center}
.carta .nota td{text-align:center;color:#5d5d5d}
.carta .hueco td{height:23.8px}
/* el hueco que el original dejaba con un párrafo vacío */
.carta .hueco-original{height:23.8px;margin:0 0 16px}

/* ---------- galería ------------------------------------------------------ */
.hero-galeria .rotulo{text-align:center;padding:20px;background:#fff}
.hero-galeria .rotulo h2{font-family:'Open Sans',Arial,sans-serif;font-size:29px;
  font-weight:700;line-height:1.2;letter-spacing:1px;color:var(--titulo);
  padding-bottom:0}
.galeria-fila{width:95%;max-width:1400px;margin:0 auto;padding:2% 0}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:27.06px}
.galeria a{display:block;overflow:hidden}
.galeria img{width:100%;aspect-ratio:433/308;object-fit:cover;
  transition:transform .4s ease}
.galeria a:hover img{transform:scale(1.06)}
/* «Haz tu pedido»: bloque amarillo, cuadro crema encima y el plato solapando
   la esquina. En el original son dos columnas con fondo y una imagen recortada
   en círculo y girada; aquí, decoración posicionada y el texto en flujo, para
   que en el móvil se apile sin desbordar. */
.pedido-galeria .fila{position:relative;padding:28.5px 0 0;margin-bottom:80px;
  min-height:550px}
.pedido-galeria .bloque{position:absolute;left:0;top:-42px;width:25%;height:550px;
  background:var(--amarillo)}
.pedido-galeria .plato{
  position:absolute;left:-1.13%;top:207px;width:42%;height:auto;z-index:2;
  border-radius:50%;transform:rotate(-20deg);
  box-shadow:24px 45px 36px -20px rgba(0,0,0,.3);
}
.pedido-galeria .cuadro{position:relative;z-index:1;margin:17px 0 0 25%;width:75%;
  background:var(--crema);padding:80px 40px 40px}
.pedido-galeria h2{font-family:'Covered By Your Grace',cursive;font-size:75px;
  font-weight:500;line-height:90px;letter-spacing:4px;padding-bottom:10px}
.pedido-galeria p{font-size:16px;line-height:32px}
.pedido-galeria .sangrado{padding-left:27%}
.pedido-galeria .accion{margin:30px 0 0;text-align:right}

/* ---------- visor de la galería ------------------------------------------
   El original abría las fotos con Magnific Popup: fondo #0b0b0b al 80%, una X
   arriba a la derecha, flechas a los lados y contador. Aquí es lo mismo pero
   sin dependencias y con el diálogo construido por JavaScript, así que sin
   JavaScript el enlace sigue abriendo la foto y no se pierde nada. */
.visor{
  position:fixed;inset:0;z-index:100001;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,11,.8);padding:56px 16px 24px;
}
.visor[hidden]{display:none}
.visor figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;max-height:100%}
.visor img{
  max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);
  width:auto;height:auto;object-fit:contain;
}
.visor figcaption{color:#f3f3f3;font-size:13px;line-height:18px;text-align:center;
  max-width:70ch}
.visor button{
  position:fixed;border:0;padding:0;cursor:pointer;color:#fff;
  background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
}
.visor button:hover{background:rgba(0,0,0,.9)}
.visor button svg{fill:currentColor}
.visor .cerrar{top:0;right:0;width:44px;height:44px}
.visor .cerrar svg{width:20px;height:20px}
.visor .flecha{top:50%;margin-top:-32px;width:44px;height:64px}
.visor .flecha svg{width:22px;height:22px}
.visor .anterior{left:10px}
.visor .siguiente{right:10px}
/* el contador va arriba a la derecha, como en Magnific, y despejado de la X:
   centrado choca con el teléfono de la barra superior, que se transparenta */
.visor .contador{position:fixed;top:13px;right:52px;margin:0;
  color:#ccc;font-size:12px;line-height:18px;pointer-events:none}
body.visor-abierto{overflow:hidden}
/* el botón de volver arriba queda debajo del visor, pero el naranja se lee a
   través del velo y parece un control vivo que no responde: fuera mientras
   el visor esté abierto */
body.visor-abierto .arriba{display:none}
.galeria a{cursor:zoom-in}

/* ---------- contacto ----------------------------------------------------- */
/* aquí el original baja la interlínea a 96 px y limita el ancho del rótulo */
.hero-contacto h1{max-width:520px;line-height:96px}
.franja-contacto .fila{padding:0}
.franja-contacto .caja-amarilla{padding:0}
.franja-contacto .caja-amarilla .boton{width:100%}
.franja-contacto .tel{display:flex;align-items:center;justify-content:center;
  height:104px}
.franja-contacto .tel a{font-size:36px;font-weight:700;line-height:43.2px;
  letter-spacing:4px;color:var(--amarillo)}
.form-col{padding:40px 80px 0 0}
.formulario{max-width:496px}
.formulario h2{
  font-family:'Covered By Your Grace',cursive;font-size:80px;font-weight:500;
  line-height:96px;letter-spacing:5px;color:var(--titulo);padding-bottom:16px;
}
/* la etiqueta se ve, pero pequeña y sobre la línea, como en el original */
.formulario label{
  display:block;font-size:12px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--titulo);margin-bottom:2px;line-height:1.4;
}
.formulario input,.formulario textarea{
  width:100%;background:transparent;border:0;border-bottom:2px solid var(--titulo);
  border-radius:0;padding:10px 16px 12px;margin-bottom:15.3px;color:#000;
  font:700 12px/24px 'Open Sans',Arial,sans-serif;letter-spacing:3px;
  text-transform:uppercase;
}
.formulario textarea{min-height:120px;resize:vertical;text-transform:none;
  letter-spacing:normal;font-weight:500;font-size:14px;line-height:22px}
.formulario input:focus,.formulario textarea:focus{
  outline:0;border-bottom-color:var(--naranja)}
.formulario .enviar{
  display:inline-block;background:#000;color:#fff;border:0;border-radius:0;
  padding:20px 40px;cursor:pointer;width:auto;margin:8px 0 0;
  font-size:12px;font-weight:700;line-height:20.4px;letter-spacing:3px;
  text-transform:uppercase;
}
.formulario .enviar:hover{opacity:.82}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{padding:14px 18px;margin-bottom:20px;border-left:4px solid var(--naranja);
  background:#faf6ef}
.aviso.mal{border-color:#c0392b;background:#fdf1ef}
.legal-form{font-size:12px;line-height:1.5;color:#5d5d5d;margin-bottom:10px}
.mapa-col img{width:100%;height:607px;object-fit:cover}

/* ---------- páginas de texto --------------------------------------------- */
.texto-legal{max-width:900px;margin:0 auto}
.texto-legal h2{font-size:22px;padding:28px 0 10px}
.texto-legal h3{font-size:17px;padding:18px 0 8px}
.texto-legal p,.texto-legal li{font-size:15px;line-height:1.8}
.texto-legal .tabla-scroll{margin-bottom:20px}
.texto-legal table{width:100%;border-collapse:collapse;margin:0;min-width:420px}
.texto-legal th,.texto-legal td{border:1px solid #e3e3e3;padding:10px 14px;
  text-align:left;font-size:15px;vertical-align:top}
.texto-legal th{background:#faf7f1;color:var(--titulo);font-weight:700}
.texto-legal .fecha{color:#6a6a6a;font-size:13px}
.texto-legal a{color:var(--naranja-texto);text-decoration:underline;padding:4px 0}
.legal-form a{color:var(--naranja-texto);text-decoration:underline;padding:5px 0}

/* ---------- pie ---------------------------------------------------------- */
.pie{background:var(--oscuro)}
.pie-nav{background:rgba(255,255,255,.05)}
.pie-nav ul{list-style:none;margin:0;padding:15px 0;display:flex;flex-wrap:wrap;
  gap:0 22px;justify-content:center}
.pie-nav a{color:var(--pie-enlace);font-size:14px;line-height:24px;padding:5px 0}
.pie-abajo{background:rgba(0,0,0,.32);padding:15px 0 5px}
.pie-abajo .contenedor{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.pie-abajo p{margin:0 0 10px;color:var(--texto);font-size:14px}
.pie-abajo a{color:var(--texto);font-weight:700;padding:4px 0}
.pie-abajo .redes a{color:var(--texto);width:24px;height:24px}
.pie-abajo .redes svg{width:20px;height:20px}

/* ---------- arriba del todo ---------------------------------------------- */
.arriba{
  position:fixed;right:20px;bottom:20px;z-index:9999;
  width:44px;height:44px;border:0;border-radius:3px;cursor:pointer;
  background:var(--naranja);color:#fff;display:none;
  align-items:center;justify-content:center;padding:0;
}
.arriba.visible{display:flex}
.arriba svg{width:18px;height:18px;fill:currentColor}

/* ---------- responsive ---------------------------------------------------
   Los cortes son los de Divi, medidos en el original: 980 (tableta), 767
   (móvil) y 479 (móvil estrecho). Lo que cambia en cada uno son los anchos
   de columna y qué columnas desaparecen, que es exactamente lo que hacía
   el tema. Está anotado cuál de esas desapariciones es suya y cuál es
   nuestra. */

@media (max-width:1100px){
  /* por debajo de aquí la foto que asoma por la izquierda ya no cabe */
  .somos .lado-foto img{width:100%;margin-left:0;transform:none}
}

@media (max-width:980px){
  main>section{padding:50px 0}
  .fila,.galeria-fila{padding:30px 0}
  .fila-plana,.catalogo,.fila-vercarta,.somos .fila,.menus .fila,.datos .fila{padding:0}
  h1{font-size:24px}

  /* rejilla: 1/4 va a dos por fila; el resto, a ancho completo */
  .c1-4{width:50%}
  .c1-3,.c2-3,.c1-2{width:100%}
  .g1-4{width:47.25%}
  .g1-2,.g3-5,.g2-5{width:100%}

  /* cabecera de mano */
  .cabecera{height:80px}
  .cabecera .marca img{height:43px;width:43px}
  .cabecera nav{padding:0;align-self:center}
  .abrir{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer;
    color:var(--naranja);
  }
  .abrir svg{width:26px;height:26px;fill:currentColor}
  .menu{
    display:none;position:absolute;top:100%;left:0;width:100%;
    flex-direction:column;align-items:stretch;padding:5%;
    background:rgba(255,255,255,.96);box-shadow:0 2px 5px rgba(0,0,0,.1);
  }
  .menu.abierto{display:flex}
  .menu li{margin:0;border-bottom:1px solid rgba(0,0,0,.06)}
  .menu li:last-child{border-bottom:0}
  .menu a{padding:12px 0;font-size:14px;font-weight:700;line-height:1.4}

  /* portada */
  .hero-inicio{padding:212px 0 0}
  .hero-inicio .fila-marca{margin:0 auto;padding:30px 0}
  .catalogo-hero{display:none}      /* lo esconde el original, no nosotros */
  .fila-contacto{padding:0}
  .caja-amarilla{padding:40px 0}
  .caja-blanca{padding:30px 20px}
  .fila-vercarta .hueco{display:none}          /* idem */
  /* estas dos llevan ancho y alto propios en escritorio, con más peso que
     .c1-4 y .g2-5: hay que soltarlas a mano en el móvil */
  .fila-vercarta .caja{width:100%}
  .fila-boton-somos .g2-5{height:auto;padding-bottom:20px}
  .fila-boton-somos .g3-5{display:none}        /* idem */
  .fila-boton-somos{padding:0 0 30px}
  .fila-boton-somos .boton{margin-top:0}

  /* «Quiénes somos» y «Menús» conservan los huecos del original también
     aquí: son suyos, no nuestros. Si algún día se quieren recortar en el
     móvil, es esta regla y nada más. */
  .somos .lado-foto{padding:200px 0}
  .somos .lado-texto{padding:100px 0 0}
  .menus .lado-izq{padding-top:120px}
  .menus .lado-izq img{margin-top:-14%;width:50%}
  .menus .texto{padding:0 30px}
  .menus .lado-der{padding:32.55px 0}
  .menus .lado-der img{margin-top:-313.5px}

  .datos .col-marca,.datos .col-horario{padding:20px 0;text-align:center}
  .datos .col-ancha{padding-top:20px}
  .redes{justify-content:center}

  /* interiores */
  .hero-interior{padding:150px 0 0}
  .hero-interior h1{text-align:center}
  .hero-carta{padding-bottom:60px}
  .hero-carta h1{text-align:right}
  .hero-galeria .rotulo{text-align:center;padding:0 20px}
  .hero-legal h1{font-size:40px;line-height:52px}
  .pedido{margin-top:0}
  .recuadro-amarillo{padding:40px}
  /* Divi encoge sus rótulos en dos escalones: 60/72 en tableta y 40/48 en
     móvil. Los valores salen de medir el original a 980, 768 y 390 px. */
  .hero-interior h1{font-size:60px;line-height:72px}
  .carta h2{font-size:60px;line-height:72px;margin-bottom:20px}
  .somos h2,.menus h2,.pedido-galeria h2,.formulario h2{font-size:60px;line-height:72px}
  .recuadro-amarillo h2{font-size:40px;line-height:48px}
  .hero-contacto h1{line-height:72px}
  .galeria{gap:18px}
  .pedido-galeria .fila{margin-bottom:0;min-height:0;padding:30px 0}
  .pedido-galeria .bloque{display:none}
  .pedido-galeria .plato{position:static;width:70%;margin:0 auto 24px;transform:none;
    box-shadow:0 18px 30px -18px rgba(0,0,0,.35)}
  .pedido-galeria .cuadro{margin:0;width:100%;padding:30px}
  .pedido-galeria .sangrado{padding-left:0}
  .pedido-galeria .accion{text-align:left}
  .form-col{padding:0 0 30px}
  .franja-contacto .tel{height:auto;padding:24px 0}
  .franja-contacto .fila{padding:0}
.franja-contacto .caja-amarilla{padding:0}
  .mapa-col{padding-top:24px}
  .pie-abajo .contenedor{justify-content:center;text-align:center}
}

@media (max-width:767px){
  .galeria{grid-template-columns:repeat(2,1fr)}
  /* en la mano las flechas estorban a los lados de la foto: van al pie */
  .visor{padding:52px 8px 76px}
  .visor img{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
  .visor .flecha{top:auto;bottom:12px;margin-top:0;width:64px;height:52px}
  .visor .anterior{left:16px}
  .visor .siguiente{right:16px}
  .barra .interior{text-align:center;padding:4px 0}
  .barra .dato{display:block;padding:5px 0}
  .barra .dato+.dato{margin-left:0}
  .hero-inicio{padding:205px 0 0}
  .hero-inicio h1{font-size:18px;letter-spacing:3px}
  .hero-interior h1{font-size:40px;line-height:48px}
  .carta h2{font-size:40px;line-height:48px}
  .somos h2,.menus h2,.pedido-galeria h2,.formulario h2{font-size:40px;line-height:48px}
  .recuadro-amarillo h2{font-size:30px;line-height:36px}
  .hero-contacto h1{line-height:48px}
  .menus .lado-der{display:none}    /* el original también lo esconde aquí */
  .carta td{padding:6px 14px}
  .carta td:last-child{width:auto}
  .recuadro-amarillo{padding:30px}
  .pie-nav ul{gap:0 18px}
}

@media (max-width:479px){
  /* aquí sí se apila todo, igual que en el original */
  .c1-4,.g1-4{width:100%}
  .hero-inicio{padding:200px 0 0}
  .galeria{grid-template-columns:1fr;gap:14px}
  /* en el móvil el original recorta las fotos en cuadrado */
  .galeria img{aspect-ratio:1/1}
  .mosaico .cols>*{width:100%}
  .recuadro-amarillo{padding:24px}
  .boton-negro{padding:28px 20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}