/*
Theme Name:   TodoAcrílico
Description:  Tema a medida para Todo Acrílico — inicio, nuestras soluciones (categorías e imágenes de la galería), cuidados del acrílico y contacto.
Author:       TodoAcrilicoTheme
Version:      1.19.3
Requires at least: 6.0
Requires PHP: 7.2.24
License:      GPL-2.0-or-later
Text Domain:  todo-acrilico
*/

/* ---- reset & tokens ---- */

:root {
	--ta-ink: #1a1c1c;
	--ta-muted: #5b6469;
	--ta-border: #e0e4e3;
	--ta-surface: #ffffff;
	--ta-bg: #f5f7f6;
	--ta-accent: #03854a;
	--ta-accent-dark: #03854a;
	--ta-accent-ink: #ffffff;
	/* Ancho compartido por el navbar y las 2 franjas del footer, para que
	   siempre queden alineados — cambiar solo este valor los mueve a los 3. */
	--ta-shell-width: 2405px; // se modifica el ancho del navbar y footer
}

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

/* ---- Manrope (tipografía del sitio, self-hosted en /fonts/manrope/) ---- */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url(fonts/manrope/Manrope-200.ttf) format("truetype");
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(fonts/manrope/Manrope-300.ttf) format("truetype");
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/manrope/Manrope-400.ttf) format("truetype");
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(fonts/manrope/Manrope-500.ttf) format("truetype");
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/manrope/Manrope-600.ttf) format("truetype");
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/manrope/Manrope-700.ttf) format("truetype");
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(fonts/manrope/Manrope-800.ttf) format("truetype");
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ta-bg);
	color: var(--ta-ink);
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

/* Ocultar barra en todo el sitio (Chrome, Safari, Edge, Opera) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
}

/* Ocultar barra en todo el sitio (Firefox e Internet Explorer) */
html, body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}




img {
	max-width: 100%;
	display: block;
}

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

