/*
Theme Name: TECREO
Author: TECREO SpA
Description: Tema de bloques para el sitio de un negocio local. Celular primero, una sola acción por página (WhatsApp con mensaje armado) y datos del negocio que se editan sin código. Necesita el plugin tecreo-core.
Version: 1.1.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tecreo
*/

/* ==========================================================================
   Reglas de esta hoja

   1. TOKENS. Colores, tipografías y espacios salen de theme.json como
      var(--wp--preset--*) y var(--wp--custom--*). No se escriben colores
      sueltos: el cliente cambia su marca en theme.json y el sitio entero
      cambia con ella.

   2. ESPECIFICIDAD BAJA. Lo que genera theme.json va envuelto en :where()
      con especificidad 0-1-0. Las reglas base de esta hoja usan :where()
      para que cualquier ajuste hecho en el editor les gane. Cuando
      hay que ganarle a un layout de core se usan dos clases
      (.wp-block-buttons.cabecera__accion), nunca !important.

   3. CELULAR PRIMERO. Los estilos de base son los del celular; las media
      queries (sección 9) agregan lo de pantallas grandes. Las grillas son
      layouts de grid de WordPress con ancho mínimo de columna: se apilan
      solas en el celular, sin media queries.

   4. ORDEN. La sección 9 (pantallas grandes) y la 10 (menos movimiento)
      van al final o dejan de aplicar.

   Al tocar esta hoja se sube «Version» arriba: es el ?ver= con el que el
   navegador y LiteSpeed saben que cambió.
   ========================================================================== */


/* ==========================================================================
   1. Base
   ========================================================================== */

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Foco visible en todo lo que se puede tocar con el teclado. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--contraste);
	outline-offset: 3px;
}

/* Lo que se toca con el dedo mide al menos 44 px de alto. */
:where(.wp-block-navigation-item__content, .wp-block-button__link, summary) {
	min-height: var(--wp--custom--toque);
}


/* ==========================================================================
   2. Bandas: cada sección ocupa el ancho completo

   Las secciones de los patrones son grupos «ancho completo» con layout
   restringido. WordPress centra el contenido y aplica el margen lateral
   (styles.spacing.padding de theme.json, con useRootPaddingAwareAlignments).
   Lo único que hay que corregir es el espacio entre bloques de core
   (blockGap), que entre una banda y otra deja una franja blanca.
   ========================================================================== */

/* Core usa :root :where(...) > * (0-1-0); estas reglas ganan por clase. */
.wp-site-blocks > * {
	margin-block: 0;
}

main > .wp-block-post-content,
.seccion + .seccion {
	margin-block-start: 0;
}

.seccion {
	padding-block: var(--wp--preset--spacing--60);
}

/* Encabezado de sección: el título y su bajada, con aire debajo. */
.seccion > .wp-block-heading:first-child {
	margin-block-end: var(--wp--preset--spacing--30);
}

.cabecera-pagina {
	padding-block: var(--wp--preset--spacing--50);
}

.cabecera-pagina > :last-child {
	margin-block-end: 0;
}


/* ==========================================================================
   3. Textos de apoyo
   ========================================================================== */

.antetitulo {
	margin-block-end: 0.5rem;
	color: var(--wp--preset--color--texto-suave);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.bajada {
	color: var(--wp--preset--color--contraste);
	font-size: var(--wp--preset--font-size--medio);
	line-height: 1.5;
}

.fuerte {
	font-weight: 600;
}

.certeza {
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--chico);
}


/* ==========================================================================
   4. Estilos de bloque (se eligen en el editor, panel «Estilos»)
   ========================================================================== */

.is-style-superficie {
	background-color: var(--wp--preset--color--superficie);
}

.is-style-oscura {
	background-color: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--marca-contraste);
}

/* Sobre fondo oscuro los enlaces heredan el color claro. Con más peso que el
   color de enlace de theme.json (0-1-0), también al pasar el mouse: el color
   de hover de theme.json es oscuro y ahí no se leería. */
