/*
 Theme Name:   Revestimiento Sur
 Theme URI:    https://revestimientosur.net/
 Description:  Tema hijo de Divi para Revestimiento Sur. Acá va la base visual del manual de marca (colores, tipografía, botones, estilos generales).
 Author:       Revestimiento Sur
 Template:     Divi
 Version:      1.1.0
 Text Domain:  revestimiento-sur
*/

/* Paso 1 (manual de marca): enlaces sobre fondos oscuros en cielo-500.
   El color de enlace general es cielo-700 (#1A73B0), pensado para fondo blanco. */
.et_pb_bg_layout_dark a {
	color: #2EA3F2;
}

/* ==========================================================================
   Paso 2: tipografía (manual de marca)
   Roboto 700 en títulos, Open Sans 400/600 en texto. Servidas desde el tema
   (fuentes variables, solo el subconjunto latino) y sin Google Fonts.
   Los tamaños usan baja especificidad: los módulos que ya tienen un tamaño
   propio en Divi lo conservan.
   ========================================================================== */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/roboto-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('fonts/open-sans-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Algunos módulos viejos piden Montserrat, que no está en el manual:
   se dibujan con Open Sans en vez de caer en Arial. */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('fonts/open-sans-latin-var.woff2') format('woff2');
}

html body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	line-height: 26px;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 700;
}

html h1 { font-size: 56px; line-height: 1.15; }
html h2 { font-size: 40px; line-height: 1.2; }
html h3 { font-size: 24px; line-height: 1.3; }

@media (max-width: 767px) {
	html h1 { font-size: 36px; }
	html h2 { font-size: 28px; }
}

/* Títulos y menús sin mayúsculas forzadas (le gana al ajuste de cada módulo) */
#page-container h1,
#page-container h2,
#page-container h3,
#top-menu a,
.et_mobile_menu a,
#page-container .et_pb_menu .et-menu a,
#page-container .et_pb_fullwidth_menu .et-menu a {
	text-transform: none;
}

/* ==========================================================================
   Paso 3: botones. Foco visible para quien navega con teclado (no cambia el
   aspecto normal de ningún botón).
   ========================================================================== */
.et_pb_button:focus-visible,
a.et_pb_button:focus-visible {
	outline: 3px solid #1A73B0;
	outline-offset: 2px;
}

/* ==========================================================================
   Paso 4: pie de sucursales (layout global 1483, clase .rs-pie-sucursales).
   Íconos de línea (Tabler Icons, licencia MIT) dibujados con máscara: toman
   el color del texto. Orden: dirección → teléfono → WhatsApp.
   ========================================================================== */
.rs-pie-sucursales .et_pb_blurb .et_pb_main_blurb_image {
	display: none;
}

.rs-pie-sucursales .et_pb_blurb .et_pb_module_header::before,
.rs-pie-sucursales a[href^="tel:"]::before,
.rs-pie-sucursales a[href*="wa.me/"]::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.4em;
	vertical-align: -0.22em;
	background-color: currentColor;
	-webkit-mask: var(--rs-icono) no-repeat center / contain;
	mask: var(--rs-icono) no-repeat center / contain;
}

/* ubicación */
.rs-pie-sucursales .et_pb_blurb .et_pb_module_header::before {
	--rs-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E");
}

/* teléfono */
.rs-pie-sucursales a[href^="tel:"]::before {
	--rs-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
}

