/*
Theme Name: Banyeras Valencia Child
Theme URI: https://www.repararbañerasvalencia.com/
Description: Tema hijo de Twenty Twenty-Five que replica la web Reparar Bañeras Valencia con un diseño elegante (carbón + dorado, Playfair Display + Roboto). Incluye la plantilla de página "Portada Bañeras Valencia".
Author: Banyeras Valencia
Author URI: https://www.repararbañerasvalencia.com/
Template: twentytwentyfive
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: banyeras-valencia-child
Tags: child-theme, one-column, custom-template
*/

/*
 * Diseño elegante basado en paleta carbón + dorado, tipografía serif
 * Playfair Display para títulos y Roboto para el cuerpo. Todos los
 * estilos agrupados bajo .rbv-page para no chocar con el tema padre.
 */

/* ===== BASE ===== */
html {
	scroll-behavior: smooth;
}

.rbv-page,
.rbv-page * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.rbv-page {
	--tinta: #14161a;
	--tinta-suave: #1d2025;
	--dorado: #b08d57;
	--dorado-oscuro: #96744a;
	--dorado-claro: #d9bb8f;
	--marfil: #f7f4ee;
	--linea: #e7e1d6;
	--texto: #4a4d53;
	--titulos: #23252a;

	font-family: 'Roboto', Arial, sans-serif;
	color: var(--texto);
	line-height: 1.7;
	font-size: 15px;
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

/* Compensación del header fijo al navegar por anclas */
.rbv-page section[id] {
	scroll-margin-top: 80px;
}

/* Enlace de salto al contenido (accesibilidad) */
.rbv-page .skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--dorado);
	color: #fff;
	padding: 10px 18px;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	z-index: 200;
}

.rbv-page .skip-link:focus {
	left: 0;
}

.rbv-page h1,
.rbv-page h2,
.rbv-page h3,
.rbv-page h4 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--titulos);
	line-height: 1.3;
}

.rbv-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

.rbv-page a {
	color: inherit;
	text-decoration: none;
}

.rbv-page a:focus-visible,
.rbv-page summary:focus-visible {
	outline: 2px solid var(--dorado);
	outline-offset: 3px;
}

.rbv-page .container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Etiqueta superior dorada de cada sección */
.rbv-page .overline {
	display: block;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--dorado);
	margin-bottom: 12px;
}

/* ===== CABECERA ===== */
.rbv-page header {
	background: var(--tinta);
	padding: 14px 0;
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(217, 187, 143, 0.25);
}

.rbv-page .nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* Contenedor del logo: recorta el arte real del PNG.
 * El archivo logo.png mide 759x343 pero el dibujo visible ocupa
 * 712x294 en el offset (30, 21) con márgenes blancos alrededor.
 * Sin tocar la imagen, se muestra solo el arte y a su proporción
 * real (712:294 ≈ 2.42:1 en vez del canvas 2.21:1, que lo aplanaba).
 * - overflow: hidden       → recorta lo que sobresale del rectángulo.
 * - aspect-ratio           → el enlace mide exactamente el arte.
 * - la <img> se dimensiona en % del contenedor (escala proporcional):
 *     ancho  = 759/712 = 106.6011%   alto = 343/294 = 116.6667%
 *     left   = -30/712 = -4.2135%    top  = -21/294 = -7.1429%
 */
.rbv-page .logo {
	display: block;
	position: relative;
	overflow: hidden;
    height:85px;
	width: 200px; /* Ancho presentado en cabecera (altura ≈ 35px). */
	aspect-ratio: 712 / 294;
	background: #fff;
	border-radius: 2px;
}

.rbv-page .logo img {
	position: absolute;
	width: 106.6011%;
	height: 116.6667%;
	left: -4.2135%;
	top: -7.1429%;
	max-width: none;  /* Anula el tope global (necesita superar el 100%). */
	max-height: none; /* Anula topes antiguos de altura. */
}

/* ===== BOTÓN DORADO ===== */
.rbv-page .btn-contacto {
	display: inline-block;
	background: var(--dorado);
	color: #fff;
	padding: 11px 26px;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 2px;
	white-space: nowrap;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 8px 20px -10px rgba(176, 141, 87, 0.8);
}

.rbv-page .btn-contacto:hover {
	background: var(--dorado-oscuro);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(176, 141, 87, 0.9);
}

/* ===== HERO =====
 * La imagen de fondo la imprime la plantilla inline (editables desde
 * el Personalizador); aquí solo el comportamiento visual del fondo. */