h1,
h2,
h3,
h4 {
	line-height: 1.2;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

.ta-container {
	max-width: var(--ta-shell-width);
	margin: 0 auto;
	padding: 0 46.8px;
	
}

/* ---- header / nav ---- */

.ta-header {
	background: var(--ta-surface);
	border-bottom: 1px solid var(--ta-border);
position: sticky;
top: 0;
/* Por encima del badge del logo de "Nuestra historia" (z-index 10). Con los dos
   en 10 gana el que va después en el DOM, y el badge está en el contenido, así
   que se colaba por encima del nav al hacer scroll. El header tiene que ganar
   siempre. Queda por debajo de la barra de administración, que usa 99999. */
z-index: 100;
	/* Promueve el header a su propia capa de composición: en mobile, un
	   position:sticky que comparte capa con el contenido que scrollea
	   detrás puede repintarse un frame más tarde que ese contenido y
	   dejarlo asomar/parpadear encima del nav durante el scroll. Con esto
	   el navegador lo compone aparte y deja de "tearear". */
	will-change: transform;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Con sesión iniciada, la barra de administración de WordPress (#wpadminbar) es
   fija arriba y tiene z-index más alto que cualquier cosa del tema — si el navbar
   sigue pegado a top:0, queda tapado/cortado detrás de ella al hacer scroll. */
body.admin-bar .ta-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ta-header {
		top: 46px;
	}
}

/* WP core (wp-includes/css/admin-bar.css) cambia #wpadminbar de fixed a
   absolute por debajo de 600px: en ese ancho la barra deja de estar fija
   y se va con el scroll normal de la página. Si nuestro navbar sigue
   reservando 46px para ella, ese espacio queda vacío en cuanto se pasa
   la primera pantalla y deja asomar contenido ya scrolleado por encima
   del nav. Por eso acá se vuelve a top:0, igual que sin sesión iniciada. */
@media (max-width: 600px) {
	body.admin-bar .ta-header {
		top: 0;
	}
}

.ta-header-inner {
	max-width: var(--ta-shell-width);
	margin: 0 auto;
	padding-top: 26px;
	padding-bottom: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ta-logo {
	display: flex;
	align-items: center;
}

.ta-logo-img {
	height: 90px;
	width: auto;
	display: block;
}


.ta-nav-list {
	list-style: none;
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.ta-nav-list li {
	position: relative;
}

/* Desplegable de categorías bajo "Catálogo", armado en cada carga de página
   desde las categorías reales del plugin (functions.php: TA_Nav_Walker).
   Solo se abre con la clase .is-open (click en "Catálogo"/caret, ta-nav.js) —
   ni hover ni foco lo despliegan (ver ta-nav.js / Docs §1.12, §4.57). */
/* Estado cerrado por defecto */
.ta-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--ta-surface);
    border: 1px solid var(--ta-border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(20, 22, 20, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Evita clics invisibles mientras está cerrado */
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Estado abierto: únicamente con la clase .is-open (click) */
.ta-nav-list li.is-open > .ta-nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Habilita los clics al abrir */
    transform: translateY(0);
}

.ta-nav-dropdown a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--ta-ink);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	white-space: nowrap;
}

.ta-nav-dropdown a:hover {
	background: var(--ta-bg);
	color: var(--ta-accent);
}

/* ">li >a" (no descendiente genérico "a"): así apunta solo a los links de
   primer nivel (Inicio, Catálogo, Cuidados…) y no pisa el estilo de los
   links del desplegable, que viven más anidados dentro de .ta-nav-dropdown
   pero igual calzaban con un simple ".ta-nav-list a". Con la misma
   especificidad y viniendo después en el archivo, esa colisión los dejaba
   con display:inline-block en vez de block, achicando el área de hover de
   cada categoría al ancho del texto en vez de ocupar toda la fila. */
.ta-nav-list > li > a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 6px;
	color: var(--ta-ink);
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
}

.ta-nav-list > li > a:hover,
.ta-nav-list > li.current-menu-item > a {
	background: var(--ta-bg);
	color: var(--ta-accent);
	font-weight: 700;
}

/* El link "Catálogo" reserva espacio a la derecha para el botón del caret
   (que es position:absolute y por lo tanto no empuja el ancho del <li> por
   su cuenta) — sin este padding el botón queda flotando ENCIMA de las
   últimas letras de "Catálogo" en vez de al lado, que es justo el bug
   reportado. */
.ta-nav-list .ta-nav-has-caret > a {
	padding-right: 34px;
}


/* Botón del caret: reemplaza la flecha decorativa en TODAS las pantallas
   (no solo touch) para que el comportamiento sea idéntico en cualquier
   ancho/dispositivo — nada de detección por media query "hover", que en
   DevTools y ciertos híbridos táctil+mouse da resultados inconsistentes.
   El botón y el link "Catálogo" abren/cierran el desplegable con un click
   (ta-nav.js) — el listado NO se muestra con hover. */
.ta-nav-caret-toggle {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 100%;
	min-height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}

.ta-nav-caret-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -6px 0 0 -5px;
	/* Verde de marca siempre, en los dos estados — no currentColor: el
	   botón ya no es parte del <a>, así que no hereda su color de hover. */
	border-right: 2px solid var(--ta-accent);
	border-bottom: 2px solid var(--ta-accent);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.ta-nav-has-caret.is-open .ta-nav-caret-toggle::after {
	transform: rotate(225deg);
	margin-top: -3px;
}

.ta-nav-list .ta-nav-cta {
	margin-left: 6px;
}

.ta-nav-list li.ta-nav-cta > a,
.ta-nav-list li.ta-nav-cta.current-menu-item > a {
	background: var(--ta-ink);
	color: #fff;
	border-radius: 6px;
}

.ta-nav-list li.ta-nav-cta > a:hover,
.ta-nav-list li.ta-nav-cta.current-menu-item > a:hover {
	background: var(--ta-accent-dark);
	color: #fff;
}

/* ---- Media Queries: Navegación Responsive ---- */

/* Tablet y Pantallas Medianas (<= 861px) */
@media (max-width: 861px) {
	.ta-header-inner {
		padding-top: 16px;
		padding-bottom: 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.ta-logo-img {
		height: 60px; /* Reducción de escala del logo */
		width: auto;
	}

	.ta-nav {
		width: 100%;
	}

	.ta-nav-list {
		width: 100%;
		gap: 4px;
		justify-content: flex-start;
	}

	.ta-nav-list > li > a {
		padding: 8px 10px;
		font-size: 0.88rem;
	}

	/* Limita el submenú para que no se salga del margen de la pantalla */
	.ta-nav-dropdown {
		left: 0;
		right: auto;
		min-width: 200px;
		max-width: calc(100vw - 40px);
	}
}

/* Teléfonos Moviles (<= 480px) */
@media (max-width: 480px) {
	.ta-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.ta-nav-list > li {
		width: 100%;
	}

	.ta-nav-list > li > a {
		display: block;
		width: 100%;
		padding: 10px 12px;
	}

	.ta-nav-list .ta-nav-has-caret > a {
		padding-right: 44px; /* Otorga más espacio al botón caret en móviles */
	}

	/* Convierte el desplegable en un acordeón vertical dentro del menú */
	.ta-nav-dropdown {
		position: static;
		width: 100%;
		box-shadow: none;
		border: none;
		border-left: 2px solid var(--ta-accent);
		border-radius: 0;
		background: var(--ta-bg);
		margin: 4px 0 8px 12px;
		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	/* Muestra el desplegable en modo acordeón únicamente cuando está activo */
	.ta-nav-list li.is-open > .ta-nav-dropdown {
		display: block;
	}
}

/* ---- main ---- */

.ta-main {
	min-height: 60vh;
}

/* ---- hero (front page) ---- */
.ta-hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 60vh;
    background-size: cover;
    /* En pantallas grandes el sujeto de la foto queda a la derecha; en
       pantallas chicas se reencuadra en la media query de abajo para que
       no se recorte todo el motivo detrás del texto. */
    background-position: 100% center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 64px 24px;
}

.ta-hero-inner {
	width: 100%;
	/* Mismo ancho/centrado que el resto de las secciones (header, footer,
	   features…) para que el bloque de texto quede alineado con ellas en
	   cualquier resolución, en vez de un offset fijo en px. El padding
	   lateral de 24px iguala el que aporta .ta-container en .ta-features
	   (Categorías), para que el hero arranque a la misma x. */
	max-width: var(--ta-shell-width);
	margin: 0 auto;
	padding: 0 46.8px;
}

.ta-hero-inner > * {
	/* Ocupa todo el ancho disponible del contenedor hasta un tope de 760px
	   (para dejar la foto visible a la derecha en pantallas grandes). Sin
	   piso fijo: en anchos intermedios (p. ej. 665px) se achica junto con
	   el contenedor en vez de quedar forzado a un mínimo de 620px. */
	max-width: min(100%, 760px);
}

.ta-hero-eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

.ta-hero h1 {
    /* Tamaño de diseño: 80px. Con clamp() se mantiene ese tamaño en pantallas
       grandes y baja solo en las pequeñas, donde 80px fijos no caben en el ancho
       disponible y el título se salía de la tarjeta. */
    font-size: clamp(30px, 7.2vw, 80px);
    font-weight: 300; /* Hace la letra delgada y elegante como en la imagen */
    /* 100px de interlineado era el equivalente a 1.25 sobre la fuente de 80px.
       Como ratio, no como px: si no, al bajar la fuente en móvil quedaban
       renglones separados por 100px de aire. */
    line-height: 1.25;
    letter-spacing: -0.02em; /* Junta sutilmente las letras para mejorar el impacto visual */
    /* `nowrap` impedía partir el título en dos puntos, y a 80px la línea
       "Soluciones en acrílico," medía más que la columna: el texto se salía
       de la tarjeta. Ahora puede partir donde tenga que partir. `balance`
       reparte los renglones parejo en vez de dejar una línea de una palabra. */
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
    /* En pantallas grandes el título necesita algo más de ancho que el párrafo
       para caber en un solo renglón, como en el diseño. En móvil `min(100%,…)`
       lo limita al ancho de la tarjeta y por eso nunca desborda. */
    max-width: min(100%, 1000px);
    color: #1d1d1f; /* Un tono oscuro pero suave */
    margin-bottom: 34px;
}

.ta-hero-title-accent {
    display: block;
    color: var(--ta-accent); /* Tu variable para el verde */
    font-weight: 400; /* Le da un toque apenas más firme al verde si lo deseas, o déjalo en 300 para mantenerlo igual de delgado */
    margin-top: 4px; /* Separa milimétricamente la línea verde de la superior */
}

.ta-hero p {
    font-size: 18px; /* Tamaño fijo del párrafo del banner */
    font-weight: 400;         /* Peso regular */
    line-height: 1.5;         /* Altura de línea para que respire entre renglones */
    color: #4a5154;           /* Color gris oscuro suave, no negro puro */
    max-width: 100%;
    margin: 0 0 34px;         /* Margen inferior para separarlo limpiamente de los botones */
    letter-spacing: -0.01em;  /* Ajuste milimétrico opcional para mejorar la lectura */
}

.ta-hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ta-hero-image-hint {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 0.8rem;
	color: var(--ta-muted);
	border: 1px dashed var(--ta-border);
	border-radius: 8px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.6);
}

/* Tablet: el offset del texto se reduce gradualmente, el fondo se
   reencuadra un poco más hacia el centro para no perder el motivo. */
@media (max-width: 960px) {
	.ta-hero {
		background-position: 80% center;
	}
}

/* Mobile: layout de una sola columna a todo el ancho disponible, altura
   fluida (no fija en vh, para no dejar aire de más ni cortar el texto)
   y el recuadro de la foto centrado para que siga siendo reconocible
   detrás del degradado. */
@media (max-width: 640px) {
	.ta-hero {
		min-height: auto;
		padding: 48px 20px;
		background-position: 65% center;
	}

	.ta-hero-inner > * {
		max-width: 100%;
	}

	.ta-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ta-hero-actions .ta-button {
		justify-content: center;
	}
}

/* .ta-hero--has-image{
	height: 800px;
} */

.ta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 12px;
	font-weight: 800;
}