.is-style-oscura a:not(.wp-element-button) {
	color: inherit;
}

.is-style-oscura :is(.bajada, .certeza) {
	color: var(--wp--preset--color--marca-contraste);
}

.is-style-oscura .antetitulo {
	color: var(--wp--preset--color--accion);
}

.is-style-oscura :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--marca-contraste);
}

.is-style-tarjeta {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio);
	background-color: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--contraste);
	gap: var(--wp--preset--spacing--20);
}

.wp-block-group.is-style-tarjeta > * {
	margin-block: 0;
}

/* El botón de una tarjeta queda abajo aunque los textos tengan largos distintos. */
.is-style-tarjeta > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

.is-style-tarjeta > :first-child {
	margin-block-start: 0;
}

.is-style-tarjeta > :last-child {
	margin-block-end: 0;
}


/* ==========================================================================
   5. Botones
   ========================================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
}

/* En el celular, el botón de WhatsApp ocupa todo el ancho (sección 9 lo achica). */
.wp-block-button.is-style-whatsapp,
.wp-block-button.is-style-whatsapp > .wp-block-button__link {
	width: 100%;
}

/* Secundario: «Ver la página de veterinarias». Le gana al relleno amarillo
   que theme.json pone a todos los botones (0-1-0). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--contraste);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
}

.is-style-oscura .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--marca-contraste);
}

/* WhatsApp: el ícono es una burbuja de chat dibujada con una máscara, así
   toma el color del texto. Sin imágenes ni fuentes externas. */
.wp-block-button.is-style-whatsapp > .wp-block-button__link::before {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a9.5 9.5 0 0 0-8.2 14.3L2.5 21.5l4.8-1.3A9.5 9.5 0 1 0 12 2.5z'/%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 2.5a9.5 9.5 0 0 0-8.2 14.3L2.5 21.5l4.8-1.3A9.5 9.5 0 1 0 12 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sobre el fondo de marca, el botón con el puntero encima se separa con un
   borde amarillo: el fondo oscuro de ese estado se confunde con la sección. */
.is-style-oscura .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accion);
}


/* ==========================================================================
   6. Cabecera del sitio
   ========================================================================== */

.cabecera {
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--borde);
	background-color: var(--wp--preset--color--base);
}

.wp-block-group.cabecera__fila {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

/* La barra de arriba: la garantía, en todas las páginas. */
.barra {
	padding-block: 0.5rem;
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.5;
	text-align: center;
}

.barra p {
	margin: 0;
}

/* El logo es una imagen con ancho y alto: la página no salta al cargar. */
.logo-tecreo {
	display: inline-flex;
	min-height: var(--wp--custom--toque);
	align-items: center;
}

.logo-tecreo img {
	display: block;
}

.cabecera__menu {
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 700;
}

.cabecera__menu .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.cabecera__menu .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* En el celular el botón de la cabecera se esconde: el botón flotante de
   WhatsApp ya está siempre a mano (sección 9 lo muestra en pantallas grandes). */
.wp-block-buttons.cabecera__accion {
	display: none;
}


/* ==========================================================================
   7. Secciones de los patrones
   ========================================================================== */

/* Portada */
.portada h1 {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.portada .wp-block-group.alignwide {
	align-items: start;
}

.portada h1 mark {
	display: inline-block;
	padding-inline: 0.2em;
	color: var(--wp--preset--color--accion-contraste);
}

.portada__texto > * {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.portada__texto > .wp-block-buttons {
	margin-block: var(--wp--preset--spacing--30);
}

.portada__texto > .certeza {
	margin-block: 0.25rem;
}

.wp-block-image :where(img) {
	border-radius: var(--wp--custom--radio);
}

.portada__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Datos de un servicio: «Cómo se paga», «Cuánto demora», «Garantía». */
.datos-servicio {
	padding-inline-start: 0;
	list-style: none;
}

.datos-servicio > li {
	padding-block: 0.4rem;
	border-block-end: 1px solid var(--wp--preset--color--borde);
}

/* Cómo se trabaja: lista numerada en grilla, con el número en un círculo. */
.pasos {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	padding: 0;
	margin: 0;
	counter-reset: paso;
	list-style: none;
}

.pasos > li {
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 3px solid var(--wp--preset--color--marca);
	counter-increment: paso;
}

.pasos > li::before {
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	margin-block-end: 0.75rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--marca-contraste);
	content: counter(paso);
	font-weight: 800;
	place-items: center;
}

/* Reseñas */
.wp-block-quote.resena {
	padding: var(--wp--preset--spacing--40);
	margin: 0;
	border: 1px solid var(--wp--preset--color--borde);
	border-inline-start: 4px solid var(--wp--preset--color--accion);
	border-radius: var(--wp--custom--radio);
	background-color: var(--wp--preset--color--base);
}

.wp-block-quote.resena cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--chico);
	font-style: normal;
}

