/*
Theme Name: Twenty Sixteen VPL
Theme URI: https://www.vaciadodepisoslocales.es/
Description: Child theme de Twenty Sixteen. Rediseño: sans, alto contraste, acento rojo.
Author: Oscar 
Template: twentysixteen
Version: 2.0
Text Domain: twentysixteen-vpl
*/

/**
 * Índice
 *
 * 0. Variables
 * 1. Fuera el marco oscuro
 * 2. Tipografía
 * 3. Enlaces y acento
 * 4. Bordes duros -> líneas finas
 * 5. Botones y formularios
 * 6. Imágenes y captions
 * 7. Header, marca y navegación
 * 8. Layout sin sidebar
 * 9. Barra CTA móvil
 * 10. Banda de cierre
 * 11. Footer
 * 12. Formulario de contacto (CF7)
 * 13. Hero
 */


/* ==========================================================================
   0. Variables
   ========================================================================== */

:root {
	--vpl-ink: #0f1214;
	--vpl-muted: #5a6167;
	--vpl-line: #dcdcda;
	--vpl-bg: #f4f4f3;
	--vpl-accent: #c8102e;
	--vpl-accent-dark: #9b0c23;
	--vpl-wa: #25d366;
	--vpl-radius: 4px;
	--vpl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ==========================================================================
   1. Fuera el marco oscuro (lo que más envejece el theme)
   ========================================================================== */

body {
	background: var(--vpl-bg);
	overflow-x: hidden; /* necesario: el hero usa 100vw */
}

body:not(.custom-background-image):before,
body:not(.custom-background-image):after {
	display: none;
}

.site {
	background-color: #fff;
	margin: 0;
}

@media screen and (min-width: 44.375em) {
	.site {
		margin: 0;
	}
}


@media screen and (min-width: 61.5625em) {
    .custom-logo {
        max-width: 300px !important;
    }
}


/* ==========================================================================
   2. Tipografía

   ========================================================================== */

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title,
.site-description,
.main-navigation,
.post-navigation .post-title {
	font-family: var(--vpl-font);
}

.entry-content h4,
.entry-summary h4,
.comment-content h4,
.textwidget h4 {
	text-transform: none;
}

blockquote {
	background: var(--vpl-bg);
	border: 0;
	border-left: 3px solid var(--vpl-accent);
	color: var(--vpl-ink);
	font-style: normal;
	padding: 1.25em 1.5em;
}

/* El blockquote de la home lleva un inline style color:#ff0000 */
blockquote span[style*="ff0000"] {
	color: var(--vpl-ink) !important;
}


/* ==========================================================================
   3. Enlaces y acento
   ========================================================================== */

a {
	color: var(--vpl-accent);
}

a:hover,
a:focus,
a:active {
	color: var(--vpl-accent-dark);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation li:hover > a,
.main-navigation li.focus > a,
.entry-title a:hover,
.entry-title a:focus,
.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
	color: var(--vpl-accent);
}

mark,
ins {
	background: var(--vpl-accent);
	color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--vpl-accent);
	outline-offset: 2px;
}


/* ==========================================================================
   4. Bordes duros de 4px -> líneas finas
   ========================================================================== */

.widget,
.page-header,
.post-navigation,
.pagination,
.comments-title,
.comment-reply-title {
	border-top: 1px solid var(--vpl-line);
}

.post-navigation {
	border-bottom: 1px solid var(--vpl-line);
}

.post-navigation div + div {
	border-top: 1px solid var(--vpl-line);
}

hr,
fieldset,
table,
th,
td,
.author-info,
.comment-list article,
.image-navigation,
.comment-navigation {
	border-color: var(--vpl-line);
}


/* ==========================================================================
   5. Botones y formularios
   ========================================================================== */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: var(--vpl-accent);
	border-radius: var(--vpl-radius);
	letter-spacing: 0.02em;
	padding: 1em 1.75em;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background: var(--vpl-accent-dark);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
	background: #fff;
	border: 1px solid var(--vpl-line);
	border-radius: var(--vpl-radius);
	padding: 0.8em 0.9em;
}

input:focus,
textarea:focus {
	border-color: var(--vpl-ink);
}

.menu-toggle {
	border-radius: var(--vpl-radius);
}

.menu-toggle:hover,
.menu-toggle:focus {
	border-color: var(--vpl-accent);
	color: var(--vpl-accent);
}

.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus {
	background-color: var(--vpl-ink);
	border-color: var(--vpl-ink);
}


/* ==========================================================================
   6. Imágenes y captions

   El shortcode [caption] mete un width inline y usa alignnone: por eso
   salían pegadas a la izquierda. Se centran todas.
   ========================================================================== */

