/* CSS */
/* Estilos especificos del web */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
:root{
  --legal-bg: #000;
  --legal-text: #555;
  --legal-muted: rgba(255,255,255,.70);
  --legal-max: 880px;         /* ancho de caja (más estrecha) */
  --legal-pad-x: clamp(18px, 4vw, 40px);
  --legal-hero-h: clamp(200px, 22vw, 280px);
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,nav{margin:0;padding:0;}
html, body{ overflow-x: hidden; }
*, html{margin:0;padding:0;font:98% Arial, Helvetica, sans-serif;outline:none;}
body{color:#000;background:#fff;}

#fondoP{ position:relative;}
#fondoFr{background:#fff url(../img/fondo-franquicia.jpg) center top no-repeat; position:relative;}
#fondoFerm{background:#fff url(../img/f-sala-fermentacion.jpg) center top no-repeat; position:relative;}

a{color:#499dd3;text-decoration:none;font-size:100%}
a:link{color:#499dd3}

#head h1,p.h1{position:absolute; width:110px; left:0; top:5px; z-index:99999999;}

h1,h2, h3,h4, #colDcha p.botMasInfo, h2 span,.clubIntro,#clubHome p a,#homeCaja h2 a,.carta p,.noticiasHome h3 a, .noticiasHome h2 a, .cervezasHome h3 a
{font:400 140% 'Bebas Neue',sans-serif; font-style:normal; margin-bottom:10px;}
h2 span{display: block; margin-bottom:3px;}
h4{margin:10px 0;font-size:100%;}
p{margin:0 0 8px;line-height:145%;}
li{list-style-type:none; font-size:100%; line-height:140%;}
img{border-style:none;}
i{font-style:italic;}
noscript p{margin:0 auto;width:950px;display:block;color:#fff;clear:both;}
strong{font-weight:bold;font-size:100%;}
.clear{clear:both;}
.clearer{font-size:1px; height:1px;}
.clearfix:before,.clearfix:after,.container_16:before,.container_16:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}
.clearfix:after,.container_16:after, .after-box{clear:both;}
.clearfix,.container_16{zoom:1;}
.subir { position: fixed; bottom:0; left:5px; margin:0; z-index: 99999 ;}

.cookiefirst-cookie-declaration { font-size: 1rem; line-height: 1.2rem; color: #222;}
.cookiefirst-cookie-declaration h3{ margin: 1rem 0;}
.cookiefirst-cookie-declaration h4{ font-size: 1.1rem; font-weight: 600;}


/*-- Estilos para la Home --*/

#fondoHome{ position:relative; background:#000;}

.dh-reservas { text-align:center; margin:10px 0; display: none;}
.dh-reservas img{ margin:0 5%;}
.dh-reservas h2 { font-size:190%; color:#fff; font-weight:600; letter-spacing:0.1em; margin-bottom:15px;}
.dh-reservas h2 span{ font-size:90%; font-weight:400;}

/*! http://responsiveslides.com v1.54 by @viljamis
.rslides { position: relative;list-style: none;overflow: hidden;width: 100%;padding: 0;margin: 0}
.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%;left: 0; top: 0}
.rslides li:first-child {position: relative;display: block;float: left}
.rslides img {display: block;height: auto; float: left; width: 100%;border: 0} */


/* ========== HERO base (desktop/tablet) ========== */

.heroHome{
  position:relative;
  overflow:hidden;
  width:100%;
  height: 85vh;
  min-height: 650px;
  max-height: 100vh;
  background:#000;
    margin-bottom: 6rem;
}

.heroHome .hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vídeo subido (MP4) */
.hero-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Embeds (YouTube/Vimeo) */
.heroHome .embed-hero{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;    
}
.heroHome .embed-hero iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;      /* 16:9 basado en ancho */
  min-height:100%;
  min-width:177.78vh;  /* 16:9 basado en alto */
  transform:translate(-50%,-50%);
  pointer-events:none; /* evita clics y overlays “interactivos” */
}

/* Overlay centrado (cubre todo el hero) */
.heroHome .hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;      /* centro horizontal */
  justify-content:center;  /* centro vertical */

  text-align:center;
  padding: 0 20px;
  pointer-events:none;     /* para que no “capture” el iframe */
}

/* El botón sí debe poder clicarse */
.heroHome .hero-overlay a{
  pointer-events:auto;
}

/* Ajuste del H1 dentro del overlay */
.heroHome .hero-overlay h1{
  margin:0;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size: clamp(22px, 4vw, 54px);
  line-height:1.05;
  text-shadow: 0 6px 22px rgba(0,0,0,.55);
}


.btnHero{
  margin-top:12px; padding:10px 18px;
  background:rgba(0,0,0,.6); color:#fff; text-decoration:none; border-radius:6px;
}


/* ========== MOVIL: ajustar por ALTURA (centrado), no por anchura ========== */
@media (max-width: 992px){
  .heroHome{
    height:90vh;
    min-height:90vh;
    max-height:90vh;
  }
  /*.hero-video{ width:auto; height:100%; object-fit:cover; }
  .embed-hero{ padding-top:0; width:100%;height:100%; overflow:hidden; position:relative;}
  .embed-hero iframe{ position:absolute; top:0; left:50%; height:100%; width:177.78vh;transform:translateX(-50%);}*/
}
@media (max-width: 480px){
  .heroHome{
    height: 80vh;
    min-height: 80vh;
      margin-bottom: 3rem;
  }
}

/*--------------
   SLIDE HOME (Swiper)
---------------*/

.thb-swiper{
  width: 100%; max-width: 1200px;
  background: #000;
  position: relative;
  overflow: hidden;
  height: 750px;
}

.thb-swiper .swiper-wrapper{ height: 100%; }
.thb-swiper .swiper-slide{ height: 100%; }
.thb-swiper .swiper-slide > a{ display: block; height: 100%; }
.thb-swiper .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #000;
}

.thb-swiper .swiper-button-prev,
.thb-swiper .swiper-button-next{
  color: #fff;
}

.thb-swiper .swiper-pagination{
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  z-index: 5;
}

.thb-swiper .swiper-pagination-bullet{ opacity: .6; }
.thb-swiper .swiper-pagination-bullet-active{ opacity: 1; }

/* =========================
   BULLETS SWIPER
   ========================= */

/* Estado normal: transparente con borde blanco */
.thb-swiper .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid #ccc;
  opacity: 1; 
}

/* Estado activo: blanco sólido */
.thb-swiper .swiper-pagination-bullet-active{
  background: #fff;
  border-color: #fff;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
  transform: scale(1.4);
}


@media (max-width: 1100px){
  .thb-swiper{ height: 500px; }
}
@media (max-width: 768px){
  .thb-swiper{ height:260px; }
  .thb-swiper .swiper-slide img{ object-fit: cover;}
}


/* =========================================================
   HOME DESTACADOS (Flexbox) — CSS en medidas relativas
   - rem para tipografía/espaciado/alturas base
   - % para anchos fluidos
   - px solo para bordes/sombras/tamaños pequeños (iconos, líneas)
   ========================================================= */

/* Contenedor general */

#contenedorHome{
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 0;
  box-sizing: border-box;
}

/* Filas */
.home-row{
  display: flex;
  gap: 1.75rem; 
  align-items: stretch;
  margin: 1.75rem 0 0;
}

/* Columnas */
.home-col{
  flex: 1 1 0;
  min-width: 0;
}

/* En móvil se apila */
@media (max-width: 920px){    
  .home-row{
    flex-direction: column;
    gap: 1.125rem; /* 18px */
  }
}



/* ======================
   LOCALES HOME
========================= */

/* Halo desde abajo */
.degradado{
  position: relative;
  padding: 4rem 0 5rem; 
}

.degradado::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: radial-gradient(
    90rem 42rem at 50% 70%,
    rgba(242,194,0,0.28) 0%,
    rgba(242,194,0,0.18) 30%,
    rgba(242,194,0,0.10) 50%,
    rgba(242,194,0,0.05) 65%,
    rgba(0,0,0,0) 85%
  );
}

/* el contenido por encima */
.degradado > *{
  position: relative;
  z-index: 1;
}


/* El contenido por encima */
.localesHome{ position: relative; z-index:1; }
.localesHome a{ position: relative; z-index:2; }

.localesHome{
  text-align: center;
  color: #eee;
  padding: 0rem 0 10rem;
  width: 90%;
  margin: 1rem auto 6rem;
  background-color: #000;
  border-radius: 25px;
  max-width: 1200px;
}

.localesHome ul {
  text-align: center;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
  padding: 0;
}

.localesHome li {
  display: inline-block;
  vertical-align: middle;
  margin: 1.25rem 1%;
  width: 17%;
  height: 150px;  
}

.localesHome li img:hover{ padding-top: 2rem !important; } 
.localesHome li img{ width: 100%; }

.localesHome h2{
  position: relative;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.localesHome h2 span::before{
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background: rgba(255,255,255,0.35); 
  margin: 1.5rem auto; 
}

.localesHome h2 span{
  font-size: 5rem !important;
  color: #e8c228;
}

.localesHome p{
  font-size: 1.3rem; 
  width: 70%;
  margin: 0 auto;
  color: #eee;
  display: block;
}

/* LOCALES INTERIOR */
.localesInt{ text-align:center; }
.localesInt .tit-h2 { 
  font-family: "Bebas Neue", sans-serif;   /* igual que tus h2 */
  font-size: 2rem !important;
  color: #111;
  text-transform: uppercase;

  /* 2) fondo amarillo SOLO al ancho del texto */
  display: inline-block;
  background: #e8c228;
  padding: .25rem .6rem;
  margin: 0 auto 1.2rem;
  line-height: 1.1;
}
.localesInt h2{
  position: relative;
  /*padding-bottom: 1.25rem;*/
  margin-bottom: 1.5rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 3rem !important;
}
.localesInt h2 .subrayado{
  position: relative;
  display: inline-block;
}

.localesInt h2 .subrayado::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;  
  width: 100%;
  height: 4px;
  background: #e8c228;
  border-radius: 2px;
}

.localesInt ul.botella { text-align:center; padding:40px 0}

.localesInt ul.botella{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 2rem;
  margin: 2.5rem 0 0;
  padding: 40px 0;
  list-style: none; 
  justify-content: center;
}

.localesInt ul.botella li{
  /* tamaño responsive y SIEMPRE cuadrado */
  width: clamp(140px, 18vw, 230px);
  /* círculo perfecto */
  border-radius: 50%;
  overflow: hidden;
  /* fondo botella/círculo */
  background: url("../img/carta-thb-botella.png") center / contain no-repeat; /* <- ajusta el nombre */
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0;
  flex: 0 0 calc((100% - 3 * 2rem) / 4); /* 4 columnas */
  max-width: 230px;                     /* opcional: no se disparen */
  aspect-ratio: 1 / 1;
}

.localesInt ul.botella li a{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:flex-end;          /* texto abajo */
  justify-content:center;
  text-decoration:none;
  padding-bottom:33%;
  font: 1.7rem "Bebas Neue", sans-serif;
  color:#fff;
}
.localesInt ul.botella li a:hover{ color:#e8c228; }
.localesInt ul.botella li span{ text-transform:uppercase; font-size: 0.8rem}
.localesInt li{ width:auto; height:auto; padding-top:0; }

@media (max-width: 992px){  
  #contenedorHome {padding: 0;}
  .degradado{ padding-bottom: 0;}
  .localesHome{margin: 1.25rem auto;width: 99%;padding-bottom: 5rem;} 
  .localesInt ul.botella{ gap: 1.25rem; }
  .localesInt ul.botella li{ width: clamp(120px, 22vw, 190px); }
  .localesInt ul.botella li a{ font-size: 1.4rem; }
}

@media (max-width: 765px){ 
  .localesHome{
    margin: 1.25rem auto;
    width: 97%;
  }
  .localesHome li{
    margin: 0.625rem 1%;
    width: 25%;
    height: 9.375rem;
  }
  .localesHome p{ width: 80% !important; }      
  .localesInt h2{font-size: 2rem !important;}
  .localesInt ul.botella{gap: 1.25rem;}
  .localesInt ul.botella li{ flex: 0 0 calc((100% - 1 * 1.25rem) / 2);}
}
@media (max-width: 640px){
  .degradado{ padding:2rem 0 0;}
  .localesHome h2 span{ font-size: 3.5rem !important; }
  .localesHome li{
    margin: 0.625rem 1%;
    width: 30%;
    height: 130px; 
  }
  .localesInt h2{font-size:1.3rem !important;}
  .localesInt .tit-h2 { font-size: 1.3rem !important;}
  .localesInt ul.botella { padding:20px 0; margin: 0;}
   
}

@media (max-width: 480px){
  .localesHome{ margin: 1.25rem auto; width: 95% !important;}
  .localesHome li{ height: 90px; }
  /*  .localesInt ul.botella li { width:38%; height:75px; padding-top: 12.5vh; background-size: contain;}
  .localesInt ul.botella li a{ font-size:1.4rem; margin-top: -10px!important; padding: 0; display: block} */
}

/* =========================
   TARJETAS (estilo común)
   ========================= */
.home-card{
  border-radius: 18px;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 18px 60px rgba(0,0,0,.55); 
  border: 1px solid rgba(255,255,255,.10); 
}

/* Botón base */
.thb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  font:400 1.2rem 'Bebas Neue', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* =========================
   FULL-BLEED: fila pegada a laterales
   ========================= */
.home-bleed{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.home-bleed__inner{
  display: flex;
  gap: 0;
  align-items: stretch;
    
}

.home-bleed__col{
  flex: 1 1 50%;
  min-width: 0;
}

/* Responsive: apilar en móvil */
@media (max-width: 920px){ 
  .home-bleed__inner{ flex-direction: column; }
  .home-bleed__col{ flex-basis: auto; }
}

/* =========================
   IZQ: cerveza (blanco roto) 
   ========================= */

/* misma altura real que la derecha */
.home-bleed__col{
  display: flex;
}
.home-bleed__col--beer .cervezasHome,
.home-bleed__col--ideal #homeCompartir{
  flex: 1;
  min-height: 22.5rem; /* 360px -> ajusta si quieres más alto */
}

/* fondo amarillo + degradado circular blanco para integrar la botella */
.home-bleed__col--beer .cervezasHome{
  background:#fff;
  color:#000;
  padding:6rem 3rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
     gap:0;
}

/* tipografías y proporciones */
.home-bleed__col--beer .cervezasHome h2,
.home-bleed__col--beer .cervezasHome h3{
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #000!important;
}

.home-bleed__col--beer .cervezasHome h2{
  font-size: 2rem;font-family: "Bebas Neue", sans-serif!important;
  margin: 0;
  font-weight: 600;
}

.home-bleed__col--beer .cervezasHome h3{
  font-size: 1.05rem;
  margin: 0 0 .35rem; 
}

.home-bleed__col--beer .cervezasHome p{
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.125rem;
  line-height: 1.35;
  margin: 0 0 .6rem;
  color: #111;
}
.home-bleed__col--beer .cervezasHome a { color:#000}

.home-bleed__col--beer .cervezasHome .cerveza img{
  width:auto;
  height: 12rem ;
  margin: .9rem auto;
}

/* boton amarillo */
.home-bleed__col--beer .thb-btn--yellow{
  background: #f2c200;
  color: #000 !important;
  /*border: none;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  font:400 1.1rem 'Bebas Neue', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;*/
}

.home-bleed__col--beer .thb-btn--yellow:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 20px rgba(0,0,0,.15);
  filter: brightness(0.98);
}

.home-bleed__col--beer .thb-btn--yellow:focus-visible{
  outline: 2px solid #111;
  outline-offset: 3px;
}

/* Estrellas centradas */
.cervezasHome .Homecoment{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: .9rem 0 1.3rem !important;    
  width: 200px;
}
.cervezasHome .Homecoment a{font-size: .8rem;}

/* =========================
   DCHA: Ideal Beer (fondo gotas + overlay + logo)
   ========================= */
.home-bleed__col--ideal #homeCompartir{
  position: relative;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
    
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 6rem 3rem;
  gap: 1rem;
  overflow: hidden;
  background: #d6a800;
}

/* Capa de color amarilla encima, para integrar y mejorar legibilidad */
.home-bleed__col--ideal #homeCompartir::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(214,168,0,.20); /* transparencia */
  pointer-events: none;
}

.home-bleed__col--ideal #homeCompartir {
  position: relative;
  z-index: 1;
  color: #111;
}

.home-bleed__col--ideal #homeCompartir h2{
  width: 100%;margin: 0;
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 2rem;
  text-align: center;
  color: #000;
}
.home-bleed__col--ideal #homeCompartir p{
  width: 70%;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  font-size: 1rem; 
  line-height: 1.4;
  color: #000;
  letter-spacing: normal;
}

.home-bleed__col--ideal #homeCompartir .thb-btn--dark{
  margin-top: 20px;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  background: #000;
}

.home-bleed__col--ideal #homeCompartir .thb-btn--dark:hover{
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}

/* --animacion gotas--*/

.home-bleed__col--ideal #homeCompartir::after{
  content:"";
  position:absolute;
  inset:-10%;
  background-image: url("../img/fondo-cerveza-gotas.jpg");
  background-size: cover;
  background-position: center;
  opacity: .35;                /* muy sutil */
  animation: gotasFloat 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
#homeCompartir > *{
  position: relative;
  z-index: 1;
}

@keyframes gotasFloat{
  0%{
    transform: scale(1) translateY(0);
  }
  50%{
    transform: scale(1.03) translateY(-1.5%);
  }
  100%{
    transform: scale(1) translateY(0);
  }
}

/* Estado focus (teclado) */
.home-bleed__col--ideal #homeCompartir .thb-btn--dark:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

.idealBeerLogo{
  display: block; 
  width: auto;
  height: 12rem;
  margin: .9rem auto;
}

/* Botón negro */
.thb-btn--dark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff !important;
}

/* =========================
   HOME – Para comer
   Fondo fijo (efecto real)
   ========================= */

.home-row.home-row--food{
  display: block;
    margin:0!important;
}

.home-row--food .carta{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  height:560px;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
}

/* IMAGEN COMO FONDO FIJO */
.home-row--food .carta-media{
  background-image: url("../img/THB-burguer.jpg");
  background-size: contain;          /* ← CLAVE */
  background-repeat: no-repeat;
  background-position: left center;
  background-attachment: fixed;      /* ← LA MAGIA */
}

/* TEXTO */
.home-row--food .carta-txt{
  padding: 2.2rem 2.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .7rem;
  color: #fff;
}

.home-row--food .carta-txt h2{
  margin: 0;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f2c200;
  font-size: 2rem;
}

