/*
Theme Name:   GeneratePress Child - Atocha 3
Theme URI:    https://atocha3.com
Description:  Child theme de GeneratePress para Atocha 3 (Cafeteria / Bar / Ultramarinos, El Campello)
Author:       B4U Digital Solutions
Template:     generatepress
Version:      1.0.2
Text Domain:  generatepress-child-atocha3
*/

/* ==========================================================
   VARIABLES DE MARCA - ATOCHA 3
   Paleta: azul marino + dorado + crema
   Ajustar aqui los tonos exactos una vez tengamos el pantone
   del logo/cartas fisicas
   ========================================================== */
:root{
  --a3-azul-marino: #012D7D;   /* color principal logo/carta digital */
  --a3-azul-oscuro: #01214f;   /* variante mas oscura para hover/footer */
  --a3-dorado: #b98a3d;        /* dorado/mostaza de botones en carta fisica */
  --a3-dorado-suave: #d4ab63;  /* variante clara para hover en dorado */
  --a3-crema: #f7f3ec;         /* fondo principal */
  --a3-blanco: #ffffff;
  --a3-texto: #1f1f1f;
  --a3-texto-suave: #5c5c5c;

--a3-font-titulares: 'Oswald', 'Bebas Neue', Impact, sans-serif;
--a3-font-cuerpo: 'Poppins', Arial, sans-serif;
--a3-font-logotipo: 'Yellowtail', 'Dancing Script', cursive;


  --a3-radius: 6px;
  --a3-container-max: 1180px;
}

/* ==========================================================
   RESET LIGERO SOBRE GENERATEPRESS
   ========================================================== */
body{
  background-color: var(--a3-crema);
  color: var(--a3-texto);
  font-family: var(--a3-font-cuerpo);
}

h1, h2, h3, h4, .a3-font-titulares,
.a3-section h1, .a3-section h2, .a3-section h3{
  font-family: var(--a3-font-titulares) !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
  color: var(--a3-azul-marino);
}

a{
  color: var(--a3-azul-marino);
}
a:hover{
  color: var(--a3-dorado);
}

/* ==========================================================
   HEADER / MENU
   ========================================================== */
.main-navigation,
#site-navigation,
.site-header{
  background-color: var(--a3-blanco);
}

.main-navigation .main-nav ul li a{
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--a3-azul-marino);
}

.main-navigation .main-nav ul li a:hover{
  color: var(--a3-dorado);
}

/* Boton destacado en menu (ej: "Ver carta" o "WhatsApp") */
.main-navigation .button-nav a,
a.a3-btn-menu{
  background-color: var(--a3-dorado);
  color: var(--a3-blanco) !important;
  border-radius: var(--a3-radius);
  padding: .5em 1.2em !important;
}
.main-navigation .button-nav a:hover,
a.a3-btn-menu:hover{
  background-color: var(--a3-azul-marino);
}

/* ==========================================================
   BOTONES GENERALES (reutilizables en bloques HTML custom)
   ========================================================== */
