/**
 * Franquicias styles.
 *
 * One commented block per section, in the same order as $sections in
 * template.php. Only design tokens from assets/css/tokens.css — no hardcoded
 * colours, font sizes, radii or shadows. See DESIGN.md.
 *
 * Two sections are not styled here: Beneficios and App reuse the home blocks,
 * so their rules live in assets/css/section-experiencia.css and
 * assets/css/section-app-mobile.css, enqueued from page-franquicias.php.
 *
 * Container widths, type scale and colours follow the home 1:1 — the page
 * structure is the only thing taken from smartfit.com.ar/quiero-ser-franquiciado.
 */

/* Escape Astra's content wrapper. Same rule and same reason as the home:
   `#content .ast-container` is a flex container capped at the Customizer's
   content width, which both narrows the page and — because <main> becomes a
   flex item — collapses it to its text width. The `qx-fullwidth` body class
   comes from inc/layout.php. */
.qx-fullwidth #content > .ast-container {
	display: block;
	max-width: 100%;
	padding-inline: 0;
}

.qx-franquicias {
	width: 100%;
	min-width: 0;
	font-family: var(--qx-font-body);
	color: var(--qx-text);
}

/* Shared vertical rhythm, same convention as .qx-home. Both sides wrapped in
   :where() so the rule sits at zero specificity: the shared App Mobile section
   opts out with its own plain single-class rule and must keep winning no matter
   which stylesheet loads first. */
:where(.qx-franquicias) > :where(section) {
	padding-block: var(--qx-section-y);
}

/* ==========================================================================
   CTAs de la página — rojo en lugar del amarillo de marca, a pedido del
   cliente. Es la excepción a "el amarillo es el único acento" de DESIGN.md §2,
   y reutiliza --qx-soon, que hasta ahora era el rojo funcional del chip
   "Próximamente" de las cards de sedes (mismo valor exacto, #E5102E).

   El texto va en blanco, no en tinta como en el botón amarillo: blanco sobre
   #E5102E da 4.7:1 y pasa AA, mientras que tinta sobre rojo no llega.

   Scoped a .qx-franquicias a propósito. El "¡Inscribite ahora!" del header
   vive fuera del <main>, así que sigue amarillo en esta página igual que en el
   resto del sitio, y el submit del formulario no es .qx-btn — también queda
   amarillo, que es lo pedido.
   ========================================================================== */

.qx-franquicias .qx-btn--primary {
	background: var(--qx-soon);
	color: var(--qx-white);
}

.qx-franquicias .qx-btn--primary:hover,
.qx-franquicias .qx-btn--primary:focus-visible {
	background: var(--qx-soon-600);
	color: var(--qx-white);
}

/* ==========================================================================
   Franja — full-bleed black band directly under the header, Qivox logo
   centred. Reference: the `div.encabezado-negro` that opens
   smartfit.com.ar/quiero-ser-franquiciado — 116px tall, pure black, logo
   centred and nothing else.

   Not a <section>, so the page rhythm rule never applies to it; the band sets
   its own height. That height is a local custom property rather than a shared
   spacing token: it is one-off component geometry copied off the reference,
   same reasoning as the Hero's --qx-franquicias-hero-* locals.

   --qx-black (#0A0A0A) rather than --qx-bg-dark (#111111): the reference band
   is pure black and this is the token for "negro pleno". The Requisitos
   section further down stays on --qx-bg-dark; the two never touch.
   ========================================================================== */

.qx-franja {
	--qx-franja-h: 116px;
	--qx-franja-logo-w: 240px;

	display: grid;
	place-items: center;
	min-height: var(--qx-franja-h);
	padding: var(--qx-space-4) var(--qx-gutter);
	background: var(--qx-black);
}

/* Yellow-on-black is the pairing DESIGN.md §2 documents as AAA, so the brand
   logo goes in full colour rather than the white variant. */
.qx-franja__logo {
	display: block;
	width: min(100%, var(--qx-franja-logo-w));
	height: auto;
}

/* The band shrinks with the logo on small screens: at 116px tall with a 240px
   logo it eats most of a phone's first viewport for pure decoration. */
@media (max-width: 575.98px) {
	.qx-franja {
		--qx-franja-h: 84px;
		--qx-franja-logo-w: 170px;
	}
}