.ta-button--accent {
	background: var(--ta-accent);
	color: var(--ta-accent-ink);
}

.ta-button--accent:hover {
	background: var(--ta-accent-dark);
}

.ta-button--dark {
	background: var(--ta-ink);
	color: #fff;

}

.ta-button--dark:hover {
	background: var(--ta-accent-dark);
}

.ta-button--outline {
	background: transparent;
	border-color: var(--ta-ink);
	color: var(--ta-ink);
}

.ta-button--outline:hover {
	background: var(--ta-accent-dark);
	color: #fff;
}

.ta-button--text {
	padding: 0;
	background: transparent;
	color: var(--ta-ink);
}

.ta-button--text:hover {
	color: var(--ta-accent);
}

.ta-button-icon {
	font-size: 1rem;
}

/* ---- feature grid (categorías, o cualquier grupo ícono+texto+link) ---- */

.ta-features {
	padding: 64px 24px;
}

/* Variante blanca (como el nav): usada en page-cuidados-del-acrilico.php para
   la "Guía de mantenimiento" (ta_render_feature_grid, parámetro $class). */
.ta-features--white {
	background: var(--ta-surface);
}

.ta-features-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

/* En el catálogo el eyebrow "Nuestro Catálogo" va semibold (pedido del usuario). */
.ta-features--catalog .ta-features-eyebrow {
	font-weight: 600;
}

/* En el catálogo el título va 48px light (pedido del usuario). */
.ta-features--catalog .ta-features-title {
	font-size: 48px;
	font-weight: 300; /* light */
}

.ta-features-title {
	font-size: 32px;
	font-weight: 400;
	margin: 0 0 16px;
	max-width: 34ch;
}

/* En la página de Cuidados el título de la guía es más grande: 48px regular
   (pedido del usuario). Se activa con el modifier del <section>. */
.ta-features--hero-title .ta-features-title {
	font-size: 48px;
}

/* En Cuidados los textos bajo los títulos de las cards van a 16px regular
   (la home mantiene 15px de §4.69). */
.ta-features--hero-title .ta-feature-card p {
	font-size: 16px;
	font-weight: 400;
}

.ta-features-description {
	margin: 0 0 40px;
	max-width: 100%;
	color: var(--ta-muted);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
}