.a3-btn{
  display: inline-block;
  padding: .8em 1.8em;
  border-radius: var(--a3-radius);
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .85rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.a3-btn-primario{
  background-color: var(--a3-dorado);
  color: var(--a3-blanco);
}
.a3-btn-primario:hover{
  background-color: var(--a3-azul-marino);
  color: var(--a3-blanco);
}
.a3-btn-secundario{
  background-color: transparent;
  color: var(--a3-blanco);
  border: 1px solid var(--a3-blanco);
}
.a3-btn-secundario:hover{
  background-color: var(--a3-blanco);
  color: var(--a3-azul-marino);
}

/* ==========================================================
   CONTENEDOR GENERICO PARA SECCIONES HTML CUSTOM
   Usar esta clase en el bloque "HTML personalizado" de Gutenberg
   para que respete márgenes y ancho maximo de forma consistente
   ========================================================== */
.a3-section{
  padding: 5rem 1.5rem;
}
.a3-container{
  max-width: var(--a3-container-max);
  margin: 0 auto;
}
.a3-section-azul{
  background-color: var(--a3-azul-marino);
  color: var(--a3-blanco);
}
.a3-section-azul h1,
.a3-section-azul h2,
.a3-section-azul h3{
  color: var(--a3-blanco);
}
.a3-section-crema{
  background-color: var(--a3-crema);
}

/* ==========================================================
   FOOTER
   ========================================================== */
#colophon,
.site-footer{
  background-color: var(--a3-azul-marino);
  color: var(--a3-blanco);
}
.site-footer a{
  color: var(--a3-blanco);
}
.site-footer a:hover{
  color: var(--a3-dorado);
}

/* ==========================================================
   RESPONSIVE - ajustes moviles basicos
   ========================================================== */
@media (max-width: 768px){
  .a3-section{
    padding: 3rem 1.2rem;
  }
}

/* ==========================================================
   SECCION "DOS MOMENTOS" - Home
   ========================================================== */
.a3-momentos-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.a3-momento-card{
  background: var(--a3-blanco);
  border: 1px solid rgba(1,45,125,.12);
  border-radius: var(--a3-radius);
  padding: 2.5rem 2rem;
  text-align: left;
}
.a3-momento-card h3{
  margin-top: 0;
  margin-bottom: .4rem;
}
.a3-momento-desc{
  font-family: var(--a3-font-cuerpo);
  color: var(--a3-texto-suave);
  margin-bottom: 1.5rem;
  font-size: .95rem;
  text-transform: none;
}
.a3-momento-lista{
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}
.a3-momento-lista li{
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px dashed rgba(1,45,125,.15);
  font-family: var(--a3-font-cuerpo);
  font-size: .95rem;
  color: var(--a3-texto);
}
.a3-momento-lista li:last-child{ border-bottom: none; }
.a3-momento-lista .precio{
  color: var(--a3-dorado);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 1rem;
}
@media (max-width: 768px){
  .a3-momentos-grid{ grid-template-columns: 1fr; }
}

/* ============================================
   SECCION ULTRAMARINOS (Home)
   ============================================ */
.a3-ultra{
  background: var(--a3-azul-marino);
  padding: 4.5rem 1.5rem 5rem;
}
.a3-ultra__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.a3-ultra__overline{
  font-family: var(--a3-font-cuerpo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a3-dorado);
  margin-bottom: .75rem;
}
.a3-ultra h2{
  color: #fff !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 .75rem;
}
.a3-ultra__sub{
  font-family: var(--a3-font-cuerpo);
  color: rgba(255,255,255,.85);
  max-width: 620px;
  margin: 0 auto 3rem;
}
.a3-ultra__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px){
  .a3-ultra__grid{ grid-template-columns: repeat(4, 1fr); }
}

/* --- Tarjeta tipo etiqueta de lata --- */
.a3-lata{
  background: var(--a3-crema);
  border: 1px solid var(--a3-dorado);
  outline: 1px solid var(--a3-dorado);
  outline-offset: 4px;
  padding: 1.75rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  transition: transform .2s ease;
}
.a3-lata:hover{ transform: translateY(-4px); }
.a3-lata__num{
  font-family: var(--a3-font-cuerpo);
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--a3-dorado);
}
.a3-lata__nombre{
  font-family: var(--a3-font-titulares);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--a3-azul-marino);
}
.a3-lata__tipo{
  font-family: var(--a3-font-logotipo);
  font-size: 1.05rem;
  color: var(--a3-dorado);
}
.a3-lata__sep{
  width: 36px;
  border-top: 1px solid var(--a3-dorado);
  margin: .35rem 0;
}
.a3-lata__desc{
  font-family: var(--a3-font-cuerpo);
  font-size: .82rem;
  color: #3a3f4a;
  margin: 0;
}

.a3-lata__precio{
  font-family: var(--a3-font-titulares);
  font-weight: 600;
  font-size: 1rem;
  color: var(--a3-dorado);
  margin-top: .25rem;
}

/* --- CTA del bloque --- */
.a3-ultra__cta{
  display: inline-block;
  margin-top: 2.75rem;
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a3-azul-marino);
  background: var(--a3-dorado);
  padding: .9rem 2.2rem;
  text-decoration: none;
  transition: opacity .2s ease;
}
.a3-ultra__cta:hover{ opacity: .88; color: var(--a3-azul-marino); }

/* ============================================
   SECCION RESEÑAS + COMO LLEGAR (Home)
   ============================================ */
.a3-visita{
  background: var(--a3-crema);
  padding: 4.5rem 1.5rem;
}
.a3-visita__inner{
  max-width: 1100px;
  margin: 0 auto;
}
.a3-visita__head{
  text-align: center;
  margin-bottom: 3rem;
}
.a3-visita__overline{
  font-family: var(--a3-font-cuerpo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a3-dorado);
  margin-bottom: .75rem;
}
.a3-visita h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0;
}
.a3-visita__nota{
  font-family: var(--a3-font-cuerpo);
  color: #3a3f4a;
  margin: .75rem 0 0;
}
.a3-visita__nota strong{ color: var(--a3-dorado); }
.a3-visita__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px){
  .a3-visita__grid{ grid-template-columns: 1.2fr .8fr; }
}