/* ==========================================================================
   Hero — clickable banner under the franja. Full-bleed and flush: edge to
   edge, no gutter, no radius, and butted straight against the black band
   above. That is a deliberate departure from the home hero, which is a
   1860px-wide rounded card with an 11px gutter — this one is meant to read as
   one continuous block with the franja, so keep them separate.

   The banner keeps the artwork's own ratio (2000 × 782) instead of a fixed
   height. The brief asked for 750px, and at a 1920px viewport this ratio lands
   at 751px — the art was drawn for that width. A hard 750px would only be
   honest there: at 1440px, a very common width, `cover` would have to throw
   away 478px, a quarter of the piece, taking either the headline on the left
   or the gym photo on the right with it. Scaling keeps the whole composition
   at every width, which for a banner that IS the message matters more than an
   exact pixel height.

   Ratio and the width/height attributes in sections/hero.php describe the same
   file — change them together if the art is replaced with a different size.
   ========================================================================== */

.qx-franquicias-hero {
	--qx-franquicias-hero-ratio: 2000 / 782;
	--qx-franquicias-hero-ratio-mobile: 1080 / 1789;

	/* Overrides the shared section rhythm: the banner hugs the franja. */
	padding-block: 0;
}

.qx-franquicias-hero__frame {
	width: 100%;
}

.qx-franquicias-hero__link {
	display: block;
	overflow: hidden;
	text-decoration: none;
}

/* Inset so the ring is not clipped by the full-bleed edges. */
.qx-franquicias-hero__link:focus-visible {
	outline: 3px solid var(--qx-yellow);
	outline-offset: -3px;
}

.qx-franquicias-hero img,
.qx-franquicias-hero__placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--qx-franquicias-hero-ratio);
	object-fit: cover;
}

.qx-franquicias-hero__placeholder {
	display: grid;
	place-items: center;
	padding: var(--qx-space-4);
	background: var(--qx-gray-100);
	color: var(--qx-text-muted);
	font-size: var(--qx-fs-small);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Phones: the portrait piece takes over.

   The <source> in sections/hero.php swaps the file at this same breakpoint —
   change both together. The box has to follow, because the <img> keeps the
   desktop piece's width/height attributes and would otherwise hold a 2.56:1
   frame around a 0.6:1 image.

   The fallback rule below only fires in the window where an SFTP deploy has
   the CSS but not yet the portrait file: without a mobile image hero.php marks
   the img --no-mobile-art, and the wide strip — 140px tall on a 360px screen,
   nothing in it legible — gets cropped to its left panel instead. 3/2 is the
   widest box that still fits the whole headline: it exposes 1.5 × 782 =
   1173px of the art, and the text ends around x=820.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.qx-franquicias-hero img,
	.qx-franquicias-hero__placeholder {
		aspect-ratio: var(--qx-franquicias-hero-ratio-mobile);
	}

	.qx-franquicias-hero .qx-franquicias-hero__image--no-mobile-art {
		aspect-ratio: 3 / 2;
		object-position: left center;
	}
}

/* ==========================================================================
   Intro — "Revolucionamos el fitness de alta calidad". Two-tone heading with
   an uppercase eyebrow above it ("Número uno en Argentina"), three big yellow
   figures, one CTA. Heading treatment is the home's
   (calc(var(--qx-fs-h2) * 0.82), centered, narrow container) so the page reads
   as the same site.
   ========================================================================== */

.qx-franquicias-intro__header {
	max-width: var(--qx-container-narrow);
	margin-inline: auto;
	margin-bottom: var(--qx-space-8);
	text-align: center;
}

.qx-franquicias-intro__eyebrow {
	margin: 0 0 var(--qx-space-3);
	font-size: var(--qx-fs-eyebrow);
	font-weight: var(--qx-fw-bold);
	letter-spacing: var(--qx-ls-eyebrow);
	text-transform: uppercase;
	color: var(--qx-text-muted);
}

.qx-franquicias-intro__title {
	margin: 0;
	font-size: calc(var(--qx-fs-h2) * 0.82);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

.qx-franquicias-intro__title-accent {
	color: var(--qx-yellow);
}

.qx-franquicias-intro__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qx-space-6);
	max-width: 960px;
	margin: 0 auto var(--qx-space-8);
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.qx-franquicias-intro__stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

.qx-franquicias-intro__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qx-space-2);
	text-align: center;
}

/* The yellow in this block is a rule above each figure, not the figure itself:
   DESIGN.md §2 forbids #FFBD00 as text on white (1.7:1, below even the 3:1
   floor for large text). The bar is decoration, so no contrast floor applies to
   it and the numbers stay ink. */