/* Preguntas frecuentes */
.wp-block-details.pregunta {
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--borde);
}

.wp-block-details.pregunta summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.wp-block-details.pregunta summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.pregunta summary::after {
	flex: none;
	content: "+";
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 700;
	line-height: 1;
}

.wp-block-details.pregunta[open] summary::after {
	content: "−";
}

.wp-block-details.pregunta[open] summary {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Ubicación: cada dato con su título; el plugin esconde los que están vacíos. */
.bloque-dato > .wp-block-heading {
	margin-block-end: 0.25rem;
	font-size: var(--wp--preset--font-size--medio);
}

.bloque-dato > p {
	margin-block: 0 0.25rem;
}


/* Anchos: las secciones usan el ancho amplio y el texto corrido, el de lectura. */
.seccion--amplia {
	padding-block: var(--wp--preset--spacing--70);
}

.lectura {
	max-width: var(--wp--style--global--content-size, 44rem);
}

/* Calendario de 28 días: solo en pantallas grandes (sección 9). */
.is-style-tarjeta.calendario {
	display: none;
}

.calendario svg {
	display: block;
	width: 100%;
	max-width: 24rem;
}

.calendario__dia {
	fill: var(--wp--preset--color--base);
}

.calendario__dia--clave {
	fill: var(--wp--preset--color--accion);
}

.calendario__numero {
	fill: var(--wp--preset--color--texto-suave);
	font-family: var(--wp--preset--font-family--texto);
	font-size: 14px;
	text-anchor: middle;
}

.calendario__numero--clave {
	fill: var(--wp--preset--color--accion-contraste);
	font-size: 16px;
	font-weight: 600;
}

/* Paso numerado: FICHA, antes de las tarjetas de precio. */
.wp-block-group.paso {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.paso__numero {
	display: grid;
	flex: none;
	width: var(--wp--custom--toque);
	height: var(--wp--custom--toque);
	margin: 0;
	border-radius: var(--wp--custom--radio);
	background-color: var(--wp--preset--color--accion);
	color: var(--wp--preset--color--accion-contraste);
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 700;
	line-height: 1;
	place-items: center;
}

.paso__texto > * {
	margin-block: 0;
}

.paso__titulo {
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 700;
	line-height: 1.25;
}

/* Tarjetas de precio */
.wp-block-group.precios {
	align-items: start;
}

.precio {
	font-size: var(--wp--preset--font-size--titulo);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.precio--largo {
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.25;
}

.wp-block-group.is-style-tarjeta.tarjeta--destacada {
	border: 3px solid var(--wp--preset--color--accion);
}

.etiqueta {
	align-self: flex-start;
	padding: 0.25rem 0.5rem;
	background-color: var(--wp--preset--color--accion);
	color: var(--wp--preset--color--accion-contraste);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--chico);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lista-tarjeta,
.objecion ul {
	padding-inline-start: 1.1rem;
}

.lista-tarjeta li,
.objecion li {
	margin-block: 0.25rem;
}

.wp-block-group.notas-precios {
	font-size: var(--wp--preset--font-size--chico);
	line-height: 1.5;
}

.wp-block-group.notas-precios > * {
	margin-block: 0;
}

/* El botón flotante del celular: solo el ícono, como en el diseño. El nombre
   para quien usa un lector de pantalla lo pone el plugin en aria-label. */
a.whatsapp-flotante {
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 2px solid var(--wp--preset--color--accion-contraste);
}

.whatsapp-flotante__texto {
	display: none;
}

/* Foto que falta: se ve y 03-revisar la encuentra por sus corchetes. */
.marcador-foto {
	display: grid;
	min-height: 18.75rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio);
	background-color: var(--wp--preset--color--borde);
	font-weight: 600;
	place-items: center;
	text-align: center;
}

.marcador-foto > * {
	margin: 0;
}

/* La foto de Diego: cuadrada, con el radio de las tarjetas y sin llenar toda la columna. */
.wp-block-image.foto-diego {
	max-width: 30rem;
	margin: 0;
}

.wp-block-image.foto-diego img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radio);
	aspect-ratio: 1;
	object-fit: cover;
}

