/* ============================================================
   Guerrero — Capa de pulido (polish.css) · 2026-09
   ------------------------------------------------------------
   Capa visual común que se carga DESPUÉS de shell/pages/blog y
   ANTES de motion.css. Unifica botones, tarjetas, header, footer,
   formularios y blog sin tocar el HTML de las plantillas.

   Por qué una capa aparte en vez de reescribir cada fichero:
   esto es producción sin staging. Desencolar este fichero en
   functions.php devuelve la web al diseño anterior en un paso.

   Muchas plantillas llevan <style> inline, que se imprime DESPUÉS
   de los CSS del <head>. Donde hay que ganar a ese CSS inline se
   sube la especificidad con `body` delante, no con !important.

   Los estilos de la tienda viven al final de shop.css (§35),
   porque shop.css tiene su propio cache-busting (ver
   rendimiento-cache en el vault).
   ============================================================ */

/* ---------- 0. Base ---------------------------------------- */
html { scroll-padding-top: calc(var(--header-h, 80px) + 16px); }
body {
	font-family: var(--font-sans);
	font-optical-sizing: auto;
	-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--cg-navy-900); color: #fff; }

/* Titulares: Fraunces con eje óptico automático y un pelín menos de tracking */
.h-display, .h-1, .h-2,
.hero-v1__title, .post-hero__title, .gt-cat-hero__title, .gt-shop-hero__title {
	font-family: var(--font-serif);
	font-optical-sizing: auto;
	font-variation-settings: normal;
}
.h-display { letter-spacing: -0.025em; }
.h-1 { letter-spacing: -0.02em; }
.h-display em, .h-1 em, .h-2 em { font-weight: 400; }

/* Eyebrows con línea de acento (no en el kicker del hero, que va dentro del H1) */
.eyebrow:not(.hero-v1__kicker):not(.gt-shop-hero__eyebrow) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.eyebrow:not(.hero-v1__kicker):not(.gt-shop-hero__eyebrow)::before {
	content: "";
	width: 22px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	opacity: .55;
	flex-shrink: 0;
}

/* ---------- 1. Header -------------------------------------- */
.cg-header {
	border-bottom-color: var(--hairline);
	view-transition-name: cg-header;
}
.cg-nav__link { letter-spacing: -0.005em; }
.cg-nav__link:hover { background: color-mix(in srgb, var(--cg-navy-50) 80%, transparent); }

/* Dropdown: panel flotante con cierre retardado (no parpadea al cruzar el hueco) */
body .cg-nav__item .cg-dropdown {
	top: calc(100% + 6px);
	min-width: 240px;
	padding: 8px;
	border: 1px solid var(--hairline);
	border-radius: var(--r-lg);
	background: color-mix(in srgb, #fff 94%, transparent);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	backdrop-filter: saturate(160%) blur(16px);
	box-shadow: var(--shadow-float);
	transform: translateY(6px) scale(.98);
	transform-origin: top left;
	transition:
		opacity 180ms var(--ease-out-expo),
		transform 260ms var(--ease-out-expo),
		visibility 0s linear 220ms;
	transition-delay: 120ms;
}
body .cg-nav__item.has-dropdown:hover > .cg-dropdown,
body .cg-nav__item.has-dropdown:focus-within > .cg-dropdown {
	transform: none;
	transition:
		opacity 200ms var(--ease-out-expo),
		transform 320ms var(--ease-out-expo),
		visibility 0s;
	transition-delay: 0s;
}
body .cg-nav__item.has-dropdown::after { height: 12px; }
.cg-dropdown__link {
	position: relative;
	padding: 11px 14px;
	color: var(--fg);
	transition: background var(--dur) var(--ease), padding var(--dur) var(--ease-out-expo), color var(--dur) var(--ease);
}
.cg-dropdown__link::before {
	content: "";
	position: absolute;
	left: 6px; top: 50%;
	width: 3px; height: 0;
	border-radius: 3px;
	background: var(--cg-navy-500);
	transform: translateY(-50%);
	transition: height var(--dur) var(--ease-out-expo);
}
.cg-dropdown__link:hover { background: var(--cg-navy-50); padding-left: 20px; color: var(--cg-navy-900); }
.cg-dropdown__link:hover::before { height: 16px; }
.cg-nav__item.has-dropdown .cg-nav__link svg { transition: transform var(--dur) var(--ease-out-expo); }
.cg-nav__item.has-dropdown:hover .cg-nav__link svg,
.cg-nav__item.has-dropdown:focus-within .cg-nav__link svg { transform: rotate(180deg); }

/* ---------- 2. Menú móvil ---------------------------------- */
.cg-mobilemenu {
	background:
		radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--cg-sky-100) 70%, transparent) 0%, transparent 60%),
		var(--bg);
}
.cg-mobilemenu__link {
	font-weight: 400;
	border-bottom-color: var(--hairline);
}
.cg-mobilemenu__link svg { transition: transform var(--dur) var(--ease-out-expo), color var(--dur) var(--ease); }
.cg-mobilemenu__link:hover svg,
.cg-mobilemenu__link:focus-visible svg { transform: translateX(4px); color: var(--cg-navy-700); }