.entry-content img,
.post-thumbnail img,
.wp-caption img {
	border-radius: var(--vpl-radius);
}

/* width: auto !important porque el style inline del shortcode gana a la clase */
.entry-content .wp-caption {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	width: auto !important;
}

.entry-content .wp-caption img,
.entry-content > img,
.entry-content p > img {
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

@media screen and (min-width: 56.875em) {
	.entry-content .wp-caption img,
	.entry-content > img,
	.entry-content p > img {
		max-width: 720px;
	}
}

.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	font-style: normal;
	text-align: center;
}


/* ==========================================================================
   7. Header, marca y navegación
   ========================================================================== */

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--vpl-line);
	padding-bottom: 1.25em;
	padding-top: 1.25em;
}

.admin-bar .site-header {
	top: 0;
}

@media screen and (min-width: 48.9375em) {
	.admin-bar .site-header {
		top: 32px;
	}
}

.site-branding,
.site-header-menu,
.header-image {
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}

/* Marca: logo a la izquierda, título y claim apilados a la derecha */
.site-branding {
	align-items: center;
	column-gap: 0.75em;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
}

.site-branding .custom-logo-link {
	display: block;
	grid-column: 1;
	grid-row: 1 / span 2;
}

.custom-logo {
	display: block;
	height: auto;

}

.site-branding .site-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.wp-custom-logo .site-title {
	margin-top: 0;
}

.site-branding .site-description {
	grid-column: 2;
	grid-row: 2;
	margin: 0.15em 0 0;
}

.main-navigation ul ul li {
	border-color: var(--vpl-line);
}


/* ==========================================================================
   8. Layout sin sidebar

   El padre, en .no-sidebar, mete margin 15% a los lados y a partir de 985px
   empuja el .entry-content a margin-left: 34.99% con width: 50%. Aquí se centra.

   .content-area a ancho completo y centrada: de esto depende el calc() del hero.
   ========================================================================== */

