* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Josefin Sans", sans-serif;
font-size: 17px;
line-height: 1.3;
font-weight: 400;
color: #1d1d1d;
}
a {
color: #1d1d1d;
text-decoration: none;
cursor: pointer; /* Asegura que el cursor sea una mano al pasar por encima de cualquier enlace */
}
.down_arrow {
width: 10px;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
.bread_crump_list::-webkit-scrollbar {
width: 4px;
height: 2px;
}
.bread_crump_list {
overflow-x: auto;
}
.list_breadcrumb a {
white-space: nowrap;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
.heading {
font-size: 58px;
}
.heading-2 {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
}
h4,
h5,
.h4,
.h5 {
font-weight: 700;
}
/* A11Y 3a ronda (decision de Jaime): el naranja de TEXTO sobre fondos claros pasa al
naranja accesible de los botones (#d64110, 4.54:1 sobre blanco; el corporativo #ef5927
daba 3.43:1 y queda solo para fondos, iconos y graficos). En fondos grises se oscurece
un punto mas manteniendo el tono: #c63c0f sobre #efefef (4.5:1) y #b7380e sobre #e2e2e2
(4.52:1). */
.common_text_link {
color: #ef5927;
}
.common_text_link:hover {
color: #1d1d1d;
}
.text-left {
text-align: left;
}
.fullimage {
width: 100%;
}
.pluse_icon,
.muestra_icon {
width: 25px;
}
.table_category .muestra_wrap .muestra_icon {
width: 17px;
}
/******header*********/
/* A11Y-09: en botones/badges con texto blanco PEQUENO el naranja corporativo #ef5927
da 3.43:1 (insuficiente, WCAG pide 4.5:1). Se usa #d64110: mismo tono y saturacion,
solo mas oscuro, con 4.54:1 sobre blanco. El naranja corporativo se mantiene en
iconos, bordes y textos grandes. */
.cart_value {
background-color: #ef5927;
width: 30px;
display: inline-block;
text-align: center;
border-radius: 20px;
font-size: 14px;
padding: 8px 2px;
line-height: 14px;
color: #fff;
}
/* A11Y 2a ronda (regla de diseno de Jaime): sobre el azul de cabecera/pie (#033b77) los
enlaces no van en naranja (3.23:1) sino en celeste #0dcaf0 (5.66:1), como los LEER MAS
de esas zonas. Aplica a los hovers de cabecera, buscador y panel de filtros. */
.cart_data:hover {
color: #0dcaf0;
}
.dropdown-submenu_wrap {
position: absolute;
z-index: 1;
top: 115%;
display: none;
background-color: #efefef;
}
.cross_btn,
.toggle_mobile {
display: none;
}
.active .dropdown-submenu_wrap {
display: block;
}
.dropdown-submenu a,
.dropdown-submenu button.dropdown-menus {
display: block;
color: #1d1d1d;
}
/* Reset de estilos nativos de botón para los menús de navegación.
Se agrupan .nav_wrap li:not(.cross_btn) > button (botones de nivel superior) y button.dropdown-menus
(botones de submenú) porque comparten el mismo reset de estilos de navegador.
Se excluye .cross_btn para no afectar al botón de cierre del sidebar. */
.nav_wrap li:not(.cross_btn) > button,
button.dropdown-menus {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
text-align: left;
width: 100%;
}
/* Color y display para el botón de nivel superior del menú (Tienda, Servicios, etc.)
Se excluye .cross_btn para no afectar al botón de cierre del sidebar. */
.header .nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus) {
color: #fff;
display: inline;
padding: 3px 15px;
}
.dropdown-menus img {
filter: invert(1);
}
.dropdown-submenu {
width: 320px;
overflow-y: auto;
padding: 10px 0;
max-height: 350px;
}
.child-link a img,
.child-link button img {
display: none;
}
li.childlink .child-link .grand-child-link {
display: none;
position: absolute;
right: -320px;
top: 0;
background-color: #efefef;
height: 100%;
width: 320px;
border-left: 1px solid #ef5927;
overflow-y: scroll;
}
.nav_wrap .child-link a,
.nav_wrap .child-link button.dropdown-menus {
padding: 3px 15px 3px 50px;
position: relative;
transition: padding 0.5s;
}
.childlink.open .childlink.open.site-border > .dropdown-menus {
padding-left: 50px;
}
.child-link .childlink .dropdown-menus {
border-width: 1px 0;
border-style: solid;
border-color: transparent;
}
.child-link .childlink.open.site-border > .dropdown-menus {
border-color: #ef5927;
}
.dropdown-menus {
transition: padding 0.5s;
}
.nav_wrap .child-link .grand-child a {
padding-left: 15px;
}
.nav_wrap .child-link .grand-child a:hover {
padding-left: 35px;
}
.dropdown-menus:hover {
padding-left: 35px;
font-weight: 700;
}
.nav_wrap .child-link a:hover {
padding-left: 65px;
font-weight: 700;
}
.nav_wrap .child-link a:hover::after,
.dropdown-menus:hover::after {
height: 100%;
}
.nav_wrap ul li a:after,
.dropdown-menus:after {
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 0;
background-color: #ef5927;
content: " ";
transition: height 0.5s;
}
.childlink.open > .dropdown-menus {
font-weight: 700;
}
.childlink.open ul.child-link .childlink.open {
border-color: #ef5927;
}
.childlink.open ul.child-link .childlink::after {
position: absolute;
left: 0;
top: 0;
height: 100%;
content: "";
width: 4px;
background-color: transparent;
}
/* li.childlink.open ul.child-link .childlink.open::after {
background-color:#ef5927;
} */
.childlink.open > .dropdown-menus img {
transform: rotate(-180deg);
}
li.childlink .child-link .grand-child-link img {
display: none;
}
.childlink.open > .dropdown-menus::after {
height: 100%;
}
.childlink.open > .dropdown-menus {
padding-left: 30px;
}
.dropdown-submenu li a,
.dropdown-submenu li button.dropdown-menus {
color: #1d1d1d;
position: relative;
cursor: pointer;
}
li.childlink.open ul.child-link {
display: block;
}
ul.child-link {
display: none;
}
ul.grand-child-link {
display: none;
}
li.childlink .child-link .grand-child-link {
display: none;
}
li.childlink .child-link .childlink.open .grand-child-link {
display: block;
}
.nav_wrap .nav > li:after {
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 4px;
background-color: #ef5927;
content: " ";
transition: width 0.5s;
}
.nav_wrap .nav > li {
position: relative;
padding-bottom: 5px;
}
.nav_wrap .nav > li.active .dropdown-submenu {
display: block;
}
.nav_wrap .nav > li.active::after {
width: 100%;
}
.header {
background-color: #033b77;
padding: 15px 0;
color: #fff;
}
.header a {
color: #fff;
}
.top_header .nav li:first-child {
margin-right: 40px;
}
.top_header .nav li img {
margin-right: 10px;
}
.top_header .nav li a {
display: flex;
align-items: center;
}
.top_header .nav li a:hover {
color: #0dcaf0; /* A11Y 2a ronda: celeste sobre azul */
}
.top_header .nav {
display: flex;
align-items: center;
justify-content: flex-end;
}
.header_bottom {
display: flex;
align-items: center;
margin-top: 15px;
}
.cart_data .cart_title {
margin: 0;
font-weight: 700;
}
.cart_data p {
margin: 0;
font-size: 13px;
}
.cart_data {
margin-left: 10px;
}
.cart_show {
display: flex;
align-items: center;
margin-left: 20px;
}
.cart_search_wrap .nav {
align-items: center;
}
.search_btn {
background-color: #ef5927; /* A11Y-09 */
border: none;
padding: 2px;
border-radius: 100px;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
}
.search_btn:hover {
background-color: transparent;
border-color: #ef5927;
}
.navigation_wrap {
flex-grow: 1;
margin-top: 15px;
}
.nav_wrap {
margin-right: 20px;
}
.nav_wrap {
margin-right: 15px;
}
.nav_wrap .nav {
justify-content: flex-end;
align-items: center; /* 2026-07-20: "Inicio" (a, sin caret) quedaba descuadrado vs los botones (con caret, +5px de alto) */
}
.nav_wrap li a {
padding: 3px 15px;
margin: 10px 0;
}
.nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus) {
padding: 3px 15px;
}
.nav_wrap li button.dropdown-menus {
padding: 3px 15px;
margin: 10px 0;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.dropdown-menu.show {
-webkit-animation: fadeIn 0.3s alternate; /* Safari 4.0 - 8.0 */
animation: fadeIn 0.3s alternate;
}
/******header**end****/
.user_icon {
width: 17px;
}
.confirm {
margin: 16px 0 0;
}
.btn_wrap .button.no_flex {
display: inline-block;
padding: 10px 20px;
}
.btn_wrap .button.no_flex:disabled {
opacity: 0.8;
}
.btn_wrap .button {
background-color: #ef5927; /* A11Y-09 */
border: none;
padding: 10px 20px 5px;
color: #fff;
font-weight: 300;
display: flex;
align-items: center;
border: solid 1px transparent;
font-weight: 300;
transition: 0.5s;
}
.hero_section .btn_wrap .button:hover {
/* A11Y 3a ronda + correccion 2026-07-20: el hover ponia fondo azul #033b77, el MISMO
azul del hero -> el boton (normal naranja #d64110) se volvia invisible al pasar el raton.
Hover a naranja oscuro: visible sobre el azul del hero, texto blanco 5.86:1 */
color: #fff;
background-color: #ef5927;
border-color: #ef5927;
}
.btn_wrap .button:hover {
color: #1d1d1d;
background-color: transparent;
border-color: #ef5927;
}
.btn_wrap.btn_marcar_listado {
margin-bottom: -15px;
}
@media (max-width: 767px) {
.btn_wrap.btn_marcar_listado {
margin-bottom: 10px;
}
}
.hero_section {
background-color: #033b77;
color: #fff;
padding: 30px 0 50px;
}
/* Aviso "Recuerda dar en el boton Filtrar" (2026-07-17): un salto de linea mas
respecto a lo de abajo y parpadeo LENTO blanco<->celeste (#0dcaf0, el celeste de
los enlaces sobre azul) para llamar la atencion sin molestar. Sin ventana emergente. */
#recordatorio-filtro {
margin-bottom: 16px;
}
#recordatorio-filtro span {
animation: parpadeo-recordatorio 1s ease-in-out infinite alternate; /* 1s: mas evidente (Jaime 17-07) */
}
@keyframes parpadeo-recordatorio {
from { color: #fff; }
to { color: #0dcaf0; }
}
.limpair_filter {
text-align: right;
font-size: 15px; /* antes 12px: se leia demasiado pequeno (Jaime 17-07) */
margin-bottom: 5px;
font-weight: 400;
}
.limpair_filter a {
color: #fff;
/* 2026-07-17: el clic no llegaba al enlace en algunos escritorios — se eleva por
encima de posibles elementos invisibles superpuestos y se agranda la zona de clic */
cursor: pointer;
display: inline-block;
padding: 6px 8px;
position: relative;
z-index: 20;
}
.limpair_filter a:hover {
color: #0dcaf0; /* A11Y 2a ronda: celeste sobre azul */
}
/* Con filtros aplicados (clase puesta por la plantilla segun la URL): celeste de
primeras y rollover a blanco, para que se vea claramente que es un enlace */
.limpair_filter a.filtros-activos {
color: #0dcaf0;
}
.limpair_filter a.filtros-activos:hover {
color: #fff;
}
.hero_section .heading span {
width: 100%;
font-weight: 300;
display: inline-block;
}
.hero_section .btn_wrap .button .down_arrow {
margin-left: 20px;
transition: 0.5s;
}
/* axe-core link-in-text-block: los enlaces dentro del texto de cabecera de la home solo se
distinguian por color (<3:1 respecto al texto); se subrayan */
.leer_mas_data a {
text-decoration: underline;
}
.leer_mas_data.show-more-height + .btn_wrap .button .down_arrow {
transform: rotate(180deg);
}
.hero_section .btn_wrap .button {
width: 250px;
justify-content: center;
max-width: 100%;
}
.filter_btn.btn_wrap .button:hover {
color: #fff;
}
.filter_main_wrap {
display: flex;
align-items: flex-start;
margin: 10px 0 0; /* OJO: el margin-top REAL lo fija la ultima regla .filter_main_wrap del fichero (zona "Filtros ayudas") */
position: relative;
}
.filter {
background-color: #033b77;
color: #fff;
}
.provincias.expanded {
padding-left: 20px;
}
.provincias .checkbox {
margin: 0 0 1px;
position: relative;
padding-left: 15px;
}
.check-comunidad-autonoma {
position: absolute;
top: 2px;
}
.checkbox {
position: relative;
}
.checkbox .label-comunidad-autonoma {
padding-left: 20px;
}
.check-categoria {
position: absolute;
top: 2px;
}
.checkbox .label-categoria {
padding-left: 20px;
white-space: nowrap; /* Evita que el contenido se rompa y pase a la siguiente línea. */
}
.check-calidad {
position: absolute;
top: 2px;
}
.checkbox .label-calidad {
padding-left: 20px;
white-space: nowrap; /* Evita que el contenido se rompa y pase a la siguiente línea. */
}
.check-extras {
position: absolute;
top: 2px;
}
.checkbox .label-extras {
padding-left: 20px;
white-space: nowrap; /* Evita que el contenido se rompa y pase a la siguiente línea. */
}
.provincias .checkbox .check-provincia {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.provincias .checkbox .check-provincia-modal {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.close_icon {
width: 10px;
margin-left: 5px;
cursor: pointer;
}
.alerta_javascript {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #1d1d1d;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
z-index: 10000;
max-width: 80%;
text-align: center;
}
.alerta_javascript button {
margin-top: 20px;
padding: 5px 15px;
}
.filer_box {
display: flex;
padding-right: 40px;
flex-grow: 1;
flex-wrap: wrap;
}
/* axe-core color-contrast: los letreros del filtro son un velo blanco al 50% sobre el azul
(resultante ~#819dbb) con texto blanco a 2.8:1; el texto pasa a oscuro (6:1) y la X blanca
del icono se invierte para seguir visible */
.select_filter_data {
color: #1d1d1d;
background-color: rgba(255, 255, 255, 0.5);
margin-top: 20px;
border-radius: 5px;
width: 100%;
padding: 5px 8px;
font-size: 13px;
font-weight: 300;
}
.select_filter_data .title {
margin: 0;
}
.select_filter_data ul button {
color: #1d1d1d; /* axe-core color-contrast (antes #fff sobre el velo claro, 2.8:1; ahora 6:1) */
background-color: transparent;
border: none;
font-weight: 300;
}
.select_filter_data img.close_icon {
filter: invert(1); /* la X del icono es blanca; sobre el velo claro se invierte a oscura */
}
.select_filter_data_categorias ul {
max-height: calc(2em * 10); /* 2em es un valor aproximado para la altura de un elemento li, ajusta según tu diseño */
overflow: hidden;
position: relative;
white-space: nowrap; /* Evita que el contenido se rompa y pase a la siguiente línea. */
}
.select_filter_data_extras ul {
max-height: calc(2em * 10); /* 2em es un valor aproximado para la altura de un elemento li, ajusta según tu diseño */
overflow: hidden;
position: relative;
white-space: nowrap; /* Evita que el contenido se rompa y pase a la siguiente línea. */
}
.more-categories {
cursor: pointer;
display: inline-block;
border-radius: 3px;
color: black; /* Aquí se establece el color del texto */
font-size: 16px;
}
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #d1d1d1; /* Color gris claro */
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
color: black; /* Color del texto */
position: relative;
}
.modal-content-custom {
padding: 0;
background-color: white;
}
.close {
color: black;
font-size: 40px;
font-weight: bold;
position: absolute;
top: 20px;
right: 40px;
}
.close:hover, .close:focus {
color: #aaa;
text-decoration: none;
cursor: pointer;
}
#moreCategoriesModal .modal-categorias-titulo {
font-weight: 700;
font-size: 1.33em;
margin-bottom: 10px;
}
.categoria-item { /* Esto para las imagenes de categorias del pie */
display: flex;
align-items: center; /* Esto centrará verticalmente el texto con respecto a la imagen */
}
.categoria-img { /* Esto para las imagenes de categorias del pie */
width: 30px;
height: 30px;
margin-right: 5px; /* Espacio entre la imagen y el texto */
}
.search_icon {
width: 18px;
}
.filer_box .down_arrow {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
transition: 0.5s;
}
.filer_box.filter_show_dropdown .down_arrow {
transform: rotate(180deg) translateY(28%);
}
.filter_title:after {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 2px;
background-color: #fff;
opacity: 1;
z-index: 0;
content: " ";
margin-top: -1px;
}
.filter_title {
position: relative;
}
.filter_wrap {
padding: 20px 0 40px;
}
.filter_title span {
background-color: #033b77;
z-index: 4;
position: relative;
padding-right: 15px;
}
.filter_btn.btn_wrap .button {
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px 7px;
}
.filer_box .filer_text {
width: 100%;
background-color: #16569d;
border-color: #16569d;
color: #fff;
font-weight: 300;
padding: 10px 65px 5px 5px;
cursor: pointer;
-webkit-appearance: none;
position: relative;
}
.filter_drodown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #efefef;
padding: 1rem;
transition: top 0.5s;
display: none;
z-index: 2;
}
.filter_drodown_ul.caidad,
.filter_drodown_ul.extrs {
justify-content: center;
}
.filter_drodown_ul.caidad li,
.filter_drodown_ul.extrs li {
justify-content: center;
flex: 20% 0 0;
}
.filter_show_dropdown .filter_drodown {
display: block;
top: 110%;
box-shadow: 0 3px 4px -1px #0000004d;
}
.filter_drodown_ul {
color: #d1d1d1;
display: flex;
justify-content: center;
flex-wrap: wrap;
max-height: 350px;
overflow-y: auto;
}
.filter_drodown_ul.comunidad-autonoma {
max-height: 340px;
}
.modificar_zona .modal-dialog {
max-width: 1200px;
}
.comunidad-autonoma label {
color: #1d1d1d;
padding-left: 5px;
font-size: 12px;
}
.filter_drodown_ul label,
.filter_drodown_ul li {
color: #1d1d1d;
font-size: 15px;
padding-left: 5px;
}
.filter_drodown_ul .checkbox label:hover,
.category li:hover,
.caiadad li:hover,
.extrs li:hover {
color: #ef5927; /* A11Y 3a ronda: los desplegables del filtro van sobre #efefef (4.5:1) */
cursor: pointer;
}
.search_inner .input_wrap {
flex: 1;
margin: 0 15px;
position: relative;
}
.input_wrap input {
width: 100%;
background-color: transparent;
border-width: 0 0 1px;
border-color: #fff;
border-style: solid;
color: #fff;
}
.search_inner {
max-width: 70%;
margin: 0 auto;
display: flex;
align-items: center;
}
.search_box {
background-color: #033b77;
padding: 30px 0;
position: relative;
}
.search_box .container {
position: relative;
}
.search_result {
position: absolute;
z-index: 1;
background-color: #e0e0e0;
padding: 30px;
top: 140%;
width: 100%;
}
.search_result p:last-child {
margin: 0;
}
.search_box {
display: none;
}
.cerrar_buscador {
color: #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.cerrar_buscador button {
cursor: pointer;
background-color: transparent;
border: none;
color: #fff;
}
.cerrar_buscador button:hover {
color: #0dcaf0; /* A11Y 2a ronda: celeste sobre azul */
}
.filter_drodown_ul input {
cursor: pointer;
}
.hero_section .heading {
font-weight: 700;
}
.leer_mas_data {
/* #11 (2026-07-20, robusto): se recorta con max-height + desvanecido (mascara de opacidad) en
vez de -webkit-line-clamp, que con este texto (parrafos anidados) se SOLAPABA al hacer zoom.
Asi el corte es limpio en cualquier zoom y no depende del color de fondo. */
max-height: 7em;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 4.8em, transparent 7em);
mask-image: linear-gradient(to bottom, #000 4.8em, transparent 7em);
}
.leer_mas_data.show-more-height {
max-height: none;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.leer_mas_data a {
color: #0dcaf0;
}
.leer_mas_data a:hover {
color: white;
}
.leer_mas_data.bg-white a:hover {
color: #1d1d1d;
}
.container-formatea-enlaces a {
color: #ef5927; /* A11Y 3a ronda */
}
.container-formatea-enlaces a:hover {
color: #1d1d1d;
}
.destacadas_bases p {
width: 75%;
}
.destacadas_bases .btn_wrap {
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
.destacadas_bases .btn_wrap .button:first-child {
margin-right: 15px;
}
.four_box .box_wrap .heading-2 {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.check_icon_circle {
width: 30px;
margin: -4px 10px 0 0px;
}
/****product********/
.product_order {
display: flex;
align-items: center;
justify-content: space-between;
}
.muestra_wrap {
width: 30px;
height: 30px;
background-color: #ef5927;
display: inline-block;
text-align: center;
border-radius: 30px;
vertical-align: middle;
border: solid 1px transparent;
line-height: 25px;
}
.muestra_wrap:hover {
border-color: #ef5927;
background-color: transparent;
}
.muestra_wrap:hover img {
filter: invert(1);
}
.product_box {
border-radius: 5px;
box-shadow: 0 0 1px #000;
overflow: hidden;
height: 100%;
transition: 0.5s;
}
.product_box:hover {
box-shadow: 0 0 10px -2px rgb(0 0 0 / 30%);
transform: scale(1.04);
}
.product_wrap .col-sm-12 {
margin-bottom: 50px;
}
.product_descrption_2 {
font-weight: 400;
}
.title_change_product.product_data_wrap .product_descrption_2,
.title_change_product .conteos .minus_icon_button {
display: inline-block;
}
.product_data_wrap.title_change_product .conteos .plus_icon_button,
.title_change_product.product_data_wrap .product_descrption {
display: none;
}
.conteos {
margin-bottom: 10px;
cursor: pointer;
}
.conteos img {
width: 20px;
}
.plus_icon_button,
.minus_icon_button {
background-color: #ef5927;
border: 1px solid transparent;
width: 31px;
height: 30px;
border-radius: 30px;
margin-left: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Icono de lista del desglose (uniforme: home, ficha, filtro y carrito). Sustituye
al "+" para no confundirlo con el "+" de añadir a la cesta. Centrado ABSOLUTO:
se centra pase lo que pase con el display (que Alpine gobierna via x-show). Con .plus_icon_button para ganar a '.conteos svg'. */
.plus_icon_button .lista_desglose_icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 11px;
margin: 0;
}
/* Hover: el SVG se invierte a oscuro como el resto de iconos; si no, quedaria
blanco sobre el fondo transparente del :hover. */
.plus_icon_button:hover .lista_desglose_icon { filter: invert(1); }
.plus_icon_button:hover,
.minus_icon_button:hover {
background-color: transparent;
border: 1px solid #ef5927;
}
.plus_icon_button:hover img,
.minus_icon_button:hover img {
filter: invert(1);
}
.minus_icon_button {
}
.product_title .heading-2 {
font-size: 17px;
}
.product_order p img {
width: 17px;
}
.product_header .product_cart img {
width: 50px;
}
.product_header .plus_product img {
width: 20px !important;
}
.product_data {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.product_data .product_image {
width: 35%;
box-shadow: 0 0 1px #000;
margin-right: 5%;
}
.product_descrption,
.product_descrption_2 {
width: 60%;
}
.product_data .product_image {
width: 40%;
box-shadow: 0 0 1px #000;
margin-right: 5%;
}
.product_data .product_image img {
width: 100%;
height: 130px;
object-fit: cover;
object-position: center;
}
.product_descrption .sub_title {
font-size: 13px;
}
.product_descrption .sub_title {
font-size: 13px;
}
.product_descrption p {
font-weight: 700;
}
.plus_product {
position: absolute;
right: 0;
bottom: 0;
}
.product_cart {
border: none;
background-color: transparent;
text-align: right;
position: relative;
}
.product_order p {
margin: 0;
}
.product_wrap {
margin: 50px 0 80px;
}
.four_box {
margin: 80px 0;
}
.conteos svg {
width: 20px;
height: 20px;
margin-left: 10px;
}
.conteos {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 16px;
}
/* axe-core color-contrast: el azul-gris #819dbb con texto blanco daba 2.8:1;
#56799f es el mismo tono oscurecido hasta 4.53:1 (cabeceras de tarjeta, de tabla y de modal) */
.product_header {
background-color: #56799f;
color: #fff;
padding: 15px 15px 15px 10px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 110px;
}
.product_title p {
margin: 0;
}
.product_data_wrap {
padding: 10px;
}
.product_price {
display: flex;
align-items: center;
}
.product_price .heading-2 {
margin: 0 10px;
}
.product_cart {
transition: 0.5s;
}
.product_cart:hover {
transform: scale(1.1);
}
.product_order a:hover {
color: #ef5927; /* A11Y 3a ronda */
}
/****footer*******/
.footer_box li a:hover {
color: #033b77; /* A11Y 3a ronda: azul corporativo sobre el gris #efefef del pie (9.63:1) */
}
.footer {
background-color: #efefef;
padding: 60px 0 0px;
}
.footer .footer_titulo {
font-size: 17px;
font-weight: 700;
margin: 0 0 20px;
}
.footer .des {
padding-right: 50px;
}
.footer .contact_title {
margin: 30px 0;
}
.footer_box ul li {
margin: 0 0 10px;
}
.footer_box ul li.footer_logo {
margin-top: 30px;
}
.payment_method ul li {
margin-left: 10px;
}
.copy_right .row {
align-items: center;
}
.payment_method ul {
display: flex;
align-items: center;
justify-content: flex-end;
}
.copy_right {
background-color: #033b77;
color: #fff;
padding: 20px 0;
margin-top: 30px;
}
.copyright_text {
margin: 0;
font-weight: 300;
}
/***review******/
.review_innerr .heading-2 {
text-transform: uppercase;
}
.review_raing {
text-align: center;
}
.review_raing a {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 40px 0 0;
}
.review_raing h2 {
margin: 0;
}
.review_raing ul {
display: flex;
align-items: center;
margin: 0 5px;
}
.review_raing ul li {
margin: 0 5px;
}
.review_section {
margin: 0 0 110px;
}
/*******personalizadas*******/
.bread_crump {
margin: 5px 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.list_breadcrumb {
display: flex;
align-items: center;
font-weight: 300;
align-items: center;
}
.list_breadcrumb li {
margin-right: 10px;
}
/*********category********/
.hero_section .btn_wrap {
margin-top: 20px;
}
.category_hero.hero_section .heading span {
width: auto;
}
.category_hero .hero_section .heading {
display: flex;
}
/*****category**box*****/
.category_product {
margin: 80px 0 30px;
}
.category_product p {
font-size: 13px;
font-weight: 400;
}
.category_product .sub_title {
font-size: 17px;
}
.category_product .btn_wrap {
display: flex;
justify-content: center;
margin: 50px 0 0;
}
.pagina-banner {
margin: 40px 0 0;
}
.list_breadcrumb a:hover,
.footer_box a:hover {
color: #033b77; /* A11Y 3a ronda: azul corporativo sobre el gris #efefef del pie (9.63:1) */
}
.category_product .heading-2 a:hover{
color: #1d1d1d;
}
.category_product .heading-2 a {
color: #fff;
}
/*****tinda* resultados******/
.show_table_down_box .table_head .th:nth-child(n + 4) {
text-align: center;
justify-content: center;
}
.show_table_down_box .table_body .pluse_icon {
width: 20px;
}
.table .th {
background-color: #b0cded;
padding: 10px 10px 8px;
line-height: normal;
font-weight: 700;
text-align: center;
}
.table .table_body div {
padding: 10px 10px 8px;
flex: 1;
}
.table ul {
display: flex;
flex-wrap: wrap;
}
.table ul li {
flex: 1;
text-align: center;
}
.table .table_body .second_td {
color: #ef5927; /* A11Y 3a ronda */
flex: 250px 0 0;
text-align: left;
}
.table .table_body .second_td a {
color: #ef5927; /* A11Y 3a ronda */
}
.table .table_body .second_td a:hover {
color: #1d1d1d;
}
.table .table_body li {
border-width: 1px 0 0;
border-style: solid;
border-color: #f0f0f0;
display: flex;
display: flex;
flex-direction: column;
}
.table .th:first-child {
flex: 130px 0 0;
text-align: left;
}
.table .table_body div:last-child {
flex: 50px 0 0;
text-align: center;
}
.table .th:nth-child(2) {
flex: 250px 0 0;
}
.table_body {
flex-direction: column;
}
.table .th:last-child {
flex: 50px 0 0;
}
.table .second_td {
text-align: left;
width: 300px;
}
.table_total .btn_wrap {
display: flex;
justify-content: flex-end;
}
.table_total {
text-align: right;
}
.table .table_body .first_td {
text-align: left;
flex: 130px 0 0;
}
.table {
width: 100%;
border: 1px solid #f0f0f0;
border-radius: 5px;
border-collapse: collapse;
}
.show_table_down_box .table_body li .second_td {
color: #1d1d1d;
flex: inherit;
width: inherit;
}
.show_table_down_box .table_body li {
flex: inherit;
border-color: transparent;
flex-direction: row;
}
.show_table_down_box .table_head .th {
border-bottom: 1px solid #dedede;
}
.show_table_down_box .table_head .th:nth-child(3),
.show_table_down_box .table_body div:nth-child(3) {
min-width: 300px;
text-align: left;
}
.show_table_down_box .table_head .th:nth-child(2) {
text-align: left;
}
.show_table_down_box .table_head .th:nth-child(1) {
align-self: flex-start;
width: 13px;
}
.show_table_down_box .table_head .th:nth-child(1) input {
width: 13px;
}
.show_table_down_box,
.show_table_down_box .table_body,
.show_table_down_box .table_head,
.show_table_down_box .table_head .th {
background-color: #efefef;
border-color: transparent;
}
.table .table_body .show_table_down_box {
padding-left: 100px;
background: #efefef;
}
.row_two_table .thrid_table table {
min-width: 740px;
margin-left: 40px;
}
.simple_table table th,
.simple_table table td {
font-size: 17px;
text-align: left;
}
.carrito .simple_table table th, .carrito .simple_table table td {
font-size: 15px;
}
.thrid_table table {
text-align: left;
}
.show_table_down_box .table_body .row_two_table {
flex-direction: column;
}
.show_table_down_box .table_head .th:first-child,
.show_table_down_box .table_body .first_td {
flex: 40px 0 0;
min-width: 40px;
}
.show_table_down_box,
.show_table_down_box .table_body,
.show_table_down_box .table_head {
padding: 0;
}
.show_table_down_box .table_body div,
.show_table_down_box .table_head .th {
flex: inherit;
min-width: 130px;
}
/*****thrid table******/
table td,
table th {
padding: 10px;
font-size: 15px;
}
.thrid_table table {
background-color: #e2e2e2;
}
.table_row {
display: flex;
}
.table .table_body .table_row {
padding: 0;
}
/*****category*********/
.conteos_plus,
.desglose_plus {
margin: 0;
text-align: center;
}
.transperent_plus_minus .minus_icon,
.active.transperent_plus_minus .pluse_icon,
.conteos_plus .minus_icon,
.desglose_plus .minus_icon,
.active.conteos_plus .pluse_icon,
.active.desglose_plus .pluse_icon {
/* display: none; */
}
.active.conteos_plus .minus_icon,
.active.desglose_plus .minus_icon,
.active.transperent_plus_minus .minus_icon {
display: inline-block;
}
.sub_table_link {
font-weight: 400;
color: #ef5927; /* A11Y 3a ronda: va sobre el gris #e2e2e2 del desglose (4.52:1) */
}
.sub_table_link:hover {
color: #1d1d1d;
}
.transperent_plus_minus,
.desglose_table a {
width: 30px;
cursor: pointer;
height: 30px;
border-radius: 30px;
border: 1px solid transparent;
padding: 2px;
background-color: transparent;
}
.desglose_table a {
display: inline-block;
margin: -5px 0 0;
}
.transperent_plus_minus:hover,
.desglose_table a:hover {
border-color: #ef5927;
}
.desglose_table a.no_border {
width: auto;
border: 0px;
}
.desglose_table a.no_border:hover {
border-color: unset!important;
border: 0px;
}
.transperent_plus_minus:hover img,
.desglose_table a:hover img {
filter: brightness(0%);
}
.table_body .muestra_wrap img {
width: 20px;
}
.tooltip_main p {
position: absolute;
right: 0;
width: 420px;
background-color: #eee;
padding: 14px 10px;
font-size: 17px;
font-weight: 400;
top: 20px;
display: none;
}
.tooltip_main .tooltip_icon {
width: 16px;
display: inline-block;
height: 16px;
background-color: #ef5927; /* A11Y-09 */
padding: 2px;
border-radius: 46px;
color: #fff;
font-size: 13px;
cursor: pointer;
}
.table .tooltip_main {
padding: 0 !important;
position: relative;
background-color: transparent;
z-index: 0;
}
.table .tooltip_main:hover {
z-index: 1;
}
.table .tooltip_main:hover p {
display: block;
border: solid 1px black;
z-index: 2;
}
.table .tooltip_prices p {
width: 320px!important;
font-size: 14px!important;
}
.show_table_down_box.simple_table.conteos_table {
/* display: none; */
}
.show_table_down_box.desglose_table {
/* display: none; */
}
.thrid_table.conteos_sub_table {
/* display: none; */
}
.table_top_header {
background-color: #56799f; /* axe-core color-contrast */
padding: 20px;
border-radius: 5px 5px 0 0;
}
.table_top_header ul {
display: flex;
}
.table_top_header ul li {
margin-right: 10px;
}
.table_top_header ul li a:hover {
background-color: transparent;
border-color: #ef5927;
}
.cesta_compar .first_td img {
width: 100%;
}
.cesta_compar .table_body .first_td,
.cesta_compar .th:first-child {
flex: 80px 0 0;
}
.table_category.cesta_compar {
font-size: 14px;
}
.cesta_compar .table .localización_edit {
flex: 260px 0 0;
}
.cesta_compar .table .localización_text {
text-align: left;
padding-right: 30px;
position: relative;
cursor: pointer;
}
.table_category.cesta_compar .table_row {
align-items: center;
}
.table_category.cesta_compar .orange_table_title p {
color: #1d1d1d;
}
.cesta_compar .table .localización_text .plus_icon_button {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.cesta_compar .table .localización_text .plus_icon_button img {
width: 20px;
}
.localización_text {
text-align: left;
}
.cesta_compar .th:nth-child(2),
.cesta_compar .table .table_body .second_td {
text-align: left;
flex: 200px 0 0;
}
.table_top_header ul li a {
background-color: #ef5927; /* A11Y-09 */
border: none;
padding: 10px 15px 5px;
color: #fff;
font-weight: 300;
display: flex;
cursor: pointer;
align-items: center;
border: solid 1px transparent;
font-weight: 300;
transition: 0.5s;
}
.cesta_compar .table {
border-top-color: #b0cded;
border-radius: 0 0 5px 5px;
}
.compair_btn {
display: flex;
align-items: center;
justify-content: space-between;
margin: 30px 0 100px;
}
.table_footer {
width: 450px;
display: inline-block;
text-align: left;
max-width: 100%;
}
.table_footer p {
margin: 30px 0 2px;
}
.validar {
display: flex;
margin: 0 0 20px;
}
.validar input {
flex: 1;
background-color: #efefef;
border: 1px solid #efefef;
margin-right: 10px;
}
.table_footer ul li {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 10px;
}
.table_footer ul .total {
font-size: 20px;
margin: 20px 0 0;
}
.art_individal .table_top_header h3,
.art_individal .table_top_header p.extras-titulo {
color: #fff;
font-size: 24px;
margin: 0;
}
.art_individal .table_top_header h3 span,
.art_individal .table_top_header p.extras-titulo span {
color: #fff;
background-color: transparent;
font-size: 14px;
padding: 0;
}
.art_individal .table .incluído {
font-size: 10px;
margin: 0;
background-color: transparent;
padding: 0;
}
.art_individal .table .th:first-child,
.art_individal .table .table_body .first_td {
flex: 40px 0 0;
text-align: left;
}
.art_individal .table .th:last-child,
.art_individal .table .table_body div:last-child,
.art_individal .table .th:nth-child(2) {
flex: 1;
}
.localización_edit.localización_text button:hover {
border: 1px solid #ef5927;
background-color: transparent;
padding: 3px;
}
.table_category.cesta_compar .table_top_header ul li a:hover {
background-color: #fff;
color: #1d1d1d;
border-color: #fff;
}
.art-individal_inner {
max-width: 400px;
text-align: left;
display: inline-block;
}
.art-individal_inner .heading-2 {
font-size: 35px;
font-weight: 600;
margin-left: 0;
}
.art-individal_inner .product_cart img {
width: 70px;
}
.single_product .product_img img {
width: 100%;
}
.single_product .product_img {
border: 1px solid #f7f7f7;
}
.product_tab button {
background-color: #efefef;
color: #1d1d1d;
}
.product_tab .nav-tabs button.active {
background-color: #ddd;
}
.product_tab button:hover {
color: #ef5927; /* A11Y 3a ronda */
}
.product_tab .tab-content {
border-width: 0 1px 1px;
border-color: #f7f7f7;
border-style: solid;
padding: 20px;
border-radius: 0 0 5px 5px;
margin-bottom: 15px;
}
.product_tab ul#myTab {
border-color: #f7f7f7;
}
.product_header_wrap .title_wrap p {
font-size: 24px;
}
.product_header_wrap .title_wrap p a {
font-size: 16px;
}
.product_header_wrap {
display: flex;
justify-content: space-between;
}
.single_pro_header .extra_price .price {
font-size: 35px;
font-weight: 600;
}
/* 2026-07-18 (Jaime): icono "añadir SIN extras" bajo "SIN EXTRAS", MISMO tamaño que el
de abajo (70px / 60px movil). Absoluto para NO desplazar el contenido de abajo:
cae en el hueco a la derecha (la columna del titulo es mas alta). */
.single_pro_header .extra_price {
position: relative;
}
.single_pro_header .extra_price .product_cart {
position: absolute;
right: 0;
top: 100%;
margin-top: 8px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.single_pro_header .extra_price .product_cart img {
width: 70px;
}
@media (max-width: 767px) {
.single_pro_header .extra_price .product_cart img {
width: 60px;
}
/* Movil: el header se apila y el absoluto caia sobre la foto -> en flujo normal */
.single_pro_header .extra_price .product_cart {
position: static;
margin: 6px 0 0;
}
}
.single_product {
margin: 0 0 40px;
}
.overlay {
position: fixed;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
display: none;
}
.localizacio span {
display: flex;
align-items: center;
}
.localizacio span .tooltip_icon {
width: auto;
background-color: transparent;
color: #ef5927; /* A11Y 3a ronda */
padding: 0;
margin-left: 2px;
position: relative;
}
.localizacio span .tooltip_icon p {
font-size: 14px;
color: #1d1d1d;
right: inherit;
left: 0;
}
.descargar {
display: flex;
align-items: center;
margin-top: 20px;
}
.descargar img {
width: 20px;
}
.descargar div {
margin-right: 10px;
}
.localizacio span .tooltip_icon:hover p {
display: block;
}
.art_individal .table .th:nth-child(2),
.art_individal .table .table_body .table_row div:nth-child(2) {
text-align: left;
}
.product_tab .tab-content .descargar_link:hover {
color: #ef5927; /* A11Y 3a ronda */
}
.descargar_link {
display: flex;
align-items: center;
}
.descargar_text {
margin: 2px 0 0 10px;
display: inline-block;
line-height: 1;
}
.art-individal .text-left {
margin: 30px 0 20px;
}
.tinda_bottom_table {
margin-bottom: 80px;
}
.tiends_werap .phone_img {
max-width:80px;
margin-right: 10px;
}
.form_wrap .form-group {
margin-bottom: 15px;
}
.form_wrap label {
font-weight: 500;
}
.tiends_werap {
display: inline-flex;
align-items: flex-start;
margin-bottom:20px;
}
.modal-header {
background-color: #56799f; /* axe-core color-contrast */
text-align: center;
justify-content: center;
border-color: #eee;
}
.modal-footer .btn_wrap .button {
border-radius: 0;
line-height: 1;
padding: 12px 15px;
height: 40px;
}
.modal-footer {
justify-content: center;
}
.form-check .form-check-input {
margin-top: 0px;
}
.tell_btn {
background-color: transparent;
border: none;
color: #fff;
}
.tell_btn:hover {
color: #0dcaf0; /* A11Y 2a ronda: celeste sobre azul */
}
.registro_wrap {
margin: 80px 0;
}
.registro_form {
border: 1px solid #dee2e6;
border-radius: 5px;
}
.registro_form .modal-header {
padding: 15px;
border-bottom: 1px solid #dee2e6;
}
.registro_form .form_wrap {
padding: 50px;
background: #b0cded;
}
.registro_form .form_wrap form {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
}
.registro_form .form_wrap form .col-sm-12 {
padding: 0 10px;
}
/* A11Y 3a ronda: el enlace 'Aviso Legal' del registro va sobre #b0cded; azul corporativo
subrayado en reposo y en hover (6.75:1; el hover naranja daba 2.09:1) */
.form-check a {
color: #033b77;
text-decoration: underline;
}
.form-check a:hover{
color: #033b77;
}
.modificar_zona .modal-body {
padding-right: 0;
}
.registro_form select {
appearance: auto;
height: 38px;
}
.modificar_zona .filter_drodown_ul input {
width: 12px;
}
.modificar_zona .filter_drodown_ul label, .modificar_zona .filter_drodown_ul li {
font-size: 14px;
}
.registro_form .modal-footer {
margin-top: 20px;
}
.cross_btn_filter {
position: absolute;
right: 0;
top: 0px;
background-color: #efefef;
border: 1px solid #000;
color: #000;
width: 30px;
height: 30px;
line-height: 30px;
}
.cross_btn_filter:hover{
position: absolute;
right: 0;
top: 0px;
background-color: #ef5927; /* A11Y-09 */
border: 1px solid #ef5927;
color: #fff;
width: 30px;
height: 30px;
line-height: 30px;
}
@media (max-width: 1200px) {
.container {
max-width: 100%;
padding: 0 15px;
}
}
@media (max-width: 1024px) {
.registro_form .form_wrap {
padding: 15px;
}
.registro_form .form_wrap form .col-sm-12 {
padding: 0 5px;
}
.registro_form .form_wrap form {
margin: 0 0px;
}
.table_top_header {
min-width: 1120px;
}
.heading-2 {
font-size: 22px;
}
.product_header_wrap .title_wrap p {
font-size: 20px;
}
.single_pro_header .extra_price .price {
font-size: 30px;
font-weight: 600;
}
.navigation_wrap.show_sidebar {
right: 0;
}
.navigation_wrap.show_sidebar .nav_wrap {
right: 0;
}
/* A11Y-04: con el menu cerrado sus enlaces no deben entrar en el orden de tabulacion.
visibility:hidden ademas del desplazamiento fuera de pantalla; el retardo de la
transicion conserva la animacion de cierre (el slide termina antes de ocultar). */
.navigation_wrap {
visibility: hidden;
transition: visibility 0s linear 0.5s;
}
.navigation_wrap.show_sidebar {
visibility: visible;
transition-delay: 0s;
}
.cross_btn {
display: block;
cursor: pointer;
}
.toggle_mobile {
display: block;
margin-right: 15px;
cursor: pointer;
}
.cart_search_wrap {
display: flex;
align-items: center;
margin-top: 20px;
}
.logo img {
width: 210px;
}
.search_icon {
width: 14px;
}
.search_btn {
width: 30px;
height: 30px;
}
.header_bottom {
justify-content: space-between;
}
.cart_show img {
width: 40px;
}
.cart_data .cart_title {
margin: 0;
font-size: 16px;
}
.cart_show {
margin-left: 15px;
}
.navigation_wrap {
flex-grow: 1;
margin-top: 15px;
position: fixed;
right: -100%;
top: 0;
height: 100%;
width: 100%;
z-index: 1000; /* auditoria 27-07: por encima de #limpiar-filtros (z-index:20) para que no se superponga al menu abierto */
}
.navigation_wrap.show_sidebar .overlay {
display: block;
}
.nav_wrap {
margin-right: 0;
width: 300px;
top: 0;
position: fixed;
right: -100%;
background-color: #fff;
height: 100%;
color: #1d1d1d;
padding: 40px 0 20px;
transition: right 0.5s;
height: calc(100vh - 0px);
overflow-y: auto;
overflow-x: hidden;
}
.nav_wrap .nav > li {
padding-bottom: 5px;
width: 100%;
}
.nav_wrap .nav > li .down_arrow {
filter: invert(1);
}
.nav_wrap li a,
.nav_wrap li button,
.header .nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus) {
color: #1d1d1d;
}
.header .nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus) {
display: block;
width: 100%;
}
.nav_wrap .nav > li:after {
bottom: inherit;
top: 28px;
}
.dropdown-submenu {
width: 100%;
max-height: inherit;
}
.dropdown-submenu_wrap {
position: static;
top: inherit;
}
.filter_main_wrap {
flex-wrap: wrap;
}
.filer_box {
margin-bottom: 10px;
width: 50%;
}
.destacadas_bases .btn_wrap {
flex-wrap: wrap;
}
.destacadas_bases .btn_wrap .button:first-child {
margin-right: 0px;
margin-bottom: 10px;
}
.destacadas_bases .btn_wrap .button {
width: 100%;
text-align: center;
display: block;
}
.art-individal_inner .product_cart img {
width: 60px;
}
.art-individal_inner .heading-2 {
font-size: 30px;
}
.list_breadcrumb li {
font-size: 16px;
}
.btn_wrap .button {
padding: 10px 10px 5px;
}
.filer_box:nth-child(2) {
padding-right: 0;
}
.filer_box:nth-child(5) {
padding-right: 0;
}
.single_pro_header .extra_price {
width: 170px;
margin-left: 20px;
}
.toggle_mobile img {
width: 26px;
filter: invert(1);
}
.header .nav .cross_btn {
text-align: right;
position: fixed;
right: 0;
top: 0;
z-index: 2;
display: inline-block;
width: auto;
display: none;
}
.navigation_wrap.show_sidebar .nav .cross_btn {
display: block;
}
.cross_btn button {
background-color: transparent;
border: none;
padding: 10px;
}
.cross_btn img {
width: 20px;
filter: invert(1);
}
.footer_box ul li.footer_logo img {
width: 100%;
}
li.childlink .child-link .grand-child-link {
position: static;
right: inherit;
top: 0;
height: 100%;
width: inherit;
border-left: none;
padding-left: 45px;
}
.cerrar_buscador {
right: 10px;
}
.heading {
font-size: 40px;
}
.table_responsive {
overflow-x: auto;
}
.table {
min-width: 1120px;
}
.table_total {
margin-top: 20px;
}
.filer_box.filter_show_dropdown:nth-child(3) .filter_drodown,
.filer_box.filter_show_dropdown:nth-child(4) .filter_drodown {
top: 57%;
z-index: 1;
}
.filter_show_dropdown .filter_drodown {
top: 20%;
z-index: 1;
}
}
@media only screen and (max-width: 1200px) and (min-width: 1024px) {
.dropdown-submenu_wrap .dropdown-submenu li a {
padding: 3px 15px;
}
.nav_wrap li a {
padding: 3px 5px;
margin: 10px 0;
font-size: 15px;
}
.header .nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus) {
padding: 3px 5px;
font-size: 15px;
}
.nav_wrap li button.dropdown-menus {
padding: 3px 15px;
font-size: 15px;
}
.nav_wrap .child-link button.dropdown-menus {
padding: 3px 15px;
}
}
@media (max-width: 767px) {
.registro_wrap {
margin: 0px 0 50px;
}
.registro_form .form_wrap form .col-sm-12 {
width: 100%;
}
.registro_form {
border: 1px solid #dee2e6;
border-radius: 5px;
margin-top: 50px;
}
.tiends_werap .phone_img {
max-width: 60px;
}
.footer .footer_titulo,
.footer .contact_title {
margin: 30px 0 15px;
}
.filter_drodown_ul .col.left {
flex: 100% 0 0;
}
.single_pro_header .extra_price {
margin-left: 0px;
}
.nav_wrap .nav > li:after {
top: 28px;
}
.category_product .btn_wrap {
margin: 20px 0 0px;
}
.footer_box ul li.footer_logo img {
width: 250px;
}
.search_inner {
max-width: 100%;
}
.search_inner .input_wrap {
margin: 0 10px;
}
.search_result {
padding: 10px;
max-height: 200px;
overflow-y: auto;
}
.search_result p {
margin: 0 0 10px;
font-size: 12px;
}
.cerrar_buscador {
right: 10px;
top: -23px;
transform: inherit;
}
.logo img {
width: 140px;
}
.cart_search_wrap {
margin-top: 10px;
}
.cart_search_wrap {
margin-top: 10px;
}
.search_btn {
width: 25px;
height: 25px;
}
.search_icon {
width: 12px;
}
.cart_show {
margin-left: 10px;
}
.cart_show img {
width: 30px;
}
.cart_data .cart_title {
font-size: 15px;
}
.cart_data p {
font-size: 10px;
}
.top_header .nav li:first-child {
margin-right: 20px;
}
.top_header .nav li a {
font-size: 12px;
}
.user_icon {
width: 13px;
}
.menu_user {
flex-wrap: wrap;
font-size: 12px;
}
.menu_user a,
.menu_user .menu_logout {
white-space: nowrap;
}
.header_bottom {
margin-top: 5px;
}
.filter_btn.btn_wrap .button {
width: 100%;
}
.btn_wrap.filter_btn {
width: 100%;
}
.filer_box {
padding-right: 10px;
width: 50%;
}
/* .filer_box:nth-child(2n) {
padding-right: 0px;
} */
.filer_box select {
padding: 10px 30px 5px 5px;
}
.heading {
font-size: 30px;
}
body {
font-size: 15px;
}
.hero_section .btn_wrap .button {
width: 100%;
max-width: 100%;
}
.heading-2 {
font-size: 20px;
}
.check_icon_circle {
width: 25px;
}
.four_box .box_wrap {
margin-bottom: 30px;
}
.destacadas_bases p {
width: 100%;
}
.product_header .product_cart img {
width: 50px;
}
.product_wrap {
margin: 50px 0 50px;
}
.hero_section {
padding: 0px 0 50px;
}
.copyright_text {
text-align: center;
}
.payment_method ul {
justify-content: center;
margin: 10px 0 0px;
}
.top_header .nav {
justify-content: center;
}
.filer_box .down_arrow {
right: 10px;
}
.fullimage {
width: 100%;
}
.product_header_wrap {
flex-wrap: wrap;
}
.single_pro_header .extra_price .price {
font-size: 25px;
}
.extra_price h5,
.extra_price .h5 {
font-size: 16px;
}
.single_pro_header .extra_price p {
font-size: 12px;
}
/* A11Y-08: "IVA INCLUIDO" deja de ser (rompia la jerarquia de encabezados);
el que lo sustituye conserva el tamano tambien en movil */
.single_pro_header .extra_price p.h5 {
font-size: 16px;
}
.list_breadcrumb li {
font-size: 14px;
}
.bread_crump {
margin: 5px 0 30px;
flex-wrap: wrap;
}
.btn_wrap .button {
width: 100%;
text-align: center;
justify-content: center;
}
h4,
h5,
.h4,
.h5 {
font-size: 17px;
}
.product_wrap .col-sm-12 {
margin-bottom: 10px;
}
.bread_crump_list {
overflow-x: auto;
margin: 5px 0 15px;
}
.bread_crump .btn_wrap {
width: 100%;
}
.search_box {
z-index: 5;
}
.single_product .product_img {
border: 1px solid #f7f7f7;
margin: 0 0 20px;
}
.product_title .heading-2 {
margin: 0;
}
.product_header {
min-height: auto;
}
.pagina-banner {
margin: 0px 0 0;
}
.pagina-left {
margin: 10px 0 30px;
}
.tinda_bottom_table {
margin-bottom: 50px;
}
.compair_btn {
margin: 30px 0 50px;
}
.toggle_mobile {
margin-right: 10px;
}
}
/* PAGINAS ESTÁTICAS */
.separador { /* espacio entre la cabecera azul y el título siguiente */
height: 50px;
}
/* Estilo para los enlaces de la clase "enlace-normal" en estado normal */
.enlace_normal {
text-decoration: none; /* Elimina el subrayado, es opcional */
color: #ef5927; /* axe-core color-contrast: naranja de texto accesible (4.75:1 sobre #f5f5f5, 5.18:1 sobre blanco; antes #EF5927 a 3.42:1) */
transition: color 0.3s ease; /* Añade una transición suave al cambiar el color */
cursor: pointer; /* Esto asegura que el cursor sea una mano al pasar por encima */
}
/* Estilo para los enlaces de la clase "enlace-especial" cuando se pasa el ratón sobre ellos (hover) */
.enlace_normal:hover {
color: #000000; /* Establece un nuevo color, por ejemplo, un naranja */
text-decoration: underline; /* Subraya el texto al hacer hover */
cursor: pointer; /* Esto asegura que el cursor sea una mano al pasar por encima */
}
.img_separada {
margin-bottom: 50px; /* Ajusta el valor según la cantidad de espacio que desees */
}
.margen-contenido { /* Margen que hay antes del contenido real de cada página y cuando se termina */
margin-top: 40px;
margin-bottom: 40px;
}
/* FORMULARIO DE CONTACTO */
#idComentarios {
height: 150px; /* Ajusta este valor según el alto que desees */
}
.formulario {
max-width: 600px;
margin: 20px auto;
font-family: Arial, sans-serif;
border: 2px solid #033b77; /* Azul marino de la cabecera (antes naranja) */
background-color: #f5f5f5; /* Gris claro de la paleta de la web (neutro; el naranja lo pone el borde) */
border-radius: 8px; /* Ajusta este valor según cuánto desees redondear los bordes */
margin-bottom: 100px;
}
form {
padding: 20px;
}
label {
display: block;
margin-bottom: 15px;
}
#idNombre, #idApellidos, #idTelefono, #idEmail {
width: 275px; /* Ajusta este valor según el ancho que desees */
max-width: 100%; /* que el ancho fijo nunca desborde su contenedor */
/* ... otros estilos que quieras añadir o modificar ... */
}
.label-label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.inputTexto, textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
background-color: #fff; /* Casillas de formulario en blanco */
border-radius: 4px;
font-size: 14px;
outline: none;
transition: border-color 0.3s;
}
.inputTexto:focus, textarea:focus {
border-color: #007BFF;
}
.ayuda {
font-size: 12px;
color: #666;
margin-top: 5px;
display: block;
}
.error_message_formularios {
font-size: 12px;
color: red;
margin-top: 5px;
display: block;
}
.lista-label-2 {
display: flex;
justify-content: space-between;
gap: 10px;
width: 48%;
}
/* Movil: los campos de contacto/servicios desbordaban. Dos trampas: (1) el ancho fijo
(275px, Empresa 550px) viene EN LINEA en el widget Django (utils/formas/contacto.py),
por eso el width de aqui necesita !important; (2) este bloque tiene que ir DESPUES de
la regla base .lista-label-2 de arriba — a igual especificidad gana la ultima del
fichero aunque este en media query (el width:48% pisaba el width:auto del movil y los
campos hacian el 100% de un contenedor al 48%). Los selectores #idNombre... viejos
estan muertos (los ids reales son id_Nombre...). */
.casilla_form_duplicada_en_linea {
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 767px) {
.lista-label-2 {
flex-direction: column;
width: auto;
}
.lista-label-2 .label-input {
min-width: 0;
}
.casilla_form_duplicada_en_linea {
width: 100% !important;
}
}
.g-recaptcha {
margin: 0 auto;
}
.boton {
background-color: #ef5927; /* A11Y-09 */
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.5s;
}
.boton:hover {
background-color: #033b77;
}
.centrado {
text-align: center;
}
/* Estilos jaime */
.texto_justificado{
text-align: justify;
}
.h3-normalizado {
font-size: 1.45rem;
}
/* Estilos nuevos inicio */
.table_head input[type=checkbox], .table_body input[type=checkbox] {
transform: scale(1.4);
}
/* Ocultar contenido de Alpine JS antes de cargar*/
[x-cloak] { display: none !important; }
/* Estilos para tablas de conteos */
.container_conteos {
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 0;
padding: 0!important;
}
.container_conteos .container_conteos_row {
display: contents;
}
.container_conteos_row :first-child {
text-align: right!important;
min-width: 0!important;
padding: 0!important;
}
.container_conteos_row :last-child {
text-align: left!important;
padding: 0!important;
padding-left: 5px!important;
}
/* Estilos para htmx */
.loading-indicator {
display: none;
}
.htmx-request .loading-indicator {
display: flex;
justify-content: center;
}
.htmx-request.loading-indicator{
display: flex;
justify-content: center;
}
/* Modal */
.modal-responsive-height {
max-height: 50vh; /* 50% of the viewport height, adjust as needed */
overflow-y: auto; /* Enables vertical scrolling */
}
/* Estilo para el botón flotante */
.boton-flotante {
/* A11Y 2a ronda: ahora es ; se neutralizan los estilos de boton nativo
para que se vea identico al anterior */
border: none;
font: inherit;
position: fixed;
/* right: 20px; */
/* calc(var(--bs-gutter-x)* .5) */
right: 20px;
top: 50%;
transform: translateY(-50%);
background-color: #ef5927;
color: white;
padding: 15px;
border-radius: 50px;
text-align: center;
cursor: pointer;
z-index: 1000;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* @media screen and (min-width: 1250px) {
.boton-flotante {
right: calc(((100vw - 1140px) / 4) - 25px)
}
} */
@media screen and (min-width: 1400px) {
.boton-flotante {
right: calc(((100vw - 1320px) / 4) - 25px)
}
}
@media screen and (max-width)
.table_total .totales-label {
font-size: 12px;
}
/* Filtros ayudas */
.filer_box:not(.filter_container_help) {
margin-top: 21px;
}
.filter_main_wrap {
/* Esta es la ULTIMA regla del selector y por tanto la que MANDA (cascada).
Antes -21px: compensaba el +21 de .filer_box (hueco para los iconos "?" de
ayuda) dejando la fila pegada a lo de arriba; ahora 22px de aire real
(Jaime 17-07, tras quitarse el "Limpiar filtro" cuando no hay filtros). */
margin-top: 12px;
}
.filter_main_wrap .btn_wrap {
margin-top: 21px;
}
.filter_container_help .filter_content_help {
width: 100%;
display: flex;
justify-content: flex-end;
text-align: center;
padding-right: 10px;
}
@media (max-width: 1024px) {
.filter_container_help {
margin-top: 5px;
}
}
/* Filtros ayudas fin */
/* MENU USER */
.menu_user {
display: flex;
align-items: center;
gap: 8px;
}
.menu_user .menu_separator {
color: inherit;
user-select: none;
}
.menu_user a,
.menu_user .menu_logout {
text-decoration: none;
color: inherit;
}
.menu_user a:hover,
.menu_user .menu_logout:hover {
color: #0dcaf0; /* A11Y 2a ronda: celeste sobre azul */
cursor: pointer;
}
/* Carrito */
.custom_radio_input {
border: 1px solid #000;
}
.detail_heading_2 {
font-size: 1.5rem;
}
/* Estilos nuevos fin */
/* MODAL ZONAS NO WRAP TODAS ZONAS */
.todas-zonas {
white-space: nowrap;
}
.search_result li {
cursor: pointer;
}
/* CUSTOM LIST */
.custom-list li {
list-style-type: disc;
margin-left: 20px;
}
.custom-list {
padding-left: 0;
}
.custom-list-no-dot {
list-style-type: none;
}
/* Estilos links general */
.link-global, .blog-content a {
color: #ef5927; /* A11Y 3a ronda */
}
.link-global:hover {
color: white;
}
/* Para cuando el fondo es blanco */
.link-global.back-white:hover, .blog-content a:hover {
color: #1d1d1d;
}
/* Estilos para el blog */
.blog-container .page-link {
color: #ef5927; /* A11Y 3a ronda */
}
.blog-container .active .page-link {
background-color: #ef5927; /* A11Y-09 */
border-color: #ef5927;
color: white;
}
/* Correcciones a muestra del contenido del blog */
.blog-content img {
max-width: 100%;
height: auto;
}
.blog-content table {
max-width: 100%;
}
ul.modo-lista {
list-style-type: disc;
padding-left: 20px; /* Opcional: agrega espacio para alinear */
}
ul.modo-lista li {
margin-bottom: 5px;
}
a.desactivar-enlace {
pointer-events: none;
cursor: default;
filter: brightness(90%);
}
/* FIX para poder mostrar el texto del tooltip por problemas de overflow */
.filter_drodown_ul.extrs {
overflow: visible;
}
@media screen and (max-width: 1024px) {
.contenedor-botones {
width: 100%;
margin-bottom: 8px;
}
}
/* Ajustes a botones de modal selección rápida */
@media screen and (max-width: 500px) {
.contenedor-seleccion-rapida {
flex-wrap: wrap!important;
}
.contenedor-seleccion-rapida button {
margin: 0 0 5px 0!important;
}
}
/* Estilos para el tooltip cuando es tipo botón */
button.tooltip_main {
all: unset; /* elimina TODOS los estilos por defecto */
cursor: pointer; /* mantiene el cursor de botón */
}
/* Estilos para datos de facturación en el carrito */
.billing-data {
line-height: 1.2;
}
/* Autorrelleno del navegador (2026-07-10, revisión de Jaime): Chrome pinta de amarillo
los campos autorrellenados, fuera de la línea de color de la web. Se sustituye por
el tinte naranja corporativo suave (#fff3ee, mismo tono de las ilustraciones). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff3ee inset !important;
box-shadow: 0 0 0 1000px #fff3ee inset !important;
-webkit-text-fill-color: #333 !important;
transition: background-color 5000s ease-in-out 0s;
}
/* Inputs de los formularios (2026-07-10, revisión de Jaime): la clase que llevan los
campos de texto no tenía estilos y la primera letra quedaba pegada al borde.
Mismo acolchado y acabado que .inputTexto/textarea. */
.casilla_form_duplicada_en_linea {
padding: 8px 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
.casilla_form_duplicada_en_linea:focus {
border-color: #033b77;
outline: none;
}
/* Barra de compartir en los posts del blog (2026-07-13) */
.compartir-post{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0 8px;padding-top:16px;border-top:1px solid #e5e7eb;}
.compartir-post .compartir-label{font-weight:600;color:#033b77;margin-right:4px;}
.compartir-post .compartir-btn{display:inline-block;padding:7px 14px;border-radius:4px;color:#fff;text-decoration:none;font-size:.9em;border:none;cursor:pointer;line-height:1.2;}
.compartir-post .compartir-btn:hover{opacity:.88;}
.compartir-post .compartir-btn.wa{background:#25D366;}
.compartir-post .compartir-btn.li{background:#0A66C2;}
.compartir-post .compartir-btn.tw{background:#000000;}
.compartir-post .compartir-btn.em{background:#6b7280;}
.compartir-post .compartir-btn.copiar{background:#033b77;}
/* 2026-07-18 (Jaime): aire antes de la foto del producto en movil. padding (no colapsa)
y regla al final del fichero para que no la pise ninguna otra .single_product/.product_img. */
@media (max-width: 767px) {
/* .single_pro_header y .single_product NO son hermanos (contenedores distintos),
por eso el selector adyacente no casaba. Directo a .single_product. */
.single_product {
padding-top: 24px;
}
}
/* ===== Menú móvil rediseñado — AZUL CORPORATIVO (Jaime 2026-07-18) =====
Al FINAL del fichero para ganar la cascada (ver GUIA_CSS_BREKIADATA.md). Solo móvil. */
@media (max-width: 1024px) {
.nav_wrap {
width: 320px;
background-color: #033b77;
color: #fff;
padding: 58px 0 24px; /* hueco para la cabecera MENÚ */
box-shadow: -6px 0 24px rgba(0,0,0,.28);
}
/* Cabecera del panel: "MENÚ" a la izquierda; la X va fija arriba a la derecha */
.nav_wrap::before {
content: "MEN\00da";
position: absolute; top: 0; left: 0; right: 0; height: 52px;
display: flex; align-items: center; padding: 0 18px;
color: #fff; font-weight: 700; letter-spacing: 2px; font-size: 14px;
background: rgba(0,0,0,.18);
border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Filas anchas táctiles con separadores */
.nav_wrap .nav > li { width: 100%; padding: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
.nav_wrap .nav > li.cross_btn { border-bottom: 0; }
.nav_wrap li > a,
.nav_wrap li:not(.cross_btn) > button,
.header .nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus) {
color: #fff;
display: flex; align-items: center; justify-content: flex-start; gap: 12px;
padding: 15px 18px; font-size: 16px; width: 100%;
}
/* el chevron (última
) siempre a la derecha */
.nav_wrap .nav > li > a > span:last-child,
.nav_wrap .nav > li > button > span:last-child { margin-left: auto; }
/* iconos de sección: solo en el menú móvil, heredan el color (blanco / naranja activo) */
.nav_wrap .menu-icon { width: 21px; height: 21px; flex-shrink: 0; display: inline-flex; }
/* chevron blanco a la derecha + rotación al abrir */
.nav_wrap .down_arrow { filter: brightness(0) invert(1); transition: transform .25s ease; width: 12px; }
.nav_wrap .nav > li.active > button .down_arrow,
.nav_wrap .childlink.open > .dropdown-menus .down_arrow { transform: rotate(180deg); }
/* activo: texto naranja (la barra inferior naranja existente se mantiene) */
.nav_wrap .nav > li.active > a,
.nav_wrap .nav > li.active > button { color: #ef5927; }
/* submenús: fondo gris claro (#efefef) con texto OSCURO (legible) y chevron oscuro */
.nav_wrap .dropdown-submenu_wrap { background: #efefef; }
.nav_wrap .dropdown-submenu { background: transparent; }
.nav_wrap .dropdown-submenu li a,
.nav_wrap .dropdown-submenu li button.dropdown-menus {
color: #1d1d1d; padding: 13px 18px 13px 32px; font-size: 15px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav_wrap .dropdown-submenu .down_arrow { filter: brightness(0); } /* chevron oscuro sobre gris */
.nav_wrap .childlink.open > .dropdown-menus { color: #ef5927; }
/* estado táctil */
.nav_wrap li > a:active, .nav_wrap li > button:active { background: rgba(255,255,255,.08); }
/* X de cierre: blanca, en la cabecera */
.header .nav .cross_btn { top: 8px; right: 6px; }
.cross_btn img { width: 18px; filter: brightness(0) invert(1); }
}
/* Iconos del menú: ocultos salvo en el menú móvil (ver bloque @media) */
.menu-icon { display: none; }
/* ===== Menú móvil: ajustes finos (Jaime 2026-07-18) — al final para ganar cascada ===== */
@media (max-width: 1024px) {
/* Chevron de nivel superior (sobre el azul) en BLANCO. Especificidad (0,3,2) para
ganar a .nav_wrap .nav > li .down_arrow (línea 2060, invert(1)). */
.nav_wrap .nav > li > a .down_arrow,
.nav_wrap .nav > li > button .down_arrow { filter: brightness(0) invert(1); }
/* Chevron del SUBMENÚ (sobre el gris) oscuro, con la misma especificidad. */
.nav_wrap .dropdown-submenu li button .down_arrow { filter: brightness(0); }
/* Barra naranja del activo: la de li:after cae al fondo del (bajo todo el gris).
La anulamos y ponemos una línea naranja al PIE del botón azul (justo antes del gris). */
.nav_wrap .nav > li.active::after { content: none; }
.nav_wrap .nav > li.active > a,
.nav_wrap .nav > li.active > button { box-shadow: inset 0 -3px 0 #ef5927; }
}
/* Flecha flotante (scroll a totales) DESACTIVADA por Jaime (2026-07-18) */
.boton-flotante { display: none !important; }
/* Menú móvil: el submenú gris tenía padding 10px arriba/abajo que dejaba una franja
gris vacía tras el último ítem — se quita (Jaime 2026-07-18). */
@media (max-width: 1024px) {
.nav_wrap .dropdown-submenu { padding-top: 0; padding-bottom: 0; }
}
/* Menú móvil: sangría creciente por nivel de submenú (Jaime 2026-07-18) para que se note
que 'BBDD por comunidades/provincias' y sus listados están a otro nivel.
Nivel 1 (dropdown-submenu) = 32px (regla base). Nivel 2 (child-link) = 48px.
Nivel 3 (grand-child-link) = 64px. Al final del CSS + especificidad para ganar. */
@media (max-width: 1024px) {
.nav_wrap .dropdown-submenu .child-link > li > a,
.nav_wrap .dropdown-submenu .child-link > li > button { padding-left: 48px; }
.nav_wrap .dropdown-submenu .grand-child-link > li > a,
.nav_wrap .dropdown-submenu .grand-child-link > li > button { padding-left: 64px; }
}
/* === Responsive de contenido (2026-07-19): imágenes de texto, vídeo Quiénes Somos, migas, reseñas === */
.video-flotante-quienes{ float: left; width: 560px; max-width: 100%; margin: 0 15px 10px 0; }
@media (max-width: 767px){
.video-flotante-quienes{ float: none; width: 100%; margin: 0 0 15px; }
/* Imágenes dentro de bloques de texto: no desbordan, se centran y dejan aire + salto debajo. */
.texto-estatico img,
.texto_justificado img,
.container-formatea-enlaces img{
max-width: 100% !important;
height: auto !important;
float: none !important;
clear: both !important;
display: block;
margin: 0 auto 22px auto !important;
}
/* Migas de pan: el boton "Volver" no debe salirse por la derecha. */
.volver-migas{ left: auto !important; right: 0; }
/* Resenas de la home: escalar estrellas y que "22 resenas" no parta ni desborde. */
.review_raing a{ margin-top: 24px; }
.review_raing ul{ margin: 0 6px; }
.review_raing ul li{ margin: 0 2px; }
.review_raing ul li img{ width: 30px; height: auto; }
.review_raing span{ white-space: nowrap; }
.review_section{ margin-bottom: 55px; }
}
/* === Menú de escritorio 1201-1399px: apretar padding para que "Blog" no salte a 2ª línea === */
@media (min-width: 1201px) and (max-width: 1399px){
.nav_wrap li a,
.nav_wrap li button.dropdown-menus,
.nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus),
.header .nav_wrap li:not(.cross_btn) > button:not(.dropdown-menus){
padding-left: 8px;
padding-right: 8px;
}
}
/* A11Y (2026-07-20): las cabeceras de filtro (.filer_text) reciben foco de teclado; foco visible */
.filer_box .filer_text:focus-visible {
outline: 2px solid #033b77;
outline-offset: -2px;
}
/* ============================================================================
Botones de ventanas emergentes UNIFICADOS (2026-07-20, decision de Jaime, #19)
Antes convivian 4 colores de "accion principal", 3 de "cancelar" y 3 aspas.
Ahora: accion=naranja marca, secundario/cerrar=negro, destructivo=rojo, 1 aspa.
Bloque al FINAL a proposito (regla de la casa: gana la ultima aparicion).
============================================================================ */
:root {
--btn-accion-bg: #ef5927;
--btn-secundario-bg: #033b77; /* azul corporativo (Jaime 2026-07-20: el negro resultaba agresivo); 11:1 con blanco */
--btn-secundario-hover: #022a56;
--btn-destructivo-bg: #d33636;
--btn-destructivo-hover:#b02a2a;
}
.popup-btn {
display: inline-block;
margin: .3em .4em;
padding: 11px 24px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
.popup-btn:focus-visible { outline: 3px solid #033b77; outline-offset: 2px; }
.popup-btn--accion { background-color: var(--btn-accion-bg); }
.popup-btn--accion:hover { background-color: var(--btn-accion-bg); filter: brightness(0.9); color: #fff; }
.popup-btn--secundario { background-color: var(--btn-secundario-bg); }
.popup-btn--secundario:hover { background-color: var(--btn-secundario-hover); color: #fff; }
.popup-btn--destructivo { background-color: var(--btn-destructivo-bg); }
.popup-btn--destructivo:hover { background-color: var(--btn-destructivo-hover); color: #fff; }
.popup-btn--alternativo { background-color: transparent; color: var(--btn-secundario-bg); box-shadow: inset 0 0 0 2px var(--btn-secundario-bg); }
.popup-btn--alternativo:hover { background-color: var(--btn-secundario-bg); color: #fff; box-shadow: inset 0 0 0 2px var(--btn-secundario-bg); }
.swal2-close.popup-x { color: #888; box-shadow: none; }
.swal2-close.popup-x:hover, .swal2-close.popup-x:focus { color: #2b2b2b; }
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .85; }
.modal-header .btn-close:hover { opacity: 1; }
/* ============================================================================
Desglose UNIFICADO del listado (2026-07-21, Jaime). Base + extras como secciones
apiladas (orden fijo), casilla por extra (base fija), precio + ? + muestra por
seccion, tabla de conteos del tiron para base y extras añadidos.
============================================================================ */
.desglose_unificado { padding: 4px 0 10px; text-align: left; }
.dsec { border-top: 1px solid #e6ecf3; padding: 12px 4px 6px; }
.dsec:first-child { border-top: none; }
.dsec--off { opacity: .92; }
.dsec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dsec-chk { width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer; accent-color: #033b77; }
.check-base-fija.dsec-chk { cursor: default; }
.dsec-nombre { font-size: 17px; font-weight: bold; color: #033b77; }
.dsec-head .nb-lastword-icon { font-size: 17px; font-weight: bold; color: #033b77; }
.dsec-help { margin-left: 2px; }
/* 2026-07-21: SweetAlert por encima de los modales (el carrito usa z-index 10000) */
.swal2-container { z-index: 100010 !important; }
/* 2026-07-21: nombre + ? + referencia en un solo contenedor inline (evita el doble espacio del glue) */
.dsec-titulo { line-height: 1.35; }
/* 2026-07-21: la ? del desglose debe centrarse en su circulo (.tooltip-filter la dejaba inline-block y perdia el flex) */
.dsec-help.tooltip-filter-icon { display: inline-flex; align-items: center; justify-content: center; }
.dsec-ref { color: #8aa0bd; font-size: 12px; font-weight: normal; margin-left: 6px; white-space: nowrap; letter-spacing: .2px; }
.dsec-tag { display: inline-flex; align-items: center; line-height: 1; background: #ef5927; color: #fff; font-size: 11px; font-weight: bold; padding: 4px 9px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }
.dsec-precio { margin-left: auto; color: #033b77; font-weight: bold; font-size: 15px; white-space: nowrap; }
.dsec-muestra { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #033b77; color: #033b77; border-radius: 5px; padding: 4px 10px; font-size: 13px; font-weight: bold; text-decoration: none; white-space: nowrap; }
.dsec-muestra img { width: 15px; height: 15px; }
.dsec-muestra:hover { background: #033b77; color: #fff; }
.dsec-muestra:hover img { filter: brightness(0) invert(1); }
.dsec-tabla { margin-top: 9px; overflow-x: auto; }
.dsec-tabla table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dsec-tabla th { background: #eef3fa; color: #033b77; text-align: left; padding: 6px 9px; border-bottom: 2px solid #d8e2f0; font-weight: bold; white-space: nowrap; }
.dsec-tabla td { padding: 7px 9px; border-bottom: 1px solid #d8e2f0; background: #fff; text-align: left; }
.dsec-tabla th:first-child, .dsec-tabla td:first-child { width: 30%; }
.dsec-hint { color: #9aa4b1; font-size: 12px; font-style: italic; margin: 5px 0 2px 27px; }
.dsec-toggle { background: #fff; border: 1.5px solid #033b77; color: #033b77; border-radius: 5px; padding: 4px 10px; font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.dsec-toggle:hover { background: #033b77; color: #fff; }
.dsec-replegar { text-align: center; margin-top: 14px; padding-top: 8px; border-top: 1px solid #e6ecf3; }
.dsec-replegar button { background: none; border: none; color: #033b77; font-weight: bold; font-size: 13.5px; cursor: pointer; padding: 6px 12px; }
.dsec-replegar button:hover { text-decoration: underline; }
.dsec-aviso { background: #fff7f3; border: 1px solid #f3c9b6; border-left: 4px solid #ef5927; border-radius: 6px; padding: 11px 15px; font-size: 14px; color: #333; margin: 0 0 18px; line-height: 1.45; }
/* 2026-07-21: enlace del aviso -> filtro de EXTRAS, + destello al llegar */
.dsec-aviso-link { color: #033b77; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dsec-aviso-link:hover, .dsec-aviso-link:focus { color: #ef5927; }
.filer_box.filtro-destacado { animation: destelloFiltro 1.1s ease-in-out 0s 2; border-radius: 6px; }
@keyframes destelloFiltro { 0%,100% { box-shadow: 0 0 0 0 rgba(239,89,39,0); } 50% { box-shadow: 0 0 0 3px rgba(239,89,39,.55); } }
.dsec-nota-muestras { font-size: 14px; color: #555; background: #f6f8fb; border: 1px solid #e2e7ee; border-radius: 6px; padding: 11px 15px; margin: 8px 4px 12px; line-height: 1.5; }
/* 2026-07-21 (Jaime): en movil el desglose se ve IGUAL que en escritorio (mismas lineas y
mismo orden de elementos); para ver lo que no entra se usa la barra de desplazamiento
horizontal de la tabla. Unica excepcion: reducir la sangria de 100px del listado para
que los nombres de los paquetes se vean sin necesidad de hacer scroll. */
@media (max-width: 767px) {
.table .table_body .show_table_down_box.desglose_unificado { padding-left: 12px; }
}
/* FF-A11Y-26/27 (2026-07-28): columnas del filtro como con anidado (HTML valido, sin hijo de
ni dentro de ). Neutralizar el estilo de item heredado y resetear el anidado para que el aspecto sea identico. */
.filter_drodown_ul > li.col.left { padding-left: 0; }
.filter_drodown_ul > li.col.left > .filter_col_list { list-style: none; margin: 0; padding: 0; }
.filter_drodown_ul.extrs > li.col.left { flex: 0 1 auto; margin-right: auto; }
.filter_drodown_ul.caiadad > li.col.left { margin-right: auto; }
/* ===== GUIA "¿QUE PACKS NECESITO?" en la ficha (2026-08-12, Jaime) ==========
Bloque plegable encima de la lista de extras. Traduce el objetivo del cliente
a los packs que tiene que marcar. Prefijo .gpk- para no chocar con nada.
Colores de marca: azul #033b77, naranja #ef5927 (texto en #d64110, mas
contraste). Breakpoint del proyecto: 767px. */
.gpk {
border: 1px solid #b0cded;
border-radius: 4px;
background: #ffffff;
margin: 0 0 22px;
overflow: hidden;
}
.gpk-cabecera {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
background: #eef4fb;
list-style: none;
}
.gpk-cabecera::-webkit-details-marker { display: none; }
.gpk-cabecera:hover { background: #e3edf8; }
.gpk-cabecera:focus-visible { outline: 2px solid #ef5927; outline-offset: -2px; }
.gpk-cabecera-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gpk-titulo {
font-family: 'Josefin Sans', sans-serif;
font-size: 19px;
font-weight: 700;
color: #033b77;
line-height: 1.2;
}
.gpk-sub { font-size: 14px; color: #56799f; line-height: 1.35; }
.gpk-chevron {
flex: 0 0 auto;
width: 11px;
height: 11px;
border-right: 2px solid #033b77;
border-bottom: 2px solid #033b77;
transform: rotate(45deg);
margin-right: 4px;
transition: transform .18s ease;
}
.gpk[open] .gpk-chevron { transform: rotate(-135deg); }
.gpk-cuerpo { padding: 18px; border-top: 1px solid #dbe7f4; }
.gpk-intro { font-size: 15px; color: #1d1d1d; margin: 0 0 16px; max-width: 78ch; }
.gpk-intro strong { color: #033b77; font-weight: 600; }
.gpk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gpk-fila {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
gap: 10px 22px;
align-items: center;
padding: 14px 16px;
border: 1px solid #e2e2e2;
border-left: 3px solid #ef5927;
border-radius: 3px;
background: #ffffff;
}
.gpk-fila--destacada { background: #fff8f4; border-color: #f6c4ac; border-left-color: #ef5927; }
.gpk-objetivo { min-width: 0; }
.gpk-objetivo h4 {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: #1d1d1d;
margin: 0 0 2px;
line-height: 1.2;
}
.gpk-objetivo p { font-size: 13.5px; color: #888888; margin: 0; line-height: 1.35; }
.gpk-necesitas { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gpk-pack {
display: inline-block;
font-family: 'Josefin Sans', sans-serif;
font-size: 13.5px;
font-weight: 600;
color: #d64110;
background: #fff3ee;
border: 1px solid #ef5927;
border-radius: 2px;
padding: 3px 8px;
}
.gpk-pack--base { color: #56799f; background: #f7f7f7; border-color: #d1d1d1; }
.gpk-ref { font-size: 11px; font-weight: 400; opacity: .8; }
.gpk-detalle { flex: 1 1 100%; font-size: 13.5px; color: #56799f; margin: 2px 0 0; line-height: 1.4; }
.gpk-detalle strong { color: #1d1d1d; font-weight: 600; }
.gpk-nota {
margin: 14px 0 0;
padding: 12px 14px;
background: #fff3ee;
border: 1px solid #ef5927;
border-radius: 3px;
font-size: 14px;
color: #1d1d1d;
line-height: 1.45;
}
.gpk-nota strong { color: #d64110; font-weight: 600; }
.gpk-pie { margin: 12px 0 0; font-size: 12.5px; color: #888888; line-height: 1.45; }
@media (max-width: 767px) {
.gpk-fila { grid-template-columns: 1fr; align-items: start; }
.gpk-titulo { font-size: 17px; }
.gpk-cuerpo { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.gpk-chevron { transition: none; }
}
/* Defensa de la guia frente a los estilos de la tabla de extras (2026-08-13).
El bloque vive ahora FUERA de .table_responsive, pero si alguien lo devuelve
dentro de .table heredaria dos reglas que lo rompen en movil:
- style.css:1321 .table ul li { flex: 1; text-align: center; }
- style.css:2231 .table { min-width: 1120px; } (dentro de max-width:767px)
Con las dos, los titulos de fila se centraban en 1120px y quedaban fuera de la
pantalla en un movil (visto en un Pixel 7). Esto lo sujeta pase lo que pase. */
.gpk { text-align: left; }
.gpk .gpk-lista > li.gpk-fila { text-align: left; flex: none; }
/* Acceso a la guia de packs desde el desplegable del filtro EXTRAS (2026-08-13).
El boton "?" de ayuda es un circulo de 16px fuera del desplegable y pasa
desapercibido; este enlace va donde el usuario esta marcando las casillas. */
.gpk-abrir {
display: block;
margin: 8px 0 0;
padding: 0;
border: 0;
background: none;
font-family: 'Josefin Sans', sans-serif;
font-size: 13.5px;
font-weight: 600;
color: #d64110;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
text-align: left;
}
.gpk-abrir:hover { color: #1d1d1d; }
.gpk-abrir:focus-visible { outline: 2px solid #033b77; outline-offset: 2px; border-radius: 2px; }
/* FAQ de la ficha de actividad (2026-08-24). Las preguntas son y salian con el
tamaño por defecto del navegador, demasiado grandes: la clase heading-4 que llevaban
NO existe en esta hoja (solo hay .heading y .heading-2). Se igualan al cuerpo de
texto, 17px como el body. Va al final del fichero a proposito: a igual especificidad
manda la ultima regla. */
.faq-ficha h3 {
font-size: 17px;
font-weight: 600;
margin-bottom: 6px;
}
/* Desglose por municipio (2026-08-24). El grafico son barras de CSS y no un canvas
a proposito: asi el nombre y la cifra siguen siendo texto que Google lee. */
.municipios-actividad .mun-fila {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.municipios-actividad .mun-nombre { flex: 0 0 38%; font-size: 15px; }
.municipios-actividad .mun-barra-fondo {
flex: 1 1 auto;
background: #eef2f6;
border-radius: 3px;
height: 18px;
}
.municipios-actividad .mun-barra {
background: #00ADE0;
height: 18px;
border-radius: 3px;
min-width: 2px;
}
.municipios-actividad .mun-cifra { flex: 0 0 130px; text-align: right; font-size: 15px; }
.municipios-actividad .mun-pct { color: #6c757d; }
.municipios-actividad .mun-tabla td,
.municipios-actividad .mun-tabla th { font-size: 15px; }
@media (max-width: 767px) {
.municipios-actividad .mun-nombre { flex: 0 0 45%; font-size: 14px; }
.municipios-actividad .mun-cifra { flex: 0 0 95px; font-size: 14px; }
}
/* 2026-08-25 (lo vio Rafael): el boton "anadir al carrito SIN extras" se montaba encima
del subtitulo "Listado de X en Y" y tapaba el final del texto. Lo reporto con el caso
de Empresas de Abastecimiento de agua, y pasa igual en Organismos de la Direccion
general de la guardia civil: en las actividades de nombre largo.
Causa: ese boton es .single_pro_header .extra_price .product_cart, que va en absoluto a
top:100% de la columna del precio (ver la regla de la linea ~1794, del 18-07). El
comentario de entonces daba por hecho que "la columna del titulo es mas alta" y que por
eso el boton caeria en un hueco libre. Medido el 25-08 con el navegador: NO es asi, el
header acaba justo donde acaba la columna del precio, asi que el boton sobresale SIEMPRE
~75px por debajo del header e invade la seccion de abajo, en las 382 fichas. Solo se
NOTA cuando el texto del subtitulo es largo y llega hasta esa banda.
Arreglo: se reserva esa banda derecha en el subtitulo y en la referencia, para que el
texto no pase por debajo del boton. Se prefiere esto a bajar el contenido 75px porque
asi no se mueve la maqueta de ninguna ficha (era justo lo que se buscaba en julio).
Solo en escritorio: en movil el boton va en flujo normal (regla de la linea ~1812). */
@media (min-width: 768px) {
.single_pro_des .title.detail_heading_2,
.single_pro_des .number {
padding-right: 86px;
}
}
/* 2026-08-26: "Tambien conocida como: ..." bajo el subtitulo de la ficha. Discreta a
proposito: es informacion util para quien llega buscando otra palabra, pero no debe
competir con el subtitulo ni con el precio. Solo aparece en las 121 actividades que
tienen sinonimos. */
.single_pro_des .tambien-conocida {
font-size: 14px;
color: #6c757d;
margin: 2px 0 6px;
line-height: 1.35;
}
@media (max-width: 767px) {
.single_pro_des .tambien-conocida { font-size: 13px; }
}
/* ------------------------------------------------------------------ */
/* 2026-08-27 — Cifras y tabla de actividades en la pagina de categoria.
Va al FINAL del fichero a proposito: a igual especificidad gana la ultima
regla (ver GUIA_CSS_BREKIADATA.md, punto 2).
⚠️ ESTO VA SOBRE EL AZUL DEL HERO (.hero_section, fondo #033b77, texto #fff).
La primera version se escribio con azules oscuros dando por hecho un fondo
blanco y los nombres de las actividades salieron azul marino sobre azul
marino: invisibles. Los enlaces usan #0dcaf0, que es el celeste que ya usa
.leer_mas_data a sobre este mismo fondo.
NO se reutiliza la clase .table del proyecto: lleva min-width 1120px en movil
y saca el texto de la pantalla. */
/* ------------------------------------------------------------------ */
.cat-resumen {
margin: 4px 0 20px;
font-size: 16px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
}
.cat-resumen__cifra {
font-size: 26px;
color: #fff;
letter-spacing: -0.5px;
}
/* El envoltorio es quien hace scroll, no la pagina: con 6 columnas en un movil
la tabla no cabe. El aire de abajo va en PADDING y no solo en margin porque
el margin colapsa con el del parrafo siguiente (guia CSS, punto 3). */
.cat-tabla-wrap {
overflow-x: auto;
margin: 16px 0 22px;
padding-bottom: 24px;
-webkit-overflow-scrolling: touch;
}
.cat-tabla {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-size: 15px;
color: #fff;
}
.cat-tabla th {
text-align: left;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
font-weight: 600;
padding: 0 12px 8px 0;
border-bottom: 2px solid rgba(255, 255, 255, 0.35);
white-space: nowrap;
}
.cat-tabla td {
padding: 9px 12px 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
vertical-align: baseline;
}
.cat-tabla th.num,
.cat-tabla td.num {
text-align: right;
padding-right: 0;
padding-left: 14px;
white-space: nowrap;
}
.cat-tabla td.num {
color: rgba(255, 255, 255, 0.88);
/* Sin esto los digitos de distinto ancho descolocan la columna. */
font-variant-numeric: tabular-nums;
}
.cat-tabla tbody tr:hover td {
background: rgba(255, 255, 255, 0.07);
}
.cat-tabla a {
color: #0dcaf0;
text-decoration: none;
}
.cat-tabla a:hover,
.cat-tabla a:focus {
color: #fff;
text-decoration: underline;
}
/* El caption existe para lectores de pantalla, no se ve. */
.cat-tabla caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* La pista solo tiene sentido donde la tabla no cabe entera. */
.cat-tabla-pista { display: none; }
@media (max-width: 767px) {
.cat-resumen__cifra { font-size: 22px; }
.cat-tabla { font-size: 14px; min-width: 520px; }
.cat-tabla-pista {
display: block;
margin: 0 0 6px;
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
font-style: italic;
}
}
/* ---- FAQ de la pagina de categoria (2026-08-27) -------------------- */
/* Igual que la tabla: sobre el AZUL del hero (#033b77), texto blanco. */
/* 2026-08-30: la FAQ baja al final de la pagina y deja de estar sobre el azul de
.hero_section, asi que los colores pasan de blancos a los del texto normal. Y cada
pregunta es un , o sea un acordeon nativo: se abre con raton y con teclado,
sin JS. */
.cat-faq {
/* Separacion de lo de arriba: pegaba con "DESCARGAR CONTEOS" (Jaime, 30-08). */
margin: 48px 0 44px;
padding-top: 26px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/* El bloque entero se pliega: el titulo hace de tirador. */
.cat-faq__bloque {
margin: 0;
}
.cat-faq__titulo {
font-size: 19px;
font-weight: 700;
/* 2026-09-01 (Jaime): con color para que se vea que se pulsa y que despliega.
Azul corporativo: es el de la marca, el mismo del signo +/- que lleva al lado, y
es el color que todo el mundo asocia a un enlace. 11,08:1 sobre blanco. */
color: #033b77;
margin: 0;
padding-right: 30px;
cursor: pointer;
position: relative;
list-style: none;
display: block;
}
.cat-faq__titulo::-webkit-details-marker { display: none; }
.cat-faq__titulo::after {
content: "\25BE";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
color: #033b77;
font-size: 15px;
line-height: 1;
}
.cat-faq__bloque[open] > .cat-faq__titulo::after { content: "\25B4"; }
.cat-faq__bloque[open] > .cat-faq__titulo { margin-bottom: 14px; }
.cat-faq__titulo:focus-visible {
outline: 2px solid #033b77;
outline-offset: 2px;
}
.cat-faq__lista {
margin: 0;
padding: 0;
}
.cat-faq__item {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.cat-faq__item:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
/* summary: fuera el triangulo del navegador, que cambia de forma en cada uno, y en su
sitio un signo propio a la derecha. */
.cat-faq__p {
font-weight: 700;
color: #1d1d1d;
margin: 0;
padding: 15px 34px 15px 0;
line-height: 1.35;
cursor: pointer;
position: relative;
list-style: none;
}
.cat-faq__p::-webkit-details-marker { display: none; }
.cat-faq__p::after {
content: "+";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
font-weight: 400;
color: #033b77;
line-height: 1;
}
.cat-faq__item[open] > .cat-faq__p::after { content: "\2212"; }
.cat-faq__p:focus-visible {
outline: 2px solid #033b77;
outline-offset: 2px;
}
.cat-faq__r {
margin: 0;
padding: 0 34px 18px 0;
color: #3d3d3d;
line-height: 1.55;
max-width: 72ch;
}
@media (max-width: 767px) {
.cat-faq__titulo { font-size: 17px; }
.cat-faq__r { font-size: 15px; }
}
/* ---- Salidas hacia la compra en la categoria (2026-08-28) ----------- */
/* Propuesta de Rafael. Sobre el AZUL del hero (#033b77).
El boton va en BLANCO y no en naranja a proposito: el naranja (#ef5927) es
el color del boton FILTRAR, que esta justo encima, y dos naranjas juntos
compiten. El blanco sobre azul da mas contraste que cualquier otra opcion
y se lee como accion sin robarle el sitio al filtro. */
.cat-cta {
margin: 0 0 22px;
}
.cat-cta__boton {
display: inline-flex;
align-items: center;
gap: 9px;
background: #fff;
color: #033b77;
font-weight: 700;
font-size: 16px;
line-height: 1.2;
padding: 13px 26px;
border-radius: 100px;
border: 2px solid #fff;
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.cat-cta__boton:hover,
.cat-cta__boton:focus {
background: transparent;
color: #fff;
text-decoration: none;
}
.cat-cta__boton:focus-visible {
outline: 3px solid #0dcaf0;
outline-offset: 3px;
}
/* La segunda, tras la tabla: mismo destino, menos peso. Necesita aire ARRIBA
ademas del de abajo: pegada a la ultima fila se lee como parte de la tabla
en vez de como una accion aparte (lo vio Jaime). En padding y no en margin,
que el de la tabla ya colapsaria con el. */
.cat-cta--secundaria {
margin: 0 0 34px;
padding-top: 26px;
}
.cat-cta__enlace {
display: inline-flex;
align-items: center;
gap: 8px;
color: #0dcaf0;
font-weight: 600;
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid rgba(13, 202, 240, 0.45);
padding-bottom: 2px;
}
.cat-cta__enlace:hover,
.cat-cta__enlace:focus {
color: #fff;
border-bottom-color: #fff;
}
/* El ancla vive dentro del listado; el margen evita que el titulo quede
pegado al borde superior al saltar. */
.ancla-compra {
scroll-margin-top: 90px;
}
@media (max-width: 767px) {
.cat-cta__boton { font-size: 15px; padding: 12px 20px; width: 100%; justify-content: center; }
}
/* 2026-08-30: los rotulos del texto de zona (provincia y comunidad) eran
: se veian como titulos pero Google los leia como texto corriente, y la
pagina se quedaba con un solo h1 y ningun h2 de contenido. Ahora son h2 de verdad y
esta regla les devuelve el aspecto que tenian: mismo cuerpo que el texto, negrita y
subrayado, no el tamano grande que el navegador da a un h2 por defecto.
Van al FINAL del fichero a proposito (punto 2 de la guia: gana la ultima regla) para
que no los pise ningun h2 generico de mas arriba. Heredan el color: caen sobre el
fondo azul de .hero_section, donde el texto es blanco (punto 1 quinquies). */
.zona-subtitulo {
font-size: 1em;
font-weight: 700;
text-decoration: underline;
text-transform: none;
color: inherit;
margin-top: 2rem;
margin-bottom: 0;
line-height: inherit;
}
/* 2026-08-31: indice de zonas y sectores al final de /listado-de-empresas-espana/.
Va sobre fondo claro, no sobre el azul del hero. Los enlaces se separan con un punto
medio que pone la propia plantilla; aqui solo se les da aire y color de enlace. */
.indice-zonas {
margin: 44px 0;
padding-top: 26px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.indice-zonas__lista {
margin: 0 0 26px;
line-height: 2;
color: #3d3d3d;
}
.indice-zonas__lista a {
color: #033b77;
text-decoration: none;
}
.indice-zonas__lista a:hover,
.indice-zonas__lista a:focus-visible {
text-decoration: underline;
}
.indice-zonas__pie {
margin: 0;
font-weight: 700;
}
/* 2026-09-01: el color por si solo no basta para decir "esto se pulsa" (y quien no
distingue bien los colores no lo ve). Al pasar el raton se subraya, que es el gesto
que todo el mundo asocia a un enlace. */
.cat-faq__titulo:hover {
text-decoration: underline;
}