/* ══════════════════════════════════════════════════════════════════════════
   REVISIÓN AGOSTO 2026 — ajustes de identidad visual
   ══════════════════════════════════════════════════════════════════════════

   Este archivo NO reescribe child-theme.css (14.000 líneas generadas por SASS
   y servidas minificadas). Solo sobreescribe, al final de la cascada, los
   puntos concretos señalados en la revisión. Para revertir cualquier bloque
   basta comentarlo, o quitar el enqueue 'locopolo-revision-agosto' de
   functions.php para revertirlo todo de golpe.

   Se encola después de:
     locopolo-styles → locopolo-base-estilos → locopolo-landing-sectores
   ══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Verde corporativo, ya usado por inicio-page.css y landing-sectores.css */
	--lp-verde:       #a2a569;
	--lp-verde-dk:    #7a7d4f;
	/* "Gris muy clarito" pedido en la revisión para sustituir los hovers
	   negros/verdes de cuadros y textos clicables. */
	--lp-hover-gris:  #f2f1ef;
	--lp-borde-gris:  #d9d6d1;
	--lp-blanco-roto: #f7f6f4;
	--lp-negro:       #0d0d0c;
}


/* ══════════════════════════════════════════════════════════════════════════
   1 · BANNER INFERIOR — de amarillo a verde, y con nuestra tipografía
   Antes: fondo #FEE800 + fuente "Space Mono" (monoespaciada, ajena a la marca).
   ══════════════════════════════════════════════════════════════════════════ */

#wrapper-carousel-ad {
	background-color: var(--lp-verde);
	color: #ffffff;
	/* La revisión pide respetar nuestras tipografías en toda la web. */
	font-family: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	font-size: 14px;
	letter-spacing: 0.4px;
}

#wrapper-carousel-ad strong { font-weight: 800; }
#wrapper-carousel-ad em     { font-style: italic; }

#wrapper-carousel-ad.footer-ticker-link:hover {
	background-color: var(--lp-verde-dk);
	color: #ffffff;
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · HOVERS — fuera el negro y fuera el verde de relleno
   "Los 5 iconos no deben ponerse negros al pasar el cursor por encima […]
    si queréis cambiar el color, este debe ser un gris muy clarito.
    Lo mismo se aplica a todos los cuadros o textos clicables que se ponen
    verdes en partes de esta sección y otras."
   ══════════════════════════════════════════════════════════════════════════ */

/* Tarjetas de sector (Home). Se conserva el movimiento (translateY). */
.ip-sector-card:hover {
	background: var(--lp-hover-gris);
	color: var(--lp-negro);
	border-color: var(--lp-negro);
}
.ip-sector-card:hover .ip-sector-card__icon,
.ip-sector-card:hover .ip-sector-card__name {
	color: var(--lp-negro);
}