/* WhatsApp */
.rs-pie-sucursales a[href*="wa.me/"] {
	margin-left: 0.9em;
}
.rs-pie-sucursales a[href*="wa.me/"]::before {
	--rs-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9'/%3E%3Cpath d='M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Paso 5: estilos generales (manual de marca).
   Baja especificidad a propósito: lo que un módulo tiene definido en Divi
   (radio, relleno, sombra) se respeta; esto fija los valores por defecto.
   ========================================================================== */
:root {
	--rs-radio-foto: 6px;
	--rs-radio-tarjeta: 10px;
	--rs-sombra: 0 8px 24px rgba(42, 45, 64, 0.10);
}

/* Radios: fotos 6px; botones sin estilo propio y desplegables 10px */
.et_pb_image img,
.et_pb_gallery_image img,
.et_pb_gallery_item img {
	border-radius: var(--rs-radio-foto);
}

.et_pb_button,
.et_pb_toggle {
	border-radius: var(--rs-radio-tarjeta);
}

/* Tarjeta: clase para usar en módulos/columnas (Avanzado > Clase CSS: rs-tarjeta) */
.rs-tarjeta {
	border-radius: var(--rs-radio-tarjeta);
	box-shadow: var(--rs-sombra);
	overflow: hidden;
}

/* Sección del manual: 80px de relleno vertical (48px en celular) y margen
   lateral mínimo de 16px. Es una clase (Avanzado > Clase CSS: rs-seccion) para
   páginas nuevas o rediseñadas: aplicada a todas las secciones existentes
   agrandaba huecos y achicaba filas diseñadas a ancho completo. */
html .et_pb_section.rs-seccion {
	padding-top: 80px;
	padding-bottom: 80px;
}

@media (max-width: 767px) {
	html .et_pb_section.rs-seccion {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	html .et_pb_section.rs-seccion .et_pb_row {
		max-width: calc(100% - 32px);
	}
}

/* Las etiquetas chicas (ej. "CORTES A MEDIDA") ya son mayúscula chica por su
   propio ajuste en Divi y no se tocan. No se fuerza un estilo general para los
   desplegables, porque en la home se usan como títulos grandes de categoría. */

/* ==========================================================================
   Tanda 2: accesibilidad (sin cambios de diseño)
   ========================================================================== */

/* Íconos de redes del pie: el nombre ("Facebook", "Instagram") queda oculto a
   la vista pero lo leen los lectores de pantalla (Divi lo ocultaba del todo). */
#footer-bottom .et-social-icon a span {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Texto de la barra inferior: #666 sobre #171717 daba 3,1:1; #8C8C8C da 5,3:1 */
#footer-info {
	color: #8C8C8C;
}

/* Etiquetas chicas que pasaron de H6 a H3 para respetar el orden de títulos
   (clase rs-etiqueta en el módulo): conservan la mayúscula de su ajuste en Divi,
   que la regla general de h1-h3 sin mayúsculas les quitaría. */
#page-container .rs-etiqueta h3 {
	text-transform: uppercase;
}

/* ==========================================================================
   Tanda 3: H1 de la home sobre el video del hero (fila con clase rs-hero-titulo).
   Franja pizarra-950 al 78 %: el video tiene cuadros blancos y textos propios,
   y con el peor caso (fondo blanco) el blanco sobre la franja da 8,3:1.
   ========================================================================== */
#page-container .et_pb_section .et_pb_row.rs-hero-titulo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 14px 16px;
	background: rgba(29, 31, 42, 0.78);
}

#page-container .rs-hero-titulo h1 {
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.25;
	text-align: center;
}

@media (max-width: 980px) {
	#page-container .rs-hero-titulo h1 { font-size: 24px; }
}

/* Video del hero (módulo de código con clase rs-hero-video, en su propia fila): cubre la
   sección por encima del póster y por debajo del título. */
#page-container .et_pb_section .et_pb_row.rs-hero-video-fila {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
}

#page-container .rs-hero-video-fila .et_pb_column,
#page-container .rs-hero-video,
#page-container .rs-hero-video .et_pb_code_inner {
	width: 100%;
	height: 100%;
	margin: 0;
}

#page-container .rs-hero-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Tanda 5: piezas para Marmolería y Trabajos realizados (solo actúan con estas clases)
   ========================================================================== */

/* Tarjeta clara con acento arena arriba (columna con clase rs-tarjeta rs-acento) */
#page-container .rs-acento {
	border-top: 4px solid #C9B28F;
}

/* Número grande de los pasos (sobre pizarra) */
.rs-paso-num {
	display: block;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	color: #C9B28F;
	margin-bottom: 12px;
}