.ta-features-grid {
	display: grid;
	/* El min() es lo importante: sin él, minmax(220px, 1fr) obliga a la columna
     a medir 220px aunque el contenedor sea más angosto, y la tarjeta se sale.
     Con min(220px, 100%) la columna nunca puede ser más ancha que la caja. */
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 20px;
	margin-top: 40px;
}

.ta-feature-card {
	background: var(--ta-surface);
	border: 1px solid var(--ta-border);
	border-radius: 0px;
	padding: 28px 24px;
}

.ta-feature-icon {
	display: block;
	color: var(--ta-accent);
	margin-bottom: 20px;
}

.ta-feature-icon svg {
	width: 40px;
	height: 40px;
}

.ta-feature-card h3 {
	font-size: 24px;
	font-weight: 500; /* medium */
	margin: 0 0 10px;
}

.ta-feature-card p {
	margin: 0 0 18px;
	color: var(--ta-muted);
	font-size: 15px;
	line-height: 1.5;
    max-width: 28ch; /* Esto fuerza un ancho máximo de ~28 caracteres, haciendo que salte solo elegantemente */
}

/* ---- showcase grid (destacados, o cualquier grilla de fotos + texto) ---- */

.ta-showcase {
	padding: 64px 24px;
   background: var(--ta-surface); /* blanco, igual que el nav (.ta-header) */
}

.ta-showcase-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

/* "Ver todo el catálogo" (botón text) del encabezado de Destacados: 12px
   extrabold y en verde de marca, como pide el usuario. Selector compuesto
   para ganarle la especificidad a .ta-button--text (color ink). */
.ta-button--text.ta-showcase-cta {
	font-size: 12px;
	font-weight: 800;
	color: var(--ta-accent);
}

.ta-showcase-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

.ta-showcase-title {
	font-size: 32px;
	font-weight: 400;
	margin: 0;
}

.ta-showcase-cta {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ta-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ta-showcase-cta:hover {
	color: var(--ta-accent-dark);
}

.ta-showcase-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 28px;
}

.ta-showcase-figure {
	aspect-ratio: 4 / 3;
	border-radius: 0px;
	overflow: hidden;
	background: var(--ta-bg);
	margin-bottom: 18px;
}

.ta-showcase-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ta-showcase-figure-empty {
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(45deg, var(--ta-bg), var(--ta-bg) 10px, #e8ebea 10px, #e8ebea 20px);
}

.ta-showcase-card h3 {
	font-size: 20px;
	margin: 0 0 6px;
}

.ta-showcase-card p {
	margin: 0;
	color: var(--ta-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* ---- story section (nuestra historia, o cualquier bloque foto + texto + stats) ---- */

.ta-story {
	padding: 64px 24px;
	background: var(--ta-surface); /* Esto usa la variable blanca (#ffffff)*/
}


.ta-story-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.ta-story-inner--media-right .ta-story-media {
	order: 2;
}

.ta-story--panel {
	position: relative;
	padding: 64px 24px;
	background: var(--ta-surface); /* blanco: el gris es el bloque centrado de abajo */
}

/* Franja gris centrada con el MISMO ancho del contenido de .ta-container
   (la franja de las tarjetas de la guía): shell menos 48px por lado
   (24px de padding de sección + 24px de padding de .ta-container),
   calculado en % para que sea responsive en todos los anchos */
.ta-story--panel::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(calc(100% - 141.6px), calc(var(--ta-shell-width) - 93.6px));
	max-width: none;
	background: var(--ta-bg);
}

/* El contenido va directo sobre la franja gris (sin tarjeta): ancho cómodo,
   centrado dentro del bloque gris */
.ta-story--panel .ta-story-inner {
	position: relative;
	margin-inline: auto;
	max-width: 1100px;
}

.ta-story--panel .ta-story-inner {
	max-width: 1100px;
	background: #ececea;
	border-radius: 0px;
	padding: 48px;
	gap: 40px;
}

.ta-story--panel .ta-story-media {
	border-radius: 0px;
}

/* 1. Forzamos a que TODO el bloque de la historia permita elementos flotantes */
.ta-story-inner,
.ta-story-media {
    position: relative !important;
    overflow: visible !important; /* Rompe cualquier candado de desborde */
}

.ta-story-media {
	position: relative;
	width: 100%;
	max-width: 100%;
	/* La altura se deriva de aspect-ratio en vez de un valor fijo en px:
	   así la foto guarda la misma proporción (no un recorte distinto) en
	   cualquier ancho de pantalla, de PC a mobile. */
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ta-bg);
}

.ta-story-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0px; /* Mantiene la foto con los bordes redondeados */

}

.ta-story-media-empty {
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(45deg, var(--ta-bg), var(--ta-bg) 10px, #e8ebea 10px, #e8ebea 20px);
}

.ta-story-badge {
	position: absolute;
	right: -10px;
	bottom: -30px;
	width: 150px;
	height: 170px;
	padding: 10px;
	background: var(--ta-surface);
	border-radius: 0px;
	box-shadow: 0 8px 24px rgba(20, 22, 20, 0.18);
	z-index: 10;
color: var(--ta-muted); /*fondo del logo que esta a pie de la imagen*/
}
.ta-story-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;    /* El logo no necesita bordes redondeados internos */
	
}

.ta-story-content .ta-story-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

/* En el panel "Consejo final del experto" (Cuidados) el eyebrow va semibold:
   igual especificidad, definido después para ganarle a la regla de arriba. */
.ta-story--panel .ta-story-eyebrow {
	font-weight: 600;
	font-size: 12px;
}

