/* ==========================================================================
   Para empresas (templates/empresas.php). Se carga después de home.css y
   usa sus variables (paleta de Thirdway) y piezas (.th-btn, .th-eyebrow…).
   ========================================================================== */

/* ---------- Hero ---------- */
.te-hero { padding: 132px var(--gutter) 72px; }
.te-hero-head {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 56px; align-items: end;
}
.te-hero-title { font-size: clamp(46px, 7.4vw, 124px); font-weight: 500; line-height: 0.92; letter-spacing: -0.055em; }
.te-hero-side { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
.te-hero-side p { font-size: 17px; color: var(--ink-60); max-width: 30em; }
.te-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

@media (max-width: 900px) {
    .te-hero { padding-top: 112px; }
    .te-hero-head { grid-template-columns: 1fr; }
}

/* ---------- Descuento por volumen ---------- */
.te-volume { padding: 0 var(--gutter) 120px; }
.te-volume-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px 64px;
    padding: clamp(28px, 4vw, 56px); border-radius: 4px; background: var(--brand); color: var(--paper-text);
}
.te-volume-num {
    font-size: clamp(120px, 17vw, 260px); font-weight: 500; line-height: 0.8; letter-spacing: -0.07em;
    color: var(--paper-text);
}
.te-volume-num span { color: var(--butter); }
.te-volume-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; }
.te-volume-copy .th-eyebrow { margin-bottom: 0; }
.te-volume-title { font-size: clamp(28px, 3.2vw, 46px); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; }
.te-volume-title { color: var(--paper-text); }
.te-volume-copy > p:not(.th-eyebrow) { color: rgba(246, 240, 232, 0.8); font-size: 17px; }

@media (max-width: 700px) {
    .te-volume-card { grid-template-columns: 1fr; }
}


/* ---------- Cómo trabajamos ---------- */
.te-process { padding: 120px var(--gutter); }
.te-process-head { margin-bottom: 48px; }
.te-process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.te-process-list li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ink); }
.te-process-list .th-num { align-self: flex-start; }
.te-process-list h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.035em; margin-top: 18px !important; }
.te-process-list p { color: var(--ink-60); max-width: 22em; }

@media (max-width: 900px) {
    .te-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 520px) {
    .te-process-list { grid-template-columns: 1fr; }
}

/* ---------- Formulario ---------- */
.te-contact-section {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 72px; align-items: start;
    padding: 120px var(--gutter);
    background: var(--teal); color: var(--paper-text);
}
.te-form-intro { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; }
.te-form-intro .th-eyebrow { margin-bottom: -4px; }
.te-form-title { font-size: clamp(44px, 6vw, 96px); font-weight: 500; line-height: 0.92; letter-spacing: -0.055em; }
.te-form-intro > p { font-size: 17px; color: rgba(246, 240, 232, 0.8); max-width: 30em; }
.te-form-intro strong { color: var(--butter); font-weight: 500; }
.te-form-perks { display: grid; gap: 8px; font-size: 15px; }
.te-form-perks li { display: flex; align-items: center; gap: 10px; }
.te-form-perks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--butter); }

/* Datos de contacto (correo, WhatsApp, oficina) bajo los beneficios. */
.te-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; max-width: 560px; }
.te-contact-cards li:first-child { grid-column: 1 / -1; }
.te-contact-card {
    display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 14px;
    background: var(--white); color: var(--ink); text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.te-contact-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.te-contact-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--brand); color: #fff;
}
.te-contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.te-contact-text small { font-size: 11px; color: var(--ink-60); }
.te-form-intro .te-contact-text strong { color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.te-form-card { padding: clamp(22px, 3vw, 36px); border-radius: 4px; background: var(--white); color: var(--ink); }
.te-form { display: flex; flex-direction: column; gap: 22px; }
.te-step { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.te-step-title { padding: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; outline: none; margin-bottom: 6px; }
.te-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.te-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.te-optional { color: var(--ink-50) !important; font-weight: 400; }
.te-field label { font-size: 13px; font-weight: 500; }
.te-field label span { color: var(--brand); }
.te-field :is(input, select, textarea) {
    width: 100%; padding: 13px 14px; border: 1px solid var(--ink-15); border-radius: 4px;
    background: var(--paper); color: var(--ink);
    font: inherit; font-size: 16px; letter-spacing: -0.01em;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.te-field select {
    appearance: none; -webkit-appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320221A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.te-field textarea { resize: vertical; min-height: 110px; }
.te-field :is(input, select, textarea):focus { outline: none; border-color: var(--ink); background-color: var(--white); }
.te-field :is(input, textarea)::placeholder { color: var(--ink-50); }

/* Paso 1: la cantidad como botones (radios). */
.te-qty-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.te-qty-option { position: relative; cursor: pointer; }
.te-qty-option input { position: absolute; opacity: 0; pointer-events: none; }
.te-qty-option {
    display: flex; align-items: center; min-height: 56px; padding: 14px 16px; border: 1px solid var(--ink-15); border-radius: 12px;
    background: var(--paper); transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease);
}
.te-qty-option:hover { border-color: var(--ink-50); }
.te-qty-option:active { transform: scale(0.98); }
.te-qty-label { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.te-qty-option:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper-text); }
.te-qty-option:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Encabezado de pasos: "Paso 1 de 3" + barra. */
.te-steps-head { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-60); }
.te-steps-head[hidden] { display: none; }
.te-steps-count b { color: var(--ink); font-weight: 600; }
.te-steps-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--ink-06); overflow: hidden; }
.te-steps-bar i { display: block; width: 33.33%; height: 100%; border-radius: inherit; background: var(--brand); transition: width 0.5s var(--ease); }

