/*
Theme Name: Lienzo
Theme URI: https://example.com/lienzo
Author: Lienzo
Description: Tema de bloques para empresas de tecnología: redes, instalaciones eléctricas, soporte técnico y diseño web. Todas las secciones, textos, precios e imágenes se editan desde Apariencia → Editor.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lienzo
Tags: full-site-editing, block-patterns, one-column, custom-colors, editor-style
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
:where(a, button, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--ambar);
	outline-offset: 3px;
	border-radius: 6px;
}
img { max-width: 100%; height: auto; }
[id] { scroll-margin-top: 90px; }

/* Texto secundario reutilizable */
.texto-suave { color: var(--wp--preset--color--gris); }
.has-petroleo-background-color .texto-suave,
.has-grafito-background-color .texto-suave { color: rgba(255,255,255,.72); }

/* Botón secundario (estilo contorno del editor) */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1.5px solid currentColor;
	padding: calc(0.85rem - 1.5px) calc(1.6rem - 1.5px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--grafito);
	border-color: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco);
}
.has-petroleo-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--grafito);
}
.has-petroleo-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--blanco);
}

/* ---------- Encabezado ---------- */
.sitio-encabezado-wrap {
	position: sticky;
	top: 0;
	z-index: 40;
}
.admin-bar .sitio-encabezado-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .sitio-encabezado-wrap { top: 0; } }
.sitio-encabezado {
	background: rgba(246, 246, 242, .88);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid rgba(31, 42, 43, .08);
	padding-top: .9rem;
	padding-bottom: .9rem;
}
.sitio-encabezado .wp-block-navigation a { text-decoration: none; }
.sitio-encabezado .wp-block-navigation a:hover { color: var(--wp--preset--color--petroleo); }
.sitio-encabezado .wp-block-button__link { padding: .6rem 1.2rem; font-size: var(--wp--preset--font-size--chico); }

/* ---------- Hero ---------- */
.hero { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--60); }
.hero .hero-titulo { max-width: 14ch; margin-bottom: 0; }
.hero .hero-bajada {
	font-size: var(--wp--preset--font-size--mediano);
	max-width: 36ch;
	color: var(--wp--preset--color--gris);
}
.hero .hero-columnas { align-items: flex-end !important; margin-top: var(--wp--preset--spacing--50); }
.cifras {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
	border-top: 1px solid rgba(31, 42, 43, .15);
	padding-top: 1.25rem;
}
.cifras > * { margin: 0 !important; }
.cifra-numero {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--enorme);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: .25rem !important;
}
.cifra-texto { font-size: var(--wp--preset--font-size--chico); color: var(--wp--preset--color--gris); margin-top: 0 !important; }
.hero-imagen {
	margin-top: var(--wp--preset--spacing--60) !important;
}
.hero-imagen img {
	border-radius: 18px;
	box-shadow: 0 40px 80px -40px rgba(15, 61, 62, .45);
	width: 100%;
}

/* ---------- Incluye (franja) ---------- */
.incluye {
	border-top: 1px solid rgba(31, 42, 43, .12);
	border-bottom: 1px solid rgba(31, 42, 43, .12);
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}
.incluye ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem 2rem;
	font-weight: 500;
}
.incluye li { display: flex; align-items: center; gap: .55rem; }
.incluye li::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--ambar);
	flex: none;
}