/* ---------- 3. Botones: un solo sistema -------------------- */
/* Tres definiciones competían (tokens, guerrero-layout.css y motion.css).
   Ésta es la que manda: misma altura, radio y estados en toda la web. */
.btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	gap: 10px;
	min-height: 46px;
	padding: 13px 24px;
	border-radius: var(--r-pill);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.2;
	text-decoration: none;
}
.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 15px 30px; font-size: 16px; }

.btn-primary {
	background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff) 0%, var(--primary) 55%);
	color: #fff;
	border-color: color-mix(in srgb, var(--primary) 80%, #000);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-soft);
}
.btn-primary:hover {
	background: linear-gradient(180deg, color-mix(in srgb, var(--primary-hover) 88%, #fff) 0%, var(--primary-hover) 55%);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-lift);
}
.btn-ghost {
	background: color-mix(in srgb, #fff 70%, transparent);
	color: var(--fg);
	border-color: var(--hairline-strong);
}
.btn-ghost:hover {
	background: #fff;
	color: var(--cg-navy-900);
	border-color: color-mix(in srgb, var(--cg-navy-700) 45%, transparent);
	box-shadow: var(--shadow-soft);
}
.btn-light { background: #fff; color: var(--cg-navy-900); border-color: transparent; }
.btn-light:hover { background: #fff; color: var(--cg-navy-950); box-shadow: 0 12px 28px -12px rgba(0,0,0,.45); }
.btn-outline-light {
	background: rgba(255,255,255,.04);
	color: #fff;
	border-color: rgba(255,255,255,.38);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff; }

/* Brillo que cruza el botón al pasar el ratón (sólo primario y claro) */
.btn-primary::after,
.btn-light::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--grad-sheen);
	transform: translateX(-120%);
	transition: transform 700ms var(--ease-out-expo);
	pointer-events: none;
}
.btn-light::after { background: linear-gradient(120deg, transparent 30%, rgba(85,164,210,.18) 50%, transparent 70%); }
.btn-primary:hover::after,
.btn-light:hover::after { transform: translateX(120%); }
.btn svg { transition: transform var(--dur) var(--ease-out-expo); }
.btn:hover svg:last-child { transform: translateX(3px); }

/* ---------- 4. Tarjetas: mismo lenguaje en toda la web ----- */
body :is(.catgrid__item, .post-card, .porque-band__item, .rel-card, .canal, .catcard, .tienda-card, .mv-card, .numero-card, .value, .visita-card, .gadira-compare__card, .gadira-rent__card, .guerrero-producto-card, .guerrero-catalogo-card) {
	border-color: var(--hairline);
	box-shadow: var(--shadow-soft);
	transition:
		transform 420ms var(--ease-out-expo),
		box-shadow 420ms var(--ease-out-expo),
		border-color 260ms var(--ease),
		background-color 260ms var(--ease);
}
@media (hover: hover) {
	body :is(.catgrid__item, .post-card, .porque-band__item, .rel-card, .canal, .catcard, .tienda-card, .visita-card, .guerrero-producto-card, .guerrero-catalogo-card):hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-lift);
		border-color: color-mix(in srgb, var(--cg-navy-500) 45%, transparent);
	}
}
/* Zoom suave de la imagen dentro de la tarjeta */
.post-card__img,
.rel-card__img {
	transition: transform 900ms var(--ease-out-expo);
}
.rel-card { overflow: hidden; }
@media (hover: hover) {
	.post-card:hover .post-card__img,
	.rel-card:hover .rel-card__img { transform: scale(1.045); }
}

/* Categorías de la home */
.catgrid__icon {
	transition: transform 500ms var(--ease-spring), background-color 260ms var(--ease), color 260ms var(--ease);
}
.catgrid__item:hover .catgrid__icon { transform: scale(1.08) rotate(-4deg); background: var(--cg-navy-900); color: #fff; }
.catgrid__item--featured:hover .catgrid__icon { background: rgba(255,255,255,.2); color: #fff; }
.catgrid__item--featured {
	background: var(--grad-sea);
	border-color: transparent;
}
.catgrid__link { transition: gap var(--dur) var(--ease-out-expo); }
.catgrid__item:hover .catgrid__link { gap: 10px; }

/* ---------- 5. Imágenes de feature-row --------------------- */
.feature-row__image {
	box-shadow: var(--shadow-lift);
	outline: 1px solid var(--hairline);
	outline-offset: -1px;
}
.feature-row__caption {
	background: color-mix(in srgb, var(--cg-navy-950) 72%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.12);
}

/* ---------- 6. Hero de la home ----------------------------- */
body .hero-v1::before {
	background-image: var(--grad-deep) !important; /* pisa el !important de guerrero_child_hero_overrides() */
}
.hero-v1__title { letter-spacing: -0.03em; }
.hero-v1__title em { font-weight: 400; }
.hero-v1__ticker {
	border-top: 1px solid rgba(255,255,255,.12);
}
body .hero-v1__ticker { background: color-mix(in srgb, var(--cg-navy-950) 78%, transparent); }
.hero-v1__ticker-item span { font-variant-numeric: tabular-nums; }

/* ---------- 7. Bandas oscuras (Gadira, CTA final) ---------- */
.gadira-promo,
.bottom-cta,
.horeca-band {
	background:
		radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--cg-navy-600) 35%, transparent) 0%, transparent 55%),
		radial-gradient(60% 90% at 0% 100%, color-mix(in srgb, var(--cg-navy-800) 40%, transparent) 0%, transparent 60%),
		var(--grad-sea);
	box-shadow: var(--shadow-float);
	isolation: isolate;
}
.bottom-cta__form input,
.bottom-cta__form textarea { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.bottom-cta__form input:focus,
.bottom-cta__form textarea:focus { background: rgba(255,255,255,.12); }

/* ---------- 8. Chips ----------------------------------------- */
.chip { border-color: var(--hairline); }
.chip--accent { background: var(--cg-navy-50); color: var(--cg-navy-800); border-color: color-mix(in srgb, var(--cg-navy-500) 22%, transparent); }

/* ---------- 9. Formularios ----------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	border-radius: var(--r-md);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wpcf7 input[type="submit"] { cursor: pointer; }

/* ---------- 10. Footer --------------------------------------- */
.cg-footer {
	background:
		radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--cg-navy-800) 45%, transparent) 0%, transparent 60%),
		var(--cg-navy-950);
	view-transition-name: cg-footer;
}
.cg-footer::after {
	/* Línea de marca en el borde superior */
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cg-navy-900), var(--cg-navy-500) 45%, var(--cg-sky-500) 70%, var(--cg-navy-900));
	opacity: .9;
}
.cg-footer ul li a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 1px;
	transition: color var(--dur) var(--ease), background-size 380ms var(--ease-out-expo);
}
.cg-footer ul li a:hover { background-size: 100% 1px; }
.cg-footer__logo img { filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }

/* ---------- 11. Blog: listado ------------------------------ */
.blog-hero {
	padding: clamp(40px, 6vw, 72px) 0 8px;
	position: relative;
}
.blog-hero::before {
	content: "";
	position: absolute;
	inset: -80px 0 auto 0;
	height: 360px;
	background: radial-gradient(60% 100% at 85% 0%, color-mix(in srgb, var(--cg-sky-100) 90%, transparent) 0%, transparent 70%);
	z-index: -1;
	pointer-events: none;
}
.blog-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.blog-cats__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--r-pill);
	border: 1px solid var(--hairline-strong);
	background: #fff;
	color: var(--fg-muted);
	font-size: 14px;
	font-weight: 500;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out-expo);
}
.blog-cats__chip:hover { color: var(--cg-navy-900); border-color: var(--cg-navy-500); transform: translateY(-1px); }
.blog-cats__chip.is-active { background: var(--cg-navy-900); border-color: var(--cg-navy-900); color: #fff; }

.blog-search { margin-bottom: 40px; }
.blog-search__field { position: relative; max-width: 520px; }
.blog-search input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	padding: 15px 56px 15px 20px;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--r-pill);
	font: inherit;
	font-size: 15px;
	background: #fff;
	box-shadow: var(--shadow-soft);
	outline: none;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.blog-search input[type="search"]:focus { border-color: var(--cg-navy-700); box-shadow: var(--ring), var(--shadow-soft); }