.ta-story-title {
	font-size: 48px;
	line-height: 1.2;
	font-weight: 400;
	margin: 0 0 24px;
	max-width: 22ch;
}

.ta-story-content p {
	margin: 0 0 18px;
	color: var(--ta-muted);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	max-width: 56ch;
}

.ta-story-divider {
	margin: 28px 0 24px;
	border: none;
	border-top: 1px solid var(--ta-border);
}

.ta-story-stats {
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
}

.ta-story-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ta-story-stat-value {
	font-size: 24px;
	font-weight: 500;
	color: var(--ta-accent);
}

.ta-story-stat-label {
	font-size: 12px;
	color: var(--ta-accent);
	font-weight: 800;
}

@media (max-width: 860px) {
	.ta-story-inner {
		grid-template-columns: 1fr;
	}

	/* En desktop media_position:'right' pone la foto después del texto
	   (order:2) para que quede visualmente a la derecha. En mobile, con
	   una sola columna, eso dejaría el texto arriba y la foto abajo —
	   distinto de las demás secciones tipo "historia" del sitio, donde la
	   foto siempre va primero. Se resetea para que todas se apilen igual. */
	.ta-story-inner--media-right .ta-story-media {
		order: initial;
	}

	.ta-story-badge {
		right: 16px;
		bottom: -16px;
	}
}

/* Mobile: la insignia con el logo se achica para no tapar media foto de
   ancho angosto — en desktop mide 150x170 sobre una foto mucho más ancha,
   pero a 375-640px eso es casi la mitad del recuadro. */
@media (max-width: 640px) {
	.ta-story-badge {
		width: 96px;
		height: 108px;
		right: 12px;
		bottom: -12px;
		padding: 6px;
	}
}

.ta-story--panel .ta-story-inner {
    max-width: 1100px; /* ancho cómodo centrado; el ancho de la franja lo da el ::before */
    background: transparent !important; /* sin tarjeta: el contenido va directo sobre el gris (§4.67) */
    border-radius: 0 !important;
    padding: 64px 48px;
    gap: 40px;
}

/* La caja de la imagen usa aspect-ratio (no un height fijo) y un ancho
   fluido con tope: así se comporta igual que la sección "historia" del
   home en cualquier pantalla, en vez de desbordar cuando la columna es
   más angosta que los 500px fijos que tenía antes. */
.ta-story--panel .ta-story-media {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4 / 3;
    border-radius: 0 !important;    /* Quita los bordes redondeados de la caja contenedora */
}

/* 3. Aseguramos que la imagen interna se adapte perfectamente sin deformarse */
.ta-story--panel .ta-story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* Hace que la foto llene el espacio de forma limpia */
    border-radius: 0 !important;    /* Quita cualquier borde redondeado*/

}

/* ---- cta section (llamado a la acción de cierre) ---- */

.ta-cta {
	padding: 72px 24px;
	background: var(--ta-surface); /* blanco, igual que el nav (.ta-header) */
}

.ta-cta-inner {
    /* 640px no alcanzaba: el título a 48px mide 605px, y con el padding de
       .ta-container (24px por lado) la caja útil quedaban en 592px. Con
       `nowrap` eso no se veía como desbordamiento en escritorio, pero el
       título se salía 13px de la tarjeta. 700px deja el título en un
       renglón, como pide el diseño. */
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.ta-cta-title {
    /* Tamaño de diseño: 48px. Con clamp() se mantiene en pantallas grandes y baja
       solo en las pequeñas, donde 48px fijos no caben en el ancho disponible. */
    font-size: clamp(28px, 5.2vw, 48px);
    font-weight: 300; /* light */
    line-height: 1.2;
    margin: 0 0 16px;
    /* `nowrap` impedía partir el título y a 48px la frase medía más que el
       contenedor (.ta-cta-inner, 640px), así que "¿Tienes una idea en mente?"
       se salía de la tarjeta. Ahora puede partir donde tenga que partir, y
       `balance` reparte los renglones parejo. */
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.ta-cta-description {
    /* El contenedor se abrió a 700px para que el título quepa en un renglón, pero
       una línea de 700px a 18px es larga de leer. El párrafo se mantiene en una
       medida cómoda y centrado. */
    max-width: 620px;
    margin: 0 auto 32px;
    color: var(--ta-muted);
    font-size: 18px;
    line-height: 1.6;
}

.ta-section {
	padding: 56px 60px;
}

.ta-section h2 {
	font-size: 1.6rem;
	margin-bottom: 8px;
}

.ta-section-intro {
	color: var(--ta-muted);
	max-width: 60ch;
	margin: 0 0 32px;
}

/* ---- generic page content ---- */

.ta-page-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 60px;
}

.ta-page-content h1 {
	font-size: 2rem;
	margin-bottom: 24px;
}

.ta-page-content .entry-content > * + * {
	margin-top: 1em;
}

/* ---- contenido de páginas legales / textos largos (page.php) ---- */

.ta-page-content .entry-content h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 28px 0 8px;
	color: var(--ta-ink);
}

.ta-page-content .entry-content h2:first-child {
	margin-top: 0;
}

.ta-page-content .entry-content p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ta-muted);
	margin: 0;
}

.ta-page-content .entry-content strong {
	color: var(--ta-ink);
	font-weight: 700;
}

.ta-page-content .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 0.875rem;
	
}

.ta-page-content .entry-content th {
	text-align: left;
	font-weight: 700;
	color: var(--ta-ink);
	background: var(--ta-bg);
	padding: 10px 12px;
	border: 1px solid var(--ta-border);
}