.rbv-page .hero {
	background-size: cover;
	background-position: center;
	background-color: var(--tinta); /* Fallback mientras carga la imagen. */
	min-height: min(92vh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 20px;
}

.rbv-page .hero-content {
	color: #fff;
	max-width: 860px;
}

.rbv-page .hero-content::before {
	content: '';
	display: block;
	width: 64px;
	height: 1px;
	background: var(--dorado-claro);
	margin: 0 auto 30px;
}

.rbv-page .hero h1 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(30px, 5vw, 48px);
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 28px;
	color: #fff;
	line-height: 1.25;
}

.rbv-page .hero p {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--dorado-claro);
	margin: 7px 0;
}

/* ===== CITA ===== */
.rbv-page .quote {
	background: var(--marfil);
	border-top: 1px solid var(--linea);
	border-bottom: 1px solid var(--linea);
	padding: 60px 20px;
	text-align: center;
}

.rbv-page .quote p {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: clamp(18px, 2.5vw, 22px);
	color: #55585e;
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.6;
}

.rbv-page .quote p::before {
	content: '\201C';
	display: block;
	font-size: 52px;
	line-height: 1;
	color: var(--dorado);
	margin-bottom: 8px;
}

/* ===== POR QUÉ ELEGIRNOS ===== */
.rbv-page .why {
	padding: 90px 20px 80px;
	text-align: center;
	background: #fff;
}

.rbv-page .why h2 {
	font-size: clamp(26px, 3.5vw, 34px);
	font-weight: 600;
	margin-bottom: 50px;
}

.rbv-page .why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 980px;
	margin: 0 auto;
}

.rbv-page .why-item {
	text-align: center;
	padding: 0 10px;
}

.rbv-page .why-icon {
	width: 68px;
	height: 68px;
	border: 1px solid #ddd2bd;
	background: var(--marfil);
	border-radius: 50%;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.rbv-page .why-icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--dorado);
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rbv-page .why-item:hover .why-icon {
	background: var(--dorado);
	border-color: var(--dorado);
	transform: translateY(-4px);
}

.rbv-page .why-item:hover .why-icon svg {
	stroke: #fff;
}

.rbv-page .why-item h4 {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: var(--titulos);
}

.rbv-page .why-item p {
	font-size: 13px;
	color: #6d7076;
	line-height: 1.6;
}

/* ===== ANTES / DESPUÉS ===== */
.rbv-page .antes-despues {
	padding: 80px 20px;
	text-align: center;
	background: #fff;
}

.rbv-page .antes-despues h2 {
	font-size: clamp(26px, 3.5vw, 34px);
	font-weight: 600;
	margin-bottom: 16px;
}

.rbv-page .antes-despues .subtitle {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 16px;
	color: #6d7076;
	margin-bottom: 40px;
}

.rbv-page .ba-images {
	display: flex;
	justify-content: center;
	gap: 24px;
	max-width: 760px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.rbv-page .ba-item {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 24px 48px -24px rgba(20, 22, 26, 0.45);
}

.rbv-page .ba-item img {
	width: 340px;
	height: 230px;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.rbv-page .ba-item:hover img {
	transform: scale(1.04);
}

.rbv-page .ba-item figcaption {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: rgba(16, 18, 22, 0.82);
	color: var(--dorado-claro);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 2px;
}

/* ===== BANDA DE PRESUPUESTO ===== */
.rbv-page .presupuesto-band {
	background: var(--tinta);
	color: #fff;
	padding: 38px 0;
}

.rbv-page .presupuesto-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	flex-wrap: wrap;
}

.rbv-page .presupuesto-text h3 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #fff;
}

.rbv-page .presupuesto-text h3::after {
	content: '';
	display: block;
	width: 44px;
	height: 1px;
	background: var(--dorado);
	margin-top: 10px;
}

.rbv-page .presupuesto-text p {
	font-size: 13px;
	color: #a9adb4;
	max-width: 720px;
}

/* ===== SERVICIOS ===== */
.rbv-page .servicios {
	padding: 95px 20px 50px;
	background: var(--marfil);
}

.rbv-page .servicios > .container > h2 {
	text-align: center;
	font-size: clamp(26px, 3.5vw, 34px);
	font-weight: 600;
	margin-bottom: 50px;
}

.rbv-page .servicios > .container > h2 .overline {
	margin-bottom: 14px;
}

.rbv-page .servicio-title {
	text-align: center;
	font-size: 25px;
	font-weight: 600;
	color: var(--titulos);
	margin: 60px 0 34px;
}

