/* =====================================================================
   Contacto: routing page (house territory, wine). The page itself is the contact, so there is no .pg-close band. Form markup and its script are NOT part of this sheet's concern; the script stays inline in the page until the contact form task.
   Ported from the inline <style> block of the delivered contacto.html lines 24-206
   (T3, reviewed-pages-batch-1). Faithful port: only colour is tokenized
   (#fff -> --ms-on-dark for a text/icon colour, --mb-white for a surface).
   Loads on this page only, AFTER components.css, page.css and polish.css (the
   delivery's inline block sat after those links). Does not load with
   templates.css. The hero focus override is written .pg-hero.ct-hero so it
   outranks templates.css's .pg-hero by specificity, not by stylesheet order.
   Likewise .ms-section.ct-donde: a bare .ct-donde ties with components.css's
   .ms-section on specificity, so its bottom padding would depend on load order.
   ===================================================================== */
.pg-hero.ct-hero { --pg-focus: 60% 40%; --pg-focus-m: 55% 45%; }
.pg-logo--house svg { filter: none; }

/* ---------- Hero: balanced display lines, copy kept left of the subject ---------- */
.ct-hero .pg-hero__content { width: min(46rem, 60vw); }
.ct-hero .pg-hero__lede { max-width: 39rem; }
.ct-hero .pg-line { padding-inline: 0.08em; margin-inline: -0.08em; padding-block-end: 0.14em; margin-block-end: -0.14em; }
.ct-hero .pg-line > span { display: inline-block; text-wrap: balance; }
.ct-hero .pg-line--light > span { max-inline-size: 16em; }
/* The bold line is long ("de selección de personal"): a slightly smaller display size keeps it clear of the subject's face at 1440 */
@media (min-width: 64.01rem) { .ct-hero .pg-hero__display { font-size: clamp(2.5rem, 0.9rem + 4vw, 4.7rem); } }
/* Short desktop viewports (e.g. 1366x657): a slightly smaller display size keeps the CTA fully inside the hero */
@media (min-width: 64.01rem) and (max-height: 760px) { .ct-hero .pg-hero__display { font-size: clamp(2.75rem, 0.8rem + 4vw, 4.4rem); } }
@media (max-width: 64rem) { .ct-hero .pg-hero__content { width: auto; } }

/* Room inside the line-rise mask so "¿" and descenders are not clipped in section titles */
.ct-caso .ms-line, .ct-formulario .ms-line, .ct-donde .ms-line { padding-inline: 0.08em; margin-inline: -0.08em; padding-block-end: 0.14em; margin-block-end: -0.14em; }
.ct-caso .ms-line > span, .ct-formulario .ms-line > span, .ct-donde .ms-line > span { text-wrap: balance; }

/* ---------- Light glass surface shared by the cards on this page (Home .ml-card language) ---------- */
.ct-card, .ct-form-wrap, .ct-sede {
	--d: 0s;
	border-radius: var(--ms-radius-lg);
	background:
		radial-gradient(16rem 11rem at var(--gx) var(--gy), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 70%),
		linear-gradient(180deg, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.4) 42%, rgb(255 255 255 / 0.55) 100%),
		rgb(246 246 246 / 0.3);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.95),
		inset 0 -1px 1px rgb(255 255 255 / 0.5),
		inset 0 0 24px rgb(255 255 255 / 0.35),
		0 1.5rem 3.5rem -1.75rem rgb(51 51 51 / 0.24),
		0 2px 6px rgb(51 51 51 / 0.05);
}
.ct-card, .ct-sede { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ct-card:is(:hover, :focus-within), .ct-sede:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.95),
		inset 0 -1px 1px rgb(255 255 255 / 0.5),
		inset 0 0 24px rgb(255 255 255 / 0.35),
		0 2.25rem 4.5rem -1.75rem rgb(51 51 51 / 0.32),
		0 3px 10px rgb(51 51 51 / 0.07);
}