/* Tabla comparativa de materiales */
.rs-tabla-envoltura {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.rs-tabla {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
	color: #5C5F66;
}

.rs-tabla th,
.rs-tabla td {
	padding: 12px 14px;
	border-bottom: 1px solid #E8E8E8;
	text-align: left;
	vertical-align: top;
}

.rs-tabla thead th {
	background: #2A2D40;
	color: #FFFFFF;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 700;
}

.rs-tabla tbody th {
	color: #2F3038;
	font-weight: 600;
	background: #F4F4F4;
}

/* Grilla de obras con filtros (columna con clase rs-galeria-grid) */
#page-container .rs-galeria-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

#page-container .rs-galeria-grid > .et_pb_module {
	margin: 0 !important;
	width: 100%;
}

#page-container .rs-obra img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

#page-container .rs-obra.rs-oculta {
	display: none !important;
}

.rs-filtros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 8px;
}

.rs-filtros button {
	min-height: 44px;
	padding: 8px 18px;
	border: 2px solid #2A2D40;
	border-radius: 10px;
	background: #FFFFFF;
	color: #2A2D40;
	font: 700 15px/1.2 'Roboto', Helvetica, Arial, sans-serif;
	cursor: pointer;
}

.rs-filtros button[aria-pressed="true"] {
	background: #2A2D40;
	color: #FFFFFF;
}

.rs-filtros button:focus-visible {
	outline: 3px solid #1A73B0;
	outline-offset: 2px;
}

@media (max-width: 980px) {
	#page-container .rs-galeria-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	#page-container .rs-galeria-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.rs-paso-num { font-size: 40px; }
	/* Catálogo de materiales: de a dos por fila en celular (fila con clase rs-catalogo) */
	#page-container .rs-catalogo { display: flex; flex-wrap: wrap; justify-content: space-between; }
	#page-container .rs-catalogo > .et_pb_column { width: 48% !important; margin: 0 0 16px 0 !important; }
	#page-container .rs-catalogo > .et_pb_column_empty { display: none; }
}

/* ==========================================================================
   Tanda 7: página Nuestras sucursales (solo actúan con estas clases)
   ========================================================================== */

/* Mapa general (módulo de código con <div class="rs-mapa" data-rs-mapa>): reserva su alto
   antes de cargar Leaflet, así la página no salta. isolation deja las capas del mapa
   por debajo del menú fijo y del botón de WhatsApp. */
.rs-mapa {
	position: relative;
	isolation: isolate;
	height: 480px;
	border-radius: 6px;
	overflow: hidden;
	background: #E8E8E8;
	box-shadow: var(--rs-sombra);
}

.rs-mapa-aviso {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	text-align: center;
	color: #5C5F66;
}

/* Leaflet 1.9 mezcla las teselas con plus-lighter; dentro de este contenedor eso dejaba
   líneas claras entre teselas. Con mezcla normal no aparecen (probado en celular y escritorio). */
.rs-mapa .leaflet-tile {
	mix-blend-mode: normal;
}

.rs-pin {
	background: none;
	border: 0;
}

.rs-pin-popup {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font: 400 14px/1.4 'Open Sans', Helvetica, Arial, sans-serif;
	color: #5C5F66;
}

.rs-pin-popup strong {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #2F3038;
}

.rs-pin-popup a {
	color: #1A73B0;
	font-weight: 600;
}

/* Tarjeta de sucursal (columna con clase rs-tarjeta rs-acento rs-suc): los botones
   "Cómo llegar" y "Ver sucursal" van uno al lado del otro cuando entran. */
#page-container .rs-suc .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 12px 8px 0 0;
}

#page-container .rs-suc p {
	padding-bottom: 8px;
}

#page-container .rs-suc .rs-suc-tel a {
	font-weight: 600;
	white-space: nowrap;
}

/* Pie global: "Ver todas las sucursales" debajo del título. El título "Sucursales" está corrido
   con 10 espacios duros a tamaño fijo (87px medidos en celular, tablet y escritorio). */
#page-container .rs-pie-ver-todas {
	padding: 4px 0 0 87px;
	text-align: left;
}

#page-container .rs-pie-ver-todas a {
	color: #FFFFFF;
	font-weight: 600;
	font-size: 16px;
	text-decoration: underline;
	white-space: nowrap;
}

/* ==========================================================================
   Tanda 9: selector de sucursal para WhatsApp (botón flotante + panel)
   ========================================================================== */
.rs-wa [hidden],
.rs-wa-fondo[hidden],
.rs-wa-panel[hidden],
.rs-wa-panel [hidden] {
	display: none !important;
}