.ta-page-content .entry-content td {
	padding: 10px 12px;
	border: 1px solid var(--ta-border);
	color: var(--ta-muted);
}

.ta-page-content .entry-content ul {
	margin: 8px 0 0;
	padding-left: 24px;
	color: var(--ta-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.ta-page-content .entry-content li + li {
	margin-top: 6px;
}

/* ---- contacto: info + formulario ---- */

.ta-contact {
	padding: 64px 24px;
}

.ta-contact-inner {
	max-width: var(--ta-shell-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.ta-contact-eyebrow {
	margin: 0 0 8px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

.ta-contact-title {
	position: relative;
	font-size: clamp(2rem, 3.6vw, 2.6rem);
	margin: 0 0 18px;
}

/* Línea subrayada debajo de "Cuéntanos": una barra gruesa que llega hasta las
   letras "Cu". Usa `ch` relativo al tamaño del propio título (hereda su font),
   así el ancho escala con el clamp() en vez de quedar fijo. El `bottom`
   (~16px) deja un salto de línea: la barra queda despegada del texto (~8px
   debajo del descensor de la "u"), no pegada a las letras. */
.ta-contact-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -16px;
	width: 2.2ch;
	height: 4px;
	background: var(--ta-ink);
}

.ta-contact-divider {
	display: block;
	width: 40px;
	height: 2px;
	background: transparent;
	margin: 0 0 24px;
}

.ta-contact-description {
	margin: 0 0 36px;
	max-width: 42ch;
	color: var(--ta-muted);
	font-size: 0.98rem;
	line-height: 1.6;
}

.ta-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ta-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.ta-contact-icon {
	display: inline-flex;
	flex: none;
	margin-top: 2px;
	color: var(--ta-accent);
}

.ta-contact-label {
	margin: 0 0 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ta-muted);
}

.ta-contact-value {
	margin: 0;
	font-weight: 600;
	color: var(--ta-ink);
}

.ta-contact-value-sub {
	margin: 2px 0 0;
	color: var(--ta-muted);
	font-size: 0.92rem;
}

.ta-contact-form-card {
	background: var(--ta-surface);
	border: 1px solid var(--ta-border);
	border-radius: 0px;
	padding: 32px;
	max-width: 680px;
	/* Baja la tarjeta para que el formulario empiece a la misma altura que la
	   descripción de la columna izquierda ("Escríbenos con la mayor cantidad
	   de detalles…"): eyebrow + título + divisora de la columna izquierda. */
	margin-top: 137px;
}

.ta-contact-quote {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px 40px 14px 16px;
	margin-bottom: 20px;
	background: var(--ta-bg);
	border: 1px solid var(--ta-border);
}

.ta-contact-quote-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--ta-muted);
	font-size: 1.25rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.ta-contact-quote-remove:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--ta-ink);
}

.ta-contact-quote-thumb {
	flex-shrink: 0;
	width: 72px;
	height: 54px;
	overflow: hidden;
	background: #eee;
	border: 1px solid var(--ta-border);
}

.ta-contact-quote-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ta-contact-quote-text {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ta-muted);
}

.ta-contact-quote-text strong {
	display: block;
	margin-bottom: 2px;
	color: var(--ta-ink);
}

.ta-contact-quote-text span {
	display: block;
}

.ta-contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ta-contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ta-contact-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ta-ink);
	/* Sin esto, el label (item del grid de 2 columnas) no se achica más
	   allá del ancho mínimo intrínseco del <input> (~190px por defecto) y
	   el campo se desborda de la tarjeta en anchos intermedios en vez de
	   encogerse junto con la columna. */
	min-width: 0;
}

.ta-contact-form input[type="text"],
.ta-contact-form input[type="email"],
.ta-contact-form input[type="tel"],
.ta-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-weight: 400;
	padding: 10px 12px;
	border: 1px solid var(--ta-border);
	border-radius: 6px;
	color: var(--ta-ink);
	background: var(--ta-surface);
}

.ta-contact-form input[type="text"]:focus,
.ta-contact-form input[type="email"]:focus,
.ta-contact-form input[type="tel"]:focus,
.ta-contact-form textarea:focus {
	outline: 2px solid var(--ta-accent);
	outline-offset: 1px;
}

.ta-contact-form textarea {
	resize: vertical;
}

.ta-contact-char-limit {
	align-self: flex-end;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--ta-muted);
}

.ta-contact-files-note {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--ta-muted);
	line-height: 1.4;
}

.ta-contact-tel-wrap {
	display: flex;
	gap: 8px;
}

.ta-contact-tel-wrap input[type="tel"] {
	flex: 1;
	min-width: 0;
}

.ta-contact-tel-prefix {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 10px 12px;
	border: 1px solid var(--ta-border);
	border-radius: 6px;
	background: var(--ta-surface);
	color: var(--ta-ink);
	font-weight: 400;
	font-size: 0.85rem;
}

.ta-contact-flag {
	font-size: 1.1rem;
	line-height: 1;
}

.ta-contact-files input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ta-contact-file-upload {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1px dashed var(--ta-border);
	border-radius: 6px;
	background: var(--ta-bg);
	color: var(--ta-muted);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ta-contact-file-upload:hover {
	border-color: var(--ta-accent);
	color: var(--ta-ink);
	background: var(--ta-surface);
}

.ta-contact-file-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding: 8px 12px;
	border: 1px solid var(--ta-border);
	border-radius: 6px;
	background: var(--ta-bg);
	color: var(--ta-ink);
	font-size: 0.85rem;
}