/* ---------- Secciones genéricas ---------- */
.seccion { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
.seccion-intro { max-width: 640px; margin-bottom: var(--wp--preset--spacing--50) !important; }
.seccion-intro h2 { margin-bottom: .75rem; }
.seccion-intro p { font-size: var(--wp--preset--font-size--mediano); }

/* ---------- Tarjetas y planes ---------- */
.is-style-tarjeta,
.is-style-plan-destacado {
	background: var(--wp--preset--color--blanco);
	border: 1px solid rgba(31, 42, 43, .1);
	border-radius: 22px;
	padding: clamp(1.5rem, 3vw, 2rem);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.is-style-plan-destacado {
	background: var(--wp--preset--color--petroleo);
	color: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--petroleo);
	box-shadow: 0 30px 60px -30px rgba(15, 61, 62, .6);
}
.planes-grilla { gap: 1.25rem !important; align-items: stretch !important; }
.planes-grilla > .wp-block-column { display: flex; }
.planes-grilla > .wp-block-column > * { flex: 1; }

.plan-etiqueta {
	align-self: flex-start;
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 600;
	background: var(--wp--preset--color--salvia);
	color: var(--wp--preset--color--petroleo);
	padding: .2rem .75rem;
	border-radius: 999px;
	margin-bottom: .25rem !important;
}
.is-style-plan-destacado .plan-etiqueta { background: var(--wp--preset--color--ambar); color: var(--wp--preset--color--grafito); }
.plan-nombre { font-size: var(--wp--preset--font-size--grande); margin-bottom: 0; }
.plan-descripcion { color: var(--wp--preset--color--gris); margin-top: .35rem !important; }
.is-style-plan-destacado .plan-descripcion,
.is-style-plan-destacado .plan-nota { color: rgba(255,255,255,.75); }
.plan-precio {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp(1.75rem, 2.3vw, 2.25rem);
	font-weight: 650;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
	margin-top: 1.25rem !important;
	margin-bottom: 0 !important;
}
.plan-nota { font-size: var(--wp--preset--font-size--chico); color: var(--wp--preset--color--gris); margin-top: .4rem !important; }
.plan-lista {
	list-style: none;
	padding: 1.25rem 0 0;
	margin: 1.25rem 0 1.5rem !important;
	border-top: 1px solid rgba(31, 42, 43, .12);
	display: grid;
	align-content: start;
	gap: .55rem;
	flex: 1;
}
.is-style-plan-destacado .plan-lista { border-top-color: rgba(255,255,255,.2); }
.plan-lista li { position: relative; padding-left: 1.6rem; }
.plan-lista li::before {
	content: "";
	position: absolute;
	left: 0; top: .45em;
	width: 1rem; height: .55rem;
	border-left: 2px solid var(--wp--preset--color--petroleo);
	border-bottom: 2px solid var(--wp--preset--color--petroleo);
	transform: rotate(-45deg) scale(.8);
}
.is-style-plan-destacado .plan-lista li::before { border-color: var(--wp--preset--color--ambar); }
.plan-boton { margin-top: auto !important; }
.plan-boton .wp-block-button { width: 100%; }
.plan-boton .wp-block-button__link { width: 100%; }
.is-style-plan-destacado .plan-boton .wp-block-button__link {
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--grafito);
}
.is-style-plan-destacado .plan-boton .wp-block-button__link:hover { background: var(--wp--preset--color--blanco); }
.planes-aclaracion { margin-top: var(--wp--preset--spacing--40) !important; text-align: center; }

/* ---------- Tabla comparativa ---------- */
.comparativa { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparativa table {
	min-width: 720px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--blanco);
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(31, 42, 43, .1);
}
.comparativa th, .comparativa td {
	border: 0;
	border-bottom: 1px solid rgba(31, 42, 43, .08);
	padding: .9rem 1rem;
	text-align: center;
}
.comparativa th:first-child, .comparativa td:first-child { text-align: left; font-weight: 500; }
.comparativa thead th {
	background: var(--wp--preset--color--petroleo);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 600;
}
.comparativa tbody tr:last-child td { border-bottom: 0; font-weight: 700; }
.comparativa tbody tr:nth-child(even) td { background: rgba(220, 231, 223, .35); }
.comparativa figcaption { text-align: center; color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--chico); }

/* ---------- Proceso ---------- */
.proceso-grilla { gap: 2rem !important; }
.paso-numero {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--gigante);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--ambar);
	margin-bottom: .5rem !important;
}
.proceso-grilla h3 { font-size: var(--wp--preset--font-size--mediano); }

/* ---------- Trabajos ---------- */
.trabajos-grilla { gap: 1.5rem !important; }
.trabajo img { border-radius: 16px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.trabajo figcaption { text-align: left; margin-top: .75rem; font-size: var(--wp--preset--font-size--normal); color: var(--wp--preset--color--gris); }
.trabajo figcaption strong { color: var(--wp--preset--color--grafito); display: block; font-family: var(--wp--preset--font-family--titulos); font-size: var(--wp--preset--font-size--mediano); }

/* ---------- Valores ---------- */
.valores-grilla { gap: 1.25rem !important; }
.valores-grilla h3 { font-size: var(--wp--preset--font-size--mediano); }

/* ---------- Testimonios ---------- */
.testimonio {
	margin: 0;
	padding: 0 0 0 1.5rem !important;
	border-left: 3px solid var(--wp--preset--color--ambar) !important;
}
.testimonio cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--chico);
	font-style: normal;
	opacity: .8;
}