.content-area {
	float: none;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

@media screen and (min-width: 56.875em) {
	.no-sidebar .entry-header,
	.no-sidebar .entry-content,
	.no-sidebar .entry-summary,
	.no-sidebar .entry-footer,
	.no-sidebar .post-thumbnail,
	.no-sidebar .page-header,
	.no-sidebar .page-content,
	.no-sidebar .comments-area,
	.no-sidebar .post-navigation,
	.no-sidebar .pagination,
	.no-sidebar .content-bottom-widgets {
		margin-left: auto;
		margin-right: auto;
		max-width: 1200px;
	}
}

@media screen and (min-width: 61.5625em) {
	body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content,
	body.no-sidebar:not(.search-results) article:not(.type-page) .entry-footer {
		float: none;
		margin-left: auto;
		margin-right: auto;
		width: auto;
	}
}


/* ==========================================================================
   9. Barra CTA móvil (llamar / WhatsApp)
   Se inyecta desde functions.php
   ========================================================================== */

.vpl-cta-bar {
	background: #fff;
	border-top: 1px solid var(--vpl-line);
	bottom: 0;
	display: flex;
	gap: 10px;
	left: 0;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	position: fixed;
	right: 0;
	z-index: 999;
}

.vpl-cta-bar a {
	align-items: center;
	border-radius: var(--vpl-radius);
	display: flex;
	flex: 1;
	justify-content: center;
	min-height: 50px;
	text-align: center;
}

.vpl-cta-bar .vpl-cta-call {
	background: var(--vpl-accent);
	color: #fff;
}

.vpl-cta-bar .vpl-cta-wa {
	background: var(--vpl-wa);
	color: #0b2117;
}

@media screen and (min-width: 56.875em) {
	.vpl-cta-bar {
		display: none;
	}
}


/* ==========================================================================
   10. Banda de cierre (antes del footer)
   Requiere footer.php
   ========================================================================== */

.vpl-closer {
	background: var(--vpl-ink);
	color: #fff;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	padding: 3.5em 7.6923%;
	text-align: center;
	width: 100vw;
}

@media screen and (min-width: 56.875em) {
	.vpl-closer {
		padding: 4.5em 4.5455%;
	}
}

.vpl-closer-title {
	color: #fff;
	margin: 0 0 0.5em;
}

.vpl-closer-sub {
	color: rgba(255, 255, 255, .7);
	margin: 0 0 1.75em;
}

.vpl-closer-phone {
	color: #fff;
	display: inline-block;
	letter-spacing: 0.01em;
	margin: 0;
}

.vpl-closer-phone:hover,
.vpl-closer-phone:focus {
	color: var(--vpl-accent);
}


/* ==========================================================================
   11. Footer
   Requiere footer.php
   ========================================================================== */

.vpl-footer {
	background: #fff;
	border-top: 1px solid var(--vpl-line);
	display: block;
	padding: 3.5em 7.6923% 0;
}

@media screen and (min-width: 56.875em) {
	.vpl-footer {
		padding-left: 4.5455%;
		padding-right: 4.5455%;
	}
}

.vpl-footer-grid {
	display: grid;
	gap: 2.5em;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: 1100px;
}

@media screen and (min-width: 56.875em) {
	.vpl-footer-grid {
		gap: 3em;
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.vpl-footer-col > :last-child {
	margin-bottom: 0;
}

.vpl-footer-brand {
	margin: 0 0 0.5em;
}

.vpl-footer-claim,
.vpl-footer-address {
	color: var(--vpl-muted);
	font-style: normal;
	margin: 0 0 1em;
}

.vpl-footer-phone {
	margin: 0 0 0.5em;
}

.vpl-footer-hours {
	color: var(--vpl-muted);
	margin: 0;
}

/* Etiqueta de columna */
.vpl-footer-title {
	letter-spacing: 0.1em;
	margin: 0 0 1.25em;
	text-transform: uppercase;
}

.vpl-footer-menu,
.vpl-footer-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vpl-footer-menu li {
	margin-bottom: 0.65em;
}

.vpl-footer-menu li:last-child {
	margin-bottom: 0;
}

.vpl-footer-menu a {
	color: var(--vpl-muted);
}

.vpl-footer-menu a:hover,
.vpl-footer-menu a:focus {
	color: var(--vpl-accent);
}

.vpl-footer-bottom {
	border-top: 1px solid var(--vpl-line);
	margin: 3em auto 0;
	max-width: 1100px;
	padding: 1.5em 0;
}

.vpl-footer .site-info {
	color: var(--vpl-muted);
	display: block;
	margin: 0;
	text-align: center;
}

@media screen and (max-width: 56.8125em) {
	body.vpl-has-cta .vpl-footer-bottom {
		padding-bottom: 5em;
	}
}


/* ==========================================================================
   12. Formulario de contacto (CF7 en widget al final del contenido)
   ========================================================================== */

/* El widget_block envuelve otro .widget, y salen dos border-top */
.widget_block .widget {
	border-top: 0;
	margin-bottom: 0;
	padding-top: 0;
}

.widget_block .textwidget {
	background: var(--vpl-bg);
	border: 1px solid var(--vpl-line);
	border-radius: var(--vpl-radius);
	padding: 2em 1.5em;
}

@media screen and (min-width: 44.375em) {
	.widget_block .textwidget {
		padding: 2.75em;
	}
}

/* "DISPONIBLE TODOS LOS DÍAS DEL AÑO": etiqueta, no párrafo */
.widget_block .textwidget > p:first-child {
	color: var(--vpl-accent);
	letter-spacing: 0.1em;
	margin-bottom: 1.75em;
	text-transform: uppercase;
}

/* CF7 pinta un fieldset con los campos ocultos: recuadro y margen fantasma */
.wpcf7-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.wpcf7-form p {
	margin-bottom: 1.25em;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	margin-top: 0.5em;
	min-height: 52px;
}

.wpcf7-form textarea {
	min-height: 130px;
	resize: vertical;
}

.wpcf7-submit {
	margin-top: 0.75em;
	min-height: 58px;
	width: 100%;
}


/* ==========================================================================
   13. Hero: foto a sangre, overlay oscuro, texto centrado
   Requiere page.php y template-parts/vpl-hero.php
   ========================================================================== */

/* calc(50% - 50vw) rompe el padding de .site-content Y el max-width del
   .site-inner del padre anclándose al viewport. Depende de que .content-area
   esté centrada, que es lo que se fuerza en la sección 8. */

.vpl-hero-bleed {
	background-color: var(--vpl-ink);
	background-position: center;
	background-size: cover;
	margin-bottom: 3.5em;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	padding: 4em 7.6923%;
	position: relative;
	width: 100vw;
}

@media screen and (min-width: 56.875em) {
	.vpl-hero-bleed {
		margin-bottom: 5em;
		padding: 7em 4.5455%;
	}
}

/* Overlay: sin esto el texto blanco no se lee sobre cualquier foto */
.vpl-hero-bleed:before {
	background: linear-gradient(180deg, rgba(15, 18, 20, .72) 0%, rgba(15, 18, 20, .82) 100%);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.vpl-hero {
	margin: 0 auto;
	max-width: 800px;
	position: relative; /* por encima del overlay */
	text-align: center;
	z-index: 1;
}

/* Etiqueta sobre el H1 */
.vpl-hero-eyebrow {
	color: #fff;
	letter-spacing: 0.14em;
	margin: 0 0 1em;
	text-transform: uppercase;
}

.vpl-hero-title {
	color: #fff;
	margin: 0 0 0.5em;
}

.vpl-hero-sub {
	color: rgba(255, 255, 255, .82);
	margin: 0 auto 2em;
	max-width: 46ch;
}

/* --- Botones --- */

.vpl-hero-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	justify-content: center;
	margin-bottom: 2.5em;
}

@media screen and (min-width: 44.375em) {
	.vpl-hero-actions {
		flex-direction: row;
	}
}

.vpl-btn {
	align-items: center;
	border-radius: var(--vpl-radius);
	box-shadow: none; /* el padre subraya los enlaces del contenido con box-shadow */
	display: inline-flex;
	justify-content: center;
	letter-spacing: 0.01em;
	min-height: 58px;
	padding: 0 2em;
}

.vpl-btn-icon {
	flex-shrink: 0;
	height: 20px;
	margin-right: 0.6em;
	width: 20px;
}

.vpl-btn-call {
	background: var(--vpl-accent);
	color: #fff;
}

.vpl-btn-call:hover,
.vpl-btn-call:focus {
	background: var(--vpl-accent-dark);
	color: #fff;
}

/* Secundario: borde blanco sobre la foto */
.vpl-btn-wa {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .55);
	color: #fff;
}

.vpl-btn-wa:hover,
.vpl-btn-wa:focus {
	background: #fff;
	border-color: #fff;
	color: var(--vpl-ink);
}

/* --- Franja de confianza --- */

.vpl-hero-trust {
	border-top: 1px solid rgba(255, 255, 255, .18);
	display: grid;
	gap: 0.75em 2em;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 2em 0 0;
}

@media screen and (min-width: 44.375em) {
	.vpl-hero-trust {
		grid-template-columns: 1fr 1fr;
	}
}

.vpl-hero-trust li {
	color: rgba(255, 255, 255, .9);
	padding-left: 1.5em;
	position: relative;
	text-align: left;
}

.vpl-hero-trust li:before {
	color: var(--vpl-accent);
	content: "\2713";
	left: 0;
	position: absolute;
}


/* ==========================================================================
   14. Secciones de la home: bloque centrado + filas alternas
   Requiere el HTML con .vpl-intro / .vpl-heading / .vpl-row
   ========================================================================== */

/* --- Bloque centrado --- */

.vpl-intro {
	margin: 0 auto 4em;
	max-width: 760px;
	text-align: center;
}

.vpl-intro > :last-child {
	margin-bottom: 0;
}

.vpl-intro blockquote {
	border-left: 0;
	border-top: 3px solid var(--vpl-accent);
	text-align: center;
}

/* --- Encabezado de bloque de secciones --- */

.vpl-heading {
	margin: 0 auto 3em;
	max-width: 760px;
	text-align: center;
}

.vpl-heading h2 {
	margin-top: 0;
}

.vpl-heading > :last-child {
	margin-bottom: 0;
}

/* --- Filas alternas --- */

.vpl-row {
	display: grid;
	gap: 2em;
	grid-template-columns: 1fr;
	margin-bottom: 4em;
}

@media screen and (min-width: 56.875em) {
	.vpl-row {
		align-items: center;
		gap: 4em;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 6em;
	}

	/* Invertida: la foto pasa a la izquierda */
	.vpl-row-rev .vpl-row-text {
		order: 2;
	}

	.vpl-row-rev .vpl-row-media {
		order: 1;
	}
}

.vpl-row-text > :first-child {
	margin-top: 0;
}

.vpl-row-text > :last-child {
	margin-bottom: 0;
}

/* La regla de la sección 6 tapa las imágenes a 720px y las centra.
   Aquí tienen que llenar su columna. */
.vpl-row-media img {
	aspect-ratio: 4 / 3;
	border-radius: var(--vpl-radius);
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

@media screen and (min-width: 56.875em) {
	.entry-content .vpl-row-media img {
		max-width: 100%;
	}
}

/* Fondo alterno: da ritmo sin necesidad de bandas a sangre */
.vpl-row-rev {
	background: var(--vpl-bg);
	border-radius: var(--vpl-radius);
	padding: 2em;
}

@media screen and (min-width: 56.875em) {
	.vpl-row-rev {
		padding: 3em;
	}
}
.vpl-hero-title {
	color: #fff;
	font-size: 2rem;       
	line-height: 1.15;
	margin: 0 0 0.5em;
}

@media screen and (min-width: 44.375em) {
	.vpl-hero-title {
		font-size: 2.75rem;    
	}
}

@media screen and (min-width: 56.875em) {
	.vpl-hero-title {
		font-size: 3.5rem;     
	}
}