/* ==========================================================================
   CHOCOART PREMIÀ DE MAR — SISTEMA DE DISEÑO Y ESTILOS
   Identidad visual: Alta pastelería artesanal de inspiración francesa
   Paleta: Chocolate Negro (#22140D), Caramelo Tostado (#C88B58), 
           Crema Vainilla (#FBF8F3), Frambuesa Silvestre (#8E2B3E)
   ========================================================================== */


/* Cormorant Garamond y Plus Jakarta Sans alojadas en la web (/assets/fonts/, los mismos archivos que daba Google
   Fonts, licencia SIL OFL). Así no hay que conectar con Google y llegan antes; si alguna tarda, se ve la letra de
   reserva de abajo, que mide lo mismo. Sin preload a propósito: con un móvil lento las tres letras le quitaban
   ancho de banda a la foto y al CSS y la página pintaba unos 250 ms más tarde, sin quitar ningún salto. Grosores
   y rangos de letras copiados de la hoja de Google: cada archivo lleva todos los grosores (letra variable). */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-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: 'Cormorant Garamond'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond-italic-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-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; }

/* Letras de reserva con la misma medida que las de Google. Hasta que llegan Cormorant Garamond y Plus Jakarta
   Sans se ve Times New Roman o Arial; sin ajustar, ocupaban más o menos y al cambiar de letra el título y la
   etiqueta de arriba ganaban o perdían una línea, y la portada saltaba. Medido grosor por grosor con el texto
   de la primera pantalla de las 10 páginas, que es lo que se ve mientras llegan las letras (size-adjust =
   ancho de la letra de Google / ancho de la de reserva; el grosor 400-500 de Cormorant, con todo el texto). */
@font-face { font-family: 'Jakarta Reserva'; font-weight: 400; src: local('Arial'), local('ArialMT'); size-adjust: 103.19%; ascent-override: 100.78%; descent-override: 21.32%; }
@font-face { font-family: 'Jakarta Reserva'; font-weight: 500; src: local('Arial'), local('ArialMT'); size-adjust: 98.15%; ascent-override: 105.96%; descent-override: 22.41%; }
@font-face { font-family: 'Jakarta Reserva'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 98.05%; ascent-override: 106.07%; descent-override: 22.44%; }
@font-face { font-family: 'Jakarta Reserva'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 98.06%; ascent-override: 106.06%; descent-override: 22.44%; }
@font-face { font-family: 'Cormorant Reserva'; font-weight: 400 500; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 96.88%; ascent-override: 94.97%; descent-override: 29.93%; }
@font-face { font-family: 'Cormorant Reserva'; font-weight: 700; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'); size-adjust: 91.55%; ascent-override: 100.49%; descent-override: 31.68%; }
@font-face { font-family: 'Cormorant Reserva'; font-style: italic; font-weight: 600; src: local('Times New Roman Bold Italic'), local('TimesNewRomanPS-BoldItalicMT'); size-adjust: 86.18%; ascent-override: 106.76%; descent-override: 33.65%; }

:root {
  /* Paleta cromática gourmet */
  --color-cacao-dark: #1e110a;
  --color-cacao-medium: #2a180e;
  --color-cacao-light: #3d2315;
  --color-caramel: #c88b58;
  --color-caramel-hover: #b57a46;
  --color-caramel-light: #f4e8dc;
  --color-gold: #dfb15b;
  --color-cream: #fbf8f3;
  --color-cream-card: #ffffff;
  --color-cream-border: #ede4d8;
  --color-berry: #8e2b3e;
  --color-berry-light: #faedf0;
  --color-text-main: #271d17;
  --color-text-muted: #6e6259;
  --color-text-light: #fbf8f3;

  /* Tipografías */
  --font-serif: 'Cormorant Garamond', 'Cormorant Reserva', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Jakarta Reserva', system-ui, -apple-system, sans-serif;

  /* Sombras y elevación */
  --shadow-sm: 0 2px 8px rgba(34, 20, 13, 0.05);
  --shadow-md: 0 8px 24px rgba(34, 20, 13, 0.08);
  --shadow-lg: 0 16px 40px rgba(34, 20, 13, 0.12);
  --shadow-glow: 0 0 25px rgba(200, 139, 88, 0.25);

  /* Bordes */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset y base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Evitar que las cabeceras de sección queden ocultas bajo el header sticky (71-79 px), sin dejar
   un hueco en blanco: lo buscado queda unos 24 px por debajo. Las secciones ya traen 85 px de
   relleno arriba, así que a ellas solo les falta lo que no cubre ese relleno. */
[id] {
  scroll-margin-top: 103px;
}

section[id], [id].section, .section[id] {
  scroll-margin-top: 18px;
}

/* «Inicio» sube del todo arriba */
#inicio {
  scroll-margin-top: 100vh;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-cream);
  color: var(--color-text-main);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ==========================================================================
   BARRA SUPERIOR DE HORARIOS & CONTACTO DIRECTO
   ========================================================================== */
.top-notice-bar {
  background-color: var(--color-cacao-dark);
  color: var(--color-cream-border);
  font-size: 0.825rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(223, 177, 91, 0.2);
}

.top-notice-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2ecc71;
  display: inline-block;
  animation: pulse-dot 2s infinite;
}