.home-row--food .carta-txt p{
  margin: 0 0 .8rem 0;
  max-width: 44ch;
 text-transform: none;
  font-family: "Roboto", sans-serif;
  font-size: 1rem; 
  line-height: 1.4;
  letter-spacing: normal;
}

.home-row--food .thb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2c200;
  color: #111;
  width: fit-content;
}

/* =========================================
   HOME – Para comer (tablet 765 aprox)
   full width + centrado + menos altura
   ========================================= */

/* Full-bleed: ocupa todo el ancho de pantalla aunque esté dentro de un contenedor */
@media (max-width: 920px){
  .home-row.home-row--food{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }

  /* Que la tarjeta no limite el ancho ni se “encierre” */
  .home-row--food .carta{
    width: 100%;
    max-width: none;
    border-radius: 0;     /* si quieres conservar borde redondeado, quita esta línea */
  }
}

/* Tablet: mantenemos 2 columnas, pero menos alto y contenido centrado */
@media (max-width: 820px){
  .home-row--food .carta{
    height: 420px;        /* antes 560px: esto es lo que evita el “tocho” */
    grid-template-columns: 1.1fr 1fr; /* opcional: ajusta proporción */
  }

  .home-row--food .carta-txt{
    align-items: center;
    text-align: center;
    padding: 1.8rem 1.6rem;
  }

  .home-row--food .carta-txt p{
    max-width: 34ch;      /* un pelín más compacto en tablet */
  }

  /* Si en iOS el fixed da guerra, en tablet lo quitamos */
  .home-row--food .carta-media{
    background-attachment: scroll;
  }
}

/* Móvil: apilar + banner de imagen con altura controlada (ya lo tenías, pero lo refuerzo) */
@media (max-width: 640px){
  .home-row--food .carta{
    grid-template-columns: 1fr !important;
    height: auto;
    border-radius: 18px;  /* en móvil sí queda bonito redondeado */
    margin: 0 16px;       /* pequeño aire lateral */
  }

  .home-row--food .carta-media{
    height: 350px;
    background-position: center;
    background-size: cover; /* en móvil suele quedar mejor que contain */
    background-attachment: scroll;
  }

  .home-row--food .carta-txt{
    padding: 1.6rem 1.4rem;
      font-size: 1.2rem;
  }
}

/* =========================
   DOS COL: Noticias + Comentarios
   ========================= */
.noticiasHome,
#homeComentario{
  background: rgba(0,0,0,.92);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 1.75rem; 
  min-height:320px;
}

/* títulos */
.noticiasHome h2,
#homeComentario h2{
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* enlaces */
.noticiasHome a,
#homeComentario a{ color: #f2c200; }

/* =========================
   HOME – Noticias + Comentarios
   ========================= */

.home-row--news-comments {
  display: flex;
  gap: 3rem;
  padding: 5rem 6vw;
  background: #000;
  align-items: stretch; 
}

/* Columnas */
.home-col {
  flex: 1;
  display: flex;
}

.home-col--left,
.home-col--right {
  align-items: stretch;
}

/* =========================
   NOTICIA (IZQUIERDA)
   ========================= */

.noticiasHome {
  width: 100%;
  color: #fff;
}
.noticiasHome .noticia p:not(.fecha):not(:last-child){
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticiasHome .noticia .noticia-extracto{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noticiasHome h2 {
  margin-bottom: 1.5rem;
}

.noticiasHome h2 a{
  color:#fff;
  text-decoration:none;
    
}
.noticiasHome h2 a:hover{
  text-decoration:underline;
    cursor: pointer!important;
}
.noticia {
  background: transparent;
  border: none;              /* QUITA BORDE */
  padding: 0;
}
.noticia h3{
  margin: 1.1rem 0 .35rem;
}
.noticia h3 a{
  color:#f2c200;
  text-decoration:none;
}
.noticia h3 a:hover{
  text-decoration:underline;
}
.noticia p {
  color: #ddd;
  line-height: 1.6;
    font-size: .9rem;
}
.noticia .fecha{
  margin: 0 0 1rem;
  color: rgba(255,255,255,.75);
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
  font-size: 0.85rem;
  margin-bottom: .5rem;
}

.noticia .fecha a{
  color: rgba(255,255,255,.9);
  text-decoration:none;
}
.noticia .fecha a:hover{
  text-decoration:underline;
}
.noticia .fecha .sep{
  opacity:.6;
}

.noticia-img{
  width: 100%;
  height: 240px;
  overflow: hidden;
  margin: 1.2rem 0 1rem;
}
.noticia-img img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center;
  display:block;
}

.noticia .leer{
  color:#f2c200;
  font-weight:500;
  font-size: 1rem;
  text-decoration:none;
}
.noticia .leer:hover{
  text-decoration:underline;
}

/* =========================
   IMAGEN NOTICIA
   ========================= */

.noticia-img {
  width: 100%;
  height: 260px;          /* altura fija */
  overflow: hidden;      /* recorte limpio */
  margin: 1.5rem 0;
}

.noticia-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =================================================
   COMENTARIOS HOME (COLUMNA DERECHA)
   Caja blanca + bocadillo amarillo
   ================================================= */

/* CAJA PRINCIPAL (BLANCA, SIN PICO) */
#homeComentario{
  background: #ffffff;
  color: #000;
  padding: 2.6rem;
  border-radius: 26px;
  width: 100%;
  position: relative;
}

#homeComentario::before{
  content: none;
}

#homeComentario h2{
  margin: 0 0 3rem;
  font-weight: 500;
    font-size: 1.7rem;
}

/* =================================================
   LAYOUT GENERAL
   ================================================= */

#homeComentario .hc-wrap {
  display: grid;
  gap: 1.8rem;
  align-items: start;
  grid-template-columns: 160px 1fr;
}

/* =================================================
   META (AUTOR / FECHA / ESTRELLAS / BOTELLA)
   ================================================= */

#homeComentario .hc-meta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#homeComentario .hc-author{
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
    line-height: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#homeComentario .hc-sep{
  width: 70px;
  height: 2px;
  background: rgba(0,0,0,.25);
  margin: .35rem 0 .45rem;
}

#homeComentario .hc-date{
  margin: 0 0 .45rem;
  font-size: .85rem;
  color: rgba(0,0,0,.65);
}

/* ---------- ESTRELLAS (CSS PURO) ---------- */

#homeComentario .hc-stars{
  --star-size: 18px;
  --star-gap: 4px;
  --fill: calc((var(--rating) / 5) * 100%);

  position: relative;
  width: calc(var(--star-size) * 5 + var(--star-gap) * 4);
  height: var(--star-size);
  margin-bottom: 1rem;
}

#homeComentario .hc-stars::before,
#homeComentario .hc-stars::after{
  content: "★★★★★";
  font-size: var(--star-size);
  letter-spacing: var(--star-gap);
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

#homeComentario .hc-stars::before{
  color: #e6e6e6; /* estrellas vacías */
}

#homeComentario .hc-stars::after{
  color: #f5c400; /* estrellas rellenas */
  width: var(--fill);
  overflow: hidden;
}

/* ---------- BOTELLA ---------- */

#homeComentario .hc-thumb{
  background: #fff;
  border-radius: 16px;
  padding: .7rem;
  /*box-shadow: 0 10px 20px rgba(0,0,0,.08);*/
}

#homeComentario .hc-thumb img{
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  display: block;
}

/* =================================================
   BOCADILLO AMARILLO (COMENTARIO)
   ================================================= */

#homeComentario .hc-bubble{
  background: #f5c400;
  border-radius: 20px;
  padding: 1.8rem 2rem;
  position: relative;


  /* da más presencia vertical */
  min-height: 350px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* PICO DEL BOCADILLO (APUNTA AL AUTOR) */
#homeComentario .hc-bubble::before{
  content:"";
  position:absolute;
  left:-18px;
  top:42px;
  width:0;
  height:0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 18px solid #f5c400;
}

/* ---------- TEXTO ---------- */

#homeComentario .hc-title{
  margin: 0 0 .6rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.65rem;
  line-height: 1.7rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

#homeComentario .hc-text{
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #111;

}

/* ---------- SEGUIR LEYENDO ABAJO ---------- */

#homeComentario .hc-link{
  font-weight: 700;
  color: #000;
  text-decoration: underline; 
  margin-top: 1.1rem;    
  display: block;
}

/* =================================================
   RESPONSIVE
   ================================================= */

@media (max-width: 1100px){
  #homeComentario{padding: 1.5rem;}
  #homeComentario .hc-wrap{grid-template-columns: 1fr; position: relative;}
  #homeComentario .hc-bubble{min-height: auto;}
  #homeComentario .hc-bubble::before{display: none;}
  #homeComentario .hc-thumb {padding: 0; }
  #homeComentario .hc-thumb img{ max-height:150px; position: absolute; right: 0; top:-45px}
}

@media (max-width: 640px){
.home-row--news-comments {
  display: flex;
  gap: 3rem;
  padding: 2rem 6vw 5rem;
  background: #000;
  align-items: stretch; 
  margin-bottom: 4rem;
}
}
/*#clubHome{width:965px;margin:0 auto 0; color:#fff;padding:15px 0 15px 15px; background-color:#000; 
-webkit-border-radius: 8px;	-moz-border-radius: 8px; border-radius: 8px; border:1px solid #444}
#clubHome img{float:left}
#clubHome h2{width:500px; float:left; margin:8px 0 0 35px}
#clubHome p a{background-color:#fff; float:right; width:150px; text-align:center; padding:3px 0 0; display:block; margin:15px 20px 0 0;
-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; color:#000}
#clubHome p a:hover{background-color:#e3a00f}

.menuSup {position: absolute; top: 2px; right: 2%; z-index: 999; color:#fff!important; width: 100%; text-align: right}
.menuSup a { color: #ccc; font-size:85%; text-transform: uppercase; letter-spacing: 0.2px; display: inline-block; vertical-align: middle}
.menuSup img{ margin:0 5px 0 25px; display: inline-block; vertical-align: middle}
#buscadorGen { width: 250px; display: inline-block; vertical-align: middle; position: relative}
#header_buscador{ background-color:#000; border:1px solid #939393; color:#fff!important; width:230px; outline:none; display:inline-block; vertical-align: middle; font-size:100%; padding:6px 8px}
#submit_buscador{ background:transparent url(../img/ico-buscar.png); background-repeat: no-repeat; width:18px; height:18px; border: none; cursor: pointer; outline:none;  position: absolute; right: 8px; top:5px}
input::-webkit-input-placeholder {color:#999}
input:-moz-placeholder {color:#999}
input:-ms-input-placeholder {color:#999}*/

/*---- Paginas interior ---------- */
#contenedor{margin:0 auto; position:relative;}
#contenido{ padding:0; max-width: 1200px; margin: 0 auto!important; }
#contenido.titular.formG { min-height:400px!important;}
#contenido h1{_margin-top:30px; margin-top:35px;}
#cab,#cab2,#cab3{margin:18px 0 20px; width:99%; height:70px; position:relative;}
#cab3{margin-bottom:28px;position: relative;}
#cab4{margin:0; height:50px;width:99%;}
#cab h1{float:left; font-size:230%;color:#e0dbd7; display:block; width:25%; min-width:220px; margin-bottom:0;}
#contenido #cab2 h1,#contenido #cab3 h1,#contenido #cab4 h1{float:none; font-size:230%;color:#e0dbd7; display:block;width:100%; margin:0;}
#cab h1 a,#cab2 h1 a{color:#e0dbd7; font:100% "Bebas Neue",sans-serif;}
#google_translate_element {position: absolute; top: 3rem; right: 10px; z-index: 9999;}