.rbv-page .servicio-title::after {
	content: '';
	display: block;
	width: 44px;
	height: 1px;
	background: var(--dorado);
	margin: 14px auto 0;
}

.rbv-page .servicio-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: start;
	margin-bottom: 60px;
}

.rbv-page .servicio-text {
	font-size: 15px;
	color: var(--texto);
	line-height: 1.85;
}

.rbv-page .servicio-text p {
	margin-bottom: 8px;
}

.rbv-page .servicio-text strong {
	color: var(--titulos);
}

.rbv-page .servicio-img {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 24px 48px -24px rgba(20, 22, 26, 0.35);
}

.rbv-page .servicio-img img {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	transition: transform 0.6s ease;
}

.rbv-page .servicio-img:hover img {
	transform: scale(1.03);
    border-radius: 5px;
}

/* ===== PLATOS DE DUCHA ===== */
.rbv-page .platos-block {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 50px;
	margin-bottom: 60px;
}

.rbv-page .platos-gallery {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.rbv-page .platos-gallery img {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 18px 36px -20px rgba(20, 22, 26, 0.35);
}

.rbv-page .platos-text {
	font-size: 15px;
	color: var(--texto);
	line-height: 1.85;
}

.rbv-page .platos-text p {
	margin-bottom: 10px;
}

.rbv-page .platos-text strong {
	color: var(--titulos);
}

/* ===== ESMALTADO ===== */
.rbv-page .esmaltado-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
	margin-bottom: 40px;
}

.rbv-page .esmaltado-text {
	font-size: 15px;
	color: var(--texto);
	line-height: 1.85;
}

/* ===== FAQ (acordeón) ===== */
.rbv-page .faq {
	padding: 95px 20px;
	background: #fff;
}

.rbv-page .faq h2 {
	text-align: center;
	font-size: clamp(26px, 3.5vw, 34px);
	font-weight: 600;
	margin-bottom: 50px;
}

.rbv-page .faq h2 .overline {
	margin-bottom: 14px;
}

.rbv-page .faq-list {
	max-width: 820px;
	margin: 0 auto;
	border-top: 1px solid var(--linea);
	list-style: none;
	padding: 0;
}

.rbv-page .faq-item {
	border-bottom: 1px solid var(--linea);
}

.rbv-page .faq-item summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 22px 56px 22px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--titulos);
	transition: color 0.25s ease;
}

.rbv-page .faq-item summary::-webkit-details-marker {
	display: none;
}

.rbv-page .faq-item summary::after {
	content: '+';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 22px;
	font-weight: 300;
	color: var(--dorado);
	transition: transform 0.3s ease;
}

.rbv-page .faq-item[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.rbv-page .faq-item summary:hover {
	color: var(--dorado);
}

.rbv-page .faq-item .faq-answer {
	padding: 0 56px 24px 0;
	animation: rbv-aparicion 0.4s ease;
}

.rbv-page .faq-item .faq-answer p {
	color: #5c5f65;
	font-size: 14px;
	line-height: 1.8;
}

.rbv-page .faq-item .faq-answer strong {
	color: var(--titulos);
}

@keyframes rbv-aparicion {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== CTA FINAL ===== */
.rbv-page .cta-final {
	background: var(--tinta);
	color: #fff;
	padding: 95px 20px;
	text-align: center;
}

.rbv-page .cta-final p {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: clamp(19px, 2.5vw, 24px);
	color: #f0ece4;
	max-width: 720px;
	margin: 0 auto 36px;
	line-height: 1.6;
}

.rbv-page .cta-final::before {
	content: '';
	display: block;
	width: 64px;
	height: 1px;
	background: var(--dorado);
	margin: 0 auto 40px;
}

/* ===== ANIMACIÓN DE APARICIÓN AL HACER SCROLL ===== */
.rbv-page .rbv-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.rbv-page .rbv-reveal.rbv-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rbv-page .rbv-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rbv-page .servicio-img img,
	.rbv-page .ba-item img {
		transition: none;
	}

	/* El botón aparece/desaparece sin deslizamiento (visible u oculto). */
	.rbv-page .rbv-back-to-top {
		transform: none;
		transition: opacity 0.2s linear, visibility 0.2s linear;
	}
}

/* ===== PIE DE PÁGINA ===== */
.rbv-page .rbv-footer {
	background: #101216;
	color: #a9adb4;
	padding: 75px 0 0;
	border-top: 1px solid rgba(217, 187, 143, 0.22);
}

.rbv-page .footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	gap: 50px;
	padding-bottom: 55px;
}