/* Con JS: un paso a la vez. */
.te-form.is-steps .te-step { display: none; }
.te-form.is-steps .te-step.is-active { display: flex; animation: te-step-in 0.45s var(--ease) both; }
.te-form.is-steps .te-step.is-active.is-back { animation-name: te-step-back; }
@keyframes te-step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes te-step-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.te-field.is-invalid :is(input, textarea) { border-color: #C0392B; }
.te-field-error { font-size: 12px; color: #9B1C1C; }

.te-back { display: inline-flex; align-items: center; gap: 6px; padding: 10px 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.te-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.te-back[hidden], .te-form [data-step-next][hidden], .te-form [data-lead-submit][hidden], .te-legal[hidden] { display: none; }

.te-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.te-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.te-form-foot .th-btn { margin-left: auto; }
.te-legal { font-size: 12px; color: var(--ink-60); }
.te-legal a { text-decoration: underline; text-underline-offset: 3px; }
.te-form .th-btn--light { background: var(--ink); color: var(--paper-text) !important; border: 0; cursor: pointer; }
.te-form .th-btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.te-form-error { margin-bottom: 16px !important; padding: 12px 14px; border-radius: 4px; background: #FDECEC; color: #9B1C1C; font-size: 14px; }

.te-form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0; }
.te-form-done-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--mint); color: var(--teal); font-size: 22px; font-weight: 600;
}
.te-form-done h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.te-form-done p { color: var(--ink-60); }

@media (max-width: 900px) {
    .te-contact-section { grid-template-columns: 1fr; padding-block: 88px; }
    .te-form-intro { position: static; }
}
@media (max-width: 560px) {
    .te-field-row { grid-template-columns: 1fr; }
    .te-qty-option { padding: 12px 14px; }
    .te-contact-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .te-form.is-steps .te-step.is-active { animation: none; }
}

/* ==========================================================================
   Beneficios: 3 paneles horizontales (templates/empresas.php → $panels).
   Con movimiento y desde 901px la sección se fija y los paneles avanzan de
   lado con el scroll (empresas.js). Si no, van uno debajo del otro.
   ========================================================================== */
.te-hs { padding: 120px 0; border-top: 1px solid var(--ink-15); }
.te-hs-head { padding: 0 var(--gutter); margin-bottom: 40px; }
.te-hs-track { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--gutter); }
.te-hs-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px 48px;
    padding: clamp(28px, 4vw, 56px); border-radius: 4px; overflow: hidden;
}
.te-hs-panel--mint { background: var(--mint); }
.te-hs-panel--butter { background: var(--butter); }
.te-hs-panel--sand { background: var(--sand); }
.te-hs-copy { display: flex; flex-direction: column; gap: 18px; }
.te-hs-num { font-size: 13px; font-weight: 500; }
.te-hs-num span { color: var(--ink-60); }
.te-hs-copy h3 { font-size: clamp(34px, 4.2vw, 64px); font-weight: 500; line-height: 0.98; letter-spacing: -0.05em; }
.te-hs-text { font-size: 17px; color: var(--ink-60); max-width: 30em; }
.te-hs-copy ul { display: grid; gap: 10px; margin-top: 6px; }
.te-hs-copy li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; padding-top: 10px; border-top: 1px solid var(--ink-15); }
.te-hs-copy li::before { content: "→"; color: var(--brand); }

.te-hs-vis { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }

/* 1 · Tarjeta + perfil */
.te-vis-phone {
    position: relative; width: 210px; aspect-ratio: 9 / 18.5; padding: 8px; border-radius: 34px;
    background: var(--ink); box-shadow: 0 30px 60px -25px rgba(32, 34, 26, 0.45);
}
.te-vis-phone > img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 26px; }
.te-vis-card {
    position: absolute; width: 250px; height: auto; left: calc(50% - 250px); bottom: 12%; border-radius: 12px;
    box-shadow: 0 24px 40px -16px rgba(32, 34, 26, 0.5);
    transform: rotate(-12deg); animation: te-vis-float 4s ease-in-out infinite;
}
@keyframes te-vis-float { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-10px); } }
.te-vis-tap { position: absolute; left: calc(50% - 40px); bottom: 30%; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--brand); animation: th-tap 2.8s ease-out infinite; }

/* 2 · Escáner */
.te-vis-phone--scan { --u: 12.5px; padding: 0; background: #f3f1ec; border: 8px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.te-vis-phone--scan .th-sc-card { transform: rotate(-3deg); }
.te-vis-phone--scan .th-scan-corner { width: 26px; height: 26px; }
.te-vis-phone--scan .th-scan-corner--tl, .te-vis-phone--scan .th-scan-corner--tr { top: 30%; }
.te-vis-phone--scan .th-scan-corner--bl, .te-vis-phone--scan .th-scan-corner--br { bottom: 30%; }
.te-vis-line {
    position: absolute; left: 9%; right: 9%; top: 32%; height: 2px; border-radius: 2px;
    background: var(--brand); box-shadow: 0 0 16px 4px rgba(0, 143, 133, 0.45);
    animation: te-vis-sweep 2.4s ease-in-out infinite;
}
@keyframes te-vis-sweep { 0%, 100% { top: 32%; opacity: 0; } 10%, 90% { opacity: 1; } 50% { top: 66%; } }
.te-vis-chip {
    position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
    background: var(--mint); color: var(--teal); font-size: 11.5px; font-weight: 500;
}
.te-vis-chip span { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 9px; }

/* 3 · Exportar */
.te-vis-export { width: min(360px, 100%); display: flex; flex-direction: column; align-items: stretch; }
.te-vis-contact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 4px; background: var(--white); box-shadow: 0 16px 30px -18px rgba(32, 34, 26, 0.4); }
.te-vis-contact strong, .te-vis-dest strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.te-vis-contact small, .te-vis-dest small { display: block; font-size: 12px; color: var(--ink-60); }
.te-vis-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mint); color: var(--teal); font-size: 13px; font-weight: 600; }
.te-vis-arrow { align-self: center; width: 1px; height: 34px; background: var(--ink-60); position: relative; margin: 6px 0; }
.te-vis-arrow::after { content: ""; position: absolute; left: -4px; bottom: 0; width: 7px; height: 7px; border-right: 1px solid var(--ink-60); border-bottom: 1px solid var(--ink-60); transform: rotate(45deg); }
.te-vis-dest { display: grid; gap: 8px; }
.te-vis-dest li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.72); }
.te-vis-dest li div { flex: 1; min-width: 0; }
.te-vis-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper-text); }
.te-vis-dest em { font-style: normal; font-size: 13px; color: var(--brand); font-weight: 600; }

/* Compu con movimiento: sección fija, paneles de lado. */
@media (min-width: 901px) {
    html.th-motion .te-hs { padding: 0; }
    html.th-motion .te-hs-pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 72px 0 24px; }
    html.th-motion .te-hs-head { margin-bottom: 28px; }
    html.th-motion .te-hs-track { flex-direction: row; width: max-content; gap: 24px; will-change: transform; }
    html.th-motion .te-hs-panel { width: min(1080px, 80vw); height: min(600px, calc(100svh - 250px)); }
    html.th-motion .te-hs-vis { min-height: 0; height: 100%; }
    html.th-motion .te-vis-phone { width: auto; height: min(420px, 100%); }
}
@media (max-width: 900px) {
    .te-hs { padding: 88px 0; }
    .te-hs-panel { grid-template-columns: 1fr; }
    .te-hs-vis { min-height: 380px; }
}
@media (max-width: 520px) {
    .te-vis-card { width: 170px; left: calc(50% - 150px); }
    .te-vis-phone { width: 170px; margin-left: 50px; }
    .te-vis-tap { left: calc(50% - 20px); }
}
@media (prefers-reduced-motion: reduce) {
    .te-vis-card, .te-vis-tap, .te-vis-line { animation: none; }
}