.status-dot.closed,
.obrador-cerrado .status-dot {
  background-color: #e74c3c;
}

/* El texto del horario lo calcula un script del <head> de cada página antes de pintar nada y lo deja en
   --horario: el aviso sale desde el primer momento con su texto y su ancho, y la barra de arriba no salta.
   Sin JavaScript no hay horario que mostrar y el aviso no sale. */
.status-text::before {
  content: var(--horario, '');
}

html:not(.con-horario) .status-badge {
  display: none;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.top-contact-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.top-address {
  display: inline-flex;
  align-items: center;
  color: var(--color-caramel-light);
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
}

.top-phone,
.top-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.top-phone {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-cream);
  border: 1px solid rgba(223, 177, 91, 0.25);
}

.top-phone:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.top-whatsapp {
  background: rgba(37, 211, 102, 0.16);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.35);
}

.top-whatsapp:hover {
  background: #25d366;
  color: #ffffff;
}

.top-phone svg,
.top-whatsapp svg {
  flex-shrink: 0;
}

/* ==========================================================================
   CABECERA PRINCIPAL (STICKY & GLASSMORPHISM)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-cream-border);
  transition: all var(--transition-smooth);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
  background: rgba(251, 248, 243, 0.98);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  height: 78px;
}

.brand-logo {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: max-content;
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.2vw, 2.05rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-cacao-dark);
  line-height: 1;
  white-space: nowrap;
}

.brand-name span {
  color: var(--color-caramel);
}

.brand-tagline {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  margin-top: 3px;
  font-weight: 600;
  white-space: nowrap;
}

.main-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.main-navigation ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  gap: clamp(10px, 1.3vw, 22px);
  margin: 0;
  padding: 0;
}

.main-navigation a {
  font-size: clamp(0.85rem, 0.92vw, 0.93rem);
  font-weight: 600;
  color: var(--color-cacao-dark);
  position: relative;
  padding: 6px 2px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast);
}

.main-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-caramel);
  transition: width var(--transition-fast);
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
  color: var(--color-caramel);
}

.main-navigation a:hover::after,
.main-navigation a:focus-visible::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-cream-border);
  background: #ffffff;
  color: var(--color-cacao-dark);
  transition: all var(--transition-fast);
}

.header-social-link:hover {
  border-color: var(--color-caramel);
  color: var(--color-caramel);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.header-cta {
  padding: 10px 20px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.925rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-smooth);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-caramel) 0%, #aa6c38 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(200, 139, 88, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-caramel-hover) 0%, #985e2f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200, 139, 88, 0.45);
}

.btn-outline {
  border-color: var(--color-cacao-dark);
  color: var(--color-cacao-dark);
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--color-cacao-dark);
  color: var(--color-cream);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background-color: #25d366;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  background-color: #20ba59;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

.menu-toggle {
  display: none;
  background: #ffffff;
  border: 1px solid var(--color-cream-border);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-cacao-dark);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.menu-toggle svg {
  pointer-events: none;
}

.menu-toggle:hover {
  background: var(--color-caramel-light);
  border-color: var(--color-caramel);
}

.mobile-nav-footer {
  display: none;
}

/* ==========================================================================
   SECCIÓN HERO — ALTA PASTELLERÍA EN PREMIÀ DE MAR
   ========================================================================== */
.hero-section {
  position: relative;
  padding: 60px 0 90px;
  background: radial-gradient(circle at 80% 20%, rgba(200, 139, 88, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(142, 43, 62, 0.08) 0%, transparent 50%),
              var(--color-cream);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 50px;
}

/* En ordenador la columna de las fotos mide lo que piden sus cuatro miniaturas con las letras de Google
   (550 px; 556 en catalán, con nombres más largos). Antes se calculaba con la letra que hubiera en cada
   momento y, al llegar la de Google, crecía 15 px y empujaba de lado el título y las fotos. */
@media (min-width: 1025px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 550px; }
  :lang(ca) .hero-grid { grid-template-columns: minmax(0, 1fr) 556px; }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background-color: #ffffff;
  border: 1px solid var(--color-cream-border);
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-berry);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}

.hero-pill svg {
  color: var(--color-gold);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-cacao-dark);
  margin-bottom: 22px;
}

.hero-title em {
  font-style: italic;
  color: var(--color-caramel);
  font-weight: 600;
}