/* --- Reseñas --- */
.a3-resenas{
  display: grid;
  gap: 1.25rem;
}
.a3-resena{
  background: #fff;
  border: 1px solid rgba(1,45,125,.12);
  padding: 1.75rem 1.75rem 1.5rem;
}
.a3-resena__comilla{
  font-family: var(--a3-font-logotipo);
  font-size: 3rem;
  line-height: 1;
  color: var(--a3-dorado);
  display: block;
  margin-bottom: .25rem;
}
.a3-resena__texto{
  font-family: var(--a3-font-cuerpo);
  color: #3a3f4a;
  margin: 0 0 1rem;
}
.a3-resena__autor{
  font-family: var(--a3-font-titulares);
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--a3-azul-marino);
}
.a3-resena__estrellas{
  color: var(--a3-dorado);
  letter-spacing: .15em;
  font-size: .9rem;
}

/* --- Tarjeta Cómo llegar --- */
.a3-llegar{
  background: var(--a3-azul-marino);
  color: #fff;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.a3-llegar h3{
  color: #fff !important;
  font-size: 1.3rem;
  margin: 0 0 1.25rem;
}
.a3-llegar__dato{
  font-family: var(--a3-font-cuerpo);
  margin: 0 0 1rem;
  color: rgba(255,255,255,.9);
}
.a3-llegar__dato strong{
  display: block;
  color: var(--a3-dorado);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.a3-llegar__botones{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.75rem;
}
.a3-llegar__btn{
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.5rem;
}
.a3-llegar__btn--oro{
  background: var(--a3-dorado);
  color: var(--a3-azul-marino);
}
.a3-llegar__btn--borde{
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
}
.a3-llegar__btn:hover{ opacity: .88; }

/* ============================================
   FRANJA PROMO ALMUERZO (Home)
   ============================================ */
.a3-promo{
  background: var(--a3-dorado);
  padding: 3rem 1.5rem;
}
.a3-promo__inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 900px){
  .a3-promo__inner{
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.a3-promo__overline{
  font-family: var(--a3-font-cuerpo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a3-azul-marino);
  margin: 0 0 .35rem;
  opacity: .85;
}
.a3-promo__titulo{
  color: var(--a3-azul-marino) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  margin: 0 0 .35rem;
}
.a3-promo__precio{
  font-family: var(--a3-font-logotipo);
  text-transform: none;
  color: var(--a3-blanco);
  font-size: 1.15em;
}
.a3-promo__detalle{
  font-family: var(--a3-font-cuerpo);
  color: rgba(1,45,125,.85);
  margin: 0;
}
.a3-promo__btn{
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--a3-azul-marino);
  color: var(--a3-blanco);
  padding: .9rem 2.2rem;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.a3-promo__btn:hover{
  background: var(--a3-azul-oscuro);
  color: var(--a3-blanco);
}
/*
Theme Name:   GeneratePress Child - Atocha 3
Theme URI:    https://atocha3.com
Description:  Child theme de GeneratePress para Atocha 3 (Cafeteria / Bar / Ultramarinos, El Campello)
Author:       B4U Digital Solutions
Template:     generatepress
Version:      1.0.3
Text Domain:  generatepress-child-atocha3
*/

/* ==========================================================
   VARIABLES DE MARCA - ATOCHA 3
   Paleta: azul marino + dorado + crema
   Ajustar aqui los tonos exactos una vez tengamos el pantone
   del logo/cartas fisicas
   ========================================================== */
:root{
  --a3-azul-marino: #012D7D;   /* color principal logo/carta digital */
  --a3-azul-oscuro: #01214f;   /* variante mas oscura para hover/footer */
  --a3-dorado: #b98a3d;        /* dorado/mostaza de botones en carta fisica */
  --a3-dorado-suave: #d4ab63;  /* variante clara para hover en dorado */
  --a3-crema: #f7f3ec;         /* fondo principal */
  --a3-blanco: #ffffff;
  --a3-texto: #1f1f1f;
  --a3-texto-suave: #5c5c5c;

--a3-font-titulares: 'Oswald', 'Bebas Neue', Impact, sans-serif;
--a3-font-cuerpo: 'Poppins', Arial, sans-serif;
--a3-font-logotipo: 'Yellowtail', 'Dancing Script', cursive;


  --a3-radius: 6px;
  --a3-container-max: 1180px;
}

/* ==========================================================
   RESET LIGERO SOBRE GENERATEPRESS
   ========================================================== */
body{
  background-color: var(--a3-crema);
  color: var(--a3-texto);
  font-family: var(--a3-font-cuerpo);
}

h1, h2, h3, h4, .a3-font-titulares,
.a3-section h1, .a3-section h2, .a3-section h3{
  font-family: var(--a3-font-titulares) !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
  color: var(--a3-azul-marino);
}

a{
  color: var(--a3-azul-marino);
}
a:hover{
  color: var(--a3-dorado);
}

/* ==========================================================
   HEADER / MENU
   ========================================================== */
.main-navigation,
#site-navigation,
.site-header{
  background-color: var(--a3-blanco);
}

.main-navigation .main-nav ul li a{
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--a3-azul-marino);
}

.main-navigation .main-nav ul li a:hover{
  color: var(--a3-dorado);
}

/* Boton destacado en menu (ej: "Ver carta" o "WhatsApp") */
.main-navigation .button-nav a,
a.a3-btn-menu{
  background-color: var(--a3-dorado);
  color: var(--a3-blanco) !important;
  border-radius: var(--a3-radius);
  padding: .5em 1.2em !important;
}
.main-navigation .button-nav a:hover,
a.a3-btn-menu:hover{
  background-color: var(--a3-azul-marino);
}

/* ==========================================================
   BOTONES GENERALES (reutilizables en bloques HTML custom)
   ========================================================== */
.a3-btn{
  display: inline-block;
  padding: .8em 1.8em;
  border-radius: var(--a3-radius);
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .85rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.a3-btn-primario{
  background-color: var(--a3-dorado);
  color: var(--a3-blanco);
}
.a3-btn-primario:hover{
  background-color: var(--a3-azul-marino);
  color: var(--a3-blanco);
}
.a3-btn-secundario{
  background-color: transparent;
  color: var(--a3-blanco);
  border: 1px solid var(--a3-blanco);
}
.a3-btn-secundario:hover{
  background-color: var(--a3-blanco);
  color: var(--a3-azul-marino);
}

/* ==========================================================
   CONTENEDOR GENERICO PARA SECCIONES HTML CUSTOM
   Usar esta clase en el bloque "HTML personalizado" de Gutenberg
   para que respete márgenes y ancho maximo de forma consistente
   ========================================================== */
.a3-section{
  padding: 5rem 1.5rem;
}
.a3-container{
  max-width: var(--a3-container-max);
  margin: 0 auto;
}
.a3-section-azul{
  background-color: var(--a3-azul-marino);
  color: var(--a3-blanco);
}
.a3-section-azul h1,
.a3-section-azul h2,
.a3-section-azul h3{
  color: var(--a3-blanco);
}
.a3-section-crema{
  background-color: var(--a3-crema);
}

/* ==========================================================
   FOOTER
   ========================================================== */
#colophon,
.site-footer{
  background-color: var(--a3-azul-marino);
  color: var(--a3-blanco);
}
.site-footer a{
  color: var(--a3-blanco);
}
.site-footer a:hover{
  color: var(--a3-dorado);
}

/* ==========================================================
   RESPONSIVE - ajustes moviles basicos
   ========================================================== */
@media (max-width: 768px){
  .a3-section{
    padding: 3rem 1.2rem;
  }
}

/* ==========================================================
   SECCION "DOS MOMENTOS" - Home
   ========================================================== */
.a3-momentos-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.a3-momento-card{
  background: var(--a3-blanco);
  border: 1px solid rgba(1,45,125,.12);
  border-radius: var(--a3-radius);
  padding: 2.5rem 2rem;
  text-align: left;
}
.a3-momento-card h3{
  margin-top: 0;
  margin-bottom: .4rem;
}
.a3-momento-desc{
  font-family: var(--a3-font-cuerpo);
  color: var(--a3-texto-suave);
  margin-bottom: 1.5rem;
  font-size: .95rem;
  text-transform: none;
}
.a3-momento-lista{
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}
.a3-momento-lista li{
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px dashed rgba(1,45,125,.15);
  font-family: var(--a3-font-cuerpo);
  font-size: .95rem;
  color: var(--a3-texto);
}
.a3-momento-lista li:last-child{ border-bottom: none; }
.a3-momento-lista .precio{
  color: var(--a3-dorado);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 1rem;
}
@media (max-width: 768px){
  .a3-momentos-grid{ grid-template-columns: 1fr; }
}

/* ============================================
   SECCION ULTRAMARINOS (Home)
   ============================================ */
.a3-ultra{
  background: var(--a3-azul-marino);
  padding: 4.5rem 1.5rem 5rem;
}
.a3-ultra__inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.a3-ultra__overline{
  font-family: var(--a3-font-cuerpo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a3-dorado);
  margin-bottom: .75rem;
}
.a3-ultra h2{
  color: #fff !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 .75rem;
}
.a3-ultra__sub{
  font-family: var(--a3-font-cuerpo);
  color: rgba(255,255,255,.85);
  max-width: 620px;
  margin: 0 auto 3rem;
}
.a3-ultra__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px){
  .a3-ultra__grid{ grid-template-columns: repeat(4, 1fr); }
}

/* --- Tarjeta tipo etiqueta de lata --- */
.a3-lata{
  background: var(--a3-crema);
  border: 1px solid var(--a3-dorado);
  outline: 1px solid var(--a3-dorado);
  outline-offset: 4px;
  padding: 1.75rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  transition: transform .2s ease;
}
.a3-lata:hover{ transform: translateY(-4px); }
.a3-lata__num{
  font-family: var(--a3-font-cuerpo);
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--a3-dorado);
}
.a3-lata__nombre{
  font-family: var(--a3-font-titulares);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--a3-azul-marino);
}
.a3-lata__tipo{
  font-family: var(--a3-font-logotipo);
  font-size: 1.05rem;
  color: var(--a3-dorado);
}
.a3-lata__sep{
  width: 36px;
  border-top: 1px solid var(--a3-dorado);
  margin: .35rem 0;
}
.a3-lata__desc{
  font-family: var(--a3-font-cuerpo);
  font-size: .82rem;
  color: #3a3f4a;
  margin: 0;
}