/* Logo del pie: mismo recorte del arte real, algo mayor que en cabecera
 * (118px de ancho ≈ 49px de altura visible). */
.rbv-page .footer-brand .logo {
	width: 200px;
    height:100;
	margin-bottom: 22px;
}

.rbv-page .footer-brand p {
	font-size: 13.5px;
	line-height: 1.85;
	color: #a9adb4;
	max-width: 320px;
}

.rbv-page .footer-col h4 {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--dorado-claro);
	margin-bottom: 20px;
}

.rbv-page .footer-col h4::after {
	content: '';
	display: block;
	width: 30px;
	height: 1px;
	background: var(--dorado);
	margin-top: 10px;
	opacity: 0.6;
}

.rbv-page .footer-col ul {
	list-style: none;
}

.rbv-page .footer-col li {
	margin-bottom: 11px;
	font-size: 14px;
}

.rbv-page .footer-col a {
	color: #c9ccd1;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.rbv-page .footer-col a:hover {
	color: var(--dorado-claro);
}

.rbv-page .footer-col address {
	font-style: normal;
}

.rbv-page .footer-bottom {
	border-top: 1px solid rgba(217, 187, 143, 0.16);
	padding: 24px 20px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 1px;
	color: #7c8087;
}

/* ===== BOTÓN "VOLVER ARRIBA" =====
 * Botón fijo en la esquina inferior derecha. Está oculto por defecto
 * y la clase .rbv-visible (añadida por assets/js/rbv-back-to-top.js
 * cuando el usuario baja más de 400 píxeles) lo muestra con fundido. */
.rbv-page .rbv-back-to-top {
	/* Posicionamiento: fijo respecto a la ventana del navegador. */
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 110; /* Por encima del contenido, debajo de la barra de admin de WP. */

	/* Aspecto: círculo oscuro con borde dorado e icono dorado. */
	width: 48px;
	height: 48px;
	border: 1px solid var(--dorado);
	border-radius: 50%;
	background: rgba(16, 18, 22, 0.92);
	color: var(--dorado-claro);
	cursor: pointer;

	/* Transición de aparición y de hover (suave y discreta). */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease,
		background 0.25s ease, color 0.25s ease;
}

/* Estado visible: lo activa el JS cuando la página se ha scrolleado. */
.rbv-page .rbv-back-to-top.rbv-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Interacción: al pasar el ratón, el círculo se vuelve dorado. */
.rbv-page .rbv-back-to-top:hover {
	background: var(--dorado);
	color: #fff;
}

/* Icono SVG interior: hereda el color y crece ligeramente al hover. */
.rbv-page .rbv-back-to-top svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s ease;
}

.rbv-page .rbv-back-to-top:hover svg {
	transform: translateY(-2px);
}

/* En móviles se reduce un poco para no tapar contenido. */
@media (max-width: 480px) {
	.rbv-page .rbv-back-to-top {
		right: 16px;
		bottom: 16px;
		width: 42px;
		height: 42px;
	}
    .rbv-page .logo {
	display: block;
	position: relative;
	overflow: hidden;
	max-width: 65%; /* Ancho presentado en cabecera (altura ≈ 35px). */
	aspect-ratio: 712 / 294;
	background: #fff;
	border-radius: 2px;
}
    .rbv-page .btn-contacto {
        max-width:75%;
	display:flex;
	background: var(--dorado);
	color: #fff;
	padding: 10px 20px;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
        text-align: justify;
	border-radius: 2px;
	white-space: nowrap;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 8px 20px -10px rgba(176, 141, 87, 0.8);
}
	
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	.rbv-page .why-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px;
	}

	.rbv-page .servicio-block,
	.rbv-page .platos-block,
	.rbv-page .esmaltado-block {
		grid-template-columns: 1fr;
	}

	.rbv-page .platos-gallery {
		flex-direction: row;
		max-width: 420px;
		margin: 0 auto;
	}

	.rbv-page .ba-item img {
		width: 100%;
	}

	.rbv-page .presupuesto-inner {
		justify-content: center;
		text-align: center;
	}

	.rbv-page .presupuesto-text h3::after {
		margin-left: auto;
		margin-right: auto;
	}

	.rbv-page .hero p {
		letter-spacing: 2.5px;
	}

	.rbv-page .footer-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 480px) {
	.rbv-page .why-grid {
		grid-template-columns: 1fr;
	}

	.rbv-page .btn-contacto {
		font-size: 11px;
		padding: 10px 18px;
	}
}