/* ---------- S.02 Cual es su caso: four route cards (2x2), below the form ---------- */
#caso { scroll-margin-top: 6rem; }
.ct-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 64rem) { .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-card { position: relative; display: flex; flex-direction: column; gap: 0.9rem; margin: 0; padding: clamp(1.5rem, 2.4vw, 2.25rem); }
.ct-cards > :nth-child(2) { --d: 0.1s; } .ct-cards > :nth-child(3) { --d: 0.2s; } .ct-cards > :nth-child(4) { --d: 0.3s; }
.ct-card__n { margin: 0; font-family: var(--ms-font-display); font-weight: 200; font-size: clamp(3rem, 2.2rem + 2.4vw, 4.25rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ms-brand); }
.ct-card__n::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-block-start: 1rem; background: var(--ms-brand); transition: width 0.7s var(--ms-ease); }
.ct-card:is(:hover, :focus-within) .ct-card__n::after { width: 4.5rem; }
.ct-card__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.ct-card__d { margin: 0; max-width: 52ch; font-size: var(--ms-body); line-height: 1.6; color: var(--ms-ink-soft); text-wrap: pretty; }
.ct-card__foot { margin-block-start: auto; padding-block-start: 0.75rem; }
/* The CTA anchor stretches over the whole card via ::after, so title and copy stay plain text */
.ct-card__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ms-ink); text-decoration: none; }
.ct-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ct-card__link:focus-visible { outline: none; }
.ct-card__link:focus-visible::after { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.ct-card__cta { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }
.ct-card:is(:hover, :focus-within) .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.ct-card:is(:hover, :focus-within) .ms-cta__circle svg { transform: translateX(3px); }
/* External link: the arrow points up and to the right (same treatment as Carrera) */
.ct-ext { transform: rotate(-45deg); transition: transform 0.45s var(--ms-ease); }
.ct-card:is(:hover, :focus-within) .ms-cta__circle .ct-ext { transform: rotate(-45deg) translate(3px, 0); }
.ct-caso.is-armed:not(.is-in) .ct-card { opacity: 0; translate: 0 2.5rem; }
.ct-caso.is-armed:not(.is-in) .ct-card__n::after { width: 0; }
.ct-caso.is-in .ct-card { transition: opacity 1.1s var(--d) ease, translate 1.1s var(--d) var(--ms-ease), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ct-caso.is-in .ct-card__n::after { transition: width 0.9s calc(var(--d) + 0.5s) var(--ms-ease); }
.ct-caso.is-in .ct-card:is(:hover, :focus-within) .ct-card__n::after { transition: width 0.7s var(--ms-ease); }

/* ---------- S.01 Formulario (right after the hero): heading beside a light glass form card ---------- */
#formulario { scroll-margin-top: 6rem; }
.ct-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); row-gap: 2.5rem; align-items: start; }
.ct-form-head { grid-column: 1 / span 4; position: sticky; top: 7rem; }
.ct-form-head .ms-title { margin: 0; }
.ct-form-wrap { grid-column: 5 / span 8; box-sizing: border-box; padding: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (max-width: 64rem) {
	.ct-form-head { grid-column: 1 / -1; position: static; }
	.ct-form-wrap { grid-column: 1 / -1; }
}
.ct-form { display: grid; gap: clamp(1.1rem, 1.8vw, 1.4rem); }
.ct-field { display: grid; align-content: start; gap: 0.6rem; }
.ct-field[hidden] { display: none; }
.ct-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.1rem, 1.8vw, 1.4rem) 1.75rem; }
.ct-phone { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ct-phone > legend { padding: 0; margin-block-end: 0.6rem; }
.ct-phone__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.6rem; }
.ct-phone__code { padding-inline: 0.8rem 2rem; background-position: right 0.8rem center; text-overflow: ellipsis; }
@media (max-width: 40rem) { .ct-phone__row { grid-template-columns: 10.5rem minmax(0, 1fr); } }
.ct-label { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-subtle); }
.ct-input, .ct-select, .ct-textarea {
	width: 100%; box-sizing: border-box; min-height: 2.9rem;
	border: 1px solid rgb(51 51 51 / 0.28); border-radius: 0.75rem;
	padding: 0.65rem 0.95rem; font: inherit; font-size: 1.0625rem;
	background: rgb(255 255 255 / 0.72); color: var(--ms-ink);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.ct-select { appearance: none; padding-inline-end: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; }
.ct-textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.ct-input:hover, .ct-select:hover, .ct-textarea:hover { border-color: var(--ms-ink); background-color: rgb(255 255 255 / 0.9); }
.ct-input:focus-visible, .ct-select:focus-visible, .ct-textarea:focus-visible { outline: none; border-color: var(--ms-brand); background-color: var(--ms-on-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-brand) 16%, transparent); }
.ct-input[aria-invalid="true"], .ct-select[aria-invalid="true"], .ct-textarea[aria-invalid="true"] { border-color: var(--ms-brand); box-shadow: 0 0 0 1px var(--ms-brand); }
.ct-hint { margin: 0; font-size: 0.8125rem; color: var(--ms-ink-subtle); }
.ct-error { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ms-brand); font-weight: 600; }
.ct-counter { margin: 0; font-size: 0.75rem; color: var(--ms-ink-subtle); text-align: right; }