.rs-wa .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rs-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rs-wa-boton,
.rs-wa-ir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	border: 0;
	border-radius: 28px;
	background: #17793F;
	color: #FFFFFF;
	font: 700 16px/1.2 'Roboto', Helvetica, Arial, sans-serif;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(29, 31, 42, 0.30);
	cursor: pointer;
}

.rs-wa-boton {
	width: 60px;
	height: 60px;
	padding: 0;
	border-radius: 50%;
}

.rs-wa-ir {
	padding: 0 20px 0 14px;
}

.rs-wa-ir:hover,
.rs-wa-boton:hover {
	background: #126232;
	color: #FFFFFF;
}

.rs-wa-cambiar {
	min-height: 48px;
	padding: 0 16px;
	border: 2px solid #2A2D40;
	border-radius: 24px;
	background: #FFFFFF;
	color: #2A2D40;
	font: 600 15px/1 'Open Sans', Helvetica, Arial, sans-serif;
	box-shadow: 0 4px 12px rgba(29, 31, 42, 0.20);
	cursor: pointer;
}

.rs-wa-fondo {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000; /* por encima de la cabecera fija de Divi (99999): es una ventana modal */
	background: rgba(29, 31, 42, 0.45);
}

.rs-wa-panel {
	position: fixed;
	right: 20px;
	bottom: 92px;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 120px);
	overflow: hidden;
	background: #FFFFFF;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(42, 45, 64, 0.25);
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.rs-wa-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 8px 8px 20px;
	background: #2A2D40;
}

.rs-wa-panel .rs-wa-cabecera h2 {
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font: 700 20px/1.25 'Roboto', Helvetica, Arial, sans-serif;
}

.rs-wa-cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #FFFFFF;
	cursor: pointer;
}

.rs-wa-bajada {
	margin: 0;
	padding: 12px 20px !important;
	border-bottom: 1px solid #E8E8E8;
	color: #5C5F66;
	font-size: 15px;
	line-height: 1.5;
}

.rs-wa-lista {
	overflow-y: auto;
	padding: 4px 0 12px;
}

.rs-wa-panel .rs-wa-prov {
	margin: 0;
	padding: 12px 20px 4px !important;
	color: #5C5F66;
	font: 700 12px/1.2 'Roboto', Helvetica, Arial, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.rs-wa-panel ul {
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

.rs-wa-panel li {
	margin: 0;
	padding: 0;
}

.rs-wa-op {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 8px 20px;
	color: #2F3038;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.rs-wa-op:hover {
	background: #F4F4F4;
	color: #2F3038;
}

.rs-wa-op[aria-current="true"] {
	background: #EEF6F1;
}

.rs-wa-op-tuya {
	color: #17793F;
	font-size: 13px;
}

.rs-wa-op-num {
	flex: none;
	color: #5C5F66;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

.rs-wa-boton:focus-visible,
.rs-wa-ir:focus-visible,
.rs-wa-cambiar:focus-visible {
	outline: 3px solid #1A73B0;
	outline-offset: 3px;
}

.rs-wa-cerrar:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: -3px;
}

.rs-wa-op:focus-visible {
	outline: 3px solid #1A73B0;
	outline-offset: -3px;
}

html.rs-wa-abierto {
	overflow: hidden;
}

@media (max-width: 767px) {
	.rs-wa { right: 16px; bottom: 16px; gap: 6px; }
	.rs-wa-ir { min-height: 52px; padding: 0 16px 0 12px; font-size: 15px; }
	.rs-wa-cambiar { padding: 0 12px; font-size: 14px; }

	/* en celular el panel sube desde abajo, a todo el ancho */
	.rs-wa-panel {
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: none;
		max-height: 85vh;
		border-radius: 16px 16px 0 0;
	}
}

@media (max-width: 767px) {
	.rs-mapa { height: 380px; }
	#page-container .rs-pie-ver-todas a { font-size: 15px; }
}

@media (max-width: 767px) {
	#page-container .et_pb_section .et_pb_row.rs-hero-titulo { padding: 8px 12px; }
	#page-container .rs-hero-titulo h1 { font-size: 17px; line-height: 1.3; }
}