.blog-search button {
	position: absolute;
	right: 6px; top: 50%;
	transform: translateY(-50%);
	width: 42px; height: 42px;
	border: 0;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--cg-navy-900);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out-expo);
}
.blog-search button:hover { background: var(--cg-navy-800); transform: translateY(-50%) scale(1.06); }

/* Rejilla con el primer post destacado a doble ancho (sólo página 1, desktop) */
.posts-grid--blog { gap: 24px; }
.post-card__title { font-size: clamp(19px, 1.2rem + .25vw, 22px); }
@media (min-width: 901px) {
	/* Primer post a todo el ancho, en horizontal: imagen 60% / texto 40% */
	.posts-grid--blog.has-featured > .post-card:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1.45fr 1fr;
	}
	.posts-grid--blog.has-featured > .post-card:first-child .post-card__img { aspect-ratio: auto; min-height: 380px; height: 100%; }
	.posts-grid--blog.has-featured > .post-card:first-child .post-card__body { padding: clamp(28px, 3vw, 44px); justify-content: center; }
	.posts-grid--blog.has-featured > .post-card:first-child .post-card__title { font-size: clamp(28px, 1.2rem + 1.2vw, 38px); line-height: 1.1; margin-bottom: 16px; }
	.posts-grid--blog.has-featured > .post-card:first-child .post-card__excerpt { font-size: 16px; flex: 0 0 auto; margin-bottom: 24px; }
}
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px;
	border-radius: var(--r-pill);
	border: 1px solid var(--hairline-strong);
	background: #fff;
	font-weight: 500;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--cg-navy-700); color: var(--cg-navy-900); }
.pagination .page-numbers.current { background: var(--cg-navy-900); color: #fff; border-color: var(--cg-navy-900); }

/* ---------- 12. Blog: artículo ------------------------------ */
.post-hero__title { letter-spacing: -0.025em; }
.post-featured-img img {
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lift);
}
.post-content .cg-page__content { font-size: 17px; }
.post-content .cg-page__content p { line-height: 1.75; }
.sidebar-card { border-color: var(--hairline); box-shadow: var(--shadow-soft); }
#cg-progress-bar { height: 3px; background: linear-gradient(90deg, var(--cg-navy-900), var(--cg-navy-500) 60%, var(--cg-sky-500)); }

/* ---------- 13. Accesibilidad y detalles ------------------- */
:focus-visible { outline-color: var(--cg-navy-600); }
img { image-rendering: auto; }
@media (max-width: 640px) {
	.btn { min-height: 48px; } /* objetivo táctil cómodo */
}