/* Tipo de consulta: hairline radio list */
.ct-tipo { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; min-inline-size: 0; }
.ct-tipo > legend { padding: 0; margin-block-end: 0.6rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-subtle); }
.ct-tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ct-tipo-opt { position: relative; }
/* Three pills: the first spans the row, the other two share the next one (2 + 1 reads as intentional) */
.ct-tipo-opt--wide { grid-column: 1 / -1; }
.ct-tipo-note { margin-block-start: 0.1rem; }
.ct-tipo-note .ms-link { font-weight: 600; }
.ct-tipo-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.ct-tipo-pill { display: flex; align-items: center; gap: 0.85rem; min-height: 2.9rem; padding: 0.55rem 0.95rem; border: 1px solid rgb(51 51 51 / 0.28); border-radius: 0.75rem; background: rgb(255 255 255 / 0.72); font-size: 1.0625rem; line-height: 1.3; color: var(--ms-ink); cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }
.ct-tipo-pill::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; box-sizing: border-box; border: 1px solid var(--ms-ink-soft); border-radius: 50%; background: radial-gradient(circle, var(--ms-brand) 0 38%, transparent 42%); background-size: 0; background-position: center; background-repeat: no-repeat; transition: background-size 0.3s var(--ms-ease), border-color 0.3s ease; }
.ct-tipo-pill:hover { border-color: var(--ms-ink); background-color: rgb(255 255 255 / 0.9); }
.ct-tipo-input:checked + .ct-tipo-pill { color: var(--ms-brand); border-color: var(--ms-brand); background-color: color-mix(in srgb, var(--ms-brand) 6%, var(--mb-white)); font-weight: 600; }
.ct-tipo-input:checked + .ct-tipo-pill::before { background-size: 100% 100%; border-color: var(--ms-brand); }
.ct-tipo-input:focus-visible + .ct-tipo-pill { outline: 2px solid var(--ms-brand); outline-offset: 2px; }
.ct-tipo-input[aria-invalid="true"] + .ct-tipo-pill { border-color: var(--ms-brand); }

/* Consent */
.ct-consent-wrap { display: grid; gap: 0.4rem; }
.ct-consent { display: flex; align-items: flex-start; gap: 0.75rem; }
.ct-consent input { margin-block-start: 0.2rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--ms-brand); }
.ct-consent label { font-size: var(--ms-body-sm); line-height: 1.6; color: var(--ms-ink-soft); }

