/* =========================================================
   FREIDURÍA NEREA · REDISEÑO RADICAL 2026
   Mantiene URLs, contenido y funciones originales.
   Cambia por completo la capa visual.
   ========================================================= */

:root {
  --ink: #071a2b;
  --ink-2: #0d2c45;
  --sea: #0d5573;
  --sky: #eaf5f7;
  --paper: #f7f2e9;
  --paper-2: #fffdf8;
  --white: #ffffff;
  --sand: #d9a441;
  --sand-2: #f2cf86;
  --muted: #65717b;
  --line: rgba(7, 26, 43, .12);
  --green: #16845d;
  --red: #a73845;
  --radius-lg: 34px;
  --radius-md: 22px;
  --shadow: 0 24px 70px rgba(7, 26, 43, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
  margin: 0 !important;
  color: var(--ink);
  background: var(--paper) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: var(--sand-2); color: var(--ink); }
a { color: inherit; }
img { max-width: 100%; }
.cl { display: none !important; }

/* Estructura global: ya no parece una plantilla encerrada en una tarjeta */
#wrapper { min-height: 100vh; padding: 0 !important; background: transparent !important; }
.shell { width: 100% !important; max-width: none !important; margin: 0 !important; }
.container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Barra de estado */
.banner-horario,
.banner-trabaja {
  min-height: 42px;
  margin: 0 !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 60;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: none !important;
}
.banner-abierto { background: var(--green) !important; }
.banner-cerrado { background: var(--red) !important; }
.banner-trabaja { background: var(--ink) !important; }

/* Cabecera */
#header {
  width: min(1320px, calc(100% - 48px)) !important;
  height: 92px !important;
  min-height: 92px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
  position: relative;
  z-index: 50;
}
#logo {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  line-height: 1 !important;
}
#logo a {
  width: auto !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 0 0 91px !important;
  display: flex !important;
  align-items: center;
  position: relative;
  overflow: visible !important;
  background: url(images/logo.png) left center / 74px auto no-repeat !important;
  color: var(--ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(25px, 2.5vw, 38px) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: nowrap;
}
#logo a::after {
  content: "PESCAÍTO FRITO · DOS HERMANAS";
  position: absolute;
  left: 92px;
  bottom: -2px;
  color: var(--sea);
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}
#header .search {
  width: auto !important;
  height: auto !important;
  float: none !important;
  display: flex;
  gap: 10px;
  align-items: center;
}
.header-order {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(7,26,43,.12);
  transition: transform .2s ease, background .2s ease;
}
.header-order:hover { transform: translateY(-2px); background: var(--sea); }
.header-order i { color: #58d68d; font-size: 18px; }

/* Navegación: limpia, editorial, sin barra azul antigua */
#navigation {
  width: min(1320px, calc(100% - 48px)) !important;
  height: auto !important;
  min-height: 62px;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  z-index: 45;
}
#navigation > ul {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 54px);
  float: none !important;
  list-style: none;
}
#navigation ul li {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
}
#navigation ul li a {
  height: 62px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  position: relative;
  color: #33414d !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
#navigation ul li a::after {
  content: "";
  width: 0;
  height: 3px;
  position: absolute;
  left: 50%;
  bottom: -1px;
  border-radius: 99px;
  background: var(--sand);
  transform: translateX(-50%);
  transition: width .2s ease;
}
#navigation ul li a:hover::after,
#navigation ul li.active a::after { width: 100%; }
#navigation ul li.active a { color: var(--ink) !important; }
#navigation a.nav-btn { display: none; }