.hero-lead {
  font-size: 1.12rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 580px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-trust-badges {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-cream-border);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-rating-stars {
  color: #f39c12;
  display: flex;
  gap: 2px;
}

.trust-text {
  font-size: 0.85rem;
  color: var(--color-text-main);
  line-height: 1.3;
}

.trust-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-cacao-dark);
}

.hero-media {
  position: relative;
}

/* ==========================================================================
   HERO CAKE SHOWCASE & INTERACTIVE SLIDER
   ========================================================================== */
.hero-cake-showcase {
  position: relative;
  width: 100%;
}

.hero-slides-viewport {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid #ffffff;
  background-color: var(--color-cacao-dark);
  height: 460px;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.03);
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.hero-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.hero-slide-link:hover img {
  transform: scale(1.05);
}

.hero-slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 34px 24px 22px;
  background: linear-gradient(to top, rgba(22, 12, 7, 0.94) 0%, rgba(22, 12, 7, 0.65) 55%, transparent 100%);
  color: #ffffff;
  transition: padding 0.3s ease;
}

.hero-slide-link:hover .hero-slide-overlay {
  padding-bottom: 26px;
}

.slide-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold);
  margin-bottom: 5px;
}

.slide-title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 10px;
}

.slide-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.slide-price {
  background: rgba(223, 177, 91, 0.25);
  border: 1px solid var(--color-gold);
  color: #ffffff;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-caramel-light);
  transition: all var(--transition-fast);
}

.hero-slide-link:hover .slide-cta {
  color: #ffffff;
  transform: translateX(4px);
}

/* Flechas del slider */
.slider-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-cacao-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.slider-arrow:hover {
  background: #ffffff;
  color: var(--color-caramel);
  transform: translateY(-50%) scale(1.1);
}

.slider-arrow-prev {
  left: 12px;
}

.slider-arrow-next {
  right: 12px;
}

/* Barra de miniaturas */
.hero-thumbs-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.hero-thumb-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #ffffff;
  border: 2px solid var(--color-cream-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.hero-thumb-btn img {
  width: 44px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.thumb-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-thumb-btn:hover {
  border-color: var(--color-caramel);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hero-thumb-btn.active {
  border-color: var(--color-caramel);
  background: var(--color-caramel-light);
  box-shadow: 0 4px 14px rgba(200, 139, 88, 0.25);
}

.hero-thumb-btn.active .thumb-name {
  color: var(--color-cacao-dark);
}



/* Botones de acción en tarjetas de menú */
.menu-item-action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-cream-border);
  flex-wrap: wrap;
}

.btn-sm-card {
  padding: 7px 14px;
  font-size: 0.78rem;
  border-radius: var(--radius-full);
}

/* Animación de resaltado al hacer clic desde el Hero */
@keyframes pulseHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 139, 88, 0.8);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(200, 139, 88, 0);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 139, 88, 0);
    transform: scale(1);
  }
}

.menu-item-card.highlight-card,
.specialty-card.highlight-card,
.cake-builder-wrapper.highlight-card {
  animation: pulseHighlight 1.4s ease 2;
  border-color: var(--color-caramel) !important;
  box-shadow: 0 8px 30px rgba(200, 139, 88, 0.35) !important;
}

/* ==========================================================================
   SECCIÓN DE ACCIONES RÁPIDAS / BENEFICIOS DESTACADOS
   ========================================================================== */
.quick-features-bar {
  background-color: #ffffff;
  border-top: 1px solid var(--color-cream-border);
  border-bottom: 1px solid var(--color-cream-border);
  padding: 34px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.feature-icon-wrap {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: var(--color-caramel-light);
  color: var(--color-caramel);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-box .feature-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
  margin-bottom: 4px;
}

.feature-box p {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ==========================================================================
   ESTRUCTURA DE SECCIONES GENERALES
   ========================================================================== */
.section {
  padding: 85px 0;
  position: relative;
}

.section-bg-light {
  background-color: #ffffff;
}

.section-bg-warm {
  background-color: #f7f1e7;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px;
}

.section-kicker {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-caramel);
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 700;
  color: var(--color-cacao-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-description {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ==========================================================================
   SECCIÓN: NUESTRAS ESPECIALIDADES ARTESANALES (TARJETAS GRANDES)
   ========================================================================== */
.specialties-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.specialty-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-smooth);
}

.specialty-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-caramel-light);
}

.specialty-img-holder {
  position: relative;
  height: 270px;
  overflow: hidden;
}

.specialty-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.specialty-card:hover .specialty-img-holder img {
  transform: scale(1.05);
}

.specialty-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(30, 17, 10, 0.85);
  backdrop-filter: blur(8px);
  color: var(--color-gold);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

.specialty-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.specialty-title {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
  margin-bottom: 12px;
  line-height: 1.25;
}

.specialty-text {
  font-size: 0.94rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
  flex-grow: 1;
}