.ta-contact-file-status[hidden] {
	display: none;
}

.ta-contact-file-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ta-contact-file-add {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: none;
	border-radius: 6px;
	background: var(--ta-ink);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.ta-contact-file-add:hover {
	background: var(--ta-accent-dark);
	color: #fff;
}

.ta-contact-file-add:disabled {
	background: var(--ta-muted);
	color: #fff;
	cursor: not-allowed;
	opacity: 0.8;
}

.ta-contact-file-remove {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: none;
	border-radius: 6px;
	background: #c0392b;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.ta-contact-file-remove:hover {
	background: #922b21;
	color: #fff;
}

.ta-contact-form .ta-contact-optin {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	cursor: pointer;
}

.ta-contact-optin input[type="checkbox"] {
	width: auto;
	margin-top: 2px;
	accent-color: var(--ta-accent);
}

.ta-contact-optin span {
	line-height: 1.4;
}

.ta-contact-optin a {
	color: var(--ta-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ta-contact-optin a:hover {
	color: var(--ta-accent-dark);
}

.ta-contact-form .ta-contact-accept {
	font-weight: 600;
}

.ta-contact-submit {
	justify-content: center;
	width: 100%;
}

.ta-contact-form-note {
	margin: 0;
	text-align: center;
	color: var(--ta-muted);
	font-size: 0.85rem;
}

.ta-contact-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ta-contact-alert {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
}

.ta-contact-alert--success {
	background: #e6f4ea;
	color: #1e7a34;
}

.ta-contact-alert--error {
	background: #fdecea;
	color: #b3261e;
}

.ta-contact-alert--info {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #f0f6f3;
	border: 1px solid #d6e6dc;
	color: var(--ta-ink);
	font-weight: 400;
}

.ta-contact-alert--info .ta-alert-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 2px;
	color: var(--ta-accent);
}

.ta-contact-alert--info .ta-alert-text {
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 860px) {
	.ta-contact-inner {
		grid-template-columns: 1fr;
	}
	.ta-contact-form-card {
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.ta-contact-form-row {
		grid-template-columns: 1fr;
	}
}

/* ---- nuestras soluciones: categorías + imágenes ---- */

.ta-solutions-group {
	margin-bottom: 48px;
}

.ta-solutions-group h2 {
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ta-accent);
	border-bottom: 1px solid var(--ta-border);
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.ta-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
	border-bottom: 1px solid var(--ta-border);
	padding-bottom: 16px;
}

.ta-filter-tabs__tab {
	padding: 9px 14px;
	border: 1px solid var(--ta-border);
	border-radius: 999px;
	color: var(--ta-ink);
	font-size: 12px;
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ta-filter-tabs__tab:hover,
.ta-filter-tabs__tab:focus-visible {
	border-color: var(--ta-accent);
	color: var(--ta-accent);
}

.ta-filter-tabs__tab.is-active {
	/* Mismo negro que el botón Cotizar (.ta-button--dark). */
	background: var(--ta-ink);
	border-color: var(--ta-ink);
	color: #fff;
}

.ta-solutions-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 960px) {
	.ta-solutions-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	}
}

/* El CSS y la jerarquía .jg-pagination se cargan directamente desde el plugin.
   Solo definimos aquí sus tokens para no incluir el layout .jg-gallery completo. */
.ta-catalog-pagination {
	--jg-border: #dcdcd6;
	--jg-ink: #1a1c1c;
	--jg-muted: #6b6b64;
	--jg-accent: #03854a;
	--jg-surface-2: #f1f1ee;
}

.ta-catalog-pagination .jg-pagination-nav {
	margin-left: auto;
}

/* Estado activo explícito para que la página actual conserve el verde del panel. */
.ta-catalog-pagination .jg-pagination-page.is-active,
.ta-catalog-pagination .jg-pagination-page.is-active:hover,
.ta-catalog-pagination .jg-pagination-page.is-active:focus-visible {
	background: var(--jg-accent);
	color: #fff;
}

/* Tarjetas del catálogo: misma línea visual que las "Piezas más solicitadas"
   del inicio (.ta-showcase-card): sin borde ni fondo, imagen flotante sobre
   fondo claro con 18px bajo la figura (pedido del usuario, §4.97). */
.ta-solution-card {
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ta-solution-figure {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ta-bg);
	overflow: hidden;
	margin-bottom: 18px;
}

.ta-solution-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ta-solution-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	background: var(--ta-bg);
	color: var(--ta-ink);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	z-index: 1;
}

/* ---- mini-carrusel: publicaciones con más de una foto ---- */

.ta-carousel-slide[hidden] {
	display: none !important;
}

.ta-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(20, 22, 20, 0.55);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.ta-solution-figure:hover .ta-carousel-nav,
.ta-solution-figure:focus-within .ta-carousel-nav {
	opacity: 1;
}

.ta-carousel-nav:hover {
	background: rgba(20, 22, 20, 0.8);
}

.ta-carousel-nav--prev {
	left: 6px;
}

.ta-carousel-nav--next {
	right: 6px;
}