.qx-franquicias-intro__stat::before {
	content: '';
	width: 2.5rem;
	height: 4px;
	margin-bottom: var(--qx-space-2);
	background: var(--qx-yellow);
	border-radius: var(--qx-radius-pill);
}

.qx-franquicias-intro__stat-value {
	font-family: var(--qx-font);
	font-size: var(--qx-fs-h2);
	font-weight: var(--qx-fw-bold);
	line-height: var(--qx-lh-tight);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

.qx-franquicias-intro__stat-label {
	font-size: var(--qx-fs-body);
	font-weight: var(--qx-fw-medium);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text);
}

.qx-franquicias-intro__cta-row {
	display: flex;
	justify-content: center;
}

/* Same footprint as .qx-planes__cta / .qx-experiencia__cta. */
.qx-franquicias-intro__cta {
	width: min(100%, 380px);
	font-size: var(--qx-fs-body);
}

/* ==========================================================================
   Beneficios — assets/css/section-experiencia.css (shared with the home).
   App propia — assets/css/section-app-mobile.css (shared with the home).
   Nothing to add here: the two blocks render exactly as they do on the home.
   ========================================================================== */

/* ==========================================================================
   Requisitos — the investment figures, on the dark brand surface so the block
   separates from the cream App section above it and the white form below.
   Yellow figures over --qx-ink is the accent pairing DESIGN.md allows; yellow
   text on white is the one it forbids, which is why this section is dark
   rather than another off-white band.
   ========================================================================== */

.qx-requisitos {
	background: var(--qx-bg-dark);
	color: var(--qx-text-on-dark);
}

.qx-requisitos__header {
	max-width: var(--qx-container-narrow);
	margin-inline: auto;
	margin-bottom: var(--qx-space-8);
	text-align: center;
}

.qx-requisitos__title {
	margin: 0;
	font-size: calc(var(--qx-fs-h2) * 0.82);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text-on-dark);
}

.qx-requisitos__title-accent {
	color: var(--qx-yellow);
}

.qx-requisitos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qx-space-5);
	max-width: 960px;
	margin: 0 auto var(--qx-space-8);
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.qx-requisitos__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.qx-requisitos__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Grid items stretch to the tallest card, and one label ("Inversión estimada
   de equipos y obras") wraps to two lines while the others do not — so without
   this the four cards' contents sit at different heights. Centring the column
   keeps the figures on one optical line. */
.qx-requisitos__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--qx-space-2);
	padding: var(--qx-space-5);
	background: var(--qx-ink-800);
	border: 1px solid var(--qx-border-dark);
	border-radius: var(--qx-radius);
	text-align: center;
}

.qx-requisitos__value {
	font-family: var(--qx-font);
	font-size: var(--qx-fs-h3);
	font-weight: var(--qx-fw-bold);
	line-height: var(--qx-lh-tight);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-yellow);
}

.qx-requisitos__label {
	font-size: var(--qx-fs-small);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text-muted-on-dark);
}

.qx-requisitos__cta-row {
	display: flex;
	justify-content: center;
}

/* Same footprint as the other page CTAs. */
.qx-requisitos__cta {
	width: min(100%, 380px);
	font-size: var(--qx-fs-body);
}

/* ==========================================================================
   Formulario — closes the page. The embed is WPForms' own markup, so the
   styling here stays to the minimum CLAUDE.md allows: width, spacing and the
   yellow submit button. No restyling of fields beyond matching the brand.
   ========================================================================== */

.qx-franquicias-form {
	background: var(--qx-bg-alt);
}

.qx-franquicias-form__header {
	margin-bottom: var(--qx-space-7);
	text-align: center;
}

.qx-franquicias-form__title {
	margin: 0 0 var(--qx-space-3);
	font-size: calc(var(--qx-fs-h2) * 0.82);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

.qx-franquicias-form__title-accent {
	color: var(--qx-yellow);
}

.qx-franquicias-form__lead {
	margin: 0;
	font-size: var(--qx-fs-lead);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text-muted);
}

/* Wider than the old 720px so two columns of fields still breathe; the
   .qx-container--narrow around it caps the real width at ~784px anyway. */