.a3-lata__precio{
  font-family: var(--a3-font-titulares);
  font-weight: 600;
  font-size: 1rem;
  color: var(--a3-dorado);
  margin-top: .25rem;
}

/* --- CTA del bloque --- */
.a3-ultra__cta{
  display: inline-block;
  margin-top: 2.75rem;
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a3-azul-marino);
  background: var(--a3-dorado);
  padding: .9rem 2.2rem;
  text-decoration: none;
  transition: opacity .2s ease;
}
.a3-ultra__cta:hover{ opacity: .88; color: var(--a3-azul-marino); }

/* ============================================
   SECCION RESEÑAS + COMO LLEGAR (Home)
   ============================================ */
.a3-visita{
  background: var(--a3-crema);
  padding: 4.5rem 1.5rem;
}
.a3-visita__inner{
  max-width: 1100px;
  margin: 0 auto;
}
.a3-visita__head{
  text-align: center;
  margin-bottom: 3rem;
}
.a3-visita__overline{
  font-family: var(--a3-font-cuerpo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a3-dorado);
  margin-bottom: .75rem;
}
.a3-visita h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0;
}
.a3-visita__nota{
  font-family: var(--a3-font-cuerpo);
  color: #3a3f4a;
  margin: .75rem 0 0;
}
.a3-visita__nota strong{ color: var(--a3-dorado); }
.a3-visita__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px){
  .a3-visita__grid{ grid-template-columns: 1.2fr .8fr; }
}