.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.tag-item {
  background-color: var(--color-cream);
  border: 1px solid var(--color-cream-border);
  color: var(--color-cacao-light);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.specialty-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-cream-border);
  padding-top: 16px;
}

.specialty-price-hint {
  font-size: 0.82rem;
  color: var(--color-caramel);
  font-weight: 600;
}

.specialty-cta-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.specialty-cta-link:hover {
  color: var(--color-caramel);
  transform: translateX(4px);
}

/* ==========================================================================
   SECCIÓN: CALCULADOR & PERSONALIZADOR DE TARTAS (CONVERSIÓN DIRECTA)
   ========================================================================== */
.cake-builder-wrapper {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-cream-border);
  box-shadow: var(--shadow-lg);
  padding: 42px;
}

.builder-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 40px;
}

.builder-step-block {
  margin-bottom: 24px;
}

.builder-step-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
  margin-bottom: 10px;
}

.option-cards-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.option-radio-card {
  position: relative;
  cursor: pointer;
}

.option-radio-card input {
  position: absolute;
  opacity: 0;
}

.option-card-inner {
  border: 2px solid var(--color-cream-border);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  transition: all var(--transition-fast);
  background: var(--color-cream);
}

.option-card-inner strong {
  display: block;
  font-size: 0.92rem;
  color: var(--color-cacao-dark);
  margin-bottom: 2px;
}

.option-card-inner span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.option-radio-card input:checked + .option-card-inner {
  border-color: var(--color-caramel);
  background-color: var(--color-caramel-light);
  box-shadow: 0 0 0 1px var(--color-caramel);
}

.form-select, .form-input, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-cream-border);
  border-radius: var(--radius-md);
  background-color: #ffffff;
  color: var(--color-cacao-dark);
  transition: border-color var(--transition-fast);
}

.form-select:focus, .form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-caramel);
}

.builder-summary-card {
  background: linear-gradient(145deg, var(--color-cacao-dark) 0%, var(--color-cacao-medium) 100%);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}

.summary-heading {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--color-gold);
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
}

.summary-details-list {
  list-style: none;
  margin-bottom: 24px;
}

.summary-details-list li {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.summary-details-list li span:first-child {
  color: rgba(255, 255, 255, 0.7);
}

.summary-details-list li span:last-child {
  font-weight: 600;
  color: #ffffff;
  text-align: right;
}

.summary-guarantee-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 16px;
  text-align: center;
  line-height: 1.4;
}

/* ==========================================================================
   SECCIÓN: OBRADOR Y FILOSOFÍA EN PREMIÀ DE MAR (SEO LOCAL & HISTORIA)
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 55px;
}

.about-image-stack {
  position: relative;
}

.about-main-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid #ffffff;
}

.about-main-img img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

.about-badge-experience {
  position: absolute;
  top: -20px;
  right: -20px;
  background: var(--color-cacao-dark);
  color: #ffffff;
  padding: 20px;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 2px solid var(--color-gold);
}

.badge-number {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}

.badge-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
  display: block;
}

.about-points-list {
  list-style: none;
  margin: 24px 0 32px;
}

.about-points-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.98rem;
  color: var(--color-text-main);
}

.about-points-list li svg {
  color: var(--color-caramel);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ==========================================================================
   SECCIÓN: CARTA DE ESPECIALIDADES & TABS INTERACTIVOS
   ========================================================================== */
.menu-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.tab-btn {
  background: #ffffff;
  border: 1px solid var(--color-cream-border);
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-cacao-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab-btn:hover {
  border-color: var(--color-caramel);
  color: var(--color-caramel);
}

.tab-btn.active {
  background: var(--color-cacao-dark);
  border-color: var(--color-cacao-dark);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.menu-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.menu-item-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-cream-border);
  padding: 24px;
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.menu-item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-caramel-light);
}

.menu-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.menu-item-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
}

.menu-item-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-caramel);
}

.menu-item-desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
  flex-grow: 1;
}

.menu-item-ingredients {
  font-size: 0.76rem;
  color: var(--color-cacao-light);
  background: var(--color-cream);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   SECCIÓN: RESEÑAS Y PRUEBA SOCIAL REAL (4.9 / 5)
   ========================================================================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.review-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 30px;
  border: 1px solid var(--color-cream-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
}

.review-stars {
  color: #f39c12;
  margin-bottom: 14px;
}

.review-text {
  font-size: 0.92rem;
  color: var(--color-text-main);
  line-height: 1.65;
  margin-bottom: 22px;
  font-style: italic;
  flex-grow: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--color-cream-border);
  padding-top: 16px;
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-caramel-light);
  color: var(--color-cacao-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.author-info strong {
  display: block;
  font-size: 0.92rem;
  color: var(--color-cacao-dark);
}

.author-info span {
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.verified-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #27ae60;
  font-weight: 600;
  margin-top: 2px;
}

/* ==========================================================================
   SECCIÓN: FAQS OPTIMIZADAS PARA SEO & BÚSQUEDAS IA
   ========================================================================== */
.faq-accordion {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-cream-border);
  margin-bottom: 14px;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--color-caramel);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 16px;
}