.ta-carousel-counter {
	position: absolute;
	bottom: 8px;
	right: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(20, 22, 20, 0.72);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ta-solution-body {
	padding: 0;
	background: transparent;
	flex-grow: 1;
}

.ta-solution-body h3 {
	font-size: 24px; /* igual que .ta-feature-card h3 ("Cuatro maneras de trabajar") */
	font-weight: 500;
	margin: 0 0 10px;
}

.ta-solution-body p {
	margin: 0;
	font-size: 0.9375rem; /* 15px, igual que .ta-feature-card p */
	line-height: 1.5;
	color: var(--ta-muted);
}

.ta-solution-body .ta-solution-measurements {
	margin-top: 8px;
	color: var(--ta-ink);
}

.ta-solution-quote {
	margin-top: 14px;
	justify-content: center;
	width: 100%;
	padding: 10px 16px;
	font-size: 0.85rem;
	border: 1px solid var(--ta-muted);
	border-radius: 0;
	background: var(--ta-bg);
	color: var(--ta-ink);
}

.ta-solution-quote:hover {
	background: var(--ta-accent);
	color: #fff;
	border-color: var(--ta-accent-dark);
}

.ta-solution-quote:hover .ta-solution-quote-icon {
	background: var(--ta-accent);
	color: #fff;
}

.ta-solution-quote-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	color: var(--ta-ink);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

.ta-empty-state {
	color: var(--ta-muted);
	background: var(--ta-surface);
	border: 1px dashed var(--ta-border);
	border-radius: 10px;
	padding: 32px;
	text-align: center;
}

/* ---- footer ---- */

.ta-footer {
	background: var(--ta-bg);
	color: var(--ta-ink);
	border-top: 1px solid var(--ta-border);
}

.ta-footer-top {
	max-width: var(--ta-shell-width);
	margin: 0 auto;
	padding: 56px 46.8px 40px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.ta-footer-logo {
	height: 90px;
	width: auto;
	display: block;
	margin-bottom: 16px;
}

.ta-footer-brand p {
	margin: 0;
	max-width: 32ch;
	color: var(--ta-muted);
	font-size: 15px;
	line-height: 1.6;
}

.ta-footer-heading {
	margin: 0 0 20px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ta-footer-links,
.ta-footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ta-footer-links a {
	color: var(--ta-muted);
	text-decoration: none;
	font-size: 15px;
}

.ta-footer-links a:hover {
	color: var(--ta-ink);
}

.ta-footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ta-muted);
	font-size: 15px;
}

.ta-footer-contact-list a {
	color: var(--ta-muted);
	text-decoration: none;
}

.ta-footer-contact-list a:hover {
	color: var(--ta-ink);
}

.ta-footer-icon {
	display: inline-flex;
	flex: none;
	color: var(--ta-accent);
}

.ta-footer-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ta-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ta-border);
	border-radius: 8px;
	color: var(--ta-muted);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ta-footer-social a:hover {
	color: var(--ta-accent);
	border-color: var(--ta-accent);
	background: rgba(3, 133, 74, 0.06);
}

.ta-footer-social .ta-footer-icon {
	color: inherit;
}

.ta-footer-bottom {
	max-width: var(--ta-shell-width);
	margin: 0 auto;
	padding: 24px 46.8px 32px;
	border-top: 1px solid var(--ta-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.ta-footer-copy {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8rem;
	color: var(--ta-muted);
}

.ta-footer-legal {
	display: flex;
	align-items: center;
	gap: 24px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8rem;
	color: var(--ta-muted);
}

.ta-footer-legal a {
	color: var(--ta-muted);
	text-decoration: none;
}

.ta-footer-legal a:hover {
	color: var(--ta-ink);
}

@media (max-width: 861px) {
	.ta-footer-top {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	/* .ta-header-inner ya se resuelve arriba (bloque "Media Queries:
	   Navegación Responsive", @media max-width:860px) — se saca de acá
	   para no repetir el mismo selector en dos breakpoints distintos. */
	.ta-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Desktop: +30% en el padding lateral de todos los componentes (24px → 31.2px).
   Solo aplica desde 861px (móvil/tablet conservan su padding). No toca el
   padding vertical: cada componente mantiene su alto. */
@media (min-width: 861px) {
	.ta-container,
	.ta-header-inner,
	.ta-hero,
	.ta-hero-inner,
	.ta-features,
	.ta-feature-card,
	.ta-showcase,
	.ta-story,
	.ta-story--panel,
	.ta-cta,
	.ta-section,
	.ta-page-content,
	.ta-contact,
	.ta-header-inner,
	.ta-footer-top,
	.ta-footer-bottom {
		padding-left: 60px;
		padding-right: 60px;
	}

	/* La franja gris de .ta-story--panel debe seguir el ancho del contenido
	   de la Guía: al 100% se le descuentan los 62.4px por lado (31.2 de la
	   sección + 31.2 de .ta-container); el tope (max-width) solo descuenta
	   el padding del contenedor, porque el shell no se estrecha. */
	.ta-story--panel::before {
	width: min(calc(100% - 240px), calc(var(--ta-shell-width) - 120px));
	max-width: none;
	}
}




/* Nav y footer: misma caja de contenido que las secciones del body
   (padding de sección + padding de .ta-container), para que el logo y el
   botón Cotizar queden alineados con el borde de las cards en cualquier
   ancho. Antes el body sumaba 24+46.8px (o 60+60px en desktop) y el nav
   solo uno, por eso el nav se veía más ancho al achicar la pantalla. */
.ta-header-inner,
.ta-footer-top,
.ta-footer-bottom {
	max-width: var(--ta-shell-width) !important;
	padding-left: 70.8px !important;
	padding-right: 70.8px !important;
}

@media (min-width: 861px) {
	.ta-header-inner,
	.ta-footer-top,
	.ta-footer-bottom {
		padding-left: 120px !important;
		padding-right: 120px !important;
	}
}