/* ---------- Medios de pago ---------- */
.pagos-lista {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.pagos-lista li {
	background: var(--wp--preset--color--blanco);
	border: 1px solid rgba(31, 42, 43, .12);
	border-radius: 999px;
	padding: .4rem 1rem;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--chico);
}

/* ---------- Preguntas frecuentes ---------- */
.faq .wp-block-details {
	border-bottom: 1px solid rgba(31, 42, 43, .15);
	padding: 1.1rem 0;
	margin: 0;
}
.faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: var(--wp--preset--font-size--mediano);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after {
	content: "+";
	font-weight: 400;
	font-size: 1.5em;
	line-height: .8;
	transition: transform .2s ease;
}
.faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.faq .wp-block-details p { color: var(--wp--preset--color--gris); margin-top: .75rem; }

/* ---------- CTA final ---------- */
.cta-final { border-radius: 28px; padding: var(--wp--preset--spacing--60) clamp(1.5rem, 5vw, 4rem) !important; }
.cta-final h2 { max-width: 18ch; }

/* ---------- Pie ---------- */
.sitio-pie { font-size: var(--wp--preset--font-size--chico); }
.sitio-pie a { color: inherit; text-decoration: none; }
.sitio-pie a:hover { text-decoration: underline; }
.sitio-pie h4 { font-size: var(--wp--preset--font-size--normal); margin-bottom: .5rem; }
.sitio-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.pie-legal { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.25rem; margin-top: var(--wp--preset--spacing--50) !important; }

/* ---------- WhatsApp flotante ---------- */
.boton-whatsapp {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 60;
	margin: 0 !important;
}
.boton-whatsapp .wp-block-button__link {
	background: #25D366 !important;
	color: #0B2A17 !important;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .35);
}
.boton-whatsapp .wp-block-button__link::before {
	content: "";
	width: 1.25rem; height: 1.25rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3a.5.5 0 0 0 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3a.5.5 0 0 0 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* En el editor no flota, para poder editarlo cómodo */
.editor-styles-wrapper .boton-whatsapp { position: static; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.hero .hero-columnas { align-items: flex-start !important; }
	.cifras { margin-top: 1.5rem; }
	.planes-grilla > .wp-block-column { flex-basis: 100% !important; }
}
@media (min-width: 782px) and (max-width: 1100px) {
	.planes-grilla { flex-wrap: wrap !important; }
	.planes-grilla > .wp-block-column { flex-basis: calc(50% - .625rem) !important; flex-grow: 0; }
}

/* Secciones pegadas entre sí (sin el espacio automático entre bloques) */
.wp-site-blocks > *,
main.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

/* Dos secciones seguidas sin fondo propio: evitar el doble espacio */
.seccion:not(.has-background) + .seccion:not(.has-background) { padding-top: 0; }
.sitio-pie .seccion { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); }
.wp-block-buttons:has(> .boton-whatsapp) { margin: 0 !important; height: 0; }
.faq > h2 { margin-bottom: var(--wp--preset--spacing--40); }
.comparativa td:not(:first-child) { white-space: nowrap; }

/* ---------- Servicios ---------- */
.servicios-grilla { gap: 1.25rem !important; align-items: stretch !important; margin-bottom: 1.25rem; }
.servicios-grilla:last-child { margin-bottom: 0; }
.servicios-grilla > .wp-block-column { display: flex; }
.servicios-grilla > .wp-block-column > * { flex: 1; }
.servicio h3 { font-size: var(--wp--preset--font-size--mediano); margin-bottom: .5rem; }
.servicio-icono { margin: 0 0 1rem !important; }
.servicio-icono img { width: 52px; height: 52px; }
.servicio-link { margin-top: auto !important; padding-top: 1rem; }
.servicio-link a {
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid var(--wp--preset--color--ambar);
	padding-bottom: 2px;
}
.servicio-link a:hover { border-bottom-color: var(--wp--preset--color--petroleo); }

/* ---------- Sectores ---------- */
.sectores { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.sectores h3 { font-size: var(--wp--preset--font-size--grande); margin-bottom: .5rem; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li {
	background: var(--wp--preset--color--salvia);
	color: var(--wp--preset--color--petroleo);
	border-radius: 999px;
	padding: .45rem 1.1rem;
	font-weight: 500;
}

/* El periodo del abono, mas discreto que el numero */
.plan-precio + .plan-nota { font-weight: 500; }