/* HOME · Hero cinematográfico */
.page-home .m-slider {
  width: min(1440px, calc(100% - 48px)) !important;
  margin: 28px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.page-home .slider-holder {
  width: 100% !important;
  height: clamp(590px, 72vh, 760px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative;
  border-radius: 42px !important;
  background:
    linear-gradient(90deg, rgba(5,22,37,.96) 0%, rgba(5,22,37,.86) 43%, rgba(5,22,37,.30) 72%, rgba(5,22,37,.18) 100%),
    url(images/freiduria_01.jpg) center 52% / cover no-repeat !important;
  box-shadow: 0 35px 90px rgba(7,26,43,.22) !important;
}
.page-home .slider-holder::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 75% 18%, rgba(242,207,134,.28), transparent 20%),
    linear-gradient(180deg, transparent 55%, rgba(5,22,37,.22));
}
.slider-holder .slider-shadow,
.slider-holder .slider-b { display: none !important; }
.page-home .slider,
.page-home .flexslider {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.page-home .slider ul.slides {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  list-style: none !important;
}
.page-home .slider ul.slides > li {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .75s ease, visibility .75s ease;
  background: transparent !important;
  z-index: 2;
}
.page-home .slider ul.slides > li.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}
.page-home .slider ul.slides > li::after { display: none !important; }
.page-home .slider .slide-cnt {
  width: auto !important;
  max-width: 690px !important;
  margin: 0 !important;
  padding: 54px 20px 48px clamp(44px, 7vw, 104px) !important;
  position: static !important;
  z-index: 5;
  transform: translateY(14px);
  transition: transform .75s ease;
}
.page-home .slider li.is-active .slide-cnt { transform: translateY(0); }
.page-home .slide-cnt::before {
  content: "DESDE 2015 · TRADICIÓN DE BARRIO";
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--sand-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.page-home .slider .slide-cnt h2 {
  max-width: 670px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(54px, 6.3vw, 92px) !important;
  line-height: .94 !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
  text-shadow: none !important;
}
.page-home .slider .slide-cnt h2::before { display: none !important; }
.page-home .slider .slide-cnt p {
  max-width: 550px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(16px, 1.5vw, 19px) !important;
  line-height: 1.7 !important;
}
.page-home .slider .box-cnt { width: 100% !important; }
.page-home .img-holder {
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 60px 44px 32px 0 !important;
  position: static !important;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  opacity: 1 !important;
  z-index: 4;
  filter: none !important;
}
.page-home .img-holder img {
  width: min(620px, 100%) !important;
  height: auto !important;
  max-height: 78% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,.34)) !important;
  transform: translateX(24px) scale(.96);
  transition: transform .85s cubic-bezier(.2,.8,.2,1);
}
.page-home .slider li.is-active .img-holder img { transform: translateX(0) scale(1); }
.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-btn {
  min-height: 50px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.30);
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none !important;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.08);
}
.hero-btn.primary { color: var(--ink) !important; background: var(--sand-2); border-color: var(--sand-2); }
.hero-btn:hover { transform: translateY(-2px); }
.nerea-slider-nav {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: 8px;
  position: absolute;
  left: clamp(44px, 7vw, 104px);
  bottom: 40px;
  z-index: 20;
  list-style: none;
}
.nerea-slider-nav button {
  width: 30px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.nerea-slider-nav button.is-active { width: 58px; background: var(--sand-2); }
.flex-control-nav { display: none !important; }

/* Área de contenido global */
.main {
  width: min(1240px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 88px 0 !important;
  float: none !important;
  background: transparent !important;
}
.main section { margin: 0 0 28px !important; padding: 0 !important; background: transparent !important; }
.main h2,
.main h3 {
  color: var(--ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}
.main h2 { font-size: clamp(35px, 4vw, 58px) !important; line-height: 1 !important; }
.main h3 { font-size: 26px !important; }
.main p { color: var(--muted) !important; font-size: 16px; }

/* Home: historia, horario y opiniones */
.page-home .main { padding-top: 100px !important; }
.page-home .main > .post {
  min-height: 560px;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  background: var(--paper-2) !important;
  box-shadow: var(--shadow) !important;
}
.page-home .main > .post .video-holder {
  width: 100% !important;
  height: 100% !important;
  min-height: 560px !important;
  margin: 0 !important;
  float: none !important;
  overflow: hidden;
  border-radius: 0 !important;
  position: relative;
}
.page-home .main > .post .video-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7,26,43,.28));
  pointer-events: none;
}
.page-home .main > .post .video-holder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.02);
}
.page-home .main > .post .post-cnt {
  width: auto !important;
  padding: clamp(44px, 6vw, 78px) !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-home .main > .post .post-cnt::before {
  content: "FREIDURÍA NEREA";
  margin-bottom: 12px;
  color: var(--sand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.page-home .main > .post .post-cnt h2 { margin: 0 0 20px !important; }
.horario-grid {
  margin: 24px 0 8px;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid var(--line);
}
.horario-grid span {
  min-height: 42px;
  padding: 9px 0 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.horario-grid b { color: var(--ink); font-size: 13px; }
.horario-grid em { color: var(--sea); font-size: 12px; font-style: normal; font-weight: 800; text-align: right; }

.opiniones-clientes {
  margin-top: 92px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.opiniones-clientes > h2 { max-width: 680px; margin: 0 0 16px !important; }
.opiniones-clientes > p { max-width: 620px; margin-bottom: 34px !important; }
.opiniones-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px !important;
}
.opinion {
  min-height: 230px;
  padding: 30px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  background: var(--paper-2) !important;
  box-shadow: none !important;
}
.opinion:nth-child(2) { transform: translateY(24px); background: var(--ink) !important; }
.opinion:nth-child(2) .opinion-nombre,
.opinion:nth-child(2) .opinion-texto { color: #fff !important; }
.opinion-cabecera { margin-bottom: 30px; }
.opinion-nombre { color: var(--ink) !important; font-weight: 900 !important; }
.opinion-estrellas { color: var(--sand) !important; letter-spacing: .10em; }
.opinion-texto { margin: 0 !important; color: #4d5a64 !important; font-family: Georgia, serif; font-size: 20px !important; line-height: 1.45 !important; }
.opiniones-botonera { margin-top: 54px !important; text-align: left !important; }
.btn-opiniones {
  min-height: 50px;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.btn-opiniones:hover { background: var(--ink) !important; color: #fff !important; }

/* Subpáginas: cabecera visual totalmente nueva */
.page-inner .main { padding-top: 52px !important; }
.inner-hero {
  width: min(1440px, calc(100% - 48px));
  min-height: 330px;
  margin: 28px auto 0;
  padding: clamp(46px, 7vw, 88px);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}
.inner-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,26,43,.94), rgba(7,26,43,.48) 62%, rgba(7,26,43,.15)),
    var(--hero-image, url(images/barra.jpg)) center / cover no-repeat;
}
.inner-hero > div { max-width: 780px; position: relative; z-index: 2; }
.inner-hero .eyebrow { display: block; margin-bottom: 16px; color: var(--sand-2); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.inner-hero h1 { margin: 0 0 15px; color: #fff; font-family: Georgia, serif; font-size: clamp(48px, 7vw, 82px); line-height: .95; letter-spacing: -.05em; }
.inner-hero p { max-width: 650px; margin: 0; color: rgba(255,255,255,.76); font-size: 17px; }
.page-carta .inner-hero { --hero-image: url(images/cazc3b3n-en-adobo.jpg); }
.page-localizacion .inner-hero { --hero-image: url(images/freiduria_01.jpg); }
.page-contacto .inner-hero { --hero-image: url(images/barra.jpg); }
.page-trabaja .inner-hero { --hero-image: url(images/freiduriaazul.jpg); }

/* Carta: catálogo de producto tipo restaurante premium */
.page-carta .main {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px !important;
}

/* CORRECCIÓN GRID DE LA CARTA
   Cualquier <br> directo dentro de .main se oculta para que no ocupe una
   celda del grid. De esta forma la primera tarjeta empieza en la izquierda
   y, si la última fila está incompleta, el hueco queda al final. */
.page-carta .main > br { display: none !important; }
.page-carta .main > section.post {
  grid-column: 1 / -1;
  margin: 0 0 32px !important;
  padding: 26px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.page-carta .main > section.post:first-child { display: none !important; }
.page-carta .main > section.post:last-child {
  margin-top: 20px !important;
  padding: 32px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: var(--ink) !important;
  color: #fff !important;
  text-align: center;
  font-weight: 800;
}
.page-carta .main .cols { display: contents !important; }
.page-carta .main .col {
  width: auto !important;
  min-height: 390px;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  border: 1px solid var(--line) !important;
  border-radius: 28px !important;
  background: var(--paper-2) !important;
  box-shadow: none !important;
  transition: transform .22s ease, box-shadow .22s ease;
}
.page-carta .main .col:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(7,26,43,.10) !important; }
.page-carta .main .col > img {
  width: 100% !important;
  height: 245px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  background: #eef3f3;
}
.page-carta .main .col-cnt {
  width: auto !important;
  min-height: 140px;
  padding: 24px !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page-carta .main .col-cnt h2 {
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-family: Inter, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}
.page-carta .main .col-cnt p {
  margin: auto 0 0 !important;
  color: var(--sea) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}
.page-carta .main .col-cnt sup,
.page-carta .main .col-cnt sub { font-size: 12px !important; }

/* Localización, contacto y empleo */
.page-localizacion .main .post,
.page-contacto .main .post,
.page-trabaja .main > div,
.page-trabaja .main > section,
.page-trabaja .main form {
  border-radius: 28px !important;
}
.page-localizacion .main .post,
.page-contacto .main .post {
  margin-bottom: 22px !important;
  padding: clamp(28px, 5vw, 54px) !important;
  border: 1px solid var(--line) !important;
  background: var(--paper-2) !important;
  box-shadow: none !important;
}
.page-localizacion iframe {
  width: 100% !important;
  min-height: 520px;
  border: 0 !important;
  border-radius: 22px !important;
  filter: saturate(.85) contrast(.95);
}
.page-contacto .main .post [style*="text-align:center"] { padding: 16px 0 !important; }
.page-contacto .main .post a[href^="tel:"] {
  min-height: 58px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: #fff !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  box-shadow: none !important;
}
.page-contacto .main .post a[href^="tel:"]:nth-of-type(2) { background: var(--sand) !important; color: var(--ink) !important; }
.page-contacto .main .cols {
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.page-contacto .main .cols > a {
  min-height: 120px;
  padding: 22px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 24px !important;
  border: 1px solid var(--line) !important;
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-weight: 900;
}

.page-trabaja .main {
  width: min(900px, calc(100% - 48px)) !important;
}
.page-trabaja .main h2 { margin-bottom: 18px !important; }
.page-trabaja form {
  padding: clamp(28px, 6vw, 60px) !important;
  border: 1px solid var(--line);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
.page-trabaja form label { display: inline-block; margin-bottom: 7px; color: var(--ink); font-size: 13px; font-weight: 900; }
.page-trabaja form input,
.page-trabaja form textarea,
.page-trabaja form select {
  width: 100% !important;
  min-height: 52px;
  padding: 12px 15px !important;
  border: 1px solid rgba(7,26,43,.18) !important;
  border-radius: 14px !important;
  outline: none;
  background: #fff !important;
  color: var(--ink) !important;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.page-trabaja form textarea { min-height: 130px; resize: vertical; }
.page-trabaja form input:focus,
.page-trabaja form textarea:focus { border-color: var(--sea) !important; box-shadow: 0 0 0 4px rgba(13,85,115,.10); }
.page-trabaja form input[type="submit"],
.page-trabaja form button[type="submit"] {
  min-height: 54px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 900;
  cursor: pointer;
}

/* Redes y pie: bloque oscuro tipo marca */
.socials {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 62px 24px 34px !important;
  float: none !important;
  background: var(--ink) !important;
  border: 0 !important;
}
.socials-inner {
  width: min(1240px, 100%) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 0 34px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: transparent !important;
}
.socials h3 {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  color: #fff !important;
  font-family: Georgia, serif !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -.04em;
}
.socials ul { margin: 0 !important; padding: 0 !important; display: flex; gap: 10px; float: none !important; list-style: none; }
.socials ul li { margin: 0 !important; padding: 0 !important; float: none !important; }
.socials ul li a {
  min-height: 44px;
  padding: 0 17px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.84) !important;
  background: rgba(255,255,255,.04) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.socials ul li a:hover { color: #fff !important; background: rgba(255,255,255,.10) !important; }
#footer {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 24px 44px !important;
  float: none !important;
  background: var(--ink) !important;
}
.footer-bottom {
  width: min(1240px, 100%) !important;
  min-height: 86px !important;
  margin: 0 auto !important;
  padding: 28px 0 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  background: transparent !important;
}
.footer-nav { float: none !important; }
.footer-nav ul { margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 18px; list-style: none; }
.footer-nav ul li { margin: 0 !important; padding: 0 !important; float: none !important; background: none !important; }
.footer-nav ul li a { color: rgba(255,255,255,.62) !important; font-size: 12px !important; font-weight: 800; text-decoration: none !important; }
.footer-nav ul li a:hover,
.footer-nav ul li a.active,
.footer-nav ul li.active a { color: #fff !important; }
.copy { margin: 0 !important; float: none !important; color: rgba(255,255,255,.42) !important; font-size: 12px !important; white-space: nowrap; }


/* CRÉDITO FERmav
   Línea discreta del pie de página que enlaza a fermav.es. */
.developer-credit {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  font-size: 12px !important;
  white-space: nowrap;
}
.developer-credit a {
  color: rgba(255,255,255,.62) !important;
  font-weight: 800;
  text-decoration: none !important;
  transition: color .18s ease;
}
.developer-credit a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* WhatsApp */
.whatsapp-float {
  width: 64px !important;
  height: 64px !important;
  right: 24px !important;
  bottom: 24px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  position: fixed !important;
  z-index: 9999;
  border: 5px solid rgba(255,255,255,.90) !important;
  border-radius: 50% !important;
  background: #20c66a !important;
  box-shadow: 0 16px 35px rgba(0,0,0,.20) !important;
  transition: transform .2s ease;
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.03); }
.whatsapp-float img,
.whatsapp-icon { width: 30px !important; height: 30px !important; margin: 0 !important; }

/* Responsive */
@media (max-width: 980px) {
  #header { width: min(100% - 32px, 1320px) !important; height: 82px !important; min-height: 82px !important; }
  #logo a { padding-left: 76px !important; background-size: 62px auto !important; font-size: 27px !important; }
  #logo a::after { left: 77px; font-size: 8px; }
  #navigation { width: min(100% - 32px, 1320px) !important; }
  #navigation > ul { gap: 24px; }
  #navigation ul li a { font-size: 11px !important; }
  .page-home .m-slider,
  .inner-hero { width: calc(100% - 32px) !important; }
  .page-home .slider-holder { height: 620px !important; }
  .page-home .slider ul.slides > li { grid-template-columns: 1.05fr .95fr; }
  .page-home .slider .slide-cnt { padding-left: 54px !important; }
  .page-home .slider .slide-cnt h2 { font-size: 64px !important; }
  .nerea-slider-nav { left: 54px; }
  .main { width: calc(100% - 32px) !important; }
  .page-home .main > .post { grid-template-columns: 1fr; }
  .page-home .main > .post .video-holder { min-height: 420px !important; }
  .opiniones-grid { grid-template-columns: 1fr 1fr; }
  .opinion:nth-child(2) { transform: none; }
  .opinion:last-child { grid-column: 1 / -1; }
  .page-carta .main { grid-template-columns: repeat(2, 1fr); }
  .page-contacto .main .cols { grid-template-columns: 1fr; }
}

@media (max-width: 750px) {
  .banner-horario, .banner-trabaja { min-height: 38px; padding: 8px 14px !important; font-size: 11px !important; }
  #header {
    width: calc(100% - 28px) !important;
    min-height: 72px !important;
    height: 72px !important;
  }
  #logo a {
    height: 46px !important;
    min-height: 46px !important;
    padding-left: 57px !important;
    background-size: 48px auto !important;
    font-size: 20px !important;
  }
  #logo a::after { left: 58px; bottom: -1px; font-size: 6px; letter-spacing: .12em; }
  #header .search { display: none !important; }
  #navigation {
    width: calc(100% - 28px) !important;
    min-height: 50px;
    display: block !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #navigation a.nav-btn {
    min-height: 50px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    color: var(--ink) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
  }
  #navigation a.nav-btn::after { content: "☰"; font-size: 18px; }
  #navigation a.nav-btn .arr { display: none !important; }
  #navigation > ul {
    width: 100%;
    padding: 8px 0 14px !important;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #navigation ul li a {
    height: 44px !important;
    justify-content: flex-start;
    font-size: 12px !important;
  }
  #navigation ul li a::after { left: 0; transform: none; }
  #navigation ul li.active a::after { width: 30px; }

  .page-home .m-slider { width: calc(100% - 20px) !important; margin-top: 14px !important; }
  .page-home .slider-holder { height: 660px !important; border-radius: 28px !important; }
  .page-home .slider ul.slides > li {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 220px;
    align-items: stretch;
  }
  .page-home .slider .slide-cnt {
    padding: 58px 28px 10px !important;
    align-self: center;
  }
  .page-home .slide-cnt::before { font-size: 9px; margin-bottom: 14px; }
  .page-home .slider .slide-cnt h2 { font-size: clamp(48px, 14vw, 68px) !important; }
  .page-home .slider .slide-cnt p { font-size: 15px !important; line-height: 1.55 !important; }
  .hero-actions { margin-top: 22px; }
  .hero-btn { min-height: 44px; padding: 0 17px; font-size: 11px; }
  .page-home .img-holder { padding: 0 20px 20px !important; align-items: flex-end; }
  .page-home .img-holder img { max-height: 210px !important; width: auto !important; }
  .nerea-slider-nav { left: 28px; bottom: 24px; }

  .inner-hero { width: calc(100% - 20px) !important; min-height: 300px; margin-top: 14px; padding: 34px 28px; border-radius: 28px; }
  .inner-hero h1 { font-size: 49px; }
  .inner-hero p { font-size: 15px; }
  .main { width: calc(100% - 28px) !important; padding: 58px 0 !important; }
  .page-home .main { padding-top: 64px !important; }
  .page-home .main > .post { min-height: 0; border-radius: 26px !important; }
  .page-home .main > .post .video-holder { min-height: 310px !important; }
  .page-home .main > .post .post-cnt { padding: 34px 26px !important; }
  .main h2 { font-size: 40px !important; }
  .opiniones-clientes { margin-top: 64px !important; }
  .opiniones-grid { grid-template-columns: 1fr; }
  .opinion:last-child { grid-column: auto; }
  .page-carta .main { grid-template-columns: 1fr; }
  .page-carta .main .col { min-height: 365px; }
  .page-carta .main .col > img { height: 230px !important; }
  .page-localizacion iframe { min-height: 360px; }
  .socials { padding-top: 46px !important; }
  .socials-inner { flex-direction: column; align-items: flex-start; }
  .socials ul { flex-wrap: wrap; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .copy { white-space: normal; }
  .whatsapp-float { width: 58px !important; height: 58px !important; right: 16px !important; bottom: 16px !important; }
}


/* =========================================================
   FERGO · LANZAMIENTO EN DOS HERMANAS
   ---------------------------------------------------------
   Bloque promocional de la página de Inicio.
   - .fergo-launch controla el ancho y separación.
   - .fergo-launch-card es el enlace completo.
   - .fergo-launch-copy contiene los textos.
   - .fergo-phone-stage crea el móvil decorativo.
   Todo está hecho con CSS, por lo que no necesita imágenes.
   ========================================================= */

/* Pequeño acceso a FerGo que aparece en la cabecera de escritorio. */
.header-fergo {
  min-height: 46px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(7, 26, 43, .13);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(7,26,43,.07);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.header-fergo span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font-size: 8px;
  letter-spacing: .10em;
}
.header-fergo:hover {
  transform: translateY(-2px);
  border-color: rgba(7,26,43,.28);
  box-shadow: 0 14px 30px rgba(7,26,43,.12);
}

/* Sección exterior: ocupa el mismo ancho visual que el hero. */
.fergo-launch {
  width: min(1320px, calc(100% - 48px));
  margin: 34px auto 0;
  padding: 0;
}

/* Tarjeta completa y clicable. */
.fergo-launch-card {
  min-height: 400px;
  padding: clamp(34px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 20%, rgba(242,207,134,.22), transparent 27%),
    radial-gradient(circle at 96% 94%, rgba(70,180,196,.18), transparent 29%),
    linear-gradient(125deg, #071a2b 0%, #0b2e4b 48%, #0b5771 100%);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 30px 80px rgba(7,26,43,.22);
  transform: translateZ(0);
}

/* Trama fina decorativa del fondo. */
.fergo-launch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .20;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 100%);
}

/* Destello que recorre suavemente la tarjeta al pasar el ratón. */
.fergo-launch-card::after {
  content: "";
  width: 42%;
  height: 170%;
  position: absolute;
  top: -35%;
  left: -60%;
  z-index: -1;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .8s cubic-bezier(.2,.8,.2,1);
}
.fergo-launch-card:hover::after { left: 125%; }
.fergo-launch-card:hover .fergo-launch-cta { transform: translateY(-2px); }
.fergo-launch-card:hover .fergo-phone { transform: rotate(4deg) translateY(-7px); }

/* Columna de textos. */
.fergo-launch-copy {
  max-width: 760px;
  position: relative;
  z-index: 3;
}

/* Etiqueta MUY PRONTO con punto pulsante. */
.fergo-launch-kicker {
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .18em;
}
.fergo-live-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #ffd163;
  box-shadow: 0 0 0 0 rgba(255,209,99,.45);
  animation: fergoPulse 1.8s infinite;
}
@keyframes fergoPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,209,99,.50); }
  70% { box-shadow: 0 0 0 10px rgba(255,209,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,209,99,0); }
}

.fergo-launch-copy h2 {
  max-width: 770px;
  margin: 0 0 22px !important;
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(48px, 5.8vw, 88px) !important;
  font-weight: 700 !important;
  line-height: .94 !important;
  letter-spacing: -.055em;
}
.fergo-wordmark {
  color: #ffd163;
  font-family: Inter, ui-sans-serif, sans-serif;
  font-weight: 950;
  letter-spacing: -.07em;
}
.fergo-launch-copy > p {
  max-width: 670px;
  margin: 0 0 28px !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(16px, 1.5vw, 20px) !important;
  line-height: 1.6 !important;
}
.fergo-launch-copy > p strong { color: #fff; }

/* Botón visual dentro del enlace principal. */
.fergo-launch-cta {
  min-height: 52px;
  width: fit-content;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border-radius: 999px;
  background: #ffd163;
  color: #071a2b;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .01em;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  transition: transform .2s ease;
}
.fergo-launch-cta i { font-size: 12px; }
.fergo-launch-copy > small {
  margin-top: 16px;
  display: block;
  color: rgba(255,255,255,.49);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Escenario del móvil decorativo. */
.fergo-phone-stage {
  min-height: 290px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.fergo-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.fergo-glow-one {
  width: 290px;
  height: 290px;
  background: rgba(242,207,134,.13);
  border: 1px solid rgba(255,255,255,.13);
}
.fergo-glow-two {
  width: 390px;
  height: 390px;
  border: 1px dashed rgba(255,255,255,.14);
}

/* Mockup del teléfono. */
.fergo-phone {
  width: 226px;
  height: 390px;
  padding: 9px;
  position: relative;
  z-index: 2;
  transform: rotate(7deg);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 38px;
  background: #030a10;
  box-shadow: 0 28px 60px rgba(0,0,0,.38);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.fergo-phone-notch {
  width: 72px;
  height: 20px;
  position: absolute;
  top: 15px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #030a10;
}
.fergo-phone-screen {
  height: 100%;
  padding: 42px 18px 18px;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(160deg, #fffdf8 0%, #eaf5f7 100%);
  color: var(--ink);
}
.fergo-mini-brand {
  margin-bottom: 34px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.06em;
}
.fergo-mini-brand span { color: var(--sand); }
.fergo-mini-label {
  margin-bottom: 7px;
  display: block;
  color: var(--sea);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .17em;
}
.fergo-phone-screen > strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.04;
}
.fergo-phone-screen > p {
  margin: 7px 0 25px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.fergo-mini-order {
  margin-bottom: 19px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(7,26,43,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(7,26,43,.06);
}
.fergo-mini-order > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
}
.fergo-mini-order b,
.fergo-mini-order small { display: block; }
.fergo-mini-order b { font-size: 10px; }
.fergo-mini-order small { color: var(--muted); font-size: 7px; }
.fergo-mini-button {
  min-height: 39px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .09em;
}

/* Pequeñas estrellas decorativas. */
.fergo-spark {
  position: absolute;
  z-index: 2;
  color: #ffd163;
  opacity: .75;
  pointer-events: none;
}
.fergo-spark-a { top: 36px; right: 43%; font-size: 23px; }
.fergo-spark-b { right: 33px; bottom: 30px; font-size: 15px; }

/* Ajustes del bloque FerGo para tablet. */
@media (max-width: 1040px) {
  .header-fergo { display: none !important; }
  .fergo-launch-card {
    grid-template-columns: 1.2fr .8fr;
    padding: 46px;
  }
  .fergo-launch-copy h2 { font-size: clamp(48px, 7vw, 70px) !important; }
  .fergo-phone { width: 205px; height: 355px; }
}

/* Ajustes del bloque FerGo para móvil. */
@media (max-width: 750px) {
  .fergo-launch {
    width: calc(100% - 20px);
    margin-top: 18px;
  }
  .fergo-launch-card {
    min-height: 0;
    padding: 38px 27px 31px;
    grid-template-columns: 1fr;
    gap: 28px;
    border-radius: 28px;
  }
  .fergo-launch-card::before { mask-image: none; opacity: .12; }
  .fergo-launch-copy h2 {
    margin-bottom: 18px !important;
    font-size: clamp(45px, 13vw, 62px) !important;
  }
  .fergo-launch-copy > p { font-size: 15px !important; }
  .fergo-launch-cta {
    min-height: 48px;
    padding: 0 18px;
    font-size: 12px;
  }
  .fergo-phone-stage { min-height: 205px; overflow: hidden; }
  .fergo-phone {
    width: 170px;
    height: 292px;
    transform: rotate(5deg) translateY(44px);
  }
  .fergo-phone-screen { padding: 35px 14px 14px; border-radius: 24px; }
  .fergo-phone-notch { width: 56px; height: 16px; top: 13px; }
  .fergo-mini-brand { margin-bottom: 21px; font-size: 20px; }
  .fergo-phone-screen > strong { font-size: 20px; }
  .fergo-mini-order { margin-bottom: 13px; }
  .fergo-glow-one { width: 220px; height: 220px; }
  .fergo-glow-two { width: 290px; height: 290px; }
  .fergo-spark-a { right: 25px; }
}

/* Respeta la preferencia del usuario de reducir animaciones. */
@media (prefers-reduced-motion: reduce) {
  .fergo-live-dot { animation: none; }
  .fergo-launch-card::after,
  .fergo-phone,
  .fergo-launch-cta { transition: none; }
}

/* =========================================================
   FERGO · IMAGEN OFICIAL DE MARCA (V4)
   ---------------------------------------------------------
   Sustituye el mockup de móvil anterior por la imagen real
   aportada por FerGo. El bloque conserva el enlace completo
   a https://fergoapp.es y se adapta a escritorio y móvil.
   ========================================================= */

/* Contenedor de la imagen dentro de la promoción. */
.fergo-brand-stage {
  min-height: 320px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Halo azul detrás de la creatividad para integrarla con el fondo. */
.fergo-brand-glow {
  width: min(520px, 95%);
  aspect-ratio: 1.35 / 1;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 215, 255, .28) 0%, rgba(0, 122, 255, .12) 42%, transparent 72%);
  filter: blur(22px);
  transform: scale(1.08);
}

/* Marco visual que contiene la imagen oficial. */
.fergo-brand-frame {
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 28px;
  background: #030813;
  box-shadow: 0 30px 70px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: rotate(1.2deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

/* La imagen ocupa todo el marco sin deformarse. */
.fergo-brand-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Pequeña interacción al pasar el ratón por la promoción. */
.fergo-launch-card:hover .fergo-brand-frame {
  transform: rotate(0deg) translateY(-5px) scale(1.015);
  box-shadow: 0 36px 80px rgba(0,0,0,.42), 0 0 45px rgba(0, 210, 255, .10);
}

/* En pantallas medianas, la imagen conserva protagonismo sin desbordar. */
@media (max-width: 980px) {
  .fergo-brand-stage {
    min-height: auto;
    margin-top: 12px;
  }

  .fergo-brand-frame {
    width: min(620px, 100%);
    transform: none;
  }
}

/* En móvil reducimos radios y sombras para ganar espacio útil. */
@media (max-width: 560px) {
  .fergo-brand-frame {
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0,0,0,.30);
  }

  .fergo-brand-glow {
    width: 100%;
  }
}

/* =========================================================
   CORRECCIÓN MENÚ MÓVIL · CAPA SUPERIOR
   ---------------------------------------------------------
   En algunos móviles el menú desplegable podía quedar por
   debajo del hero, fotografías o promociones. Esta regla
   crea una capa propia para la navegación y sitúa el menú
   siempre por encima del resto del contenido.
   ========================================================= */
@media (max-width: 750px) {
  /* La barra de navegación queda por encima de sliders, imágenes y tarjetas. */
  #navigation {
    position: relative !important;
    z-index: 100000 !important;
    overflow: visible !important;
    isolation: isolate;
  }

  /* El desplegable se coloca justo debajo del botón MENÚ. */
  #navigation > ul {
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100001 !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    border: 1px solid rgba(7, 26, 43, .10);
    border-radius: 0 0 20px 20px;
    background: rgba(255, 253, 248, .98) !important;
    box-shadow: 0 22px 48px rgba(7, 26, 43, .20);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Cada opción tiene fondo sólido para que ninguna foto se vea por encima. */
  #navigation > ul > li {
    position: relative !important;
    z-index: 100002 !important;
    width: 100% !important;
    background: transparent !important;
  }

  #navigation > ul > li > a {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: transparent !important;
  }

  #navigation > ul > li > a:hover,
  #navigation > ul > li.active > a {
    background: rgba(217, 164, 65, .12) !important;
  }

  /* Los bloques que vienen después permanecen en capas inferiores. */
  .page-home .m-slider,
  .page-home .slider-holder,
  .inner-hero,
  .fergo-launch,
  .main {
    position: relative;
    z-index: 1;
  }
}