/* Botones de la Home */
.ip-btn:hover              { background: var(--lp-hover-gris); color: var(--lp-negro); }
.ip-btn--solid             { background: var(--lp-negro); color: #ffffff; }
.ip-btn--solid:hover       { background: var(--lp-hover-gris); color: var(--lp-negro); }

/* Botones y formularios de las landings por sector */
.sector-landing .sl-btn--outline:hover,
.sector-landing .sl-form-submit:hover,
.sector-landing .sl-testi-btn:hover {
	background: var(--lp-hover-gris);
	color: var(--lp-negro);
}

/* Enlaces de producto: el verde se queda en el texto, no en el subrayado */
.sector-landing .sl-prod-card__link:hover {
	color: var(--lp-negro);
	border-color: transparent;
}


/* ══════════════════════════════════════════════════════════════════════════
   3 · VERDE: TEXTO SÍ, SUBRAYADO NO
   "no debemos jugar a las dos bazas […] queda más elegante el texto verde
    que el subrayado verde."
   ══════════════════════════════════════════════════════════════════════════ */

/* Títulos de sección: se retira la línea verde de debajo. */
.ip-sec-title,
.sector-landing .sl-sec-title {
	border-bottom: none;
	padding-bottom: 0;
}

/* H1 de las landings: el <mark> pasa de bloque verde a texto verde. */
.sector-landing .sl-hero__h1 mark {
	background: transparent;
	color: var(--lp-verde-dk);
	padding: 0;
	border-radius: 0;
}

/* Enlaces "Ver producto": texto verde sin subrayado verde. */
.sector-landing .sl-prod-card__link {
	color: var(--lp-verde-dk);
	border-bottom: none;
	padding-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   4 · MENÚ SUPERIOR — línea de resalte más fina
   "la línea que resalta cada uno de los puntos de arriba es demasiado gruesa"
   Antes: 5px negros. Ahora: 2px verdes (coherente con el punto 3).
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1320px) {
	#primary-menu ul.navbar-nav > li:before {
		height: 2px;
		background-color: var(--lp-verde);
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   5 · SELECTOR DE IDIOMAS — más fino
   "me parece muy basto tanto el tamaño como el grosor de la letra"
   Antes: 1.75rem / peso 700.
   ══════════════════════════════════════════════════════════════════════════ */

#buttons-menu li.wpml-ls-item > .nav-link {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.5px;
}
@media (min-width: 1320px) and (max-width: 1739.98px) {
	#buttons-menu li.wpml-ls-item > .nav-link {
		font-size: 0.9rem;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   6 · "¡PIDE YA!" (ORDER NOW) — ni amarillo ni negro: verde
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1320px) {
	#buttons-menu li:not(.wpml-ls-item):not(.menu-item-type-custom) .nav-link {
		background-color: var(--lp-verde);
		border-color: var(--lp-verde);
		color: #ffffff;
	}
	#buttons-menu li:not(.wpml-ls-item):not(.menu-item-type-custom) .nav-link:hover {
		background-color: var(--lp-verde-dk);
		border-color: var(--lp-verde-dk);
		color: #ffffff;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   7 · REDES SOCIALES — más protagonismo
   "el tamaño de los isotipos es muy pequeño"
   Antes: 24×24. Ahora: 34×34 (40×40 en pantallas grandes).
   ══════════════════════════════════════════════════════════════════════════ */

#fixed-right-sidebar .wp-social-link svg {
	width: 34px;
	height: 34px;
}
#fixed-right-sidebar .wp-social-link {
	padding: 0.35rem;
}
@media (min-width: 1320px) {
	#fixed-right-sidebar .wp-social-link svg {
		width: 40px;
		height: 40px;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   8 · TÍTULOS TIPO "BADGE" (FAQs, Contacto, ¡Pide ya!, fichas de familia)
   "El título es demasiado grande y las líneas demasiado gruesas"
   "esto debería ser un 30 40 o incluso un 50% más pequeño"
   Reducción ≈40% y sombra mucho menos marcada.
   ══════════════════════════════════════════════════════════════════════════ */

.badge--wrapper {
	filter: drop-shadow(0.14em 0.14em 0 #000000);
}

.badge--wrapper h1.badge, .badge--wrapper .badge.h1,
.badge--wrapper h2.badge, .badge--wrapper .badge.h2,
.badge--wrapper h3.badge, .badge--wrapper .badge.h3 {
	font-size: 1rem;
}
@media (min-width: 1320px) {
	.badge--wrapper h1.badge, .badge--wrapper .badge.h1 { font-size: 1.5rem; }
	.badge--wrapper h2.badge, .badge--wrapper .badge.h2 { font-size: 1.25rem; }
	.badge--wrapper h3.badge, .badge--wrapper .badge.h3 { font-size: 1.1rem; }
}

.badge--wrapper.term-badge .badge { font-size: 1.15rem; }
@media (min-width: 1320px) { .badge--wrapper.term-badge .badge { font-size: 1.4rem; } }
@media (min-width: 1740px) { .badge--wrapper.term-badge .badge { font-size: 1.9rem; } }


/* ══════════════════════════════════════════════════════════════════════════
   9 · FAQs — fuera el amarillo, líneas más finas
   "Tenemos que hacer desaparecer el amarillo. Entre amarillo, azul, verde
    y gris… Esto va a parecer una fiesta del circo mundial."
   ══════════════════════════════════════════════════════════════════════════ */

.accordion-button:after {
	border: 1.5px solid var(--lp-negro);
	box-shadow: 0.08rem 0.08rem 0 0 var(--lp-negro);
}
.accordion-button:hover:after {
	background-color: var(--lp-hover-gris);
}

/* FAQs de las landings por sector: líneas más finas. */
.sector-landing .sl-faqs-list { border: 1px solid var(--lp-negro); }
.sector-landing .sl-faq       { border-bottom: 1px solid var(--lp-borde-gris); }
.sector-landing .sl-faq summary { font-size: 14.5px; }


/* ══════════════════════════════════════════════════════════════════════════
   10 · STICKERS DE CATEGORÍA (Gourmet, Cocktail, Original, Sweet, Savoury)
   "igual que el logo gourmet, cocktail, etc. Estos son demasiado grandes"
   Antes: círculo amarillo, borde 3px, 3.25–4rem. Ahora: blanco roto,
   borde 1.5px y ≈45% más pequeño.
   ══════════════════════════════════════════════════════════════════════════ */

.sticker:not(.sticker-smiley) {
	background-color: var(--lp-blanco-roto);
	border: 1.5px solid var(--lp-negro);
	box-shadow: 0.08rem 0.08rem 0 0 var(--lp-negro);
	top: -1.25rem;
	left: -0.75rem;
}
@media (min-width: 1320px) {
	.sticker:not(.sticker-smiley) {
		top: -1.75rem;
		left: -1rem;
	}
}
.sticker:not(.sticker-smiley) img,
.sticker:not(.sticker-smiley) svg {
	width: 1.9rem;
	height: 1.9rem;
	padding: 0.25rem;
}
@media (min-width: 1320px) {
	.sticker:not(.sticker-smiley) img,
	.sticker:not(.sticker-smiley) svg {
		width: 2.2rem;
		height: 2.2rem;
		padding: 0.3rem;
	}
}

/* Iconos de sección en el listado de sabores. */
.flavor-section--icon img { width: 1.75rem; height: 1.75rem; }


/* ══════════════════════════════════════════════════════════════════════════
   11 · "SIN GLUTEN / SIN LACTOSA / VEGANO"
   "La línea tiene que ser mucho más fina. Dentro de los polos, el fondo no
    puede ser verde. Rompe totalmente la identidad Locopolo."
   Antes: fondo #d8f0e2 y texto/borde #2dab66. Ahora: neutro.
   ══════════════════════════════════════════════════════════════════════════ */

.free-from-badges .free-from-badge,
.flavor-detail--alergenos .free-from-badge {
	color: var(--lp-negro);
	background-color: transparent;
	border: 1px solid var(--lp-borde-gris);
	font-size: 12px;
}

/* Los filtros de arriba sí mantienen estado marcado, pero sin verde chillón. */
.product-diet-filters--option .free-from-badge {
	border-width: 1px;
}
.product-diet-filters--option input:checked + .free-from-badge {
	color: #ffffff;
	background-color: var(--lp-negro);
	border-color: var(--lp-negro);
}
.product-diet-filters--option input:focus-visible + .free-from-badge {
	outline: 2px solid var(--lp-negro);
}

/* La etiqueta "Nuevo" del listado de sabores tampoco va en verde. */
.flavor-tag--new {
	background: var(--lp-negro);
}


/* ══════════════════════════════════════════════════════════════════════════
   12 · CUADROS DE TEXTO DE LOS POLOS
   "Las líneas son demasiado gruesas, dan una imagen basta."
   "Todos los textos y su contenido debe estar alineado. Ejemplo: Choco
    avellana y choco caramelo no comparten la misma altura en el texto."
   Antes: borde 2.5px + sombra 4px. Ahora: 1.5px + 2px, y los badges
   empujados al fondo con margin-top:auto para que casen entre tarjetas.
   ══════════════════════════════════════════════════════════════════════════ */

.product-card-v2--card {
	border-width: 1.5px;
	box-shadow: 2px 2px 0 #161615;
}

.product-card-v2--card-body {
	display: flex;
	flex-direction: column;
}

/* Alineación: el espacio sobrante lo absorbe el margin-top:auto de las
   etiquetas (más abajo), NO la descripción. Si la descripción crece
   (flex:1 1 auto) estira su caja y el -webkit-line-clamp de 2 líneas deja
   de recortar: se veían 3 líneas. Por eso va a 0 0 auto. */
.product-card-v2--desc {
	flex: 0 0 auto;
}
.product-card-v2--alergenos-icons,
.product-card-v2--trazas,
.product-card-v2--card-body .free-from-badges {
	flex: 0 0 auto;
}
.product-card-v2--card-body .free-from-badges {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.3rem;
}

/* ── 12b · Tamaño y orientación del recuadro ──────────────────────────────
   "El tamaño de estos recuadros debería ser un 40-50% más pequeño y en
    horizontal, no en posición transversal."

   Medido antes en el navegador (columna de 421px, 3 por fila):
     recuadro blanco 287 x 366 px  →  ratio 0,78 = VERTICAL.

   Lo que lo hacía alto era la combinación de tres cosas: el nombre en
   1.3rem con un 30% de padding derecho (se partía en 2-3 líneas), los
   iconos de alérgeno a 28px y un min-height de 180px que la rejilla
   estiraba al alto de la tarjeta más larga de la fila. Se atacan las tres.
   ───────────────────────────────────────────────────────────────────────── */

/* Se ensancha el recuadro y se estrecha la imagen que lo solapa: así el
   nombre deja de partirse en tres líneas, que era la causa real del alto. */
.product-card-v2--card         { width: 82%; }
.product-card-v2--image-wrapper { width: 34%; right: 3%; }

.product-card-v2--card-body {
	padding: 0.7rem 21% 0.65rem 0.9rem;
	min-height: 0;
}

.product-card-v2--name {
	font-size: 0.95rem;
	margin-bottom: 0.2em;
}
/* La descripción se comía 96 de los 249px del recuadro (9 líneas). En la
   rejilla se recorta a 2 líneas; el texto completo sigue íntegro en la
   ficha de producto, que es donde se lee de verdad. */
.product-card-v2--desc {
	font-size: 0.72rem;
	line-height: 1.45;
	margin-bottom: 0.3rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Las trazas NO se recortan: truncar una lista de alérgenos con puntos
   suspensivos ("trazas de: Gluten,…") es peor que no tocarla. Solo se
   reduce el cuerpo de letra. Cuesta ~14px de alto y se acepta. */
.product-card-v2--trazas {
	font-size: 0.62rem;
	line-height: 1.35;
	margin: 0 0 0.3rem;
}

.product-card-v2--alergenos-icons { gap: 4px; }
.product-card-v2--alergenos-icons .alergeno-icon,
.product-card-v2--alergenos-icons img.alergeno-icon {
	width: 18px !important;
	height: 18px !important;
}

.free-from-badges .free-from-badge,
.flavor-detail--alergenos .free-from-badge {
	font-size: 10.5px;
	padding: 0.1rem 0.5rem;
}

/* El bloque ya no necesita reservar 2.5rem por debajo para la sombra. */
.product-card-v2--compact { padding-bottom: 1.25rem; }
.product-card-v2--image-wrapper { bottom: 1.25rem; }
.product-card-v2--shadow { height: 40px; bottom: 0.25rem; }

/* Estrella decorativa: acompañaba a las líneas gruesas, se afina y se
   reduce en proporción. */
.product-card-v2--sparkle {
	width: 30px;
	height: 41px;
	right: 62%;
	top: -5%;
}
.product-card-v2--sparkle path[stroke-width] {
	stroke-width: 2;
}

/* Tarjetas del listado de sabores y del detalle: líneas más finas. */
.flavor-tag    { border-width: 1px; }
.flavor-detail { border-width: 1px; }

/* Etiquetas fijas de la categoría proteicos: 2.5px es demasiado. */
.product-grid--proteico-tags .tag-proteico {
	border-width: 1.5px;
}


/* ══════════════════════════════════════════════════════════════════════════
   13 · RECUADROS DE CLIENTES (Encuéntranos)
   "Las líneas tienen que ser todas mucho más finas […] Y el azul de ver maps
    debe desaparecer. Esto tiene que ser un blanco roto como el nuestro.
    En algún caso […] podemos destacar esos textos de ver mapas en verde
    cuando pasemos el cursor por encima."
   ══════════════════════════════════════════════════════════════════════════ */

article.type-tienda.card {
	border-width: 1px;
	border-color: var(--lp-borde-gris);
}

/* "Ver Maps": era un btn-primary azul de Bootstrap. */
article.type-tienda .card-body .btn-primary,
.stores-search-form .btn-primary {
	background-color: var(--lp-blanco-roto);
	border: 1px solid var(--lp-negro);
	color: var(--lp-negro);
	box-shadow: none;
}
article.type-tienda .card-body .btn-primary:hover,
article.type-tienda .card-body .btn-primary:focus,
.stores-search-form .btn-primary:hover,
.stores-search-form .btn-primary:focus {
	background-color: var(--lp-blanco-roto);
	border-color: var(--lp-verde-dk);
	color: var(--lp-verde-dk);
}

/* Enlace "Ver en maps" del resumen de resultados. */
.results-map-link:hover {
	color: var(--lp-verde-dk);
}


/* ══════════════════════════════════════════════════════════════════════════
   14 · NOTA DEL MINI CORNER (Restauración)
   "Es importante destacar que ofrecemos el mini corner. De lo contrario
    somos menos atractivos."
   ══════════════════════════════════════════════════════════════════════════ */

.sector-landing .sl-fmt-note--centrada {
	justify-content: center;
	margin-top: 20px;
	font-size: 14px;
}


/* ══════════════════════════════════════════════════════════════════════════
   15 · LOGO — el actual se veía "un poco basto"
   Se acota el alto para que no domine la barra. El logo VERTICAL (Loco /
   Polo / San Sebastián) necesita un archivo nuevo que todavía no existe en
   el proyecto; cuando llegue, se sube y se cambia en Personalizar → Logo.
   ══════════════════════════════════════════════════════════════════════════ */

#main-nav .navbar-brand img,
#main-nav .navbar-brand .custom-logo {
	max-height: 52px;
	width: auto;
	height: auto;
}
@media (min-width: 1320px) {
	#main-nav .navbar-brand img,
	#main-nav .navbar-brand .custom-logo {
		max-height: 64px;
	}
}

/* ---------------------------------------------------------------------------
   Tarjeta de producto: enlace a la ficha
   La tarjeta no enlazaba a ningún sitio y la única forma de llegar a la ficha
   era la tabla de alérgenos. Enlazan el nombre y la imagen; el resto de la
   tarjeta se deja sin enlazar a propósito, porque dentro vive el botón «i» de
   los valores nutricionales y un stretched-link se lo comería.
   --------------------------------------------------------------------------- */
.product-card-v2--link {
	color: inherit;
	text-decoration: none;
}
.product-card-v2--link:hover,
.product-card-v2--link:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* El <a> se interpone entre el wrapper y la imagen, que va a height:100%: si no
   ocupa todo el hueco, la imagen se queda sin altura de referencia. */
.product-card-v2--image-link {
	display: block;
	width: 100%;
	height: 100%;
}
.product-card-v2--image-link img {
	transition: transform 0.25s ease;
}
.product-card-v2:hover .product-card-v2--image-link img {
	transform: scale(1.04);
}

/*
 * Locobó Cocktail (2026-10-02): la foto salía más pequeña que en el resto.
 * El hueco de la foto ocupa todo el alto de la tarjeta (top 0, bottom 1.25rem),
 * y las de cocktail son más bajas porque no tienen tabla nutricional ni iconos de
 * alérgenos: 120px frente a 194px, y la foto se quedaba en 100px en vez de 174px.
 * Con este mínimo, todas las tarjetas miden al menos lo que una normal (194px).
 */
.product-card-v2--compact { min-height: 12.125rem; }


/* ══════════════════════════════════════════════════════════════════════════
   16 · SOMBRA DE LOS DESPLEGABLES DEL MENÚ (reunión 2026-10-02)
   "La sombra es muy gruesa, reducirla a su mínima expresión."
   Antes: 0.5rem 0.5rem 0 negro sólido (8px). Ahora 2px, igual que las
   tarjetas de producto. Para volver atrás, borrar este bloque.
   ══════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
	--bs-dropdown-box-shadow: 2px 2px 0 0 #000000;
}


/* ══════════════════════════════════════════════════════════════════════════
   17 · FICHAS DE PRODUCTO (reunión 2026-10-02)
   "Sin gluten / sin lactosa: el texto más grande y el círculo mucho más
    pequeño. La línea que pasa por encima se ve muy mal."
   "Alérgenos a la derecha de sin gluten / sin lactosa (propuesta de Oier)."
   "Todas las líneas de todos los cuadros más finas. Títulos un pelín más
    grandes. Textos secundarios con la misma tipografía."
   La plantilla (content-product-card.php) agrupa distintivos e iconos en
   .product-card-v2--pie. Para volver atrás, borrar este bloque y restaurar
   la plantilla desde git.
   ══════════════════════════════════════════════════════════════════════════ */

/* Distintivos: fuera el contorno de 3px, el corte de esquina y la diagonal
   negra que heredaban del .badge global. Línea fina y caja ajustada al texto. */
.free-from-badges .free-from-badge,
.flavor-detail--alergenos .free-from-badge,
.product-diet-filters--option .free-from-badge {
	-webkit-clip-path: none;
	clip-path: none;
	box-shadow: none;
	border: 1px solid var(--lp-negro);
	border-radius: 50rem;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.25;
	padding: 0.1rem 0.5rem;
	white-space: nowrap;
}
.free-from-badges .free-from-badge::before,
.flavor-detail--alergenos .free-from-badge::before,
.product-diet-filters--option .free-from-badge::before {
	content: none;
}

/* Fila al pie: distintivos + iconos de alérgeno en horizontal. */
.product-card-v2--pie {
	flex: 0 0 auto;
	margin-top: auto;
	padding-top: 0.35rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
}
.product-card-v2--pie .free-from-badges,
.product-card-v2--card-body .product-card-v2--pie .free-from-badges {
	margin: 0;
	padding: 0;
	gap: 0.35rem;
}
.product-card-v2--pie .product-card-v2--alergenos-icons {
	margin: 0;
	gap: 4px;
	align-items: center;
}
.product-card-v2--pie .alergeno-icon-wrap { display: inline-flex; }
.product-card-v2--alergenos-icons .alergeno-icon,
.product-card-v2--alergenos-icons img.alergeno-icon {
	width: 20px !important;
	height: 20px !important;
}

/* Líneas de los cuadros más finas. La sombra desplazada, a 1px: a 1,5px
   seguía leyéndose como un borde grueso a la derecha y abajo (2026-10-02). */
.product-card-v2--card {
	border-width: 1px;
	box-shadow: 1px 1px 0 #161615;
}

/* Título un poco más grande. */
.product-card-v2--name {
	font-size: 1.05rem;
}

/* Textos secundarios: descripción y trazas con el mismo cuerpo, color e
   interlineado (antes 11,5px gris oscuro frente a 9,9px gris claro). */
.product-card-v2--desc,
.product-card-v2--trazas {
	font-size: 0.75rem;
	line-height: 1.45;
	color: #333333;
}
.product-card-v2--trazas {
	margin: 0 0 0.25rem;
}

/* ── Pie: enlaces legales (feedback web, punto 43; 2026-10-06) ──
   Aquí y no en sectores-rediseno.css, que solo se carga en las landings. */
.locopolo-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 12px;
	padding: 18px 16px 28px;
	font-size: 13px;
	color: #5c5c52;
}