.wp-block-group.quien {
	align-items: center;
}

/* Las dudas de la portada: una regla arriba, en tres columnas en el computador. */
.wp-block-group.dudas {
	align-items: start;
}

.objecion {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--wp--preset--color--contraste);
}

.objecion > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* Las cifras de un rubro: el dato grande y su frase. */
.rubro-datos {
	display: grid;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

.wp-block-group.rubro-datos > *,
.wp-block-group.cifras > * {
	margin-block: 0;
}

.cifras {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}

.cifra {
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 3px solid var(--wp--preset--color--accion);
}

.cifra > * {
	margin-block: 0;
}

.cifra__numero {
	font-size: var(--wp--preset--font-size--titulo);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* Lo que queda hecho: lista sin viñetas, en dos columnas si caben. */
.lista-hecho {
	display: grid;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
	padding-inline-start: 0;
	list-style: none;
}


/* ==========================================================================
   8. Pie del sitio
   ========================================================================== */

/* El espacio de abajo deja libre el botón flotante de WhatsApp en el celular. */
.pie {
	padding-block: var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--40) + 4.5rem);
	font-size: var(--wp--preset--font-size--chico);
}

.pie__nombre {
	font-size: var(--wp--preset--font-size--medio);
	font-weight: 800;
}

.pie__titulo {
	margin-block-end: 0.5rem;
	font-size: var(--wp--preset--font-size--chico);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pie .bloque-dato > p {
	margin-block: 0 0.35rem;
}

.pie a {
	display: inline-flex;
	min-height: var(--wp--custom--toque);
	align-items: center;
}

.wp-block-group.pie__legal {
	padding-block-start: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--borde);
}

.pie__legal p {
	margin: 0;
}


/* ==========================================================================
   9. Pantallas medianas y grandes
   ========================================================================== */

@media (min-width: 48rem) {
	.wp-block-buttons.cabecera__accion {
		display: flex;
	}

	.cabecera__menu {
		font-size: var(--wp--preset--font-size--normal);
	}

	.wp-block-button.is-style-whatsapp,
	.wp-block-button.is-style-whatsapp > .wp-block-button__link {
		width: auto;
	}

	.is-style-tarjeta.calendario {
		display: flex;
		justify-self: end;
		width: 100%;
		max-width: calc(24rem + 2 * var(--wp--preset--spacing--40));
	}

	/* En el computador el botón está en la cabecera: el flotante es del celular. */
	a.whatsapp-flotante {
		display: none;
	}

	.rubro-datos {
		align-items: start;
		grid-template-columns: 1fr 1fr;
	}

	.rubro-datos > * {
		grid-column: 1;
	}

	.rubro-datos > .cifras {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.seccion.cierre {
		text-align: center;
	}

	.seccion.cierre .wp-block-buttons {
		justify-content: center;
	}

	.pie {
		padding-block-end: var(--wp--preset--spacing--50);
	}
}


/* ==========================================================================
   10. Menos movimiento
   Va al final a propósito: cualquier transición declarada después la pisaría.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}