.faq-icon {
  font-size: 1.25rem;
  color: var(--color-caramel);
  transition: transform var(--transition-fast);
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
  background-color: var(--color-cream);
}

.faq-answer-inner {
  padding: 0 24px 20px;
  font-size: 0.94rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

/* ==========================================================================
   SECCIÓN: UBICACIÓN, HORARIOS Y CONTACTO DIRECTO EN PREMIÀ DE MAR
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-cream-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.contact-info-panel {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-caramel-light);
  color: var(--color-caramel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-text-block strong {
  display: block;
  font-size: 0.96rem;
  color: var(--color-cacao-dark);
  margin-bottom: 4px;
}

.contact-text-block p, .contact-text-block a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.contact-text-block a:hover {
  color: var(--color-caramel);
}

.hours-table {
  width: 100%;
  font-size: 0.88rem;
  border-collapse: collapse;
  margin-top: 8px;
}

.hours-table tr {
  border-bottom: 1px solid var(--color-cream-border);
}

.hours-table td {
  padding: 6px 0;
}

.hours-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--color-cacao-dark);
}

.map-container {
  min-height: 450px;
  width: 100%;
  background: #e9ecef;
  position: relative;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  min-height: 450px;
  border: 0;
}

/* ==========================================================================
   PIE DE PÁGINA (FOOTER CON ENLACES Y SEO LOCAL NAP)
   ========================================================================== */
.site-footer {
  background-color: var(--color-cacao-dark);
  color: #ffffff;
  padding: 70px 0 30px;
  border-top: 3px solid var(--color-caramel);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 50px;
}

.footer-brand .brand-name {
  color: #ffffff;
}

.footer-brand p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 14px;
  line-height: 1.6;
}

.footer-column .footer-heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-gold);
  margin-bottom: 20px;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer-column ul a:hover {
  color: var(--color-gold);
  padding-left: 4px;
}

.footer-local-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.local-pill {
  font-size: 0.74rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom a:hover {
  color: var(--color-gold);
}

/* ==========================================================================
   BOTONES FLOTANTES DE ACCIÓN MÓVIL (STICKY CONVERSIÓN)
   ========================================================================== */
.floating-actions-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-whatsapp-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  font-size: 1.8rem;
  transition: all var(--transition-smooth);
  position: relative;
}

.floating-whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
}

.floating-tooltip {
  position: absolute;
  right: 68px;
  background: var(--color-cacao-dark);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--transition-fast);
}

.floating-whatsapp-btn:hover .floating-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid var(--color-cream-border);
  padding: 10px 16px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
  z-index: 998;
}

