/*!
 * Solera Widgets — common.css
 * Variables de diseño y base compartida por todos los widgets.
 * TODO el aspecto sale de estas variables: para el rediseño, cambia los valores
 * de :root (y, si hace falta, los CSS de cada widget) y actualiza el plugin.
 * Ninguna regla sale de las clases .srw / .srw-*: no afecta al resto del sitio.
 */

/* ---------- Fuente propia (nombre único para no chocar con la del tema) ---------- */
@font-face { font-family: 'SRW Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400-normal.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: 'SRW Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'SRW Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-500-normal.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: 'SRW Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'SRW Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-600-normal.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: 'SRW Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'SRW Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700-normal.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: 'SRW Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* ---------- Variables generales (medidas del CSS de solerareformas.es) ---------- */
:root {
	/* Tipografía (Poppins, como la web) */
	--srw-font: 'SRW Poppins', 'Poppins', sans-serif;
	--srw-fs-root: 1rem;     /* 16 px */
	--srw-fs-text: 1.1em;    /* 17,6 px: texto de párrafo */
	--srw-fs-small: .95em;
	--srw-fs-h1: 4em;        /* 64 px */
	--srw-fs-h1-mobile: 3em; /* 48 px */
	--srw-fs-h2: 2.2em;      /* 35,2 px */
	--srw-fs-h2-mobile: 1.75em;
	--srw-fs-h3: 1.2em;
	--srw-fs-btn: .85em;     /* 13,6 px */
	--srw-fw-heading: 600;
	--srw-lh-text: 1.6;
	--srw-lh-heading: 1.18;

	/* Formas */
	--srw-radius: 5px;
	--srw-radius-lg: 10px;
	--srw-shadow-card: 0 0 30px 0 rgba(214, 214, 214, .5);
	--srw-overlay-opacity: .69;    /* capa oscura de hero y CTA */
	--srw-grout: 2px;              /* junta entre las piezas de los mosaicos */

	/* Espaciado */
	--srw-section-py: 72px;
	--srw-section-py-mobile: 52px;
	--srw-section-px: 7%;          /* = margen del header de escritorio (logo y botón al 7 %) */
	--srw-section-px-tablet: 4%;   /* = margen del header de tablet y móvil */
	--srw-container-max: none;     /* sin tope: el contenido llega siempre a los bordes del header */
	--srw-text-max: 760px;         /* ancho máximo de párrafos largos */
	--srw-width-reduced: 90%;      /* preguntas frecuentes en ordenador: un 10 % menos de ancho que el header */
	--srw-width-table: 80%;        /* secciones con tabla en ordenador: un 20 % menos de ancho que el header */
	--srw-gap: 64px;               /* separación entre columnas */
	--srw-col-aside: 5fr;          /* columna de título */
	--srw-col-main: 7fr;           /* columna de contenido */
	--srw-scroll-offset: 110px;    /* altura de la cabecera fija + aire */

	/* Iconos (máscaras: el color sale de background-color) */
	--srw-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm2.6 9L10 13.4 16.4 7l1.4 1.4-7.8 7.8-3.8-3.8z'/%3E%3C/svg%3E");
	--srw-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.6 4.6 12l1.6-1.6 3 3 8.6-8.6 1.6 1.6z'/%3E%3C/svg%3E");
	--srw-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E");
}

/*
 * ---------- Colores: los mismos de la web activa ----------
 * Cada color toma el color global de Elementor del sitio (Ajustes del sitio › Colores globales,
 * kit 6) y, si no existe, usa el valor medido en la web. Se declaran en .srw (no en :root)
 * porque los colores globales de Elementor viven en <body class="elementor-kit-6">.
 */
.srw,
.srw-form {
	--srw-color-primary: var(--e-global-color-c188b15, #DC6D03);        /* naranja */
	--srw-color-primary-hover: var(--e-global-color-d2f59b4, #F7D01B);  /* amarillo (hover de botones) */
	--srw-color-on-primary: var(--e-global-color-717b3f2, #FFFFFF);
	--srw-color-on-primary-hover: var(--e-global-color-717b3f2, #FFFFFF);
	--srw-color-text: #333333;                                           /* texto del sitio (tema) */
	--srw-color-heading: #333333;
	--srw-color-dark: var(--e-global-color-1ed8360, #1C1C1C);
	--srw-color-link-hover: #020101;                                     /* a:hover del CSS personalizado del sitio */
	--srw-color-bg: var(--e-global-color-717b3f2, #FFFFFF);
	--srw-color-bg-alt: var(--e-global-color-d22ac11, #F4F3ED);          /* beige claro */
	--srw-color-surface: var(--e-global-color-717b3f2, #FFFFFF);
	--srw-color-surface-hover: var(--e-global-color-2491f46, #E8E8E6);
	--srw-color-border: var(--e-global-color-491ce54, #C1B9B5);
	--srw-color-divider: var(--e-global-color-2491f46, #E8E8E6);
	--srw-color-on-dark: var(--e-global-color-717b3f2, #FFFFFF);
	--srw-color-on-dark-soft: var(--e-global-color-2491f46, #E8E8E6);
	--srw-color-on-dark-muted: var(--e-global-color-d22ac11, #F4F3ED);
	--srw-color-overlay: var(--e-global-color-1ed8360, #1C1C1C);
	--srw-color-flag: var(--e-global-color-d2f59b4, #F7D01B);
	/* Piezas de mosaico: beige sobre fondo blanco; blancas sobre fondo beige. La junta es el color del fondo. */
	--srw-tile-bg: var(--srw-color-bg-alt);
	--srw-tile-grout: var(--srw-color-bg);
}
.srw.srw--bg-alt { --srw-tile-bg: var(--srw-color-surface); --srw-tile-grout: var(--srw-color-bg-alt); }

/* ---------- Base de cada widget ---------- */
.srw {
	box-sizing: border-box;
	position: relative;
	font-family: var(--srw-font);
	font-size: var(--srw-fs-root);
	font-weight: 400;
	line-height: var(--srw-lh-text);
	color: var(--srw-color-text);
	background-color: var(--srw-color-bg);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}
.srw *, .srw *::before, .srw *::after { box-sizing: inherit; }
.srw.srw--bg-alt { background-color: var(--srw-color-bg-alt); }

.srw.srw-section { padding: var(--srw-section-py) var(--srw-section-px); }
.srw .srw-container { width: 100%; max-width: var(--srw-container-max); margin-left: auto; margin-right: auto; }

/* Encabezados (anulan los estilos del tema dentro del widget) */
.srw h1, .srw h2, .srw h3, .srw h4, .srw h5, .srw h6 {
	font-family: var(--srw-font);
	font-weight: var(--srw-fw-heading);
	line-height: var(--srw-lh-heading);
	color: var(--srw-color-heading);
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
	padding: 0;
}
.srw .srw-title { font-size: var(--srw-fs-h2); line-height: var(--srw-lh-heading); margin: 0; letter-spacing: -.01em; }
.srw .srw-subtitle { font-size: var(--srw-fs-h3); line-height: 1.3; margin: 0 0 12px; color: var(--srw-color-dark); }

/* Cabecera de sección: título centrado (reseñas) o título a la izquierda y entradilla a la derecha */
.srw .srw-head { text-align: center; margin: 0 auto 40px; }
.srw .srw-head .srw-title + .srw-rich { margin-top: 14px; }
.srw .srw-head .srw-rich { max-width: 880px; margin-left: auto; margin-right: auto; }
.srw .srw-head.srw-head--split {
	display: grid;
	grid-template-columns: minmax(0, var(--srw-col-aside)) minmax(0, var(--srw-col-main));
	column-gap: var(--srw-gap);
	align-items: end;
	text-align: left;
	margin-bottom: 36px;
}
.srw .srw-head.srw-head--split .srw-rich { margin: 0; max-width: var(--srw-text-max); }

/* Texto enriquecido (WYSIWYG) */
.srw .srw-rich { font-size: var(--srw-fs-text); line-height: var(--srw-lh-text); }
.srw .srw-rich p { margin: 0 0 .8em; }
.srw .srw-rich > :last-child { margin-bottom: 0; }
.srw .srw-rich strong, .srw .srw-rich b { font-weight: 600; }
.srw .srw-rich a, .srw .srw-link { color: var(--srw-color-primary); text-decoration: none; transition: color .2s; }
.srw .srw-rich a:hover, .srw .srw-rich a:focus-visible, .srw .srw-link:hover { color: var(--srw-color-link-hover); }
.srw .srw-rich ul, .srw .srw-rich ol { margin: 0 0 1em; padding: 0 0 0 1.25em; }
.srw .srw-rich li { margin: 0 0 .4em; padding: 0; }
.srw .srw-rich h3, .srw .srw-rich h4 { font-size: 1.15em; margin: 1.2em 0 .5em; }

/* Marcas [VERIFICAR] / [PENDIENTE] (solo se resaltan en el editor de Elementor y en la referencia) */
.srw mark.srw-flag { background: var(--srw-color-flag); color: var(--srw-color-dark); padding: 0 .2em; border-radius: 2px; font-weight: 500; }

/* ---------- Botones (como los de la web) ---------- */
.srw .srw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	font-family: var(--srw-font);
	font-size: var(--srw-fs-btn);
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 20px 30px;
	border: 0;
	border-radius: var(--srw-radius);
	cursor: pointer;
	transition: background-color .3s, color .3s, box-shadow .3s;
}
.srw .srw-btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
/* Icono elegido en Elementor (biblioteca de iconos del sitio: Font Awesome, SVG o fuente) */
.srw .srw-btn__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.1em; line-height: 1; flex: none; }
.srw .srw-btn__icon i { font-size: 1em; line-height: 1; }
.srw .srw-btn__icon svg { width: 1em; height: 1em; fill: currentColor; }
.srw .srw-btn--primary { background-color: var(--srw-color-primary); color: var(--srw-color-on-primary); }
.srw .srw-btn--primary:hover, .srw .srw-btn--primary:focus-visible { background-color: var(--srw-color-primary-hover); color: var(--srw-color-on-primary-hover); }
.srw .srw-btn--outline { background-color: transparent; color: var(--srw-color-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); }
.srw .srw-btn--outline:hover, .srw .srw-btn--outline:focus-visible { background-color: var(--srw-color-on-dark); color: var(--srw-color-dark); }
.srw .srw-btn--large { font-size: 1em; padding: 20px 40px; }
.srw .srw-btn:focus-visible { outline: 2px solid var(--srw-color-primary); outline-offset: 3px; }

.srw .srw-buttons { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
.srw .srw-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 36px; }
.srw .srw-actions--center { justify-content: center; }

/* ---------- Lista con icono (CTA) ---------- */
.srw .srw-list { list-style: none; margin: 0 0 1.1em; padding: 0; display: grid; gap: 12px; font-size: var(--srw-fs-text); }
.srw .srw-list:last-child { margin-bottom: 0; }
.srw .srw-list > li { position: relative; margin: 0; padding: 0 0 0 30px; }
.srw .srw-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 19px;
	height: 19px;
	background-color: var(--srw-color-primary);
	-webkit-mask: var(--srw-list-icon, var(--srw-icon-check)) center / contain no-repeat;
	mask: var(--srw-list-icon, var(--srw-icon-check)) center / contain no-repeat;
}
.srw .srw-list--tick { --srw-list-icon: var(--srw-icon-tick); }

/* ---------- Mosaico: piezas pegadas con una junta fina, como un alicatado ---------- */
.srw .srw-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--srw-grout);
	background-color: var(--srw-tile-grout);
	border-radius: var(--srw-radius);
	overflow: hidden;
}
.srw .srw-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srw .srw-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* La última pieza ocupa el hueco que quedaría vacío en la fila */
.srw .srw-tiles--2 > :last-child:nth-child(2n+1) { grid-column: 1 / -1; }
.srw .srw-tiles--3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.srw .srw-tiles--3 > :last-child:nth-child(3n+2) { grid-column: span 2; }
.srw .srw-tile {
	position: relative;
	margin: 0;
	padding: 24px 26px;
	background-color: var(--srw-tile-bg);
	font-size: 1em;
	line-height: 1.55;
	color: var(--srw-color-text);
}
.srw .srw-tile__label { display: block; font-weight: 600; color: var(--srw-color-dark); margin-bottom: 4px; }
.srw .srw-tile a { color: var(--srw-color-primary); text-decoration: none; }
.srw .srw-tile a:hover { color: var(--srw-color-link-hover); }
/* Icono opcional en cada pieza */
.srw .srw-tiles--icon-check > .srw-tile, .srw .srw-tiles--icon-pin > .srw-tile { padding-left: 58px; }
.srw .srw-tiles--icon-check > .srw-tile::before, .srw .srw-tiles--icon-pin > .srw-tile::before {
	content: "";
	position: absolute;
	left: 26px;
	top: calc(24px + .15em);
	width: 19px;
	height: 19px;
	background-color: var(--srw-color-primary);
	-webkit-mask: var(--srw-tile-icon) center / contain no-repeat;
	mask: var(--srw-tile-icon) center / contain no-repeat;
}
.srw .srw-tiles--icon-check { --srw-tile-icon: var(--srw-icon-check); }
.srw .srw-tiles--icon-pin { --srw-tile-icon: var(--srw-icon-pin); }

/* ---------- Lista con checks y líneas finas ---------- */
.srw .srw-checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--srw-color-divider); font-size: 1em; }
.srw .srw-checklist > li { position: relative; margin: 0; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--srw-color-divider); line-height: 1.55; }
.srw .srw-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(16px + .15em);
	width: 19px;
	height: 19px;
	background-color: var(--srw-color-primary);
	-webkit-mask: var(--srw-icon-check) center / contain no-repeat;
	mask: var(--srw-icon-check) center / contain no-repeat;
}
.srw .srw-checklist__label { display: block; font-weight: 600; color: var(--srw-color-dark); margin-bottom: 2px; }

/* ---------- Imagen ---------- */
.srw .srw-media { margin: 0; position: relative; }
.srw .srw-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: 0;
	border-radius: var(--srw-radius);
	box-shadow: none;
}

/* Anclas: deja hueco para la cabecera fija */
.srw [id] { scroll-margin-top: var(--srw-scroll-offset); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.srw.srw-section { padding-left: var(--srw-section-px-tablet); padding-right: var(--srw-section-px-tablet); }
	.srw { --srw-gap: 40px; }
	.srw .srw-head.srw-head--split { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.srw.srw-section { padding-top: var(--srw-section-py-mobile); padding-bottom: var(--srw-section-py-mobile); }
	.srw .srw-title { font-size: var(--srw-fs-h2-mobile); }
	.srw .srw-head { margin-bottom: 26px; }
	.srw .srw-tiles--2, .srw .srw-tiles--3 { grid-template-columns: minmax(0, 1fr); }
	.srw .srw-tiles--3 > :last-child:nth-child(3n+2) { grid-column: auto; }
	.srw .srw-tile { padding: 18px 18px; }
	.srw .srw-tiles--icon-check > .srw-tile, .srw .srw-tiles--icon-pin > .srw-tile { padding-left: 48px; }
	.srw .srw-tiles--icon-check > .srw-tile::before, .srw .srw-tiles--icon-pin > .srw-tile::before { left: 18px; top: calc(18px + .15em); }
	.srw .srw-btn { padding: 17px 22px; }
	.srw .srw-btn--large { padding: 18px 28px; }
	.srw .srw-actions { margin-top: 28px; }
	.srw .srw-actions .srw-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.srw *, .srw *::before, .srw *::after { transition: none !important; animation: none !important; }
}