/*
 * Paleta de colores principales:
 * - Azul oscuro: #001f77
 * - Gris: #546072
 * - Rosa: #f80059
 * */
/*
* GLOBAL
*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;800&display=swap');

@font-face {
  font-family: 'Neato Serif';
  src:
    url('../fonts/NeatoSerif-Regular.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body {
  font-family: 'Source Sans Pro', sans-serif;
}

/*
 *
 * HEADER
 * */
.main-header, .main-header:before, .nav-button-wrap{ background:#001f77 !important;}
.bookmark-header-btn span.bmcounter-head{ background: #f80059;}
.bookmark-header-btn{ margin-right: 34px !important; display:none !important}
#main-nav-header, #main-nav-content, #main-nav-footer, #main-nav-content{ position: relative; display: block; width: 100%; float:left;}
#main-nav-content{padding:10px 20px; max-height: calc(100vh - 375px);  overflow-y: auto;     -webkit-overflow-scrolling: touch; /* scroll suave en móviles */}
#main-nav-header .add-list, #main-nav-header .header-user-menu, #main-nav-header .show-reg-form{ top:inherit; width:100%; float: none; margin:0 !important; left:0; top:0; float:left; height:auto;}
#main-nav-header .show-reg-form{ margin:10px 0 !important;}
#main-nav-header .header-user-name, #main-nav-header .user-menu-details, #main-nav-header .user-menu-profile, #main-nav-header .user-menu-addlisting{ display:none;}
#main-nav-header .header-user-menu ul{ position:relative; visibility:visible; opacity:1; top:0;  left:0; float:left; border:none; margin:20px 0 20px !important; padding:0;}
#main-nav-header .header-user-menu ul li a{ background:#546072;}
#main-nav-header .header-user-menu ul li:last-child a,  #main-nav-header .add-list{ background:#f80059}
#main-nav-header .add-list span,  #main-nav-header .show-reg-form i{ display: none;}
#main-nav-header .header-user-menu ul li.user-menu-dashboard a,  #main-nav-header .show-reg-form{ background:#001f77}
#main-nav-header .header-user-menu ul li a, #main-nav-header .add-list, #main-nav-header .show-reg-form{ text-align: center; color:#fff; font-weight:bold; border-radius: 4px; padding: 12px 8px; text-transform:uppercase; font-size:16px; line-height:20px; }

/* ===== Layout de user menu ===== */
/* PC: padding lateral */
@media (min-width: 769px) {
  #main-nav-header{    padding-left: 20px;    padding-right: 20px;  }
}
/* Móvil: solo el user menu lleva padding */
@media (max-width: 768px) {
  #main-nav-header  {    padding-left: 0px;    padding-right: 0px;  }
  #main-nav-header .add-list, #main-nav-header .show-reg-form{ display: block; border-radius:0}
  #main-nav-header .header-user-menu ul{ padding-left: 20px; padding-right: 20px;}
}
/* User menu siempre en 3 columnas */
#main-nav-header .header-user-menu ul {  display: grid;  grid-template-columns: 1fr 1fr 1fr; /* 3 columnas iguales */  align-items: center;  justify-items: center; /* centra el botón del medio */  gap: clamp(8px, 2vw, 16px); /* espacio flexible entre items */  margin: 0;  list-style: none;  width:100%;  text-align: center;}
/* Cada li ocupa toda su celda */
#main-nav-header .header-user-menu ul li {  text-align: center;}
/* Primer item a la izquierda, último a la derecha */
#main-nav-header .header-user-menu ul li:first-child {  justify-self: start;}
#main-nav-header .header-user-menu ul li:last-child {  justify-self: end;}

.main-menu {    position: absolute;     top: 80px;     right: -20px; width: 90%; min-width: 350px;   max-width: 650px;   z-index: 50;   padding: 0;   background: #f6f6f6;   border-radius: 0 0 0 6px;   border-right: 1px solid #eee;   border-bottom: 1px solid #eee;   visibility: hidden;   opacity: 0;   -webkit-transition: all 0.4s ease-in-out;   -o-transition: all 0.4s ease-in-out;   transition: all 0.4s ease-in-out;   -webkit-box-shadow: 0px 0px 90px 0px rgba(0, 0, 0, 0.07);   box-shadow: 0px 0px 90px 0px rgba(0, 0, 0, 0.07); display:none; }
.vismobmenu {   opacity: 1;   right: 0;   visibility: visible; display:block; }
    
    
.main-menu nav ul, .nav-button-wrap{display: block;}
.main-menu .nav-button span {  transition: all 0.3s ease;}
 /* Estado activo: convertir en X */
.nav-button.active span:nth-child(1) {  transform: rotate(45deg) translate(5px, 5px);}
.nav-button.active span:nth-child(2) {  opacity: 0;}
.nav-button.active span:nth-child(3) {  transform: rotate(-45deg) translate(3px, -4px);}

.nav-button-wrap{display: block; border-radius:0; border:2px solid #fff; width:90px; position:relative;}
.nav-button-wrap .nav-button{ left:0; margin-left: 10px; margin-top:-8px}
.nav-button-wrap .nav-button:after{    content: "MENÚ";    display: block;    position: absolute;    top: -6px;    left: 27px;    font-weight: bold;    color: #fff; font-size:16px;}

/**/
/* Oculta cualquier clon que el tema intente dibujar */
.main-navigation.menusb,#site-navigation.sliding-menu,.sliding-menu { display: none !important; }
/* Reset básico del menú */
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation a  { text-decoration: none; }

/* Contenedor del top menu: permite 1 o 2 columnas de bloques */
.main-navigation > ul#top-menu {  display: flex;  flex-wrap: wrap;  gap: 0 20px; /* sep. vertical/horizontal entre bloques */}

/* Cada bloque (LI de primer nivel) */
.main-navigation > ul#top-menu > li {  width: 100%;              /* PC: cada bloque a 100% */}

/* Título del bloque (A de primer nivel) con subrayado rosa */
.main-navigation > ul#top-menu > li > a {  display: block;  font-weight: 800;   padding-bottom: 6px;  margin-bottom:0;  border-bottom: 4px solid #f80059;   color: #001f77; text-transform:uppercase; padding-bottom:0; font-size:16px; line-height:1.6; }
.main-navigation > ul#top-menu > li > a i{ float:right; display:none;}
.main-navigation > ul#top-menu > li{ margin-bottom: 20px;}

/* Lista interna (submenú) en 3 columnas en PC */
.main-navigation > ul#top-menu > li > ul.sub-menu {  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 0px; /* fila/columna */}

.main-navigation > ul#top-menu > li > ul.sub-menu > li{ margin-bottom: 0;}
/* Items del submenú (PC) */
.main-navigation > ul#top-menu > li > ul.sub-menu > li > a {  display: inline-block;  padding: 2px 0;  font-weight: 700;  color: #546072; font-size:16px; line-height:1.5}

.main-navigation ul ul ul {  margin-left: 16px; margin-top: 6px; }

/* —— MÓVIL: dos bloques (50%) y submenú a 1 columna —— */
@media (max-width: 768px) {
  .main-navigation > ul#top-menu > li {    width: calc(50% - 16px); /* dos columnas; resta el gap horizontal */ }
  .main-navigation > ul#top-menu > li > ul.sub-menu {    grid-template-columns: 1fr; /* todo al 100% dentro del bloque */  gap: 0px; }
}
/**/
.vis-wishlist{ right:100px;}
.header-user-menu ul li span.count-msg-bage{position:absolute; top:-10px; left: 50%; transform: translateX(-50%); background:#f80059 !important; height:20px; width:auto !important;}

/*nav footer*/
#main-nav-footer{ text-align: center;}
.cta-btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 12px; /* separación entre iconos y texto */  background-color: #001f77;  color: #fff;  font-size: 18px;  line-height: 22px;  font-weight: 700;  padding: 12px 8px;  border-radius: 8px;  border: 4px solid #001f77;  text-decoration: none; margin:20px 0; }

.cta-btn:hover {}
.cta-btn .cta-icon {  height: 32px; /* ajusta tamaño de los iconos */  width: auto;}
.cta-btn .cta-icon.left {  margin-right: 8px;}
.cta-btn .cta-icon.right {  margin-left: 8px;}
.cta-banner{ display:none;}

@media (min-width: 768px) { 
    .cta-btn { display:none;}
    .cta-banner{ display:block;}
    
    #main-nav-content{max-height: calc(100vh - 495px);}
    
    /* Banner base (oculto por defecto, se muestra en ≥768px) */
    .cta-banner {  position: relative;  width: 650px;  height: 243px;  border-radius: 8px;  overflow: visible; /* deja que el título sobresalga */  background: url('/wp-content/themes/townhub-child/custom_tca/assets/media/img/tucocheamericano-quienes-somos.png')   right center / cover no-repeat;}
    /* Título azul que sobresale por arriba */
    .cta-banner__title {    position: absolute;    left: 345px;    top: -15px;    margin: 0;    color: #001f77;    font-weight: 800;    font-size: 45px;    line-height: 1;    letter-spacing: 0.5px;    text-transform: none;  font-family: 'Neato Serif', Georgia, serif; font-weight:normal;}
    /* Texto dentro del banner */
    .cta-banner__content {    position: absolute;    left: 345px;    text-align: left;    bottom: 10px;    right: 41px;    color: #ffffff; line-height:1.2}
    .cta-banner__lead {    font-weight: 800;    font-size: 17px;    line-height: 1.2;    margin: 0 0 8px;}
    .cta-banner__content p:not(.cta-banner__lead){ font-size:16px; line-height: 1.2;}
    /* Botón interno blanco */
    .cta-btn--white {  display: inline-block;  background: #ffffff;  color: #001f77;  font-weight: 800;  font-size: 18px;  line-height: 22px;  padding: 12px 16px;  border-radius: 8px;  border: 4px solid #ffffff;  text-decoration: none; margin-bottom:15px;}
}

 
/*
 * FOOTER
 * */
footer.dark-footer{ background:#001f77; border-top:none;}
.footer-inner{padding-left:20px; padding-right:20px}
.footer-header .fhwids-row:not(:empty){ padding-top:0; padding-bottom:0;}
.footer-contacts-widget, .footer-widget .footer-contacts-widget p, .widget_media_image{ text-align: center;}
.footer-widget .footer-contacts-widget p{ font-size:22px; line-height: 1.2; font-weight: 700;}
.footer-social span{ display:none;}
footer .footer-social ul li a {  width: 45px !important;    height: 45px !important;    background: #f80059;    padding: 5px;    border-radius: 50%;}
footer .footer-social ul li a:hover{ background:#546072;}
footer .footer-social ul li i, footer .footer-social ul li svg {   font-size: 28px !important;    line-height: 35px !important;   height: 35px !important;}
footer .footer-social ul li svg {  width: 25px !important;}
    
.footer-widget .wid-tit{font-size:24px; line-height: 1.2; font-weight: 800; text-transform:uppercase; border-bottom: 6px solid #f80059; padding-bottom:12px;}
.footer-widget .wid-tit:before{display:none;}
.dynamic-footer-widget .widget_nav_menu a{font-size:22px; line-height: 1.2; font-weight: 700; color:#fff}
.subfooter-menu-wrap ul.menu li{ margin-left: 5px; margin-right: 5px;}
.subfooter-menu-wrap ul.menu li a{font-size:15px; line-height: 1.2; font-weight: 700; color:#fff}
.subfooter-menu-wrap ul.menu li a:hover, .dynamic-footer-widget .widget_nav_menu a:hover{color:#f80059;}
.subfooter-menu-wrap .widget_nav_menu:after{ display:none;}
footer .col-6 { padding-left:40px; padding-right:40px;}
.footer-otras-secciones h3 {  display: inline-block;    white-space: pre-line;    word-spacing: 100vw;}
.subfooter-menu-wrap{justify-content: flex-start;}
.subfooter-menu-wrap ul.menu{ text-align: left;}
.subfooter-info-wrap{text-align:right}

.sub-footer{ background: #001f77 !important;}
.sub-footer .copyright{text-shadow:    1px 1px 0 #000000,   -1px 1px 0 #000000,    1px -1px 0 #000000,   -1px -1px 0 #000000; color:#fff;}

.to-top{background:#546072 !important}

@media (max-width: 1064px) {  footer .col-6 {   margin-top:80px; } .subfooter-menu-wrap ul.menu{ text-align: center;} .subfooter-menu-wrap{justify-content: center; width:100%; margin-bottom:45px;} .subfooter-info-wrap{text-align:center; width:100%;} .subfooter-menu-wrap ul.menu li{width:100%; margin:3px} .footer-otras-secciones h3{word-spacing:inherit;}}
@media (max-width: 768px) {  footer .col-6 {    width: 50%; float:left; padding-left:25px; padding-left:25px; margin-top:80px; }}
@media (max-width: 450px) {  footer .col-6 {    width: 100%; float:left; padding-left:40px; padding-right:40px;  }.footer-otras-secciones.col-6{ margin-top:20px;}}

/**/
/***PERFIL DE EMPRESA*/
.tca-badge-empresa {
  position: absolute;
  right: -6px;          /* ligeramente fuera del círculo para que solape */
  bottom: -6px;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: #1e90ff;          /* color base si no carga el svg */
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  display: inline-block;
  overflow: hidden;
	z-index:9;
  background: url('/wp-content/themes/townhub-child/custom_tca/assets/media/img/tca-badge.png')   right center / cover no-repeat;
}
.lsingle-block-headinfos .author_avatar .tca-badge-empresa{ right:-13px; bottom:-20px;}
.user-profile-header-avatar .tca-badge-empresa{ width:50px; height:50px; right:-15px; bottom:-15px;}
/***END PERFIL DE EMPRESA*/