.mobile-bar-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE-FIRST BREAKPOINTS)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-media {
    max-width: 600px;
    margin: 0 auto;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .specialties-grid {
    grid-template-columns: 1fr;
  }

  .builder-grid {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .menu-items-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1120px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-actions .header-social-link {
    display: none;
  }

  .main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(251, 248, 243, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 16px 20px 24px;
    box-shadow: 0 16px 36px rgba(34, 20, 13, 0.22);
    border-bottom: 3px solid var(--color-caramel);
    border-top: 1px solid var(--color-cream-border);
    display: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 99999;
  }

  .main-navigation.is-open {
    display: block !important;
    animation: menuSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes menuSlideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .main-navigation ul {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-navigation a {
    font-size: 1.02rem;
    font-weight: 600;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-cream-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-cacao-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all var(--transition-fast);
  }

  .main-navigation a::after {
    display: none;
  }

  .main-navigation a:hover,
  .main-navigation a:active {
    background: var(--color-caramel-light);
    color: var(--color-caramel);
    border-color: var(--color-caramel);
  }

  .mobile-nav-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-cream-border);
    text-align: center;
  }

  .mobile-nav-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-nav-brand {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-cacao-dark);
  }

  .mobile-nav-city {
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  .mobile-nav-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .mobile-nav-actions .btn {
    padding: 10px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-slides-viewport {
    height: 380px;
  }

  .hero-thumbs-bar {
    grid-template-columns: repeat(2, 1fr);
  }


  .top-notice-bar {
    padding: 8px 0;
    text-align: center;
  }

  .top-notice-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
  }

  .status-badge {
    font-size: 0.76rem;
    padding: 3px 10px;
  }

  .top-contact-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    width: 100%;
  }

  .top-address {
    width: 100%;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--color-caramel-light);
    letter-spacing: 0.01em;
  }

  .top-phone,
  .top-whatsapp {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .option-cards-group {
    grid-template-columns: 1fr;
  }

  .menu-items-grid {
    grid-template-columns: 1fr;
  }

  .cake-builder-wrapper {
    padding: 24px 18px;
  }

  .contact-info-panel {
    padding: 28px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mobile-bottom-bar {
    display: block;
  }

  body {
    padding-bottom: 65px;
  }

  .floating-actions-bar {
    bottom: 75px;
  }
}

@media (max-width: 480px) {
  .hero-slides-viewport {
    height: 320px;
  }

  .slide-title {
    font-size: 1.22rem;
  }

  .hero-slide-overlay {
    padding: 18px 14px 14px;
  }

  .slider-arrow {
    width: 34px;
    height: 34px;
  }

  .brand-name {
    font-size: 1.55rem;
  }

  .brand-tagline {
    font-size: 0.6rem;
  }

  .header-cta {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .header-inner {
    gap: 8px;
    height: 70px;
  }
}

/* Añadidos revisión SEO */
.feature-box .feature-title, .footer-column .footer-heading { margin-top: 0; }
.hero-facts { font-size: .95rem; opacity: .85; }

/* ==========================================================================
   AÑADIDOS: páginas de servicio, idioma, tablas y utilidades
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-cream-border);
  background: #ffffff;
  color: var(--color-cacao-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.lang-switch:hover,
.lang-switch:focus-visible {
  border-color: var(--color-caramel);
  color: var(--color-caramel);
}

.specialty-title a {
  color: inherit;
  text-decoration: none;
}

.specialty-title a:hover,
.specialty-title a:focus-visible {
  color: var(--color-caramel);
}

.specialty-more {
  display: inline-block;
  margin: -6px 0 18px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-berry);
  text-decoration: none;
}

.specialty-more:hover,
.specialty-more:focus-visible {
  text-decoration: underline;
}

.page-hero {
  position: relative;
  padding: 36px 0 80px;
  background: radial-gradient(circle at 80% 20%, rgba(200, 139, 88, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(142, 43, 62, 0.08) 0%, transparent 50%),
              var(--color-cream);
  overflow: hidden;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
}

.hero-content .hero-lead:not(.hero-facts) {
  margin-bottom: 14px;
}

.hero-content .hero-facts {
  margin-bottom: 28px;
}

.page-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.breadcrumbs {
  margin-bottom: 26px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: '›';
  margin-right: 6px;
  opacity: 0.6;
}

.breadcrumbs a {
  color: var(--color-berry);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.table-wrap {
  max-width: 860px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-cream-border);
  background: #ffffff;
}

.facts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.facts-table th,
.facts-table td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-cream-border);
}

.facts-table tr:last-child th,
.facts-table tr:last-child td {
  border-bottom: 0;
}

.facts-table th {
  width: 38%;
  font-weight: 700;
  color: var(--color-cacao-dark);
  background: var(--color-cream);
}

.facts-table td {
  color: var(--color-text-main);
}

.facts-note {
  max-width: 860px;
  margin: 14px auto 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  list-style: none;
}

.step-card {
  position: relative;
  padding: 26px 24px;
  background: #ffffff;
  border: 1px solid var(--color-cream-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: var(--radius-full);
  background: var(--color-caramel);
  color: #ffffff;
  font-weight: 700;
}

.step-title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
}

.step-card p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.step-card a {
  color: var(--color-caramel-hover);
  font-weight: 600;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
}

.related-card a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 26px 24px;
  background: #ffffff;
  border: 1px solid var(--color-cream-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-smooth);
}

.related-card a:hover,
.related-card a:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-caramel-light);
}

.related-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-cacao-dark);
}

.related-text {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  flex-grow: 1;
}

.related-more {
  font-weight: 700;
  color: var(--color-berry);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: #22140d;
  color: #ffffff;
  padding: 10px 16px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

@media (max-width: 1024px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .page-hero-media {
    max-width: 600px;
    margin: 0 auto;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 28px 0 56px;
  }

  .facts-table th,
  .facts-table td {
    display: block;
    width: 100%;
  }

  .facts-table th {
    padding-bottom: 4px;
    border-bottom: 0;
  }

  .facts-table td {
    padding-top: 0;
  }
}

/* Cabecera en móvil: logo, CA, «Encargar Tarta» y el botón del menú medían 425 px y no cabían en
   ningún móvil (el botón del menú quedaba cortado por la derecha). Se compacta un poco y, por debajo
   de 400 px, «Encargar Tarta» sale de la cabecera (sigue en la portada y en el WhatsApp de arriba). */
@media (max-width: 480px) {
  .header-inner { gap: 6px; }
  .header-actions { gap: 6px; }
  .brand-name { font-size: 1.4rem; }
  .brand-tagline { font-size: 0.56rem; letter-spacing: 0.08em; }
  .header-cta { padding: 8px 11px; font-size: 0.78rem; }
}
@media (max-width: 400px) {
  .header-actions .header-cta { display: none; }
}

/* Al pulsar un apartado del menú en ordenador, el apartado entero cabe en la pantalla con sus botones
   (antes, a 1418x695, «Especialidades» medía 1.620 px, «Carta» 1.077 y «Contacto» 798, y debajo de la
   cabecera caben unos 580). Los tamaños siguen el alto de la pantalla (vh). */
@media (min-width: 900px), (min-width: 769px) and (max-width: 899px) and (min-height: 900px) {
  .section-header { max-width: 1100px; margin-bottom: clamp(16px, 3vh, 40px); }
  .section-kicker { margin-bottom: 4px; }
  .section-title { font-size: clamp(1.55rem, min(2.8vw, 5.2vh), 2.9rem); margin-bottom: 6px; }
  .section-description { font-size: 0.95rem; line-height: 1.55; max-width: 900px; margin: 0 auto; }

  .specialties-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .specialty-img-holder { height: clamp(96px, calc(100vh - 712px), 250px); }
  .specialty-badge { top: 10px; left: 10px; font-size: 0.66rem; padding: 3px 9px; }
  .specialty-body { padding: 14px 16px 12px; }
  .specialty-title { font-size: 1.04rem; margin-bottom: 6px; }
  .specialty-text { font-size: 0.8rem; line-height: 1.45; margin-bottom: 8px; }
  .specialty-tags { gap: 4px; margin-bottom: 8px; }
  .specialty-tags .tag-item { font-size: 0.68rem; padding: 2px 7px; }
  .specialty-more { font-size: 0.8rem; }
  .specialty-footer { padding-top: 8px; margin-top: 6px; flex-wrap: wrap; gap: 2px 10px; }
  .specialty-price-hint { font-size: 0.72rem; }
  .specialty-cta-link { font-size: 0.78rem; }

  .about-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .about-main-img img { height: clamp(240px, calc(100vh - 240px), 440px); }
  .about-points-list { margin: 12px 0 16px; }
  .about-points-list li { margin-bottom: 8px; font-size: 0.9rem; }

  .menu-tabs-nav { margin-bottom: clamp(12px, 2vh, 40px); }
  .menu-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .menu-item-card { padding: 14px 16px; }
  .menu-item-top { margin-bottom: 4px; }
  .menu-item-name { font-size: 1.08rem; }
  .menu-item-desc { font-size: 0.8rem; line-height: 1.42; margin-bottom: 8px; }
  .menu-item-ingredients { font-size: 0.7rem; padding: 4px 8px; }
  .menu-item-action { margin-top: 8px; }

  .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .review-card { padding: 20px 22px; }

  .contact-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .contact-info-panel { padding: 22px 28px; }
  .contact-detail-row { margin-bottom: 12px; }
  .hours-table td { padding: 3px 0; }
  .map-container, .map-container iframe { min-height: clamp(260px, calc(100vh - 300px), 450px); }

  .cake-builder-wrapper { padding: 20px 24px; }
  .builder-grid { grid-template-columns: 1.25fr 0.95fr; gap: 24px; }
  .builder-step-block { margin-bottom: 12px; }
  .builder-step-label { margin-bottom: 6px; font-size: 0.9rem; }
  .builder-summary-card { padding: 20px 22px; }
  .summary-heading { font-size: 1.3rem; margin-bottom: 10px; padding-bottom: 8px; }
  .summary-details-list { margin-bottom: 12px; }
  .summary-details-list li { padding: 5px 0; }
}
/* Pantallas de ordenador bajas: lo que más ocupa se aprieta un poco más; las etiquetas de las
   especialidades y los ingredientes de la carta se ven en pantallas más altas y en el móvil. */
@media (min-width: 900px) and (max-height: 820px) {
  .specialty-tags, .menu-item-ingredients { display: none; }
  .specialty-img-holder { height: clamp(72px, calc(100vh - 612px), 250px); }
  .menu-item-desc { margin-bottom: 4px; }
  .menu-item-action { margin-top: 6px; padding-top: 8px; }
  .menu-item-action .btn, .menu-item-action a { padding-top: 6px; padding-bottom: 6px; font-size: 0.78rem; }
  .contact-info-panel { padding: 16px 24px; }
  .contact-detail-row { margin-bottom: 8px; }
  .contact-icon-circle { width: 36px; height: 36px; }
  .hours-table { font-size: 0.82rem; margin-top: 4px; }
  .hours-table td { padding: 2px 0; }
}
@media (min-width: 900px) and (max-width: 1199px), (min-width: 769px) and (max-width: 899px) and (min-height: 900px) {
  .specialty-text { font-size: 0.76rem; }
  .specialty-title { font-size: 0.96rem; }
}
/* «Carta & Vitrina»: la frase y el botón de debajo de la carta en una sola fila */
@media (min-width: 900px), (min-width: 769px) and (max-width: 899px) and (min-height: 900px) {
  #carta .container > div[style*="text-align"] { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: clamp(12px, 2.2vh, 40px) !important; }
  #carta .container > div[style*="text-align"] > p { margin: 0 !important; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .menu-item-card { padding: 12px 14px; }
  .menu-item-desc { line-height: 1.36; }
  .menu-item-action { margin-top: 4px; padding-top: 6px; }
  .menu-item-action .btn, .menu-item-action a { padding-top: 5px; padding-bottom: 5px; }
  .menu-tabs-nav { margin-bottom: 10px; }
}
/* «Carta & Vitrina»: menos aire arriba en pantallas bajas y, en portátiles pequeños, nombre y precio en una línea */
@media (min-width: 900px) and (max-height: 820px) {
  #carta .section-header { margin-bottom: 12px; }
  .menu-tabs-nav .tab-btn { padding-top: 7px; padding-bottom: 7px; }
}
@media (min-width: 900px) and (max-width: 1199px), (min-width: 769px) and (max-width: 899px) and (min-height: 900px) {
  .menu-item-top { gap: 8px; }
  .menu-item-name { font-size: 0.96rem; }
  .menu-item-price { font-size: 0.86rem; white-space: nowrap; }
  .menu-item-desc { font-size: 0.76rem; }
}
@media (min-width: 900px) and (max-width: 1199px) and (min-height: 821px) {
  .specialty-img-holder { height: clamp(96px, calc(100vh - 700px), 270px); }
}
@media (min-width: 900px) and (max-width: 1023px) and (min-height: 821px) {
  .specialty-img-holder { height: clamp(96px, calc(100vh - 770px), 270px); }
}
/* Tableta en vertical (iPad): las especialidades y la carta en dos columnas. Las imágenes crecen la mitad
   de lo que crece la pantalla, porque hay dos filas (a 820 x 1180 se pasaban 13 px; 102 px en el iPad de
   810 x 1080, 152 en el de 820 x 1180) */
@media (min-width: 769px) and (max-width: 899px) and (min-height: 900px) {
  .specialties-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specialty-img-holder { height: clamp(90px, calc((100vh - 876px) / 2), 180px); }
  .menu-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cake-builder-wrapper { padding: 18px; }
  .builder-grid { grid-template-columns: 1fr; gap: 14px; }
  .summary-details-list li { gap: 10px; padding: 4px 0; }
  .builder-summary-card { padding: 16px 22px; }
  .option-card-inner { padding: 10px 12px; }
  .builder-step-block { margin-bottom: 10px; }
  .builder-grid select, .builder-grid input { font-size: 0.9rem; padding-left: 12px; padding-right: 8px; }
}
/* Al pulsar un apartado del menú (o un botón que salta a él), el apartado ocupa justo la pantalla
   que queda bajo la cabecera y su contenido queda centrado, con el mismo aire arriba y abajo.
   Solo los apartados a los que se salta: los demás siguen con su alto, sin franjas vacías al bajar */
@media (min-width: 900px), (min-width: 769px) and (max-width: 899px) and (min-height: 900px) {
  #especialidades, #encargos, #obrador, #carta, #opiniones, #faq, #contacto, #vitrina, #bolleria {
    min-height: calc(100vh - var(--cabecera, 79px));
    min-height: calc(100svh - var(--cabecera, 79px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(16px, 3vh, 40px);
    padding-bottom: clamp(16px, 3vh, 40px);
    scroll-margin-top: var(--cabecera, 79px);
  }
  #especialidades > *, #encargos > *, #obrador > *, #carta > *, #opiniones > *, #faq > *, #contacto > *, #vitrina > *, #bolleria > * { width: 100%; }
  #faq .faq-item:last-child { margin-bottom: 0; }
}
/* Pantallas de ordenador bajas: «Encargar Tarta» y «Carta» un poco más juntas para que quepan con aire arriba y abajo */
@media (min-width: 900px) and (max-height: 820px) {
  #encargos .section-description { font-size: 0.88rem; line-height: 1.45; }
  .cake-builder-wrapper { padding: 14px 20px; }
  .builder-step-block { margin-bottom: 9px; }
  .builder-step-label { margin-bottom: 5px; }
  .option-card-inner { padding: 7px 10px; }
  .form-select, .form-input { padding-top: 8px; padding-bottom: 8px; }
  .builder-summary-card { padding: 14px 20px; }
  .summary-heading { margin-bottom: 6px; padding-bottom: 6px; }
  .summary-details-list { margin-bottom: 10px; }
  .summary-details-list li { padding: 3px 0; }
  .menu-items-grid { gap: 10px; }
  .menu-item-card { padding: 10px 14px; }
}