.qx-franquicias-form__embed {
	max-width: 780px;
	margin-inline: auto;
	padding: var(--qx-space-6);
	background: var(--qx-bg);
	border: 1px solid var(--qx-border);
	border-radius: var(--qx-radius-lg);
	box-shadow: var(--qx-shadow-sm);

	/* --------------------------------------------------------------------
	   WPForms theming.

	   WPForms Modern declares these custom properties on :root and then reads
	   them from its own stylesheet. Redeclaring them here — closer to the
	   form — rebrands it through the plugin's own contract, which is the only
	   sane way in: its rules are written as
	   `div.wpforms-container-full button[type=submit]:not(:hover):not(:active)`,
	   and those two :not() pseudo-classes push the specificity above anything
	   reasonable a theme can write. An earlier pass tried a plain class chain
	   and lost — that is why the button stayed WPForms blue.

	   IMPORTANT — only the properties WPForms declares on :root alone can be
	   set from here. It emits a SECOND block on `#wpforms-88`, an ID, holding
	   every `*-size-*` property, and that block sits INSIDE this wrapper: a
	   custom property is resolved from the nearest declaring ancestor, so the
	   inner one shadows this one no matter what specificity is used out here.
	   Colours and radii live only on :root, which is why they work here and
	   sizes/spacing do not — those go in real declarations further down.
	   Targeting `#wpforms-88` directly is not an option: the shortcode is
	   editable from Contenido Qivox, so the id is not the theme's to hardcode.
	   -------------------------------------------------------------------- */
	--wpforms-button-background-color: var(--qx-yellow);
	--wpforms-button-border-color: var(--qx-yellow);
	/* Black on yellow: the only accessible way to use #FFBD00 as a surface. */
	--wpforms-button-text-color: var(--qx-ink);
	--wpforms-button-border-radius: var(--qx-radius-pill);
	--wpforms-button-border-style: none;
	--wpforms-field-border-radius: var(--qx-radius-sm);
	--wpforms-label-color: var(--qx-text);
}

.qx-franquicias-form__missing {
	margin: 0;
	text-align: center;
	color: var(--qx-text-muted);
}

/* WPForms resets its own container margins inconsistently depending on the
   theme; these two rules keep the embed flush inside the card. */
.qx-franquicias-form__embed .wpforms-container,
.qx-franquicias-form__embed .wpforms-container-full {
	margin: 0;
}

.qx-franquicias-form__embed .wpforms-form {
	font-family: var(--qx-font-body);
}

/* --------------------------------------------------------------------------
   Two-column field layout, per the reference. The field container is a flat
   list of .wpforms-field divs, so a plain grid pairs them up without touching
   the form in wp-admin: fields 1-2 on row one, 3-4 on row two, and the odd
   fifth one sits alone in the left column — exactly the reference's shape.

   Which field lands beside which comes from the order set in the WPForms
   builder, not from here. Reordering them is a wp-admin job.

   Vertical spacing moves to the grid's row-gap, so the plugin's own per-field
   padding is zeroed to avoid stacking the two.
   -------------------------------------------------------------------------- */

.qx-franquicias-form__embed .wpforms-field-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--qx-space-5);
	row-gap: var(--qx-space-4);
}