/* Verificación: the reCAPTCHA checkbox ct-form.js inserts before the submit button.
   Placement only, and only one rule. The box is empty until Google's api.js paints its
   304x78 iframe into it, so the height is reserved up front and the submit button does
   not jump when it arrives; 78px because that is the iframe's own fixed height, not a
   value of ours. Width needs nothing: measured at 390, 1440 and 1914 the widget lands
   on exactly the same column as the inputs above it (left 48, right 352 at 390). */
.ct-captcha__box { min-height: 78px; }

.ct-submit { justify-self: start; margin-block-start: 0.25rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.ct-submit:hover .ms-cta__circle, .ct-submit:focus-visible .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }
.ct-submit:hover svg, .ct-submit:focus-visible svg { transform: translateX(3px); }
.ct-submit:focus-visible { outline: none; }
.ct-submit:focus-visible .ms-cta__circle { outline: 2px solid var(--ms-brand); outline-offset: 4px; }

/* Summary + success: hairline blocks, no tinted cards */
.ct-summary { padding: 1.25rem 0 1.25rem 1.5rem; border-inline-start: 2px solid var(--ms-brand); }
.ct-summary p { margin: 0 0 0.6rem; font-weight: 600; color: var(--ms-ink); }
.ct-summary ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.35rem; }
.ct-summary a { color: var(--ms-brand); }
.ct-summary:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.ct-success { margin-block-start: 1rem; padding-block: 2rem 0; display: grid; gap: 0.75rem; border-block-start: 1px solid var(--ms-ink); }
.ct-success h3 { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); color: var(--ms-ink); }
.ct-success p { margin: 0; max-width: 48ch; font-size: var(--ms-body-sm); line-height: 1.65; color: var(--ms-ink-soft); }
.ct-success:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }

/* ---------- S.04 Donde estamos: two light glass address cards ---------- */
.ms-section.ct-donde { padding-block-end: clamp(7rem, 12vw, 10rem); }
.ct-sedes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.ct-sede { position: relative; display: grid; align-content: start; gap: clamp(0.85rem, 1.3vw, 1.1rem); margin: 0; padding: clamp(1.75rem, 3vw, 2.5rem); }
.ct-sedes > :nth-child(2) { --d: 0.12s; }
.ct-sede__label { margin: 0; display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-soft); }
.ct-sede__pin { flex: none; color: var(--ms-brand); }
.ct-sede__name { margin: 0; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(2.2rem, 1.5rem + 1.8vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--ms-ink); }
.ct-sede__addr { display: grid; gap: 0.15rem; font-style: normal; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.ct-sede__addr span:first-child { font-weight: 600; }
.ct-sede__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block-start: 0.5rem; }
.ct-sedes-remote { margin: clamp(1.5rem, 2.5vw, 2rem) 0 0; padding-block: 1.25rem; border-block: 1px solid rgb(51 51 51 / 0.14); font-size: var(--ms-body-sm); line-height: 1.6; color: var(--ms-ink-soft); }
.ct-sedes-remote strong { font-weight: 600; color: var(--ms-ink); }
@media (max-width: 40rem) {
	.ct-sedes { grid-template-columns: 1fr; }
	.ct-field--row, .ct-tipo-grid { grid-template-columns: 1fr; }
}
.ct-donde.is-armed:not(.is-in) .ct-sede { opacity: 0; translate: 0 2rem; }
.ct-donde.is-in .ct-sede { transition: opacity 1s var(--d) ease, translate 1s var(--d) var(--ms-ease), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
	.ct-card, .ct-card *, .ct-card__n::after, .ct-ext, .ct-sede, .ct-tipo-pill, .ct-tipo-pill::before, .ct-input, .ct-select, .ct-textarea { transition: none !important; }
	.ct-caso.is-armed:not(.is-in) .ct-card, .ct-donde.is-armed:not(.is-in) .ct-sede { opacity: 1; translate: none; }
	.ct-caso.is-armed:not(.is-in) .ct-card__n::after { width: 2.5rem; }
	.ct-card:hover, .ct-sede:hover { transform: none; }
}