/* --- Reseñas --- */
.a3-resenas{
  display: grid;
  gap: 1.25rem;
}
.a3-resena{
  background: #fff;
  border: 1px solid rgba(1,45,125,.12);
  padding: 1.75rem 1.75rem 1.5rem;
}
.a3-resena__comilla{
  font-family: var(--a3-font-logotipo);
  font-size: 3rem;
  line-height: 1;
  color: var(--a3-dorado);
  display: block;
  margin-bottom: .25rem;
}
.a3-resena__texto{
  font-family: var(--a3-font-cuerpo);
  color: #3a3f4a;
  margin: 0 0 1rem;
}
.a3-resena__autor{
  font-family: var(--a3-font-titulares);
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--a3-azul-marino);
}
.a3-resena__estrellas{
  color: var(--a3-dorado);
  letter-spacing: .15em;
  font-size: .9rem;
}

/* --- Tarjeta Cómo llegar --- */
.a3-llegar{
  background: var(--a3-azul-marino);
  color: #fff;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.a3-llegar h3{
  color: #fff !important;
  font-size: 1.3rem;
  margin: 0 0 1.25rem;
}
.a3-llegar__dato{
  font-family: var(--a3-font-cuerpo);
  margin: 0 0 1rem;
  color: rgba(255,255,255,.9);
}
.a3-llegar__dato strong{
  display: block;
  color: var(--a3-dorado);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.a3-llegar__botones{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.75rem;
}
.a3-llegar__btn{
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.5rem;
}
.a3-llegar__btn--oro{
  background: var(--a3-dorado);
  color: var(--a3-azul-marino);
}
.a3-llegar__btn--borde{
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
}
.a3-llegar__btn:hover{ opacity: .88; }

/* ============================================
   FRANJA PROMO ALMUERZO (Home)
   ============================================ */
.a3-promo{
  background: var(--a3-dorado);
  padding: 3rem 1.5rem;
}
.a3-promo__inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 900px){
  .a3-promo__inner{
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.a3-promo__overline{
  font-family: var(--a3-font-cuerpo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a3-azul-marino);
  margin: 0 0 .35rem;
  opacity: .85;
}
.a3-promo__titulo{
  color: var(--a3-azul-marino) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  margin: 0 0 .35rem;
}
.a3-promo__precio{
  font-family: var(--a3-font-logotipo);
  text-transform: none;
  color: var(--a3-blanco);
  font-size: 1.15em;
}
.a3-promo__detalle{
  font-family: var(--a3-font-cuerpo);
  color: rgba(1,45,125,.85);
  margin: 0;
}
.a3-promo__btn{
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--a3-azul-marino);
  color: var(--a3-blanco);
  padding: .9rem 2.2rem;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.a3-promo__btn:hover{
  background: var(--a3-azul-oscuro);
  color: var(--a3-blanco);
}

/* ============================================
   PAGINA LA CARTA
   ============================================ */
.a3-carta-hero{
  background: var(--a3-azul-marino);
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
}
.a3-carta-hero h1{
  color: #fff !important;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin: 0;
}
.a3-carta-hero__script{
  font-family: var(--a3-font-logotipo);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--a3-dorado-suave);
  display: block;
  margin-top: .5rem;
}

/* --- Barra de categorias sticky --- */
.a3-carta-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--a3-crema);
  border-bottom: 1px solid rgba(1,45,125,.15);
  padding: .85rem 1rem;
}
.a3-carta-nav__inner{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.a3-carta-nav a{
  font-family: var(--a3-font-cuerpo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--a3-azul-marino);
  text-decoration: none;
  padding: .45rem 1rem;
  border: 1px solid rgba(1,45,125,.25);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.a3-carta-nav a:hover{
  background: var(--a3-azul-marino);
  color: #fff;
}

/* --- Secciones de categoria --- */
.a3-carta-cat{
  padding: 3.5rem 1.5rem 2.5rem;
  scroll-margin-top: 80px;
}
.a3-carta-cat__inner{
  max-width: 1000px;
  margin: 0 auto;
}
.a3-carta-cat h2{
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin: 0 0 .5rem;
}
.a3-carta-cat__sep{
  width: 48px;
  border: none;
  border-top: 2px solid var(--a3-dorado);
  margin: 0 auto 2.25rem;
}
.a3-carta-nota{
  font-family: var(--a3-font-cuerpo);
  font-size: .85rem;
  font-style: italic;
  color: var(--a3-texto-suave);
  text-align: center;
  margin: -1.5rem 0 2rem;
}
.a3-carta-sub{
  font-family: var(--a3-font-logotipo);
  font-size: 1.4rem;
  color: var(--a3-dorado);
  margin: 2rem 0 .75rem;
}
.a3-carta-lista{
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px){
  .a3-carta-lista{
    columns: 2;
    column-gap: 4rem;
  }
}
.a3-carta-lista li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px dashed rgba(1,45,125,.15);
  font-family: var(--a3-font-cuerpo);
  font-size: .95rem;
  break-inside: avoid;
}
.a3-carta-lista .plato{
  color: var(--a3-texto);
}
.a3-carta-lista .plato small{
  display: block;
  color: var(--a3-texto-suave);
  font-size: .8rem;
}
.a3-carta-lista .precio{
  color: var(--a3-dorado);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Cierre alergenos --- */
.a3-carta-alergenos{
  background: var(--a3-azul-marino);
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.a3-carta-alergenos p{
  font-family: var(--a3-font-cuerpo);
  color: rgba(255,255,255,.9);
  max-width: 560px;
  margin: 0 auto 1.5rem;
}