/*--- Idiomas ---*/
/* CSS */
.idiomas { position: absolute; right: 0; top:3rem;}
.lang-menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 15px; align-items: center;}
.lang-link { text-decoration: none; display: flex; align-items: center; gap: 5px; color: #fff!important;}
.lang-link:hover { text-decoration: underline; color: #000!important;}
.flag { width: 20px; height: 15px; display: block;}

/*--- cabeceras  --*/
#contenido.titular h1{margin:8px 0 20px;}
#contenido.titular2,#contenido.titular4{ background-color: #111}
#contenido.titular3{ background-color: #111}
#contenido.titular3 h1{padding-top:37px;}
#contenido.titular4 h1{padding-top:10px;}
.cabeceras-hero{ padding: 0rem 0 3.5rem!important;}
.cabecera img { width:100%; margin-bottom: 6rem!important;}

/*---Glosario--*/
.glosario h2 { background-color: #222; color: #fff; padding: 0.5rem 0; text-transform: uppercase; font-weight: 500; font-size: 1.2rem; display: block; width: 50px; text-align: center;}
.glosario dl { margin: 3rem; padding: 0;}
.glosario dt { font-weight: 500; margin-top: 20px;font-size:1.2rem;color: #222;}
.glosario dd {margin: 0 0 15px 0;font-size: 1rem;color: #555;}

/*------------------*/

h1{font:230% 'Bebas Neue',sans-serif;color:#e0dbd7; margin-bottom:0;}
h1 span{display:none}
#imgMm{margin-left:15px}
#colIzq,#section,#colIzq2,#cuadro{float:left; max-width:600px; width:65%; margin-top:2%;}
#colIzq2 h2,.colOpiniones h2, #colDcha h2{color:#99887e; line-height:90%; margin:12px 0 8px 0;}
#colDcha, #aside{float:right; width:27%; max-width:250px; margin:2% 0 0 4%; font-size:90%;}
#colDcha h2{font-size:200%;}
#colIzq2{width:95%; max-width:inherit;}
#colIzq2 ul{margin:10px 20px;}
#colIzq2 li{background:url(../img/icono-flecha.png) left 2px no-repeat;padding:0 0 5px 18px;line-height:140%;}
#colIzq2 a{color:#09F;}

.mSup{margin-top:3%;}
.sinBor{border-bottom:none!important; padding-bottom:0;}
.marBot{margin-bottom:8px 0px;}
#tittt{display:none;}

.bordeTop{height:2px; background-color:#ddd; margin:20px 0;}
.asociateBloque{display:inline-block; width:42%; vertical-align:top; margin:0 1%; background:#99887e; border-radius:10px; padding:15px; margin-bottom:20px; color:#fff; min-height:650px}
.asociateBloqueB{width:90%; margin:0px 0 20px 1%;}
.asociateBloque h3{font-size:180%; margin-top:8px ;}
.asociateBloque img{ width:100%}
.asociateBloqueTxt2 { background-color:#222; padding:10px;}
.asociateBloqueTxt2 p { font:400 140% 'Bebas Neue',sans-serif!important;}
.botonMasInfo {margin:40px auto; padding:10px; font-size:120%; width:250px; cursor:pointer; border-radius:3px; background-color:#222; text-align:center; display:block}
.botonMasInfo:hover {background-color:#000;}

.THB_asociado { background-color:#fff; padding:20px 3%; margin:80px auto 30px; position:relative; }
.THB_asociado h2 strong { color:#9c8c80; font-size:160%; font-weight:400;}
.THB_asociado figure { background-color:#fff; padding:12px; width:44%; display:inline-block; vertical-align:top; margin:-80px 0 0 2%;-webkit-box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38);-moz-box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38);box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38);-moz-transform: rotate(5deg); -o-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); }
.THB_asociado img { width:100%;}
.THB_asociado .p1{ width:50%!important; display:inline-block; font-size:100%!important; text-align:left;vertical-align:top;}
.THB_asociado .p2{ margin-top:20px; display:block;}
.AsocContact { background-color: #261A14; color:#ddd; padding:8px 0; display:block; text-align:center;}
.AsocContact span { width:1px;margin:0 2%;}

/*----- THB locales ---*/
#cerveceria-mapa{ width:90%;height:550px;margin:3% auto 0; background:#eee url(../img/bx_loader.gif) center no-repeat; }
.columnaB{float:left;max-width:350px; width:30%;margin:3% 0 0 2%;color:#000;}
.columnaB ul{margin-bottom:10px;}

/*---- ficha cervecerias -------------*/
#cerveceria-mapa.mapCerv{width:66%; min-width:300px;height:460px; margin-top:0; margin-bottom:0; float: right;}
#cerveceria-mapa.mapCerv2{width: 42%;}
.fotoCerv{float:right;width:66%; margin-top:15px;height:320px; overflow:hidden;}
.fotoCerv img{width:49%}
.fotoCerv_dcha{float:right}
.datosCerv{width:30%; min-width:270px;height:440px;float:left;color:#fff;background-color:#000;padding:10px;}
#contenido .datosCerv h2{color:#222;margin-bottom:5px; font:400 130% 'Roboto Condensed', Sans-serif;} 
#contenido .datosCerv p{font-size:100%;margin:0 0 8px!important;}
#contenido .datosCerv p strong{font:700 120% 'Roboto Condensed', Segoe, "Segoe UI",sans-serif; text-transform:uppercase;}
.datosCerv a{color:#fff; text-decoration:underline;}
#tripadvisor-opiniones{float:left;width:30%;min-width: 299px;}
.rss_locales{width:100%; margin:8px 0;}
.rss_locales img{ float:left; margin:8px 8px 8px 0;}
.datosCerv #boton-tripadvisor-rrss{margin:5px 0 8px; float:left; width:50px;}

#categorias{margin:2% 0 0 0;}
#categorias h3{color:#000;margin:0 0 8px;padding:10px 0 10px;font-size:130%;}
#categorias h3 strong{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:160%;}
#categorias h3 strong span{color:#99887e;font-family:'Bebas Neue',sans-serif;}
p.noticiaLocales{font-family:'Bebas Neue',sans-serif;font-size:160%;color:#099;margin:5px 0;}
ul.categorias{float:left; margin-left:2%;}
ul.categorias li{float:left;margin:2px 2% 0 0;}
ul.categorias li a{background-color:#e2dbde;padding:3px 8px;color:#99887e!important;font-size:105%}
ul.categorias li.activo a{background-color:#99887e;color:#fff!important;}
ul.categorias li a:hover{background-color:#000;color:#fff;}
select.locales{float:left;margin:0 3% 0 0;}
.avisolegal h3 { font-size:120%; font-weight:400;}

/*---FRANQUICIAS --*/
#colDcha h3{color:#99887e; font-weight:400; text-transform:uppercase; font-size:150%;margin-bottom:5px; display:block;}
#imgMapa{border:1px solid #ddd; width:99%;}
#colDcha a{color:#337f8f;}
#colDcha p.botMasInfo{
	display:block; background-color:#99887e; padding:8px 15px; line-height:110%;
	text-align: center; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
#colDcha p.botMasInfo a{color:#fff;	font-size:90%;	font-weight:700;}
#colDcha p.botMasInfo:hover, #colDcha p.botMasInfo a:hover{background-color:#e2dbd5;color:#99887e;}

.linea{border-top:1px solid #ada694;margin-top:10px;padding-top:10px;}
.separata{margin-top:20px;padding-top:25px;border-top:1px solid #999;height:1px;} 
.abajo{background:url(../img/bottom2.png) no-repeat;height:12px;}

#expansion{background: url(../img/no-low-cost.png) 10px center no-repeat; border-top:1px solid #e2dbd5; padding:15px 20px 0 280px; margin-top:20px;}
#expansion h3{font-size:130%;color:#181d21;font-weight:700; margin:0;}
#expansion h4{font-size:120%;margin:0 0 10px;color:#181d21;font-weight:700;}

/*video*/
.video-container {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;margin-top:30px;}
.video-container iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}

/* ---- Descriptores --- */ 

#descriptores img{display:inline-block; vertical-align:middle; margin-right:5%; width:60%;}
#descriptores div{display:inline-block; vertical-align: top; margin-right:2%; width:25%; text-align: left;}
#descriptores h2{font-size:2rem; margin-top:20px;}
#descriptores p{color:#333; margin:0 0 10px; font:300 1.1rem Roboto, Arial; line-height:150%;}

/* ----- carta comer -----*/
.cartaComerTxt{margin-top:30px; display: inline-block; vertical-align:middle; width:57%; margin:0 2%; padding:30px 0;}
.cartaComerTxt h3{font:500 150% Roboto, Arial; color:#000; margin-bottom:0; text-transform:uppercase;}
.cartaComerTxt p strong{font:300 200% Roboto, Arial; color:#000; display:block; margin:0 0 8px;}
.cartaComerTxt p{color:#333; margin:0; font:300 120% Roboto, Arial; line-height:150%;}
.cartaComerTxt p i{font:300 italic 90% Roboto, Arial; display:block; margin:10px 0; color:#777;}
.cartaComerFoto{display:inline-block; vertical-align:middle; width:35%; margin-top:30px; margin-bottom: 2rem; clear: both;}
.cartaComerTxt ul li{display: inline-block; vertical-align:middle; margin:10px 1% 0; width:15%;}
.cartaComerTxt ul li img{width:100%;}
.movil{display:none!important}
.sinGluten{display:inline-block; vertical-align:middle;margin:0px 8px 0 0; float:left;}
p.margenGluten{padding-top:10px;}
.cartaComerTxt .ico { width: 28px !important; height: 28px; display: inline-block; vertical-align: middle;}

.nuestraCarta { display:none}
.platos { background-color:#eee; padding:10px 1%; margin:20px 0; text-align:center; }
.platos ol {  display:inline-block; vertical-align:top; width:29%; margin:0; padding:0; text-align:left;}
.platos ol:nth-child(3) { margin:0 2%; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 2%;}
.platos p {font:300 180% Roboto, Arial; color:#4b443e; display:block; margin:0 0 20px 2%; text-align:left;}
.platos p .txtpeq {font:300 60% Roboto, Arial!important; line-height:20%!important; margin-top:-10px;}

.platos li { list-style-type:none; margin-bottom:15px; clear:both;}
.platos li img{ display:inline-block; vertical-align:top; width: 25px;}
.precio { font-weight:bold;}

.burguer .num { margin-top:5px; margin-bottom:5px;}
.num { font-weight:700; border-radius:3px; background-color: #4b443e; color:#fff; text-align:center; min-width:30px; min-height:30px; padding:.5rem; margin-right:8px; display:inline-block;}

/*--- Lightbox ---*/
/*---- CERVEZAS -----*/

.redes{width:162px;overflow:hidden; position:absolute; top:45px; right:0; z-index:100; text-align:right;}
.redes li{float:left;}
.redes li.google{width:70px;}
.redes li.fac{width:90px;}

#cartaCerve{float:left;width:70%; min-width:650px; margin-top:41px;}
#cartaCerve li{display:inline; padding:0.3% 0 0; margin-right:3%;font:150% 'Bebas Neue',sans-serif; color:#99887e;border:1px solid #99887e;}
#cartaCerve li.activa{padding:0.3% 3% 0; background-color:#fff}
#cartaCerve li a{color:#e2dbd5;font-family:'Bebas Neue',sans-serif;padding:0.3% 3% 0; border:1px solid #fff}
#cartaCerve li a:hover{color:#fff; border:1px solid #fff}

#migas,#migasMovil,#migasFicha{padding:0.2% 0 1.6% 0; margin:0 0 1.5%; width:100%; min-width:220px} #migas { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; padding: .8rem 0 2rem}
/* antes .senda */
#migas p,#migasMovil p,#migasFicha p{padding:0; margin:0; float:left}
#migasFicha p{font-size:100%; text-transform:none;font-family: Roboto, "sans-serif";}
#migasFicha p a{ text-decoration: none; font-family: Roboto, "sans-serif";}
#migas span,#migasFicha span{font-weight:bold; font-size:100%;font-family: Roboto, "sans-serif"}
#migasMovil{display:none; padding:0; margin:0}
#filtro{display:none}
#submenu{float:left; width:20%; max-width:200px; margin:15px 1% 0 0; border-right:1px solid #eee; border-bottom:1px solid #ddd}
#submenu h2{font:90% Arial, Helvetica, sans-serif; margin-bottom:5px; font-weight:bold}
#submenu p#titt{font-size:120%; color:#000; font-weight:bold}
#submenu ul{margin-bottom:15px}
#submenu li{margin-left:5%; font-size:90%; padding-bottom:5px}
#submenu li input{padding-top:2px}
#submenu li span{color:#999}
#submenu li a:hover{color:#337f8f!important }
#submenuCata{width:95%; margin:15px 1% 0 ; padding:10px 2%; background-color:#eee}
#submenuCata h2{margin-bottom:8px}
#submenuCata li{display:inline; margin-right:10px}
#submenuCata li span{color:#666; font-size:90%}

#listadoCervezas, #listadoCatas{float:right; max-width:950px; width:75%; margin:3% 0 0 0}
#listadoCervezas p#tit{font:700 140% 'Roboto Condensed',sans-serif; margin-bottom:2%; text-transform:uppercase}

#tipovista{float:right; margin-bottom:10px; text-align:right}
#tipovista li{display:inline-block; float:left}
#tipovista li a{background-image:url(../img/ico-listados.png);display:block;height:30px;width:30px}
#tipovista li.lista{margin-left: 10px; margin-top: -6px}
#tipovista li.lista a{background-position:right top}
#tipovista li.lista.activo a{background-position:right bottom}
#tipovista li.tabla{margin-top: -6px}
#tipovista li.tabla a{background-position:left bottom}
#tipovista li.tabla.activo a{background-position:left top}
#listadoCervezas div.ver{display:block}
#listadoCervezas div.oculta{display:none}

ul.cervezas li.cerveza{color:#818181;display:inline-block; vertical-align:top; margin:0 1.7% 2% 1.7%;width:144px;background:url(../img/fondo-cerveza.gif) center top no-repeat}
ul.cervezas li.cerveza strong, ul.cervezas li.cerveza span.tipo, ul.cervezas li.cerveza span.botella{display:block; margin:1% 2% 0; font:400 1rem 'Roboto Condensed', sans-serif; }
ul.cervezas li.cerveza strong{display:block; text-transform:uppercase; font-weight:700; line-height:1.2rem;color:#222}
ul.cervezas li.cerveza span.tipo{color:#818181;}
ul.cervezas li.cerveza span.botella{color:#818181; margin-bottom: 8px;}
ul.cervezas li.cerveza img.cervezaIm{margin:15px auto 15px;display:block;height:156px}
ul.cervezas li.cerveza a{text-decoration:none; }
ul.cervezas li.cerveza a:hover{text-decoration:underline}

/* - Carta Locales home - */
.localesInt { text-align:center; color:#222; width:100%;margin:2rem auto 0;}
.localesInt h2 { color:#222; margin-bottom:0; font-size: 1.8rem}
.localesInt h3 { font-size:290%!important}
.localesInt ul { text-align:center; margin-top:0px}
.localesInt li { display:inline-block; vertical-align:middle; margin:3rem 1% 2rem; width:15%; }
.localesInt li img{ width:100%;border: 2px solid #fff; border-radius: 100px;}
.localesInt li img:hover { border: 2px solid #cccccc; border-radius: 100px; padding: 0}
.localesInt li.active img { border: 2px solid #818181 !important;}

@media only screen and (max-width: 765px){
    .localesInt { margin:2rem auto 0;}
    .localesInt li { margin:2rem 1% ; width:20%; }
}
/*CATA*/
.cataIntro{padding-top:15px}
.cataIntro p{font:400 110% 'Museo-700',sans-serif; background-color:#444; color:#fff; padding:10px 2%; text-align:center}
.cataIntro p strong{font:400 180% 'Museo-700',sans-serif; text-transform:uppercase; display:block; margin-bottom:8px}

/*---*/
li span.comment{float:left; height:13px; margin:3px 0 0 6px; font-size:80%; overflow:hidden}
li span.comment img{margin-top:-16px}
span.estrella{
	margin: 3px 1px;
	width:13px;
	height:12px;
	overflow:hidden;
	float:left;
	background-image:url(../img/estrellas.png);
	background-repeat:no-repeat;
	background-position: bottom;
}
span.estrella_activa{background-position: top;	}

#paginacion{
	text-align: center; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color:#eee;
	padding:15px 0 15px;
	color:#666;  
	margin:3% 0 3% 0}

#paginacion ul{margin:auto}
#paginacion ul li{display:inline; margin: 0 0.5%}
#paginacion ul li.actual span{padding: 8px 3%; background-color: #fff; border-radius: 5px; font-weight:bold; color: #337f8f}
#paginacion ul li.ant{padding-right:2%}
#paginacion ul li.sig{padding-left:2%}
#paginacion ul li.ant a, #paginacion ul li.sig a{background-color:transparent; font-weight:bold}
#paginacion ul li.ant a:hover, #paginacion ul li.sig a:hover{color:#337f8f}
#paginacion a{color:#337f8f; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color:#fff;padding:8px 3%}
#paginacion a:hover{background-color:#ccc; color:#fff}
#paginacion p span.ant{padding-right:2%}
#paginacion p span.sig{padding-left:2%}
#paginacion p span.ant a, #paginacion p span.sig a{background:none; font-weight:bold}
#paginacion p span.ant a:hover, #paginacion p span.sig a:hover{color:#577baf; text-decoration:underline}

#bannerExperiencias{background:#efecea url(../img/d-viajeros.gif) 0 10px no-repeat; height:220px; margin:0 15px 3% 0; padding:10px 40px 0 240px; color:#99887e;-webkit-border-radius: 4px;	-moz-border-radius: 4px;border-radius: 4px}
#bannerExperiencias h3{color:#99887e; text-transform:uppercase}
#bannerExperiencias h3 span{display:block;font:700 150% 'Roboto Condensed', sans-serif}
#bannerExperiencias a{background-color:#337f8f; color:#fff; padding:8px; margin:15px auto 0; display:block; width:180px; text-align:center}
#bannerExperiencias a:hover{background-color:#99887e}

/*----FICHA CERVEZA ----------*/
#foto{float:left;margin:10px 0 0;text-align:right;width:38%; position:relative; }
.fotoFicha{overflow:hidden;text-align:center}
.fotoFicha img{background-color:#fff; width: 100%; margin-bottom:5px}
#titMovil{display:none}
p#icoLupa{background:url(../img/ico-ampliar.gif) left top no-repeat;width:31px;height:30px;position:absolute;left:0;top:180px;display:block}
.ampliar li{background:url(https://www.thehousebeer.esimg/icon_search.gif) 83px 5px no-repeat;padding-left:12px;padding-top:5px}
.ampliar li a{color:#666}
.ampliar li a:hover{text-decoration:underline}

#datos-cerveza{float:right;width:60%; margin-top:40px}
#datos-cerveza h2,#foto h2{font-size:250%; margin-bottom:0}
#datos-cerveza p.comment{font-size:90%; margin: 0px 0 0 10px}
#datos-cerveza p.comment a{margin-left: 10px}

#redes{width:90%; margin:30px 0 15px 0}
#redes a{font-size:12px;color:#30566D;font-weight:bold}
#fb-like,.fb-share-button,.b-twitter,.g-plusone{float:left; display:block; width:90px; overflow:hidden; margin-right:5px}
#fb-like,.fb-like,.fb-share-button,#fb-root{width:auto}

p.pais, p#pais{font-size:120%; margin:0}
#pais{display:none; font-size:90%}
ul.tamAlc{border-top:1px solid #e2dbd5; padding-top:10px; margin:10px 0 25px; overflow:auto}
ul.tamAlc li{
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	background-color:#e2dbd5;
	float:left;
	padding:8px;
	margin-right:8px;
	font-weight:bold;
	font-size:120%
}
ul.ficha{width:85%; margin:20px 0 0}
ul.ficha li{clear:both; margin-bottom:6px}
ul.ficha li strong{margin-right:1%; color:#654020}

#masInfoCerveza, #masInfoCerveza2, #comentarios-ficha,#comentar{
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	border:1px solid #e2dbd5;
	background-color:#fff;
	padding:8px;
	overflow:auto;
	margin-bottom:20px
}

#masInfoCerveza h3, #masInfoCerveza2 h3, #comentarios-ficha h3,#comentar h3{background-color:#e2dbd5; padding:2px 15px 0; color:#99887e; font-size:150%}
#infoA{float:left; width:40%; max-width:350px; margin:10px 0 0 10px}
#infoA li{border-bottom:1px dashed #e2dbd5;padding-bottom:10px; margin-bottom:10px}
li.fotoFichaPeq{height:150px; display:block; text-align:center}
li.fotoFichaPeq img{height:150px}

#infoB{float:right;width:49%; min-width:500px; margin-right:0%; min-height: 50px;}
#infoB h4{font-weight:bold; font-size:120%}
#infoB p{padding-bottom:8px}

#bloque-captcha{margin:8px 0 20px}
#bloque-captcha p{margin-bottom:3px;color:#000}
#compartircerveza{margin:10px 0}
#compartircerveza p{margin-bottom:3px;color:#333}

#comentarios-ficha{margin-top:3%}
div.comentario-bloque{border-bottom:1px dashed #ddd;margin-bottom:3%}
div.bloque-comentario-izquierda{width:250px;float:left; font-size:90%}
/*p.numero-comentario{font-size:24px;font-weight:bold}*/
div.bloque-comentario-derecha p.titulo{margin:0px;font-size:14px;font-weight:bold}
.ComentImg{float:left; margin-right:10px}
p.comentario-estrellas{height:16px;overflow:hidden}
p.fecha-comentario{margin-bottom:0; font-size:95%}
p.trabajo{font-size:120%;color:#06C}
a.external{color:#06C}
p.peq{font-size:90%}

.formOpinion{margin:0 0 0 25px; width:95%}
#compartirB{float: left;width:550px}
#compartirA{float: left;width:300px}

.formOpinion label{width:250px; margin:5px 0; font-weight:bold}
.formOpinion input,.formOpinion textarea{border:1px solid #ddd;background-color:#fff;padding:4px;color:#000;width:98%;margin-bottom:3px;list-style-type:none}
.formOpinion textarea{height:150px}
.formOpinion #compartirB label{display:block; margin-bottom:2%; width:450px}
.formOpinion #compartirA input.BotPublicar{background-color:#000; color:#fff; font-weight:bold;width:180px;height:30px;border:none;margin:10px 0 10px 50px;cursor:pointer}
button.BotPublicar{background-color:#000; color:#fff; font-weight:bold;width:180px;height:30px;border:none;margin:10px 0 10px 50px;cursor:pointer}
.formOpinion a:hover{text-decoration:underline}

/*--------Seccion eventos -------------*/
#contenido.eventos{background-position:center 0}
#contenido.eventos h1{padding-top:25px}
#eventosMovil{display:none}
.tablaEventos{width:100%; max-width:940px; margin:2% 0 0px 0}
.tablaEventos p{color:#000}
table.eventos{width:100%; min-height:570px;background: url(../img/thb-eventos-fondo-tit.gif) left 65px repeat-x;color:#000;border-bottom:1px solid #fff; margin:25px 0 15px}
.titCal{background:url(../img/thb-calendario-eventos.gif) center 3px no-repeat; height:60px}
table.eventos th{height:30px;padding-top:2px;border-right:1px solid #fff; font-weight:bold; text-transform:uppercase; color:#fff}
table.eventos th.sin{border-style:none}
table.eventos .bordeBl{border-left:1px solid #fff}
table.eventos td{padding:5px}
table.eventos td.mes{background-color:#000;color:#fff;height:10px; padding:2px 0 2px 8px;border-left:1px solid #fff}
table.eventos a{color:#124fbf}
table.eventos a.calCartel{display:block;background-color:#5e9b9b;text-align:center;color:#fff}
table.eventos a.calInfo{display:block;background-color:#436f6f;text-align:center;color:#fff}
table.eventos tr.gris td{background-color:#ddd;border-right:1px solid #fff}
.email{
	padding:10px 2% 10px 7%;
	color:#5f4d41;
	background:#e2dbd5 url(../img/ico-sobre.gif) 1.5% 12px no-repeat;
	border:1px solid #e2dbd5;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position:relative;
}
.email h3{color:#99887e;margin:0!important; padding:0!important}
.email p{margin:0; color:#5f4d41}
.emailBoton a{color:#fff;background-color:#99887e;-moz-border-radius:3px;border-radius:3px;text-align:center;padding:8px 0;top:20px;right:3%;position:absolute; font-weight:600; width:120px}
.emailBoton a:hover{background-color:#000}

/*-------- Noticias ficha ---------*/
.noticiasFicha{/*margin:0 3% 10px 0; width:65%; min-width:550px; float:left;*/ width:100%; margin:0 auto; font-size:90%}
.noticiaBloqueFicha{width:99%;padding-top:15px;border-top:1px dashed #e2dbd5}
.noticiaBloqueFicha img{float:left;margin-right:20px;width:200px;border:3px solid #fff}
.noticiaBloqueFicha h2{background:none;margin:0!important;font:200% 'Bebas Neue', Arial, sans-serif!important}
.noticiaBloqueFicha h2 a{background:none;margin:0;font:100% 'Bebas Neue', Arial, sans-serif!important;color:#000}
.noticiaBloqueFicha h2 a:hover{color:#99887e}
.noticiasFicha h3{font-family:'Bebas Neue',sans-serif;color:#000;margin:0 0 8px;padding:10px 0 10px;font-size:120%}
.noticiasFicha h3 strong{display:block;font-family:'Bebas Neue',sans-serif;font-weight:bold;font-size:160%}
.textoNoticiaFicha{padding-bottom:15px}
.textoNoticiaFicha p{line-height:145%; margin-bottom:0}

/*--------Seccion eventos Ficha-------------*/
.EventosFicha{float:left; padding:70px 20px 0px; width:25%; min-width:250px;margin:0 0 2% 0; background:#009999 url(../img/ficha-calendario-eventos.gif) center 8px no-repeat}
.tablaEventosFicha{padding:10px 10px 5px; background-color:#fff}
.tablaEventosFicha p{color:#000; font-size:90%}
.tablaEventosFicha p strong span{background-color: #009999; color:#fff; padding:2px 5px}
.tablaEventosFicha p a{color:#124fbf}
p.evenFecha{font-size:80%;font-weight:bold;text-transform:uppercase;padding:0 5px;background-color:#000; color:#fff; display:
block; width:170px}
.caja{background-color:#fff; margin:10px 0; padding:10px; color:#000}
.caja h4{font-weight: bold;text-align: left;margin: 0 0 10px 0;	text-transform: uppercase}

/*-------- Seccion Noticias ---------*/

/**/img.noticiaHousebirito{height:300px; margin-right:3%}
p.noticiaInfo{position:absolute;left:65px;top:154px;width:520px;color:#000;font-size:120%;line-height:140%}
select.locales2{float:left;margin:0px 5px 15px 0;height:30px; padding: 0 8px;  border-radius: 3px; border-color: #444; }

#section, .colIzqNoticias{max-width:750px; width:72%; margin-top:0}
#article,.colTxt{float:left; width:100%; border-bottom:1px dashed #ddd; padding-bottom:10px; margin:8px 0}
#article h2{margin-bottom:0}
#article img{width:100%}
#article #fotoNoticia{float:left; width:30%; max-width:270px;margin-right:2%; margin-bottom:5px;border:3px solid #fff; overflow:hidden}
#article p{font-size:90%}

.noticias{margin:2% 2% 1% 0;color:#000}
.noticias h3, #article h2 a{font-family:'Bebas Neue',sans-serif;color:#000;margin:0 0 8px;padding:10px 0 10px;font-size:130%}
.noticias h3 strong{display:block;font-family:'Bebas Neue',sans-serif;font-weight:bold;font-size:160%}

p.noticiaLocales{font-family:'Bebas Neue',sans-serif;font-size:160%;color:#099;margin:5px 0}
select.locales{float:left;margin:0 0 0}
ul.categorias li{float:left;margin:2px 10px 2rem 0;color:#666}
ul.categorias li a{padding:8px 8px;color:#666;font-size:105%; border-radius: 3px;}
ul.categorias li.activo a{color:#000}

/* =========================================================
   NOTICIAS / BOTÓN "VER SIGUIENTES"
   Limpio + optimizado (sin duplicados)
   ========================================================= */

/* Bloques noticia (layout clásico) */
.noticiaBloque,
.noticiaBloque2{
  width: 730px;
  clear: left;
  padding-top: 15px;
  border-top: 1px dashed #999;
}

.noticiaCont{ margin-top: 15px; }

.noticiaCont h2,
.noticiaCont h4{
  background: none;
  margin: 0 0 10px;
  clear: left;
  font-size: 180% !important;
}

.noticiaCont a:hover{ text-decoration: underline; }

.noticiaFoto{
  float: left;
  width: 400px;
  margin: 0 20px 20px 0;
}
.noticiaFoto img{ width: 400px; }

.textoNoticia{
  float: left;
  width: 450px;
  padding-bottom: 20px;
}
.textoNoticia2{
  float: left;
  width: 400px;
  font-size: 105%;
}

/* Colores enlaces */
.textoNoticia a,
p.migas a,
.textoNoticia2 a,
.noticiaCont a,
.noticiaBloque2 a,
.textoNoticiaFicha a{
  color: #0099ff;
}

/* Tipos/espaciados */
.textoNoticia a:hover,
p.migas a:hover{ text-decoration: underline; }

.noticiaBloque2 .textoNoticia p{ line-height: 145%; }

.noticiaBloque2 h4{
  font-size: 120%;
  font-weight: bold;
}

a.seguirleyendo{
  color: #0099ff;
  display: block;
  margin: 6px 0 0;
}

p.fecha{
  margin-bottom: 5px;
  color: #333;
  font-size: 110%;
}

p.noticiaPal a{
  font: 160% "Bebas Neue", Arial, sans-serif;
  color: #099;
}

/* Enlace locales (tal cual, pero ojo: es muy dependiente del layout) */
p.enlaceLocales{
  position: absolute;
  left: 785px;
  top: 240px;
  width: 145px;
  height: 22px;
}
p.enlaceLocales a{
  color: #000;
  background: url(../img/fondo-seleccion-02.png) left 0 no-repeat;
  padding: 3px 18px 5px 17px;
}
p.enlaceLocales a:hover{
  text-decoration: none;
  background: url(../img/fondo-seleccion-02.png) left -24px no-repeat;
  color: #fff;
}

.noticiaGaleria{
  float: right;
  margin: 25px 25px 0 0;
  border: 3px solid #fff;
  padding: 10px;
}

/* Suscripción / Aside 
.suscrib{
  display: block;
  font-size: 110%;
  background: url(../img/rss.png) 75px 0 no-repeat;
  padding-bottom: 3px;
  margin-top: 5px;
}

#aside{
  min-height: 350px;
  color: #000;
  max-width: 210px;
  width: 22%;
  margin-top: 2%;
  margin-left: 0;
}

.boletin{
  margin: 15px 5px 0;
  padding: 10px;
  background-color: #eee;
}
.boletin a{ color: #333; }
.boletin a:hover{ text-decoration: underline; }

.noticUltimo{
  background: url(../img/fondo-lo-ultimo.gif) left top no-repeat;
  padding: 2px 0 0 0;
}
p.notTit{
  display: block;
  margin-left: 15px;
  font-size: 110%;
}*/

/* Botón "ver siguientes" */
.vermasnoticias,
.vermascervezas{
  margin: 5% auto;
  text-align: center;
}
.vermasnoticias a,
.vermascervezas a{
  display: inline-block;
  font-size: 120%;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 5px;
  color: #fff;
  background-color: #000;
}
.vermasnoticias a:hover,
.vermascervezas a:hover{
  color: #000;
  background-color: #e2dbd5;
}

/* Bloque "noticia_cata" */
.noticia_cata{
  float: left;
  width: 100%;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 10px;
  margin: 8px 0;
}
.noticia_cata h2{
  margin: 0 !important;
  font-size: 130% !important;
}
.noticia_cata img{ width: 100%; }
.noticia_cata .fotoNoticia{
  float: left;
  width: 30%;
  max-width: 270px;
  margin-right: 2%;
  margin-bottom: 5px;
  border: 3px solid #fff;
  overflow: hidden;
}
.noticia_cata p{ font-size: 90%; }
.noticia_cata h2 a{
  font-family: "Bebas Neue", sans-serif;
  color: #000;
  margin: 0 0 8px;
  padding: 10px 0 10px;
  font-size: 130%;
}

/* =========================================
   CABECERA NOTICIAS (igual línea "Cómo funcionamos")
   - Mantiene franja negra + pico negro (también en móvil)
   - Banda beige con texto a la izquierda y cocinero a la derecha
   ========================================= */

/* Evita que en móvil la .legal-hero se ponga gris (regla global @media 640px) */
.cabeceras-hero--news.legal-hero{
  background:#000 !important;
  padding: 3.2rem 0 3.6rem;position: relative; z-index: 1;
}
.cabeceras-hero--news.legal-hero::after{
  background:#000 !important; /* pico negro */ 
    z-index: 2;
}
.cabeceras-hero--news .legal-title{
  color:#fff !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-size: clamp(2rem, 3.2vw, 3rem) !important; /* tamaño como "Cómo funcionamos" */
  letter-spacing: .04em;
}

/* Banda beige */
.cabeceras-hero--news__band{
  background:#e2dbd5;
    margin-top: -25px;
    overflow: visible;
}
.cabeceras-hero--news__bandInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 3rem;
}

/* Texto */
.cabeceras-hero--news__copy{ flex: 1 1 60%; }
.cabeceras-hero--news__kicker{
  margin: 0 0 .6rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:#111;
}
.cabeceras-hero--news__headline{
  margin: 0 0 1rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color:#111;
  opacity: .65; /* como el estilo “original” */
}
.cabeceras-hero--news__lead{
  margin: 0;
  color:#222;
  max-width: 70ch;
  line-height: 1.45;
  font-size: 1.02rem;
}

/* Cocinero */
.cabeceras-hero--news__art{
  flex: 0 0 334px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
    position: relative;
  z-index: 5;
}
.cabeceras-hero--news__art img{
  width: 100%;
  max-width: 360px;
  height: auto;
  display:block;
    transform: translateY(-70px);  /* SUBE el cocinero para que pise el pico */
  margin-bottom: -40px;  
}

/* Responsive: apila solo en tablet/móvil */
@media (max-width: 980px){
  .cabeceras-hero--news__band{margin-top: -50px!important; }
  .cabeceras-hero--news__bandInner{
    flex-direction: column;
    align-items:flex-start;
      padding-top: 3rem;
  }
  .cabeceras-hero--news__art{
    width: 100%;
    justify-content:center;
  }
    .cabeceras-hero--news__art img{
    transform: translateY(-35px);
    margin-bottom: -20px;
        width: 50%;
  }
}
@media (max-width: 640px){
  .cabeceras-hero--news.legal-hero{ background:#000 !important; }
  .cabeceras-hero--news.legal-hero::after{ background:#000 !important; }
  .cabeceras-hero--news .legal-title{ color:#fff !important; }
  .cabeceras-hero--news__band{ display: none;}
  .cabeceras-hero--news__bandInner{ padding-bottom: 0; margin-bottom: 2rem; padding-top: 2rem;}
}


/* =========================
   NOTICIAS (news-page)
   Cuadrícula con Flexbox (sin Grid)
   ========================= */

body.news-page #aside{ display:none; } /* ya no lo quieres */

body.news-page #section.news-grid{
  float: none;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  box-sizing: border-box;
}

body.news-page #section.news-grid .news-card{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  min-width: 0;

  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

body.news-page #section.news-grid .news-card.is-hidden{ display:none; }

body.news-page #section.news-grid .news-card .fotoNoticia{
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
}
body.news-page #section.news-grid .news-card .fotoNoticia img{
  display: block;
  width: 100%;
  height: auto;
}

body.news-page #section.news-grid .news-card .fecha,
body.news-page #section.news-grid .news-card h2,
body.news-page #section.news-grid .news-card p{
  padding: 0 18px;
}

body.news-page #section.news-grid .news-card .fecha{
  margin: 14px 0 6px;
  font-size: .95rem;
  color: #333;
}

body.news-page #section.news-grid .news-card h2{
  margin: 0 0 10px;
}
body.news-page #section.news-grid .news-card h2 a{
  font-family: "Bebas Neue", sans-serif;
  color: #222;
  text-decoration: none;
}
body.news-page #section.news-grid .news-card h2 a:hover{
  text-decoration: underline;
}

body.news-page #section.news-grid .news-card p{
  margin: 0 0 14px;
  color: #111;
}

body.news-page #section.news-grid .vermasnoticias{
  flex: 0 0 100%;
  width: 100%;
  margin: 10px 0 0;
  text-align: center;
}
body.news-page .vermasnoticias{
  display:block;
  clear:both;
  width:100%;
  margin: 24px auto 0;
  text-align:center;
}

/* Responsive */
@media (max-width: 992px){
  body.news-page #section.news-grid .news-card{
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}
@media (max-width: 640px){
  body.news-page #section.news-grid .news-card{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ===============================
   FILTROS NOTICIAS – SELECTS
   =============================== */

.filtros-noticias__row{
  display: flex;
  gap: 12px;
  width: 350px;
}

/* Select base */
.filtros-noticias__select{
  flex: 1 1 50%;
  width: 100%;
  height: 36px;
  padding: 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: #fff;
    margin-bottom: 2rem;
}

/* Desktop: ocultar select de categorías */
@media (min-width: 981px){
  .filtros-noticias__select--cat{
    display: none !important;
  }
}

/* Móvil / tablet */
@media (max-width: 980px){
  .filtros-noticias__row{
    flex-direction: row; 
  }

  .categorias--chips{
    display: none !important;
  }
}
    
/*-- Cervezas del Mundo -- */
.cervezasMundo #migasFicha{margin:2% 0 0}
#compartirCMmovil{display:none}
.colOpiniones{float:left; max-width:680px; width:75%; font-size:90%}
.colOpiniones h2, #compartirCMmovil h2{color:#306c78}
.colOpiniones h3{color:#000;font-size:130%;margin-bottom:10px}
.colCerv{float:right;width:180px;background-color:#3a6875;padding:15px 15px;color:#fff}
.colCerv h3{border-bottom:1px solid #2c8399;display:block;padding-bottom:5px;margin-bottom:5px!important;color:#fff}
.colCerv p{line-height:120%; font-size:90%}
.colCerv p a{color:#53ddfc}
.botCompartir{text-align:center;margin:2% 2% 10%; border:1px solid #fff}
.botCompartir a{display:block;background-color:#000;padding:10px 0;font-size:110%;font-weight:bold}
.botCompartir a:hover{background-color:#337e8f}
.colCerv.colMar{margin-top:-87px; min-height:770px}
ul.cervezasComm{margin-left:20px; color:#000}
.cervezasComm li{text-align:center;width:145px;display:block; overflow:auto; padding-bottom:8px}
.cervezasComm li a{display:block;color:#fff;background: url(../img/fondo-cerveza.gif) center top no-repeat;font-size:90%;padding:1px 5px 0}
.cervezasComm li a:hover{background-image: url(../img/fondo-cerveza-02.gif)}
.cervezasComm li img{margin:15px auto 15px;display:block;height:156px}
.cervezasComm li .comment{color:#999;font-size:90%;background:url(../img/comment.png) right 2px no-repeat;padding:0 12px 5px 0;display:block;text-align:right;margin-right:8px;margin-top:-28px}
.cervezasComm li .comment a{background:none;height:inherit;color:#fff}
.estrella{height:16px;overflow:hidden;margin-bottom:10px}
p.public{color:#fff; font-size:80%}
.height{height:80px; float:left; margin-right:8px}
p.titCerv{display:block;text-transform:uppercase;color:#ffed00;font-weight:bold;margin:0 0 5px;border-top:1px solid #2c8399;padding-top:8px}

.opinionCerveza{position:relative;font-size:100%;padding:10px 0;margin:5px 0;width:97%; border-top:1px dashed #e2dbd5}
.opinionCerveza h3{width:350px;text-transform:uppercase;margin:0; font-size:140%}
.opinionCerveza p.descrip{background:url(../img/ico-comillas.png) left top no-repeat;padding:8px 0 0 35px;width:80%; min-height:40px}
.opinionCerveza p.imgCerv{width:100px;overflow:hidden;background-color:#fff;text-align:center;padding:5px}
.opinionCerveza p.imgCerv img{height:120px}
.opinionCerveza ul{margin:5px 0 0 30px} .opinionCerveza li{float:left;width:60px;height:60px;margin:0 0 8px 8px}
.opinionCerveza p.publicado{position:absolute;text-align:right;top:40px;right:-10px;color:#666;font-size:90%}
.opinionCerveza p.estrellas{top:20px;right:-10px;position:absolute;height:16px;overflow:hidden}
.opinionCerveza p.publicado a{display:block;margin-top:2%}
.colOpiniones label{width:180px}
input.botton{background-color:#000;padding:10px 20px;color:#fff;margin:0;border:none;font-weight:bold;cursor:pointer}
input.botton:hover{background-color:#fff;color:#000}
.T1{display:none}
.addthis_sharing_toolbox{background-color:#FF0; hanging-punctuation:50px}

/*---- CLUB THB -----*/
.icos{margin:5px 0;display:block;border-bottom:1px solid #ccc} 
.dInferior{height:120px;background-color:#fff;margin:0 12px 0 19px;border-top:10px solid #ddd;position:relative}
.dInfA{width:280px;height:100px;float:left;background:url(../img/d-club-cata.png) left top no-repeat;margin:10px 10px 0 10px}
.dInfB{width:295px;height:100px;float:left;background:url(../img/d-boletin.png) 25px top no-repeat;margin:10px 10px 0 10px;border-left:1px dotted #ccc;border-right:1px dotted #ccc;padding:0 15px}
.dInfC{width:280px;height:115px;float:left;background:url(../img/d-cockstation.png) left top no-repeat;margin:0 0 0 10px}
.dInfE{width:280px;height:100px;float:left;background:url(../img/cervezas-mundo.png) left top no-repeat;margin:10px 0 0 10px}
.dInfF{width:280px;height:100px;float:left;background:url(../img/d-carta-picoteo.jpg) left top no-repeat;margin:10px 0 0 10px}
.dInfG{width:295px;height:100px;float:left;background:url(../img/d-carta-cervezas.jpg) 20px top no-repeat;margin:10px 10px 0 10px;border-left:1px dotted #ccc;border-right:1px dotted #ccc;padding:0 15px}

.dInferior a,.dInferior p{display:block;margin:85px 0 0 120px;color:#006ab3;background:url(../img/ico-azul.gif) left 3px no-repeat;padding-left:8px;font-size:90%}
.dInferior a:hover{text-decoration:underline}
.nueva{position:absolute;background:url(../img/nuevo.png) left top no-repeat;width:65px;height:70px;left:892px;top:-5px}
.enlaceD{margin-right:75px;float:right;margin-bottom:30px}

.clubCata{background:#38342b url(../img/quiero-ser-socio.jpg) 0 top no-repeat;padding:0;width:100%}
.enlaceC{font-size:90%}
.enlaceC a{background-color:#6CF; padding:5px 15px; color:#fff!important; text-decoration:none; font-weight:bold; text-transform:uppercase}

#clubTHB h2{font-size:240%; font-weight:400; color:#fff}
#streaming,#ClubSer, #ofrecer,#funcionar{
	background-color:#444; border:3px solid #999;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	padding:20px; margin-bottom:-2px;
	color:#eee
}
#carneSocio{width:60%; float:left}
#carneSocio h2{font-size:180%; color:#555}
#carneSocio h2 span{color:#000; display:inline-block; font-size:120%}
#carneSocio img{margin-top:20px; width: 100%; max-width: 450px}
#carneSocio p a{display:block; background-color:#499dd3; border-radius:5px; text-align:center; margin:8px; width:200px; padding:8px 0; color:#fff}
.carneSocioTit{position:relative}
.carneSocioTit p{position:absolute; left:3%; bottom:15%; font-size:120%; text-transform:uppercase; color:#fff}

#streaming{padding:0}
#iframeStreaming{max-width: 96% !important;display: block;margin: 0px auto}

#ClubSer ul{padding:0 0 0 30px; margin:0 0 1%}
#ClubSer li{color:#fff; float:left; width:180px; margin-right:5%; text-align:center; font-size:120%; font-weight:bold; height:160px}
#ClubSer li img{display:block; margin:0 auto 5px}
#ClubSer li.sinMargen{margin-right:0}
#ClubSer li a{color:#fff; text-decoration:underline; font-weight:bold}

#ofrecer h3, #funcionar h3{margin-bottom:5px!important; font-size:180%}
.queA,.queB{float:left; width:28%;min-width:260px;margin:0 0 0 4%;line-height:120%}
#funcionar a{color:#fff; text-decoration:underline}
#clubNoticias{margin-top:40px; color:#554a42}
#clubNoticias h2{ color:#5f4d41; margin:20px 0; font-size:180%; font-weight:normal; text-transform:none!important}

/*----Club THB formulario suscripción ---*/
#colDcha.sinMargenTop, #colIzq.sinMargenTop{margin-top:1px!important}
#formulario, #fbaja, .gracias{width:100%;font-size:90%}
.f2{width:40%;margin:3% auto;color:#99887e}
#formulario label, #fbaja label{display:block;line-height:140%; margin:0 0 1% 0; color:#000}
#formulario input, #fbaja input, #formulario textarea{border-style:none;background-color:#fff;border:1px solid #fff;padding:2%;color:#000;width:100%;margin-bottom:3%;list-style-type:none; box-sizing: border-box}
#formulario select{width: 100%; padding: 2%; margin-bottom: 3%; border-radius: 5px; border: 1px solid #fff; box-sizing: border-box}
#formulario textarea{height:70px;margin-bottom:10px}
#formulario .boton, #fbaja .boton{color:#fff;border:1px solid #99887e;display:block;margin:15px auto;background-color:#99887e;cursor:pointer!important;padding:8px 10px; font-weight:bold}
.boton:hover{background-color:#000!important}
.checklabel{margin:5% 0}
#formulario .check, #formCompartir .check, #form .check{margin-right:5px;clear:both;width:15px;border-style:none;float:left;color:#ccc; margin-top:1%}
.m2{float:left; width:47%; margin-right:3%}
.m3{float:right; width:47%}

#formulario a{color:#99887e;border-bottom:1px dotted #99887e}
.gracias a,.graciasFr a{display:block;margin:3% 0;text-decoration:underline;color:#99887e;border-bottom:1px dotted #99887e}
#formulario a:hover,.gracias a:hover,.graciasFr a:hover{border-bottom:1px solid #99887e}
#formulario p.pd { font-size:90%!important}
#cuadro{background-color:#e2dbd5;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px}
#cuadro{background-color:#e2dbd5;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px}
#cuadro p{margin:2%}


/*-- Acceso club thb -----*/
.clubIntro{font:400 140% 'Bebas Neue',sans-serif; font-style:normal; text-align: center;}


#clubRegistro{padding-right:52%; background: url(../img/club-de-cata-THB.jpg) 100% top no-repeat; margin-bottom:30px}
#clubRegistro h2, h2.clubRegistroh2,#clubAcceso h2{color:#444; margin-bottom:20px; font-size:180%; text-transform:none}
#clubRegistro h3, p.clubRegistroh3, #clubAcceso h3{font:100% Arial, Helvetica, sans-serif; margin-bottom:30px; color:#444}
#clubRegistro h3 strong{display:block; margin-top:25px}
#clubAcceso p{font-size:130%}
#clubRegistro a,.boton{color:#fff;background-color:#222;-moz-border-radius:8px;border-radius:8px;text-align:center; padding:3% 10%; font-size:110%; font-weight:bold; margin:0 0 0 2%}
#clubRegistro a:hover, boton:hover{background-color:#000}
.clubRegistroA{ padding-top:20px; width:100%}
.clubRegistroA.sinBorde{border:none}
.clubRegistroA li{display:block; margin-bottom:20px}
.clubRegistroA li strong{display:block; font-size:180%;color:#222}

#clubAcceso{margin:40px 0 20px; display:block; clear:both}
.acceso{width:50%; background-color:#e2dbd5; padding: 3% 5%; color:#000; float:left}
.acceso h3{font-size:190%}
.acceso label{display:block; margin-bottom:2%; font-weight:bold}
.acceso input{padding:3%; border:1px solid #e2dbd5;-moz-border-radius:5px;border-radius:5px; display:block; width:90%; margin-bottom:2%; background-color:#fff}
.acceso input.checkAcc{display: inline; width:15px; margin-bottom:0}
.acceso label.checklabelAcc{display: inline}
.acceso .botton{margin-top:25px;width:97%; background-color:#000}
.acceso .botton:hover{background-color:#3d3632!important; color:#fff}
#faccesotienda{margin-bottom:15px}

.info{float:left; margin-left:8%; width:30%}
.info h3{margin-bottom:10px!important}
#clubAcceso .info p{line-height:145%; margin-bottom:10px; color:#99887e; font-size:100%}

/*- Encontrar local ideal. Septiembre 2018-*/
#cerveza-ideal,#ci-resultados { padding:30px 0 30px; font-size: 110%}
#ci-resultados {text-align: center;}
#cerveza-ideal h2, #ci-resultados h2{ font-size: 250%; color: #222; text-align: center;}
#cerveza-ideal h3{color:#7a685b;font-size: 180%; background: #e0dbd7 url(../img/ico-ci-local.png) center 60px no-repeat; background-size: 133px; width: 45%; min-height: 220px; text-align: center; padding:2rem 3%; margin: 0}
#cerveza-ideal p { text-align: center;}

.ci-puntos {text-align: center; background: url(../img/cerveza-ideal-linea.gif) center 45px repeat-x; margin: 3rem auto;}
.ci-puntos li{ display: inline-block; vertical-align: top; margin:2% 2% 1%; font:400 140% 'Bebas Neue',sans-serif; width: 11%; color: #dad5d1; letter-spacing:1px}

.ci-puntos li:first-child{ margin-left: 0}
.ci-puntos li:last-child{ margin-right: 0}
.ci-puntos li span{ display: block;border:4px solid #dad5d1; border-radius: 40px; width: 60px; height: 60px; margin: 0 auto 3px;line-height: 0; padding-top: 25px; font-weight: 700; background: #fff}
.ci-puntos li.ci-activo{color:#7a685b}
.ci-puntos li.ci-activo span{border-color:#7a685b}

.ci-local { padding: 4rem 0}

#cerveza-ideal article{width:70%; padding:0; background: #81685a;  margin:30px auto; color: #222;display: -webkit-flex;display:flex;-webkit-flex-flow: row;flex-flow: row; border-radius: 10px; }
#cerveza-ideal article ul{margin: 5%}
#cerveza-ideal article li{line-height: 160%; color: #fff; font:400 110% 'Bebas Neue',sans-serif!important;  letter-spacing: 1px}
#cerveza-ideal .ci-tueste h3{ background-image: url(../img/tueste-malta.png)}
#cerveza-ideal .ci-alcohol h3{ background-image: url(../img/grado-alcohol.png)}
#cerveza-ideal .ci-amargor h3{ background-image: url(../img/lupulo-cerveza.png)}
#cerveza-ideal .ci-pais h3{ background-image: url(../img/mundo.png)}
#cerveza-ideal .ci-estilo h3{ background-image: url(../img/estilos-cerveza.png)}

.ci-nav { text-align: center; margin: 0 auto}
.ci-ant, .ci-sig {background: #343434 url(../img/ico-ant.png) 15px center no-repeat; color: #fff; padding: 15px 25px 15px 50px; border-radius: 5px;font:400 140% 'Bebas Neue',sans-serif; display: inline-block; letter-spacing: 1px; border: none}
.ci-sig {background: #343434 url(../img/ico-sig.png) 90% center no-repeat;padding: 15px 50px 15px 25px;; margin-left: 2%}
.ci-ant:hover, .ci-sig:hover {background-color: #000}

#ci-resultados header{text-align: center}
#ci-resultados article { width:19%; display: inline-block; vertical-align: top; margin:0 0 15px 1%; padding: 2%;-webkit-box-shadow: 0px 0px 19px -5px rgba(129,104,90,1);-moz-box-shadow: 0px 0px 19px -5px rgba(129,104,90,1);box-shadow: 0px 0px 19px -5px rgba(129,104,90,1); text-align: left;}

#ci-resultados article img { height:150px; margin: 0 auto; display: block; text-align: center}
#ci-resultados article a p { color: #222;margin-bottom: 0px}
#ci-resultados article a p:last-child { margin-bottom:5px}
#ci-resultados ul { margin: 30px 0 40px; text-align: center}
#ci-resultados li { display: inline-block; vertical-align: top; margin:0 2% 0px 0;font:400 100% 'Bebas Neue',sans-serif;color: #81685a; letter-spacing: 1px; width: 100px}
#ci-resultados li:last-child {margin-right: 0}
#ci-resultados li img{ width:60px; display: block; margin:0 auto 5px}

.ci-cerveza h3 { font-size: 130%; min-height:80px; margin-bottom: 0}
.txtAnimo{ display: block; font: 600 130% Segoe, "Segoe UI", Arial; text-align: center; border-top: 1px solid #ddd; padding: 20px 0 0; margin-top: 20px}
.txtAnimo2{text-align: center; font: 400 110% Segoe, "Segoe UI", Arial}
.txtAnimo2 strong{ font-weight: 500}

/*- formulario compartir opiniones -*/
#formCompartir{
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	background-color:#fff;
	width:93%;
	border:1px solid #e2dbd5;
	margin:2% 0;padding:3%; overflow:auto;
	font-size:100%
	}
.formA,.formB{float:left;width:46%}.formA{margin-right:5%}
#formCompartir label{width:95%;margin-bottom:1px} .noFondo{color:#fff}
#formCompartir input, #formCompartir textarea{border: 1px solid #e2dbd5;padding:4px;color:#000;width:98%;margin-bottom:5px;list-style-type:none}
#formCompartir textarea{height:150px; background-color:#fff!important}
#formCompartir p.est{height:16px;overflow:hidden;margin:10px 0}
#formCompartir p.est img{margin-right:5px}
#formCompartir.Comentario{font-size:120%;background:#306c78 url(../img/housebirito-compartir-cerveza.gif) 15px 30px no-repeat;padding:80px 0 0 300px; margin-bottom:0; width:55%; color:#fff; height:300px}

/* -- Formulario -- */
/*estilos de formulario */

.form{color:#333;background-color:#ddd; font-size:110%; margin: 0 auto; max-width: 1000px; width: 90%}

.form h2{margin:10px 0 20px; font-size:180%}
.formAsociacion{padding:20px 5%;width:80%;background-color:#99887e; color:#fff; margin:30px auto; clear:both; border-radius:10px}
.pd { font-size:80%; font-style:italic; color:#222}
#form label{margin-bottom:8px; padding-bottom:10px; color:#fff}
#form a{color:#eee}
#form input, #form textarea{border:#222;background-color:#fff;color:#222;padding:12px 8px;width:98%;margin-bottom:10px; border-radius:3px}
#form #chkAcepto{background-color:#777264}
#form input.boton{margin:4% auto; padding:2% 0; font-size:120%; cursor:pointer; border-radius:10px}
#form input.botonAsoc{margin:4% 25%; padding:2% 0; font-size:120%; width:250px; cursor:pointer; border-radius:10px}
#form input.botonAsoc:hover{background-color:#000; color:#fff}


.graciasFr p{color:#fff;font-size:110%;width:90%;float:none}
#form input#emprendedor, #form input#inversor, #form input#otro{border:#fff;background-color:#fff;color:#000;padding:4px;width:15px;margin:0 5px 20px 0; float:none; display:inline-block}
.txtPerfil{display:inline; margin-right:5%}
.form.formGracias p{ color:#222!important; font-size:120%!important}
 
/* formualrio emprender */
.formEmprender{padding:20px 5%;background-color:#222; color:#fff; margin:30px auto; clear:both; border-radius:12px}
.formEmprender .pd { font-size:80%; font-style:italic; color:#ddd}

#form ,formEmprender label{margin-bottom:8px; padding-bottom:10px}
#form label{color:#fff}
#form a{color:#eee}
#form input, #form textarea{border:#fff;background-color:#fff;color:#222;padding:8px;width:98%;margin:6px 0 18px}
#form #chkAcepto{background-color:#777264}
#form input.boton{margin:4% auto; padding:2% 0; font-size:120%; cursor:pointer; border-radius:10px}
#form input.botonAsoc{margin:4% 25%; padding:2% 0; font-size:120%; width:250px; cursor:pointer; border-radius:10px}
#form input.botonAsoc:hover{background-color:#000; color:#fff}
.graciasFr p{color:#fff;font-size:110%;width:90%;float:none}

/* -- Formulario -- */
/*estilos de formulario */
#f1.form{
    margin-top: 3rem;
	background: none;
    max-width: 800px;
	}
#f1 p{font-size:90%; width:100%}	
.graciasFr p{color:#fff;font-size:110%;width:90%;float:none}


/* =========================================================
   THB - CÓMO FUNCIONAMOS (BLOQUE ÚNICO ESTABLE)
   - Hero full width bajo pico
   - 2 columnas (img + texto) con flex (sin grid)
   - Alterna izq/der
   - En móvil: foto arriba
   - Imágenes sin corte (contain) y tamaño controlado
   ========================================================= */

/* HERO full width bajo el pico */
.thb-como #imgCervTHB.thb-hero-img, .thb-como #imgCerv.thb-hero-img{
  height: clamp(220px, 34vw, 440px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
  margin-top: -50px;
}
.thb-como #imgCervTHB.thb-hero-img{ background: #000 url(../img/c-cerveceria-thb.jpg) center / cover no-repeat;}
.thb-como #imgFr.thb-hero-img{background:#fff url(../img/thb-asociados.jpg) center / cover no-repeat;}
.thb-como #imgAcc.thb-hero-img{background:#fff url(../img/c-aviso-legal.jpg) center / cover no-repeat;}
.thb-como #imgCerv.thb-hero-img{background:#fff url(../img/c-cerveceria.jpg) center / cover no-repeat;}
.thb-como #imgCocks.thb-hero-img{background:#fff url(../img/c-cockstation.jpg) center / cover no-repeat;}
.thb-como #imgNot.thb-hero-img{background:#fff url(../img/c-noticias.gif) center / cover no-repeat;}
.thb-como #imgContac.thb-hero-img{background:#fff url(../img/c-contacto.jpg) center / cover no-repeat;}

/* Tarjetas */
.thb-como .legal-wrap .colIzq3{
  width: 100% !important;
  max-width: none !important;
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin: 0 0 22px 0;
  padding: 22px;
}

/* Alternancia */
.thb-como .legal-wrap .colIzq3:nth-of-type(even){
  flex-direction: row-reverse;
}

/* Columna imagen: “marco” fijo para que todos los bloques queden iguales */
.thb-como .legal-wrap .colIzq3 > img{
  flex: 1 1 50%;
  width: 100% !important;
  height: 100%;
  max-height: 320px;          /* controla el tamaño */
  object-fit: contain;        /* no se corta */
  display: block;
  margin: 0 !important;
  padding: 0;                 /* CLAVE: sin padding */
  background: transparent;    /* CLAVE */
  border-radius: 14px;
}

/* Columna texto */
.thb-como .legal-wrap .colIzq3 > .thb-txt{
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;    
}

/* Evita el “p{float:left}” global solo aquí */
.thb-como .legal-wrap .colIzq3 > .thb-txt p{
  width: auto !important;
  margin: 0 0 10px 0;
}

.thb-como .legal-wrap .colIzq3 > .thb-txt h2{
  margin: 0 0 10px 0;
}

.caja_estrecha { width: 80%; margin: 0 auto}
.tiendaMigas{margin-bottom:50px; display:block; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; padding: 1rem 0}
.tiendaMigas a:hover{text-decoration:underline}
#tiendaRegistro a, .tiendaMigas a{ text-decoration: none!important;}

/* Responsive */
@media (max-width: 820px){
    .thb-como .legal-wrap .colIzq3 {padding: 22px 0;}
  .thb-como .legal-wrap .colIzq3,
  .thb-como .legal-wrap .colIzq3:nth-of-type(even){
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .thb-como .legal-wrap .colIzq3 > img{
    width: 100% !important;
    height: auto !important;    /* control de “tocho” en móvil */
    flex: 0 0 auto;
  }
    /* Texto: misma altura que la imagen */
  .thb-como .legal-wrap .colIzq3 > .thb-txt{
    height: auto; 
    display: flex;
    flex-direction: column;
    justify-content: center;    /* centrado vertical */
    padding: 16px 0;
  }
}



/* =========================================================
   PREFOOTER + FOOTER THB (override final)
   Pegar al FINAL del CSS
   ========================================================= */

/* Resetea el footer viejo (tenías #footer con fondo blanco + imagen) */
#footer.thb-footer{
  background: #000 !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- PREFOOTER (claro) ---------- */
.thb-prefooter{
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  padding: 72px 0 92px;
  text-align: center;
  overflow: visible;
}

/* Pico BLANCO hacia el footer negro (se verá siempre) */
.thb-prefooter::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-84px;             /* cuánto entra en el footer */
  width:100%;
  height:84px;
  background:#f3f3f3;       /* mismo tono del final del degradado */
  /* curva suave (más “redondeada” que el triángulo) */
  clip-path: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,40 C250,110 450,120 600,120 C750,120 950,110 1200,40 L1200,0 Z' fill='white'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,40 C250,110 450,120 600,120 C750,120 950,110 1200,40 L1200,0 Z' fill='white'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}  

.thb-prefooter__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
  z-index: 3;
}

.thb-prefooter__content h2{
  margin: 0 0 10px;
  font: 700 34px/1.1 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:#000;
}

.thb-prefooter__content p{
  margin: 0 auto 22px;
  max-width: 720px;
  font: 400 16px/1.6 Arial, sans-serif;
  color:#111;
}

.thb-prefooter__cta{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.thb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  font: 700 16px/1.2 'Roboto Condensed', Arial, sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration:none !important;
  border: 2px solid transparent;
}

.thb-btn--primary{
  background:#f5c400;
  color:#000!important;
}

.thb-btn--ghost{
  background: transparent;
  color:#000;
  border-color:#bdbdbd;
}

.thb-btn:hover{ transform: translateY(-1px); }

/* RRSS */
.thb-prefooter__rrss{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin: 2rem auto;
}

.thb-rrss{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e9e9e9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
}

.thb-rrss svg{
  width: 18px;
  height: 18px;
  fill: #000;
  opacity: .9;
}

.thb-rrss:hover{ background:#dedede; }

/* Logo centrado: sobre NEGRO y solapando el pico */
.thb-prefooter__logo{
  position:absolute;
  left:50%;
  bottom:-64px;            /* lo baja hacia el footer negro */
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 5;
 }

.thb-prefooter__logo img{
  width: 100px;
  height: auto;
  display:block;
}

/* ---------- FOOTER (negro) ---------- */
.thb-footer{
  background:#000;
  color:#fff;
  padding: 92px 0 18px; 
  position: relative;
}
.thb-footer::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:100%;
  height:2px;
  background:#000;
  z-index:1;
}

.thb-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 22px 2rem;
}

/* Grid locales */
.thb-footer__locals{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  padding: 2rem 0;
  border-top: none; 
}

.thb-localMini__title{
  margin: 0 0 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.thb-localMini__title a{
  color:#fff !important;
  text-decoration:none !important;  
  font: 700 16px/1.2 'Roboto Condensed', Arial, sans-serif;

}

.thb-localMini__title a:hover{ text-decoration: underline !important; }

.thb-localMini__row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.thb-icoMini{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
}

.thb-icoMini svg{
  width: 18px;
  height: 18px;
  fill:#fff;
  opacity: .9;
}

.thb-localMini__text{
  font: 400 14px/1.4 "Roboto Condensed", sans-serif;
  color:#fff;
    opacity: .90;
}

.thb-localMini__city{
  display:block;           /* la localidad debajo de la dirección */
  margin-top: 2px;
}

/* Nota global horarios especiales */
.thb-footer__note{
  margin: 22px 0 0;
  text-align:center;
  font: 400 13px/1.4 Arial, sans-serif;
  opacity: .75;
}

/* Legales: más pequeños + más aire + sin azul */
.thb-footer__legal{
  margin-top: 26px;
  padding-top: 18px;
  text-align:center;
}

.thb-footer__legalWrap{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 10px;               /* separación real entre items */
  font: 400 12.5px/1.6 Roboto, sans-serif;
    text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .9;
}

.thb-footer__legalWrap a{
  color:#fff !important;
  text-decoration:none;
  }

.thb-footer__legalWrap a:hover{
    text-decoration: underline;
}

.thb-dot{ opacity:.55; }

/* Responsive */
@media (max-width: 992px){
  .thb-footer__locals{ 
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 600px; margin: 0 auto;
      padding-left: 5%;
    gap:0;}
}

@media (max-width: 640px){
  .thb-prefooter{ padding: 0px 0 86px; }
  .thb-prefooter__content h2{ font-size: 28px; }
  .thb-footer__locals{ grid-template-columns: 1fr; }
}

/* =========================================
   FOOTER LOCALES - ACORDEÓN MÓVIL
   ========================================= */

/* Por defecto: se ve desktop y se oculta móvil */
.thb-footer__locals--mobile { display: none; }

/* MÓVIL: mostrar acordeón y ocultar grid */
@media (max-width: 640px){
  .thb-footer__locals--desktop { display: none; }
  .thb-footer__locals--mobile  { display: grid; grid-template-columns: 1fr; gap: 12px; }

  /* Bloque acordeón */
  .thb-localAcc{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
  }

  .thb-localAcc__sum{
    list-style: none;
    cursor: pointer;
    padding: 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Quitar triángulo nativo */
  .thb-localAcc__sum::-webkit-details-marker{ display:none; }

  .thb-localAcc__title{
    font: 700 16px/1.2 'Roboto Condensed', Arial, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
  }

  /* “chevron” */
  .thb-localAcc__chev{
    width: 10px; height: 10px;
    border-right: 2px solid rgba(255,255,255,.8);
    border-bottom: 2px solid rgba(255,255,255,.8);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex: 0 0 auto;
    margin-top: -2px;
  }
  .thb-localAcc[open] .thb-localAcc__chev{
    transform: rotate(225deg);
    margin-top: 2px;
  }

  .thb-localAcc__body{
    padding: 0 14px 14px;
  }

  .thb-localAcc__more{
    display: inline-block;
    margin-top: 10px;
    color: #fff !important;
    text-decoration: underline;
    font: 700 13px/1.4 Arial, sans-serif;
    opacity: .9;
  }
}


/*--------------------
      Cookies 
--------------------*/
.cookies{width:100%;background-color:#f2f1ef;margin:8px auto 0;padding:5px 0;display:none; position:fixed; bottom:0; border-top:3px solid #fff; z-index:999}
.cookiesCaja{margin:0 auto;background-color:#eee;color:#666;width:990px;font-size:90%}
p.cookiesTxt{float:left; width:85%}
p.cookiesBot{display:block; float:right; width:80px; margin-top:5px; text-align:center;padding:5px 0;color:#fff!important;font-weight:bold;text-decoration:none!important;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius:5px}
p.cookiesBot a{color:#fff; text-decoration:none; text-transform:uppercase}


/* =========================
   LEGAL
   ========================= */

:root{
  --legal-max: 1280px;
  --legal-pad: 32px;
}

.legal{
  background:#fff;
  color:#111;
}

/* HERO */
.legal-hero, .cabeceras-hero{
  background:#000;
  position: relative;
  padding:3rem 0 3rem;
  --pico: 14px; /* más discreto */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--pico)),
    50% 100%,
    0 calc(100% - var(--pico))
  );
}

.legal-hero__inner{
  max-width: var(--legal-max);
  margin: 0 auto;
  padding: 0 var(--legal-pad);
}

.legal-title{
  margin: 0;
  text-align: center;
  color: #fff;
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(2rem, 3.2vw, 2rem);
  letter-spacing: 0.04em;
}

@media only screen and (max-width: 765px) {
.legal-hero, .cabeceras-hero{
  background:#ddd;
  padding:2rem 0 2rem;
  margin-bottom: 2rem;
}
    .legal-title{
    color: #111;
}

}
/* CONTENEDOR GENERAL */
.legal-wrap{
  max-width: var(--legal-max);
  margin: 0 auto;
  padding: 38px var(--legal-pad) 80px;
  position: relative;
}

/* LAYOUT SIN GRID */
.legal-layout{
  display: flex;
  gap: 56px;
  align-items: flex-start; 
}

/* ASIDE */
.legal-aside{
  flex: 0 0 320px; 
}

.legal-aside__box{
  position: sticky;
  top: 120px;
  padding: 16px;
}

/* Título aside */
.legal-aside__kicker{
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 1rem;
}

/* Nav */
.legal-nav{
  display:flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 14px;
}

.legal-nav__link{
  display:block;
  padding: 6px 0;
  border-radius: 0;
  text-decoration: none;
  font-weight: 400;
  color: #555; 
  background: none;
}
.legal-nav__link a:link{
  color: #555!important; 
}
.legal-nav__link:hover{
  color: #111;
  background: none;
}

.legal-nav__link.is-active{
  color: #111;
  font-weight: 600;
}

.legal-aside__sep{
  border: 0;
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 14px 0;
}

/* Meta */
.legal-meta{
  margin: 0;
  font-size: .92rem;
}

.legal-meta__row{
  display:flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.legal-meta__row:last-child{ border-bottom: 0; }

.legal-meta dt{
  width: 64px;
  font-weight: 800;
  opacity: .65;
}

.legal-meta dd{
  margin: 0;
}

.legal-meta a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.25);
  text-underline-offset: 2px;
}
.legal-meta a:hover{
  text-decoration-color: rgba(0,0,0,.55);
}

/* CONTENIDO */
.legal-content{
  flex: 1 1 auto;
  min-width: 0; /* evita desbordes raros */
  margin: 0;
  padding: 0;
}

/* Tipografía */
.legal-content h2{
  margin: 0 0 10px;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legal-content p{
  margin: 0 0 14px;
  line-height: 1.7;
  max-width: 95ch;
font-size: 1rem;
    color:#555;
}

/* Listas */
.legal-content ul{margin: 14px 0 22px;padding: 0;list-style: none;max-width: 95ch;}
.legal-content li{position: relative; padding-left: 26px;margin: 0 0 10px;line-height: 1.65;font-size: 1rem;color:#555;}
.legal-content li::before{content: "–";position: absolute;left: 0;top: 0;font-weight: 800;}

/* Responsive */
@media (max-width: 1100px){
  .legal-layout{ gap: 32px; }
  .legal-aside{ flex-basis: 300px; }
}

@media (max-width: 992px){
  .legal-wrap{ padding: 2rem 18px 60px; }
  .legal-layout{flex-direction: column;gap: 18px;  }
  .legal-aside{ flex-basis: auto;display: none }
  .legal-aside__box{ position: static; }
}
@media (max-width: 765px){
  .legal-wrap{ padding: 0rem 18px 60px; }
}

/*----------------------*/
div.listadoFranquicia{width:100%!important;max-width:100%!important}
div.listadoFranquicia ul.cervezas li.cerveza{margin:0 2.2% 2% 2%!important}
#listadoCervezas div.cervezaslista{float:left;width:100%;border-bottom: 1px solid #e2dbd5;padding: 10px 0}
#listadoCervezas div.cervezaslista p{margin:0}
#listadoCervezas div.cervezaslista div.foto{
	float:left;
	margin-right:20px;
	width:144px;
	min-height:100px;
	background-image:url(../img/fondo-cerveza.gif);
	background-repeat:no-repeat;
	text-align:center;
}
#listadoCervezas div.cervezaslista div.foto img{margin: 15px 0 0 0}
#listadoCervezas div.cervezaslista h3{margin-bottom:0}
#listadoCervezas div.cervezaslista h3 a{font: 400 140% "Bebas Neue",sans-serif;color:#654020}
#listadoCervezas div.cervezaslista div.texto{float:left;width:550px}
#listadoCervezas div.cervezaslista div.texto strong{color:#654020}
#cervezas_list span.comment{margin-left: 6px}
#cervezas_list p.tamano{color:#818181}
#cervezas_list div.cervezaslista div.foto{width:15%;background-image:none;	margin-right:0}
#cervezas_list div.cervezaslista div.foto img{margin-top:0}
#cervezas_list div.cervezaslista div.bloque1{float:left;width:25%}
#cervezas_list div.cervezaslista div.bloque1 h3{padding-top:35px}
#cervezas_list div.cervezaslista div.bloque1 h3 a{font-size:20px}
#cervezas_list div.cervezaslista div.bloque1 a{color:#499dd3}
#cervezas_list div.cervezaslista div.bloque2{float:left;width:45%;display: -webkit-flex;display: flex;-webkit-align-items:center;align-items: center;height: 110px}
#cervezas_list div.cervezaslista div.bloque2 span{background-color:#e2dbd5;padding: 8px 12px;border-radius: 6px;margin: 0 4px}
#cervezas_list div.cervezaslista div.bloque2 span.span1{text-transform:uppercase}
#cervezas_list div.cervezaslista div.bloque3{float:right;width:14%;display: -webkit-flex;display: flex;-webkit-align-items:center;align-items: center;height: 110px}
#cervezas_list div.cervezaslista div.bloque3 a{background-color:#499dd3;color:#fff;font-size:100%;	display:block;padding: 5px 10px}
#head p.h1 img{z-index:9999}
#headerclubcont{position:absolute;width:100%;z-index:150}
#headerclubcont ul{float:right;margin-right: 5px}
#headerclubcont ul li{float:left;display:inline-block;color:#9d823d;padding: 6px 0;margin: 0 0 0 10px}
#headerclubcont ul li a{display:block;color:#fff}
#headerclubcont ul li.tienda{background-color:#9d823d}
#headerclubcont ul li.tienda a{color:#000;padding: 0 10px}
#headerclub{width:100%;max-width: 995px;margin: auto}

/************************************************/
/* All Mobile Sizes (devices and browser)*/
@media only screen and (max-width: 992px){
#head{max-width:100%;}
#head h1,p.h1{ width:90px; left:50px; top:-5px}
#head h1 img,p.h1 img{ width:100%; }
.menuSup {margin-top:18px; margin-left: 5%; width: 90% }
}
@media only screen and (min-width: 768px) and (max-width: 992px){


/* Carta de cervezas */
	#cartaCerve{width:60%; min-width:450px}
	#cartaCerve li{margin-right:2%}
	#cartaCerve li.activa{padding:0.2% 2% 0}
	#cartaCerve li a{padding:0.2% 2% 0}
	
	#bannerExperiencias{height:220px; margin:0 15px 0 0; padding:10px 20px 0 220px}
	#bannerExperiencias h3{font-size:130%; line-height:80%}
	#bannerExperiencias h3 span{font:700 120% 'Roboto Condensed', sans-serif}
	#bannerExperiencias a{background-color:#337f8f; color:#fff; padding:8px; margin:15px auto 0; display:block; width:180px; text-align:center}

	/*Ficha cerveza*/
	#migasFicha{padding:0 0 2rem 0; margin:0 0 2rem 0; width:100%; min-width:290px; }
	#foto,#datos-cerveza,ul.ficha{float:none; width:99%; min-width:290px; clear:both}
	ul.ficha,ul.tamAlc{margin-left:2%}
    .fotoFicha img{ width: 50%; }
	h2#titMovil,p#pais{display:block; clear:both; color:#000; text-align:center}
	#datos-cerveza h2{display:none}
	#redes{width:99%;min-width:299px; margin:20px 0 25px 2%; clear:both}
	.fb-like,.b-twitter,.g-plusone,.fb-share-button{width:90px}
	.g-plusone{width:60px}
	.fb-like, #fb-like,.fb-share-button,#fb-root{width:110px}
	#infoA,#infoB,div.bloque-comentario-derecha,div.bloque-comentario-izquierda,#compartirB,#compartirA{width:90%; min-width:90%; margin: 0 auto; float: none}
    
	p.pais{display:none}
	p#icoLupa{left:220px;top:210px; display: none;}
	#datos-cerveza p.comment{font-size:90%; margin: 0px 0 0 5%}

/*----- THB locales ---*/
.redes{top:50px; width:170px}
.redes li.fac{width:90px; text-align:left}
#cerveceria-mapa{float:left;min-width:400px; width:60%;margin:3% 0 2% 0}
.columnaB{float:left;min-width:260px; width:30%;margin:3% 0 0 3%;color:#000}
.columnaB h2,.columnaB ul{margin-bottom:10px}
#imgContac{background:#fff url(../img/c-contacto.jpg) center top no-repeat; height:239px}

.datosCerv{width:30%; min-width: inherit}
#contenido .datosCerv h2{font-size:120%} 
#contenido .datosCerv p{font-size:90%}
#contenido .datosCerv p strong{font:700 120% 'Roboto Condensed', Segoe, "Segoe UI",sans-serif; text-transform:uppercase}
#cerveceria-mapa.mapCerv{width:65%; min-width:320px}
.fotoCerv{width:65%; margin-top:15px;height:320px}
.fotoCerv img{width:49%}
.fotoCerv_dcha{float:right}
#tripadvisor-opiniones{width:28%;min-width: inherit; padding:0!important}

/*Franquicia*/
	#imgMm{margin-left:15px}
	.THB_asociado figure { width:42%; margin:-10px 0 0 2%;-webkit-box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38);-moz-box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38);box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg) }
	
/*Club THB*/
	.queA,.queB{float:none; width:95%;min-width:650px;margin:0 0 2%}
	

/*Noticias*/
	#imgNot{background:#fff url(../img/c-noticias-tablet.jpg) -10px 24px; background-repeat:no-repeat; height:200px}
	img.noticiaHousebirito{height:250px; padding-top:25px}
	.noticiaHousebirito{}
	select.locales, ul.categorias{float:none;margin:0 0 45px; clear:both}
	#categorias{margin:2% 0 0 0}
	#categorias h3{margin:2% 0 3px;padding:0;font-size:180%}
	#categorias h3 strong{display:none}
	ul.categorias li{margin:3px 2% 2% 0}
	#section{float:none; width:100%;min-width:290px; min-height:inherit; margin:0; padding:0}
	#aside{display:none}
	
	.noticiaFoto{width:35%; margin: 0 15px 15px 0}
	.noticiaFoto img{width:100%}
	.textoNoticia{width:62%;margin-bottom:25px}
	.noticiaGaleria{float:none;margin:5px 0 0 0}

/*-------- Noticias ficha ---------*/
	.noticiaBloqueFicha{border-top:1px dashed #999; padding:3% 0 0}
	.seguirMovil{display:block; margin:2% 0 0}
	
/*--------Seccion eventos Ficha-------------*/
	.EventosFicha{margin:0 0 2% 0;padding:70px 0 1%;background:#009999 url(../img/ficha-calendario-eventos.gif) center 8px no-repeat}
	.tablaEventosFicha{padding:10px 1% 5px; margin:0 2%}
	.tablaEventosFicha p{color:#000; font-size:90%}
	.tablaEventosFicha p strong span{background-color: #009999; color:#fff; padding:2px 5px}
	p.evenFecha{font-size:80%;font-weight:bold;text-transform:uppercase;padding:0 5px;background-color:#000; color:#fff; display:block; width:170px}
	.caja{margin:2%; padding:2%}
	.EventosFicha p.eventosLink a{color:#000; margin-left:2%}

/* -- Caja suscribirse club THB --*/
	#emailmovil{display:none}
	.email{background:#e2dbd5 none;padding:2% 3%; margin-top:2%}
	.email p{margin-bottom:5px}
	.emailBoton a{position: static}


#cervezas_list div.cervezaslista div.bloque3{display: none}
.AsocContact strong{ display:block; margin:0 auto 10px}
}

@media only screen and (max-width: 850px){
.nuestraCarta { display:block; clear:both; border:1px solid #eee; border-radius:3px; background-color:#e4dfdc; padding:10px 3%; margin-top:20px; margin-bottom:15px}
.nuestraCarta h2{ text-align:center; border-bottom:1px solid #444; padding-bottom:8px; font-size:150%}
.nuestraCarta ul { column-count:4; column-gap:0.5em}
.nuestraCarta li {  background:#4b443e url(../img/download.png) 95% center no-repeat; color:#fff; border-radius:3px; margin-bottom:5px; text-transform:uppercase;font:400 100% 'Oswald', Arial;font-size:90%;}
.nuestraCarta li a{padding:5px; font:400 100% 'Oswald', Arial; color:#fff; display:block}
.nuestraCarta li a:hover{ background:#000 url(../img/download.png) 95% center no-repeat}
}

@media only screen and (max-width: 765px){

	#contenido.titular,#contenido.eventos{background-position:center -35px}	
	#contenido.titular h1{font:180% 'Bebas Neue',sans-serif; margin-left:2%}
	#cab,#cab2,#cab3,#cab4{height:60px}
	#contenido.titular2,#contenido.titular3,#contenido.titular4{background:#fff url(../img/fondo-cabecera-int.gif) center 0 no-repeat}
	#contenido.titular4{background:#fff url(../img/fondo-cabecera-int.gif) center -3px no-repeat}
	#contenido #cab2 h1,#contenido #cab3 h1,#contenido #cab4 h1{font-size:160%;width:99%; min-width:400px; margin:0; overflow:hidden}
	#contenido.titular3{background:#fff url(../img/fondo-cabecera-int.gif) center -20px no-repeat}
	#contenido.titular3 h1{padding-top:10px; font-size:180%!important}
	#contenido #cab h1{ margin-top:18px;font-size:180%;width:90%; min-width:160px; overflow:hidden}		
	#contenido #cab4 h1{padding:27px 0 0;}
	#colIzq,#section,#form,.graciasFr,#colDcha,#aside, #fi,.colOpiniones,.formA,.formB{padding:0 2%;width:97%; max-width:745px;float:none; clear:both; font-size:90%}
	#colDcha,#aside{margin:0; max-width:755px; min-height:inherit}
	#colIzq h2{margin:3% 0 5%; font:105% Arial, Helvetica, sans-serif}
	#colDcha h3{font:bold 110% Arial, Helvetica, sans-serif}
	
/*--- Locales -- */	
	#cerveceria-mapa{float:none; clear:both;height:250px;margin:25px 0 2%;padding:0;width:99%;min-width:400px; overflow:hidden}
	.columnaB{	margin:0;padding:0;	width:99%; min-width:400px;	float:none; clear:both;	} 
	.columnaB h2, .columnaB ul{margin:2%}
	#imgContac{display:none}
	
/*Franquicia*/
#imgMm{margin-left:15px}
#imgMapa{width:70%; display:block; text-align:center}
.asociateBloque,.asociateBloqueB{display:block; width:90%;margin:15px auto; min-height: inherit; overflow: auto}
.asociateBloque h3{font-size:160% }	
.THB_asociado { padding:20px 3%; margin:30px auto }
.THB_asociado figure { padding:12px; width:90%; display:block;margin:20px auto;-webkit-box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38);-moz-box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38);box-shadow: 0px 0px 12px -6px rgba(0,0,0,0.38); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg) }
.THB_asociado .p1{ width:100%!important; font-size:110%!important}
.THB_asociado .p2{ margin-top:20px; display:block}
.AsocContact strong{ display:block; margin:0 auto 10px}
	
/* Carta*/
	.cartaComerFoto{display:inline-block; vertical-align:top; width:35%; margin-top:30px}

/*Lista cervezas*/
	#listadoCervezas{width:68%; max-width:300; margin-left:0 }
	#listadoCervezas h2{padding:0 2%; font:bold 90%Arial, Helvetica, sans-serif; color:#000}
	#cartaCerve{width:59%; min-width:270px; margin:2.2% 0; display:none; background-color:#F69}
	#cartaCerve li{margin-right:0; margin-left:0.8%; border:none; font:100% Arial, Helvetica, sans-serif}
	#cartaCerve li.activa{font-weight:bold; padding:0.8% 2%; font-size:90%}
	#cartaCerve li a{padding:0.8% 2%; font:90% Arial, Helvetica, sans-serif; margin:0}
	#cartaCerve li a:hover{text-decoration:none}
	#submenu, #migasMovil{display:none }
	#migas{display:block; font-size:100%; float:left; width:100%; margin:-5px 0 0; padding: 0; border: none}	
    
    #filtro{display:block; font-size:90%; float:right; width:45%;min-width:280px; color:#666}
	#filtro select{width:23%; color:#666}
	#listadoCervezas{width:100%;min-width:300;padding:0; }
	#listadoCervezas h2{padding:0; font:bold 90% Arial, Helvetica, sans-serif}	
	ul.cervezas{-webkit-border-radius: 9px;	-moz-border-radius: 9px;border-radius: 9px;background-color:#fff;border:1px solid #e2dbd5;padding-top:8px;}
	ul.cervezas li.cerveza{ float:none; width:90%;min-width:inherit;display:block;background:none;clear:both;border-bottom:1px solid #e2dbd5;min-height:140px;margin:0 auto 5px;padding:5px 0 5px 30%;position:relative;z-index:1}
	ul.cervezas li.cerveza:last-child{border-bottom:none; padding-bottom:0}
	ul.cervezas li.cerveza strong, ul.cervezas li.cerveza span.tipo, ul.cervezas li.cerveza span.botella{
	margin:1% 0 0; font:400 105% Arial, Helvetica, sans-serif}
	ul.cervezas li.cerveza strong{font-weight:700}
	ul.cervezas li.cerveza img.cervezaIm{margin:0;height:130px; position:absolute; left:0; top:0px}
	ul.cervezas li.cerveza a:hover{}
	#paginacion ul li{font-size:100%}
	#paginacion ul li.actual span,#paginacion a {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;	background-color:#fff;font-size:100%; padding:4px 2%}
	#paginacion p span.ant,	#paginacion ul li.ant {padding-right:0.5%}
	#paginacion p span.sig, #paginacion ul li.sig{padding-left:0.5%}
	#bannerExperiencias{padding:2% 2% 2% 37%}
	#bannerExperiencias h3{font-size:130%}
	#bannerExperiencias h3 span{font:700 130% 'Roboto Condensed', sans-serif}
	#bannerExperiencias a{display:block; width:180px}
	
/* Cervezas lista listado -*/
	#cervezas_list{border:1px solid #e2dbd5; overflow:auto;-webkit-border-radius: 8px;	-moz-border-radius: 8px;border-radius: 8px}
	#cervezas_list div.cervezaslista div.foto{	width:10%; min-height:inherit}
	#cervezas_list div.cervezaslista div.foto img{height:60px; margin:0}
	#cervezas_list div.cervezaslista div.bloque1{width:25%; margin-top:5px}
	#cervezas_list div.cervezaslista div.bloque1 h3{padding-top:5px}
	#cervezas_list div.cervezaslista div.bloque1 h3 a{font-size:100%}
	#cervezas_list div.cervezaslista div.bloque2{height: auto;margin-top:12px}
	#cervezas_list div.cervezaslista div.bloque3{height: auto;margin-top:12px}

/*Ficha cerveza*/
	#contenido #migasFicha{padding:0 0 1.6% 0; margin:-10px 0 20px 0; width:100%; min-width:290px; border-bottom:1px solid #eee;overflow:auto}
	#foto,#datos-cerveza,ul.ficha{float:none; width:99%; min-width:290px; clear:both}
	ul.ficha,ul.tamAlc{margin-left:2%}
	.fotoFicha img{ width: 60%; margin-top: 1rem; }
	h2#titMovil,p#pais{display:block; text-align:center; }
    h2#titMovil{ padding-top: 2rem!important;}

	#datos-cerveza h2{display:none}
	#redes{width:99%;min-width:299px; margin:20px 0 15px 2%; clear:both}
	.fb-like,.b-twitter,.g-plusone,.fb-share-button{width:90px}
	.g-plusone{width:60px}
	.fb-like, #fb-like,.fb-share-button,#fb-root{width:110px}
	span.estrella{margin: 3px 1px 10px}
	#infoA,#infoB,div.bloque-comentario-derecha,div.bloque-comentario-izquierda,#compartirB,#compartirA{width:90%; min-width:90%; float: none; margin: 0 auto;}
	p.pais{display:none}
	p#icoLupa{left:170px;top:150px; display: none;}
	
	
/*--- cervezas del mundo ---*/
	.colCerv{display:none}
	#imgCompartirCerv{background:#fff url(../img/c-cervezas-del-mundo-mvh.jpg) center -20px no-repeat}
	.T1{display:block}

	#compartirCMmovil{display:block; margin:2% 0; background-color:#eee; padding:0 2% 1%; border-bottom:1px solid#ddd}
	#compartirCMmovil .botCompartir{margin:3% auto; width:60%}
	#compartirCMmovil .botCompartir a{background-color:#337e8f; color:#fff}
	#formCompartir label{font-size:120%}
	.opinionCerveza h3{width:99%}
	.opinionCerveza p.descrip{background:none;padding:25px 0 0 0;width:99%}
	.opinionCerveza ul{margin:5px 0 0 0} 
	.opinionCerveza p.publicado{top:30px; margin-bottom:0}
	.opinionCerveza p.estrellas{top:10px;right:0}
	.colOpiniones label{width:180px}
	input.botton{background-color:#000;padding:10px 20px;color:#fff;margin:0;border:none;font-weight:bold;cursor:pointer}
	
/*--- carta comer ----*/
		.occ { display:none}
		p.margenGluten { font-size:90%; line-height:120%; color:#444;}
		.sinGluten { width:30px; margin-bottom:40px}
		.platos { margin-top:-10px; padding-top:10px }
		.platos h3{ color:#4b443e; font-size:180%!important; text-align:left; font-weight:bold; margin-left:2%}
		.platos ol,.platos ol:nth-child(3) { display:block; vertical-align:top; margin:0 auto; width:95%}
		.platos ol:nth-child(3) {border:none; padding: 0}
		.platos p {font-size:130%;margin:0 0 20px 2%;}
		.platos p .txtpeq {font:300 80% Roboto, Arial!important; line-height:20%!important; margin-top:-10px}

		.num { margin-top:0px;display: inherit; float:left; margin-bottom:20px}
	 	.burguer .num{ display: inherit; float:left; margin: 0 5px 5px 0px}
		.burguer li { margin-top:25px; display:block}
		.burguer br { clear:both; display:block; border:1px solid #000; height:1px; line-height:0; }
		br.mA { display:block; margin:10px 0; height:20px; background-color:#000; width:100%}
		.backg strong { background-color:#4b443e; color:#fff; padding:3px 10px}
/*-- Club THB --*/
/*-- Acceso club thb -----*/

	#clubRegistro{margin:20px 0; padding-right:40%; background-size:35%; background-position:right 25px }
	#clubRegistro a,.boton{padding:3% 5%; font-size:100%; margin:0 0 0 2%}
	.ocultarMovil{display:none}
	.clubRegistroA{border-top:none; padding-top:15px}
	.acceso{width:90%; padding: 3% 5%; margin:0 auto; float:none}
	.info{float:none; margin:15px auto; width:95%}
	#formulario{padding:3% 0;width:96%; font-size:100%; min-width:170px; margin:3% 0}
	#formulario label{font-size:120%; color:#000}
	#formulario input, #formulario textarea{width:100%}
	.queA,.queB{float:none; width:95%;min-width: inherit;margin:0 0 2%}
	#carneSocio{width:95%; float:none; margin: 0 auto; min-width: inherit; clear: both; display: block}
	#colPrecio{width:95%; margin: 0 auto; min-width: inherit; clear: both; display: block}
    #clubTHB #colPrecio h3{color: #222; font-size: 1.8rem!important}
    
/*Franquicia*/
	#imgAcc,#imgCerv,#imgCompartirCerv,#imgCocks, #imgNot{background-position:center -70px; padding-top:0; height:170px}
    #imgFr{ background-position:center 0px;background-size: 120%;padding: 0;height: 200px;}
	#imgMm{margin-left:15px}
	#submenu,#migas,.colCerv, #cartaCerve{display:none}

/*---- ficha cervecerias ----- */	
	.redes{top:33px; width:165px}
	.redes li.fac{width:90px; text-align:left}
	#cerveceria-mapa.mapCerv, #categorias,.noticiasFicha,.noticiaBloqueFicha,.EventosFicha{float:none;width:100%; min-width:290px; margin:0; padding:0}
	.datosCerv{height:auto; width:30%!important; min-width:inherit;padding:8px 0; background:none; color:#222}
	.datosCerv h2{display:none}
	.datosCerv p{padding:8px 0 0 0; color:#222; font-size:80%}
	.datosCerv a{color:#222}
	#cerveceria-mapa{height:250px; margin-top:30px}
	.fotoCerv{height:auto; width:30%; min-width: inherit; margin-top:15px}
	.fotoCerv img{width:98%; float:none}
	.fotoCerv_dcha{float:none}
	#tripadvisor-opiniones{width:28%; min-width:inherit}

	#categorias{margin:2% 0 0.5% 0}
	#categorias h3{margin:2% 0 3px;padding:0;font-size:180%}
	#categorias h3 strong{display:none}
	ul.categorias li{margin:3px 2% 2% 0}

	#listadoCatas{float:none; max-width: inherit; width:95%; margin:10px auto}

/*Noticias
	#imgNot{background:#fff url(../img/c-noticias-mvh.jpg) 0 20px; background-repeat:no-repeat; height:200px}
	img.noticiaHousebirito{height:220px; padding-top:40px}*/
    
/* =========================
   NOTICIAS - CATEGORÍAS (móvil)
   Igualar alturas + 2 por fila
   ========================= */
.categorias-select{
  display:none;
  width:100%;
  max-width:100%;
  margin:10px 0 15px;
  padding:8px 10px;
  font-size:15px;
}

@media (max-width: 640px){

  /* el select arriba a ancho completo */
  select.locales{
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px 0; 
      clear:both;
  }

  /* tabs sin floats, en flex y con altura uniforme */
  ul.categorias{
    float: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }

  ul.categorias li{
    float: none;
    margin: 0;
    flex: 1 1 calc(50% - 8px); /* 2 por fila */
    min-width: calc(50% - 8px);
  }

  ul.categorias li a{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;          /* <- altura uniforme */
    padding: 8px 10px;         /* más “tacto” */
    line-height: 1.1;
    text-align: center;
    white-space: normal;       /* permite partir líneas */
    border-radius: 6px;
    box-sizing: border-box;
  }
}

/* si el móvil es muy estrecho, 1 por fila para que no rompa raro */
@media (max-width: 380px){
  ul.categorias li{
    flex-basis: 100%;
    min-width: 100%;
  }
}

.d-agenda{float:left}
	.boletin{float:right; width:50%; margin:6px 2% 0 0;padding:3%;background-color:#eee; height:210px; font-size:120%}

	.noticiaFoto{width:35%; margin: 0 15px 0 0}
	.noticiaFoto img{width:100%}
	.textoNoticia{width:60%;margin-bottom:8px}
	.noticiaGaleria{float:none;margin:5px 0 0 0}

/*-------- Noticias ficha ---------*/
	noticiaBloqueFicha{border-top:1px dashed #999; padding:3% 0 0}
	.noticiaBloqueFicha img{}
	.seguirMovil{display:block; margin:2% 0 0}/*.*/
	
/*--------Seccion eventos Ficha-------------*/
	.EventosFicha{margin:0 0 2% 0;padding:70px 0 1%;background:#009999 url(../img/ficha-calendario-eventos.gif) center 8px no-repeat}
	table.eventos{min-height: inherit}
	.tablaEventosFicha{padding:10px 1% 5px; margin:0 2%}
	.tablaEventosFicha p{color:#000; font-size:90%}
	.tablaEventosFicha p strong span{background-color: #009999; color:#fff; padding:2px 5px}
	p.evenFecha{font-size:80%;font-weight:bold;text-transform:uppercase;padding:0 5px;background-color:#000; color:#fff; display:block; width:170px}
	.caja{margin:2%; padding:2%}
	.EventosFicha p.eventosLink a{color:#000; margin-left:2%}

/* -- Caja suscribirse club THB --*/
	#emailmovil{display:none}
	.email{background:#e2dbd5 none;padding:2% 3%; margin-top:2%}
	.email p{margin-bottom:5px}
	.emailBoton a{position: static}

/*- Encontrar local ideal. Septiembre 2018-*/
#contenido.cervezaideal{width:100%; max-width: none; padding:0}
#contenido.cervezaideal #cab3 { /*margin-top:-13px!important*/}
#contenido.titular3 h1{padding-left: 3%}
#cerveza-ideal,#ci-resultados { font-size:90%;margin: 0px;}
#cerveza-ideal h2, #ci-resultados h2{ font-size:180%; text-align: center}
#cerveza-ideal h3{background-position:center 50px; background-size:80px; min-height: 160px}
#cerveza-ideal article{width:95%; margin:20px auto 20px} 
.ci-puntos {background-position:center 30px }
.ci-puntos li{font-size:1rem}
.ci-puntos li span{ border:3px solid #dad5d1; border-radius: 40px; width:45px; height:45px;padding-top: 20px}
.ci-nav {margin: 2rem auto 10px}
.ci-ant, .ci-sig {background: #343434 url(../img/ico-ant.png) 15px center no-repeat; color: #fff; padding: 15px 25px 15px 50px; border-radius: 5px;font:400 140% 'Bebas Neue',sans-serif; display: inline-block; letter-spacing: 1px; border: none}
.ci-sig {background: #343434 url(../img/ico-sig.png) 90% center no-repeat;padding: 15px 50px 15px 25px;margin-left: 2%}

#ci-resultados header{ margin-bottom:25px;}
#ci-resultados header ul {background-color:#e0dbd7; display:block; margin:0 2%; padding:8px 0 0}
#ci-resultados header li{ font-size:100%; font:400 100% 'Bebas Neue',sans-serif; vertical-align:middle}
#ci-resultados article { width:95%; margin:0 auto 10px 2%!important;box-shadow: none; padding:0 0 10px;}
#ci-resultados .ci-cerveza {border-bottom:1px solid #ddd; margin-left:0; position:relative; clear:both}
#ci-resultados .ci-cerveza a.ci-enlace{ display:block}
#ci-resultados article img { height: auto; width:15%; max-width:40px; margin-bottom: 5px; margin-right:2%}
#ci-resultados article img,#ci-resultados article .ci-datos{ display:inline-block; vertical-align: top}
#ci-resultados article .ci-datos { width:83%}
#ci-resultados article h3 { display:block;font-size:150%;min-height:inherit;line-height:100%; width:100%; margin:23px 0 8px;}
#ci-resultados article p { display:inline; }
#ci-resultados article p.ci-precio { border-radius:3px; padding:3px; background-color:#e0dbd7; width:85px!important; font-weight:bold; font-size:110%; float:right; margin-top:-5px}
#ci-resultados article .ci-coment { position:absolute; top:0; left:14%; width:120px}

.txtAnimo{ font-size:120%; border:none; margin-top:0}
.txtAnimo2{font-size:100%}

/* ---- Descriptores --- */
	#descriptores img{display:block; margin:0 auto 15px; width:95%}
	#descriptores div{display:block; margin:0 auto 15px; width:95%}
	#descriptores div h2{font-size:180%; margin-top:0px}

/*--PIE DE PAGINA--*/
	#footer{width:100%;margin:0px auto;padding:0; background:#fff none}
	#pie{width:100%;max-width:100%}
	p.pieTxt{float:left; margin-right:90px; color:#666}
	address{width:160px;line-height:150%;padding:3px 0 0 0;height:37px;font-size:120%; color:#fff}
	#pie a{font-size:100%}
	#pie2{width:100%;font-size:80%;color:#998d86;text-align:center;text-transform:uppercase; padding:20px 0; background-color:#fff}
	#pie2 p{display:block; width:99%; text-align:center; float:none; margin:0}
	#pie2 img{padding-top:5px; width:99%; float:none; display:block; text-align:center}
	#pie2 a{padding:0 3px}
	#pie2 img{padding-top:5px; width:25%; margin:0 auto; float:none; text-align:center}

.pie_nuevo .colB {position: inherit; top:auto; left: auto;width:99%; text-align:center}
.pie_nuevo .colA{background-color:#fff}
.pie_nuevo .colA,.pie_nuevo .colC {display:block; color:#fff; margin:8px auto; width:90%; text-align:center}
.pie_nuevo .colB img{width:100px}
#cervezas_list div.cervezaslista div.bloque3{display: none}
.AsocContact strong{ font-size:130%}
}	

/*--- Cookies ----*/
.cookiesCaja{width:95%; margin:0 auto; font-size:85%}
p.cookiesTxt{float:left; width:78%}

@media only screen and (max-width:550px){
#head h1,p.h1{ width:70px; left:45px; top:1px}
#head{width: 100%; max-width: 995px; margin:5px auto 0; position:relative; z-index:200}
.menuSup {top:16px; width:75%; padding: 0; margin:0 auto }
.menuSup a.lc{ /*display: none*/}
.menuSup a { margin-left:5px; margin-top:5px}
.menuSup img{ margin:0 5px 0 5px}
.menuSup a span{ display: none}
#buscadorGen { width:125%; display:block; margin-bottom: 8px; position:absolute!important; left:-28%; top:63px; z-index:10}
#header_buscador{ background-color:#333; border:none; border-radius:5px; width:96%; outline:none; display:inline-block; vertical-align: middle; font-size:100%; padding:10px 2%; margin:0 5px}
.AsocContact span{ display:block; margin:0 auto}
.nuestraCarta ul { column-count: 3; columns:110px; column-gap:0.5em}
.dh-reservas { margin:10px 2%}
.cabecera img { width:100%;}
#google_translate_element {top: 1rem;}
    
/*--- Idiomas ---*/
.idiomas { top:15px; font-size: 0.9rem}
    
/*- Carta -*/
.cartaComerTxt2{display: block; width:98%; margin:10px 0; padding:0 0 10px}    
}

/* All Mobile Sizes (devices and browser)*/
@media only screen and (max-width: 419px){	
#headerclubcont ul li.ocQuien{display:none}
#contenido.titular3{ margin-top:-21px}
.idiomas { top:2.2rem;}

    #contenido.titular,#contenido.eventos{background-position:center -35px}	
	#contenido.titular2,#contenido.titular3{background:#fff url(../img/fondo-cabecera-int.gif) center 0px no-repeat}

	#contenido.titular h1{font:180% 'Bebas Neue',sans-serif; margin-left:2%; margin-top:8px}
	#contenido.titular3 h1{padding-top:30px}
	#cab,#cab2,#cab3{height:60px}
	#contenido #cab2 h1,#contenido #cab3 h1{font-size:180%;width:99%; min-width:300px; margin:0; overflow: inherit}
	#contenido #cab h1{ margin-top:20px;font-size:150%;width:90%; min-width:160px; overflow:hidden; }		

	#colIzq,#colDcha,#section,#form,.graciasFr,#aside,.colOpiniones,.formA,.formB,.colOpiniones,#cuadro{padding:2% 2%;width:96%; max-width:385px;float:none; clear:both}
	#colDcha,#aside{margin:0}
	#colIzq h2,.colOpiniones h2{margin:0 0 3%; font:105% Arial, Helvetica, sans-serif}
	#colDcha h3{font:bold 110% Arial, Helvetica, sans-serif}

/*- Carta -*/
.cartaComer{width:95%; margin:0 auto!important}	
.cartaComerTxt{display: block; width:98%; margin:10px 0; padding:0 0 10px}
.cartaComerTxt h3{font:900 120% Roboto, Arial }
.cartaComerTxt p strong{font:300 170% Roboto, Arial!important; margin:0 0 8px}
.cartaComerTxt p{font:400 105% Roboto, Arial; line-height:140%}
.cartaComerFoto{display:block; width:100%; margin: 5px 0}
.occ{display:none!important}
.movil{display:block!important}
.cartaComerTxt img{margin-bottom:8px; width:100%}

/*--- Locales -- */	
	#cerveceria-mapa{height:250px;margin:40px auto 10px;padding:0;width:100%; min-width: inherit}
	.columnaB{margin:0;padding:0;width:99%; min-width:294px;float:none; clear:both} 
	.columnaB h2, .columnaB ul{margin:2%}
	#imgContac{display:none}
	
/*-- Club THB --*/
	.m2,.m3{float:none; width:100%; margin-right:0}
	#formulario{padding:3 2%;width:92%; min-width:250px; margin:3% 0}
	#formulario input, #formulario textarea{width:95%}
	#cuadro{background-color:#e2dbd5;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px}
	
/*---- CLUB THB -----*/
.ocultarMovil{display:none}
#clubRegistro{margin:20px auto;  padding-right:0; background:none; width:95%}
#clubRegistro a,.boton{margin:0 1%;padding:3% 5%; font-size:100%}
.clubRegistroA{border-top:none; padding-top:15px}
#clubAcceso{margin:20px 0}
#clubTHB h2{font-size:200%}
#ClubSer ul{padding:0 0 0 20px; margin:0 0 0.5%}
#ClubSer li{float:none; width:95%; margin-right:0; text-align:center; font-size:120%; height: auto}
#streaming,#ClubSer, #ofrecer,#funcionar{
padding:20px 2%; width:87%; margin:0 auto}
.queA,.queB{float:none; width:95%;min-width: inherit;margin:0 auto 2%}
.acceso,.info{width:90%;float:none; margin:0 auto}	
.info{margin-top:15px}
.acceso label{margin-bottom:5px; font-size:110%}
.acceso a{margin-bottom:15px}

#formulario{padding:3% 0;width:96%; font-size:100%; min-width:170px; margin:3% 0}
#formulario label{font-size:120%; color:#000}
#formulario input, #formulario textarea{width:100%}

/*Franquicia*/
	#imgAcc,#imgCerv,#imgCompartirCerv,#imgCocks, #imgNot{background-position:center -70px; padding-top:0; height:170px}
    #imgFr{ background-position: center 0px; background-size: 130%;padding:0;height:170px;}
	#imgMm{margin-left:15px}
	#submenu,#migas,.colCerv, #cartaCerve{display:none}
	.asociateBloque,.asociateBloqueB{display:block; width:90%;margin:15px auto; min-height: inherit; overflow: auto}
	.asociateBloque h3{font-size:160% }
	.formAsociacion{padding:20px 3%;width:95%; margin:30px auto; border-radius:8px}
	.formAsociacion label{float:none!important; width:80%!important}
	.formAsociacion input{width:95%!important}
	#form input#emprendedor, #form input#inversor, #form input#otro{padding:4px;margin:0 5px 20px 0; float:none; display:inline-block!important; width:15px!important}
	#form input, #form textarea{width:95%}
	#form input.botonAsoc{margin:4% auto; padding:3% 0; font-size:100%; width:80%; cursor:pointer; border-radius:6px}

/*Listas cervezas*/
	#infoA,#infoB,div.bloque-comentario-derecha,div.bloque-comentario-izquierda, #compartirB,#compartirA,#comentar,.formOpinion,.opinionCerveza, #compartirMovil,#cerveceria-mapa{float:none;width:90%; min-width:90%; margin:3% 0}
	#comentar{overflow:hidden}
	#migasMovil{display:block; font-size:100%; float:left; width:40%; margin:-5px 2% 8px}
	#filtro{margin:2% 0; border-bottom:1px solid#ccc; padding-bottom:3%; font-size:90%; display:none}
	#filtro select{width:25%}
	#listadoCervezas{width:100%;min-width:300;padding:0; }
	#listadoCervezas h2{padding:0; font:bold 90% Arial, Helvetica, sans-serif}/**/	
	#paginacion ul li{font-size:90%}
	#paginacion ul li.actual span,#paginacion a {font-size:85%; padding:4px 2%}
	#paginacion p span.ant,	#paginacion ul li.ant {padding-right:0.5%}
	#paginacion p span.sig, #paginacion ul li.sig{padding-left:0.5%}
	#bannerExperiencias{background:#efecea none; height:220px; margin:0 15px 0 0; padding:10px; width:93%}
	#bannerExperiencias h3{}
	#bannerExperiencias h3 span{font:700 130% 'Roboto Condensed', sans-serif}

/* Cervezas lista listado -*/
	#cervezas_list{border:1px solid #e2dbd5; overflow:auto;-webkit-border-radius: 8px;	-moz-border-radius: 8px;border-radius: 8px; padding:0}
	#cervezas_list div.cervezaslista div.foto{	display:none}
	#cervezas_list div.cervezaslista div.bloque1{float:none;width:95%; margin:0 auto}
	#cervezas_list div.cervezaslista div.bloque1 .estrella, #cervezas_list div.cervezaslista div.bloque1 .comment{float:left} 
	#cervezas_list div.cervezaslista div.bloque1 .comment{padding-top:3px} 
	#cervezas_list div.cervezaslista div.bloque1 h3{padding-top:0; float:left; margin-right:10px}
	#cervezas_list div.cervezaslista div.bloque1 h3 a{	font-size:100%;	}
	#cervezas_list div.cervezaslista div.bloque2{float:none;width:95%;margin:0 auto;	display: -webkit-flex;height: auto}
	#cervezas_list div.cervezaslista div.bloque2 span{padding: 6px 3%;border-radius: 4px;margin: 0 4px}
	#cervezas_list div.cervezaslista div.bloque3{display:none}
	
/*Ficha cerveza*/
	#contenido #migasFicha{font-size:90%; color:#999; border-bottom:1px solid #ddd;padding:0 0 1.6% 0; margin:-10px 0 20px 0; text-transform:uppercase; width:95%; min-width:290px; overflow:auto}
	.cervezasMundo #migasFicha{margin:2% 0 2% 2%}
	p#icoLupa,p.pais{display:none}
	#foto,#datos-cerveza,ul.ficha{float:none; width:99%; min-width:290px; clear:both}
	ul.ficha,ul.tamAlc{margin-left:2%}
	#foto img{height:300px}
	h2#titMovil,p#pais{display:block; text-align:center;}
	#datos-cerveza h2{display:none}
	#redes{width:99%;min-width:299px; margin:15px 0 15px 2%; clear:both}
	.fb-like,.b-twitter,.g-plusone,.fb-share-button{width:90px}
	.g-plusone{width:60px}
	.fb-like, #fb-like,.fb-share-button,#fb-root{width:110px}
	span.estrella{margin: 3px 1px 10px}

	.formOpinion{background-color:#fff; margin:0 0 0 5px}
	.formOpinion label{width:95%}
	.formOpinion input,.formOpinion textarea{width:95%}
	.formOpinion #compartirB label,.formOpinion #compartirB input,.formOpinion #compartirB textarea{width:290px}

	/*.colIzq3 img{margin-right:3%; display:block; text-align:center; width:40%}
	.colIzq3 h2{font-size:120%;line-height:100%}
	.colIzq3 h2 span{padding-bottom:5px;line-height:90%}*/
	.marBot{margin:0}
	.T1{display:block}
	
/*--- cervezas del mundo ---*/
	#imgCompartirCerv{background:#fff url(../img/c-cervezas-del-mundo-mv.jpg) center no-repeat}
	#compartirCMmovil{display:block; margin:2% 0; background-color:#eee; padding:0 2% 1%; border-bottom:1px solid#ddd}
	#compartirCMmovil .botCompartir{margin:3% auto; width:60%}
	#compartirCMmovil .botCompartir a{background-color:#337e8f; color:#fff}
	#formCompartir label{font-size:120%}
	.opinionCerveza h3{width:99%}
	.opinionCerveza p.descrip{background:none;padding:25px 0 0 0;width:99%}
	.opinionCerveza ul{margin:5px 0 0 0} 
	.opinionCerveza p.publicado{top:30px; margin-bottom:0}
	.opinionCerveza p.estrellas{top:10px;right:0}
	.colOpiniones label{width:180px}
	input.botton{background-color:#000;padding:10px 20px;color:#fff;margin:0;border:none;font-weight:bold;cursor:pointer}
	
/*---- ficha cervecerias -------------*/
	.datosCerv{float:none; width:95%!important; background:none; margin:0 auto}
	.fotoCerv{float:none; width:95%; margin:10px auto}
	.fotoCerv img{width:48%; float:left}
	.fotoCerv_dcha{float:right!important}
	#tripadvisor-opiniones{width:95%; margin:0 auto}
	
	ul.cervezas li.cerveza{/*width:45%;*/padding:2% 0 0 45%;position:relative;z-index:1}

/*Noticias*/
	#imgNot{background:#fff url(../img/c-noticias-mv.gif) -20px 20px; background-repeat:no-repeat; height:170px}
	img.noticiaHousebirito{height:120px; padding-top:50px; margin-right:0}
	.noticiaHousebirito{}
	select.locales{float:none;margin:0 0 5px}
	ul.categorias{margin:0}
	ul.categorias li{float:left;margin:8px 5px 2px 0;color:#666}

/*-------- Noticias ficha ---------*/
	.noticiaBloqueFicha{border-top:1px dashed #999; padding:3% 0 0}
	.noticiaBloqueFicha img{display:none}
	.seguirMovil{display:block; margin:2% 0 0}
	.CA{float:none;width:100%;margin-top: auto}
	select.locales2{float:left;margin:3px 5px 0 0;height:22px}
	.noticiaFoto{float:none; width:100%; margin: 0 0 5px 0}
	.noticiaFoto img{width:100%}
	.textoNoticia{float:none;width:100%;margin-bottom:25px}
	.noticiaGaleria{float:none;margin:5px 0 0 0}
	p.enlaceLocales{position:absolute;left:785px;top:240px;width:145px;height:22px}
	p.enlaceLocales a{color:#000;background:url(../img/fondo-seleccion-02.png) left 0 no-repeat;padding:3px 18px 5px 17px}
	p.enlaceLocales a:hover{text-decoration:none;background:url(../img/fondo-seleccion-02.png) left -24px no-repeat;color:#fff}
	
/*--------Seccion eventos Ficha-------------*/
	.EventosFicha{margin:0 0 2% 0;padding:70px 0 1%;background:#009999 url(../img/ficha-calendario-eventos.gif) center 8px no-repeat}
	.tablaEventosFicha{padding:10px 1% 5px; margin:0 2%}
	.tablaEventosFicha p{color:#000; font-size:90%}
	.tablaEventosFicha p strong span{background-color: #009999; color:#fff; padding:2px 5px}
	p.evenFecha{font-size:80%;font-weight:bold;text-transform:uppercase;padding:0 5px;background-color:#000; color:#fff; display:
block; width:170px}
	.caja{margin:2%; padding:2%}
	.EventosFicha p.eventosLink a{color:#000; margin-left:2%}
/*Eventos*/ 
	table.eventos{min-height: inherit}
	.ocultar,.eventos{display:none}
	#eventosMovil{display:block; margin:0 0 2%;padding:2%;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px;
	background-color:#009999}
	#eventosMovil p{margin-bottom:7px; line-height:150%}
	#eventosMovil p.evenFecha{padding:3px 5px 0; font-size:120%}
	#eventosMovil a{color:#000; text-decoration:underline}
	p.fondoFc{background-color:#000; display:block; padding:2%;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px; color:#fff}
	p.fondoFc a{color:#fff; text-decoration:underline}
	
/* -- Caja suscribirse club THB --*/
	#emailmovil{display:none}
	.email{background:#fff none; border:2px solid #ccc; padding:2% 3%; margin-top:0}
	.email h3{color:#000}
	.email p{margin-bottom:5px}
	.emailBoton a{position: static; background-color:#000}
	
/* ---- Descriptores --- */ 
	#descriptores img{display:block; margin:0 auto 15px; width:95%}
	#descriptores div{display:block; margin:0 auto 15px; width:95%}
	#descriptores div h2{font-size:180%; margin-top:0px}

/*--- encontrar cerveza ideal ---*/
#contenido.cervezaideal{padding:0!important}
.ci-puntos {background-position:center 23px; margin: 30px auto 50px;}
.ci-puntos li{letter-spacing:0.5px; font-size: 90%}
.ci-puntos li span{ border:3px solid #dad5d1; border-radius: 30px; width:30px; height:30px;padding-top: 12px}

#cerveza-ideal article{margin:15px auto 50px;} 
#cerveza-ideal h3{background-position:center 60px; font-size: 170%; padding-top: 15px; line-height: 100%;  min-height: 150px}
#ci-resultados ul { margin:10px auto; text-align: center}
#ci-resultados li {  width: 31%; margin:4px 1% 4px 0;vertical-align:top;font:600 70% Segoe, "Segoe UI", serif;letter-spacing: normal}
#ci-resultados li:last-child { margin:8px 0}
#ci-resultados li img{ width:25px; display: inline-block; vertical-align: middle;margin:0 2% 0 0}

.ci-ant, .ci-sig {padding: 10px 25px 10px 50px;background-size: 15px}
.ci-sig {padding: 10px 50px 10px 25px;margin-left: 2%}
}

/* All Mobile Sizes (devices and browser)*/
@media only screen and (max-width: 350px){
#ci-resultados article { display: block; width:80%; padding:8px 5%; margin:0 auto 15px!important; }
#ci-resultados article img { height:120px; margin-bottom: 5px}
#ci-resultados ul { margin: 20px 0; text-align: left}
#ci-resultados li {  width: 31%; margin:8px 1% 8px 0; vertical-align: top; font:600 70% Segoe, "Segoe UI", serif;text-transform: uppercase; letter-spacing: normal}
#ci-resultados li:last-child { margin:8px 0}
#ci-resultados li img{ width:25px; display: inline-block; vertical-align: middle;margin:0 2% 5px}
}