@media (min-width: 768px) {
	.qx-franquicias-form__embed .wpforms-field-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.qx-franquicias-form__embed .wpforms-form .wpforms-field {
	padding-block: 0;
}

/* Fields must fill their grid column. `.iti` is the wrapper intl-tel-input
   puts around the phone input; without this the phone field stays at its
   intrinsic width and breaks the column. */
.qx-franquicias-form__embed .wpforms-form input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
.qx-franquicias-form__embed .wpforms-form select,
.qx-franquicias-form__embed .wpforms-form textarea,
.qx-franquicias-form__embed .wpforms-form .iti {
	width: 100%;
	max-width: 100%;
}

/* Left-aligned under the grid, on request — so it lines up with the left edge
   of the first field column rather than centring like the page's other CTAs. */
.qx-franquicias-form__embed .wpforms-submit-container {
	display: flex;
	justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Sizes and spacing, as real declarations.

   These cannot go through the custom properties above: WPForms repeats every
   `*-size-*` property on `#wpforms-88`, inside this wrapper, so the inner
   declaration always wins the inheritance chain. Setting them as properties
   sidesteps that — WPForms' own rules that consume those variables are plain
   class chains, which a longer chain beats.

   Two earlier passes set --wpforms-button-size-margin-top here and reported
   the gap as fixed; it never applied. If a value looks ignored, check for a
   second declaration on the form's id before assuming specificity.
   -------------------------------------------------------------------------- */

/* 40px of air over the button, on request. Beats WPForms'
   `div.wpforms-container-full .wpforms-form .wpforms-submit-container` (0,3,1)
   with one extra class. Not a token: the shared scale steps straight from
   --qx-space-6 (32px) to --qx-space-7 (48px), and one form's button gap does
   not justify a new step in a scale the whole site reads. */
.qx-franquicias-form__embed div.wpforms-container-full .wpforms-form .wpforms-submit-container {
	margin-top: 40px;
}

/* Submit button = the header's "¡Inscribite ahora!" pill, on request.

   `.qx-btn` / `.qx-btn--primary` in assets/css/header.css is the source of
   truth; the values are mirrored here because WPForms renders the <button>
   itself and the theme cannot add a class to it. Keep the two in sync — if
   .qx-btn changes, this block has to follow.

   The colours are NOT here: they stay on the custom properties at the top of
   this file. WPForms paints them from
   `button[type=submit]:not(:hover):not(:active)`, whose two :not() push it to
   (0,4,2) — above this chain's (0,3,2) — while the size rule it beats is only
   (0,2,2). Splitting them this way is what makes both stick.

   min-height rather than height: WPForms sets height:41px from its own
   variable, and a larger min-height still wins over it. */
.qx-franquicias-form__embed div.wpforms-container-full button[type='submit'] {
	/* inline-block, NOT the header's inline-flex, and this is the one place the
	   two deliberately diverge. The label has to read "Enviar" while WPForms
	   renders the text as "ENVIAR", so the casing is fixed with
	   text-transform + ::first-letter below — and ::first-letter only applies
	   to block containers. A flex container (which inline-flex becomes here,
	   blockified as a flex item) silently drops it: measured, the button came
	   out the exact same width as plain lowercase.

	   With no flex box to centre the label, line-height does it: 20px of line
	   plus 12px of padding each side is the 44px the header pill stands at. */
	display: inline-block;
	/* Hugs its label, like the header pill — not the 380px the page's other
	   CTAs use. */
	width: auto;
	min-height: 44px;
	padding: var(--qx-space-3) var(--qx-space-5);
	border: 0;
	font-family: var(--qx-font-body);
	font-size: var(--qx-fs-small);
	font-weight: var(--qx-fw-semibold);
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--qx-dur) var(--qx-ease), transform var(--qx-dur-fast) var(--qx-ease);

	/* "ENVIAR" -> "Enviar". The label text lives in the WPForms builder, so
	   the theme can only restyle it; changing it there would be the cleaner
	   fix and would also correct the accessible name, which stays "ENVIAR".
	   Written as lowercase + first letter so it keeps working if the label is
	   ever edited to something longer. */
	text-transform: lowercase;
}

.qx-franquicias-form__embed div.wpforms-container-full button[type='submit']::first-letter {
	text-transform: uppercase;
}

/* Same press feedback as .qx-btn:active. */
.qx-franquicias-form__embed div.wpforms-container-full button[type='submit']:active {
	transform: translateY(1px);
}

/* Mirrors the .qx-btn step-down in header.css at the same breakpoint. The
   line-height grows to keep the label centred in the shorter pill: 24px of
   line plus 8px of padding each side is 40px. */
@media (max-width: 575.98px) {
	.qx-franquicias-form__embed div.wpforms-container-full button[type='submit'] {
		min-height: 40px;
		padding: var(--qx-space-2) var(--qx-space-4);
		line-height: 24px;
	}
}

/* WPForms' own hover lays a 20% black wash over the button colour, which on
   yellow reads muddy rather than like the brand's pressed state. One extra
   class beats its `div.wpforms-container-full button[type=submit]:hover`.
   Same states as .qx-btn--primary in header.css, plus :active, which WPForms
   darkens too. */
.qx-franquicias-form__embed div.wpforms-container-full button[type='submit']:hover,
.qx-franquicias-form__embed div.wpforms-container-full button[type='submit']:focus-visible,
.qx-franquicias-form__embed div.wpforms-container-full button[type='submit']:active {
	background: var(--qx-yellow-600);
	color: var(--qx-ink);
}

@media (max-width: 575.98px) {
	.qx-franquicias-form__embed {
		padding: var(--qx-space-5) var(--qx-space-4);
	}
}