.locopolo-legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La banda del pie va fija abajo y los tapaba: se deja su alto de aire. */
body.has-ticker .locopolo-legal {
	padding-bottom: 76px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Revisión en móvil (feedback web, punto 44; 2026-10-06)
   ══════════════════════════════════════════════════════════════════════════ */

/* El logo medía 333 px de ancho a 390 px de pantalla y el botón del menú caía
   a una segunda línea, debajo del logo, en todas las páginas. */
@media (max-width: 575.98px) {
	#main-nav .navbar-brand {
		max-width: calc(100% - 64px);
	}

	#main-nav .navbar-brand img,
	#main-nav .navbar-brand .custom-logo {
		max-height: 34px;
		max-width: 100%;
	}
}

/* Punto 21: los iconos flotantes (TikTok, Instagram, Spotify) iban sin fondo y
   al bajar se montaban sobre el texto y las fotos. Ahora llevan un círculo
   blanco, como contrapunto al de WhatsApp, que es negro. */
#fixed-right-sidebar .wp-social-link:not(.wp-social-link-whatsapp) {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}

@media (max-width: 575.98px) {
	#fixed-right-sidebar .wp-social-link svg {
		width: 24px;
		height: 24px;
	}
}

/* 2026-10-06: Contacto — párrafo con teléfono y correo (BD, sin clase) encima del formulario: separarlo de él */
.wp-block-column > p.wp-block-paragraph:has(> a[href^="tel:"]) {
	margin-bottom: 1.75rem;
}