/* ---------- 14. Newsletter del footer + Turnstile ----------- */
/* CF7 genera <p><span email/><br/><div turnstile/>…<input submit/></p>. Un <div>
   dentro de <p> es HTML inválido: el navegador cierra el <p> antes del <div>, así
   que turnstile y botón acaban como hermanos del <p>, no dentro. La rejilla va
   en el contenedor: email + botón arriba (la cápsula), Turnstile debajo. */
body .cg-footer__newsletter > div,
body .cg-footer__newsletter form > div:not(.cg-footer__newsletter-inline),
body .cg-footer__newsletter .wpcf7-form > div:first-child:not(.cg-footer__newsletter-inline) {
	display: block;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
body .cg-footer__newsletter .cg-footer__newsletter-inline {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
body .cg-footer__newsletter .cg-footer__newsletter-inline > p { margin: 0; grid-column: 1; grid-row: 1; }
body .cg-footer__newsletter .cg-footer__newsletter-inline > p:empty,
body .cg-footer__newsletter .cg-footer__newsletter-inline br { display: none; }
body .cg-footer__newsletter .cg-footer__newsletter-inline .wpcf7-form-control-wrap { display: block; }
body .cg-footer__newsletter .cg-footer__newsletter-inline input[type="email"] {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	border-right: 0;
	border-radius: var(--r-pill) 0 0 var(--r-pill);
	padding: 0 18px;
	color: #fff;
}
body .cg-footer__newsletter .cg-footer__newsletter-inline input[type="email"]:focus { background: rgba(255,255,255,.12); box-shadow: none; }
body .cg-footer__newsletter .cg-footer__newsletter-inline input[type="submit"],
body .cg-footer__newsletter .cg-footer__newsletter-inline input[type="submit"]:focus {
	grid-column: 2;
	grid-row: 1;
	height: 48px;
	min-height: 48px;
	border: 0;
	border-radius: 0 var(--r-pill) var(--r-pill) 0;
	padding: 0 24px;
	background: var(--cg-navy-600);
	color: #fff;
	font-size: 18px;
}
body .cg-footer__newsletter .cg-footer__newsletter-inline input[type="submit"]:hover { background: var(--cg-navy-500); }
body .cg-footer__newsletter .cf7-cf-turnstile {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 12px 0 0 !important; /* el plugin lo trae inline con margin-bottom negativo */
}
body .cg-footer__newsletter .wpcf7-spinner { grid-column: 1 / -1; grid-row: 3; }
/* ---------- 15. Hello Elementor: botones rosas al hacer foco --- */
/* El reset del tema padre pinta de #c36 (rosa) cualquier button:focus. En los
   botones propios que no definían :focus, se veía rosa justo después de
   pulsarlos. Se fija su estado de foco a su estado normal/hover. */
.cg-icon-btn:focus { background: transparent; color: inherit; border-color: var(--border); }
.cg-hamburger:focus { background: var(--bg-card); color: inherit; border-color: var(--border-strong); }
.cg-icon-btn:focus:hover,
.cg-hamburger:focus:hover { background: var(--bg-alt); }
body .blog-search button:focus { background: var(--cg-navy-900); color: #fff; }
body .cg-footer__newsletter .cg-footer__newsletter-inline input[type="submit"]:focus,
body .cg-footer__newsletter .cg-footer__newsletter-inline button:focus { background: var(--cg-navy-600); color: #fff; }
.contacto-faq summary:focus { background: transparent; }
/* El reset de Hello mete padding .5rem 1rem a todo <button>: en los botones
   de icono de 44px aplastaba el SVG hasta dejarlo diminuto. */
.cg-icon-btn { padding: 0; }
.cg-icon-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
/* Menú móvil por encima de todo lo flotante (header de tienda con z-index alto,
   widget de reseñas, WhatsApp, chip de CP). Sólo el popup de CP (99990) va encima. */
.cg-mobilemenu { z-index: 99980; }