@charset "UTF-8";
/* Formularios públicos (cotizar y contacto) */
.form-box { max-width: 56rem; padding: clamp(1.4rem, 3.4vw, 2.75rem); border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); scroll-margin-top: 7rem; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-group { margin: 0 0 2rem; padding: 0; border: 0; }
.form-group legend { width: 100%; margin-bottom: 1.1rem; padding: 0 0 .6rem; border-bottom: 1px solid var(--line); font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.form-grid { display: grid; gap: 1.1rem 1.4rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.form-grid > .field { grid-column: span 3; }
.form-grid > .field--third { grid-column: span 2; }
.form-grid > .field--wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .35rem; font-size: .95rem; font-weight: 600; color: var(--ink); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field input[type="number"], .field select, .field textarea {
    width: 100%; min-height: 3rem; padding: .65rem .85rem; border: 1.5px solid #8795a8; border-radius: var(--radius); font: inherit; color: var(--ink); background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--blue); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(11 92 173 / 22%); }
.field textarea { resize: vertical; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field__help { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); }
.field__error { margin: .3rem 0 0; font-size: .92rem; font-weight: 600; color: #b3261e; }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; align-items: start; margin-bottom: 1rem; }
.field--check input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; accent-color: var(--blue); }
.field--check label { margin: 0; font-weight: 400; }
.field--check .field__error { grid-column: 2; }
.form-note { margin-bottom: 1.4rem; font-size: .92rem; color: var(--muted); }
.form-alert { margin-bottom: 1.5rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); border: 1px solid; border-left-width: 5px; }
.form-alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.form-alert--ok { border-color: #1b7f4b; background: #e9f7ef; color: #14532d; }
.form-alert--error { border-color: #b3261e; background: #fdecea; color: #7a1913; }
.form-alert--error a { color: inherit; }
.form-alert:focus { outline: 3px solid var(--blue); outline-offset: 2px; }

.contact-channels { display: grid; gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.contact-channels li { padding: 1.5rem; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius); background: #fff; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.contact-channels li:hover { border-top-color: var(--cyan); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.contact-channels h3 { margin-bottom: .35rem; }
.contact-channels p { margin: 0; color: var(--text-2); }

@media (max-width: 48rem) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid > .field, .form-grid > .field--third, .form-grid > .field--wide { grid-column: 1 / -1; }
}

/* Hoja de reclamación */
.form-group[hidden] { display: none; }
.field--radio { margin: 0; padding: 0; border: 0; }
.field--radio legend { margin-bottom: .45rem; font-size: .95rem; font-weight: 600; color: var(--ink); }
.field__options { display: flex; flex-wrap: wrap; gap: .75rem; }
.field__option { display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .7rem 1.1rem; border: 1.5px solid #8795a8; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s; }
.field__option:hover, .field__option:has(input:checked) { border-color: var(--blue); background: var(--ice); }
.field__option input { width: 1.2rem; height: 1.2rem; accent-color: var(--blue); }
.claim-receipt { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: .75rem 0; }
.claim-receipt dt { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.claim-receipt dd { margin: 0; font-size: 1.25rem; font-weight: 800; }

/* Campos modernos: la etiqueta hace de placeholder y sube al escribir */
.field--float { position: relative; }
.field--float > label { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 1rem .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--muted); transition: padding .18s var(--ease), font-size .18s var(--ease), color .18s, font-weight .18s; }
.field--float input, .field--float select, .field--float textarea { min-height: 3.5rem; padding: 1.6rem .95rem .5rem; }
.field--float textarea { min-height: 8.5rem; }
.field--float > label .field__opt { font-weight: 400; }
.field--float input:focus ~ label, .field--float input:not(:placeholder-shown) ~ label,
.field--float textarea:focus ~ label, .field--float textarea:not(:placeholder-shown) ~ label,
.field--float select:focus ~ label, .field--static > label { padding-top: .4rem; font-size: .75rem; font-weight: 600; }
.field--float input:focus ~ label, .field--float textarea:focus ~ label, .field--float select:focus ~ label { color: var(--blue); }
.field--float textarea ~ label { top: 2px; left: 2px; right: 18px; padding: .9rem .95rem .15rem; background: #fff; border-radius: 3px 0 0 0; }
.field--float textarea:focus ~ label, .field--float textarea:not(:placeholder-shown) ~ label { padding-top: .35rem; }
.field--float.is-invalid input, .field--float.is-invalid select, .field--float.is-invalid textarea { border-color: #b3261e; }
.field--float.is-invalid > label { color: #b3261e; }
.field--float.is-valid input, .field--float.is-valid select, .field--float.is-valid textarea { border-color: #1b7f4b; }
.field--float.is-valid > label { color: #1b7f4b; }
.field__error { animation: field-in .25s var(--ease); }
@keyframes field-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.field--check.is-invalid input { outline: 2px solid #b3261e; }

/* Botón de envío */
.btn--send::after { display: none; }
.btn--send .icon { transition: transform .35s var(--ease); }
.btn--send:hover .icon, .btn--send:focus-visible .icon { transform: translate(3px, -3px); }
.btn--send.is-loading { pointer-events: none; }
.btn--send.is-loading .icon { animation: send-fly .9s var(--ease) infinite; }
.btn--send:disabled { opacity: .85; cursor: progress; }
@keyframes send-fly { 0% { transform: translate(0, 0); opacity: 1; } 55% { transform: translate(16px, -16px); opacity: 0; } 56% { transform: translate(-16px, 16px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }

/* Mensaje de envío correcto: grande y visible */
.form-alert--ok { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 1.5rem; font-size: 1.05rem; animation: form-pop .5s var(--ease); }
.form-alert__icon { display: grid; place-items: center; flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #1b7f4b; color: #fff; }
.form-alert__body { min-width: 0; }
.form-alert__body strong { display: block; margin-bottom: .2rem; font-size: 1.2rem; }
@keyframes form-pop { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .field__error, .form-alert--ok, .btn--send.is-loading .icon { animation: none; } }

/* Teléfono con país */
.field--phone .iti { display: block; width: 100%; }
.field--phone .iti__selected-country { height: 100%; border-radius: var(--radius) 0 0 var(--radius); }
.field--phone .iti__selected-country-primary { padding-top: .7rem; }
.field--phone > label { left: var(--phone-offset, 0px); }
.field--phone input.iti__tel-input, .field--phone .iti input[type="tel"] { padding-top: 1.6rem; padding-bottom: .5rem; }
.iti { --iti-border-color: #8795a8; --iti-dropdown-bg: #fff; --iti-hover-color: var(--ice); }
.iti--container { z-index: 1100; }
.iti__dropdown-content { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-md); font-family: inherit; }
.iti__search-input { font: inherit; }
.iti__country.iti__highlight { background: var(--ice); }

/* Fecha con calendario */
.field--date input[type="text"] { cursor: pointer; padding-right: 2.8rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5cad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right .9rem center / 1.25rem; }
.flatpickr-calendar { font-family: inherit; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--blue); border-color: var(--blue); }
.flatpickr-day.today { border-color: var(--cyan); }
.flatpickr-day:hover { background: var(--ice); border-color: var(--ice); }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { background: #fff; color: var(--navy); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }

/* Listas desplegables propias */
.csel { position: relative; }
.csel__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.csel__btn { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 3.5rem; padding: 1.6rem .95rem .5rem; border: 1.5px solid #8795a8; border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.csel__btn:hover { border-color: var(--blue); }
.csel__btn:focus-visible, .csel.is-open .csel__btn { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(11 92 173 / 22%); }
.csel--empty .csel__value { color: var(--muted); }
.csel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__chev { flex: none; color: var(--blue); transition: transform .25s var(--ease); }
.csel.is-open .csel__chev { transform: rotate(180deg); }
.csel__list { position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; right: 0; max-height: 17rem; margin: 0; padding: .35rem; overflow-y: auto; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); animation: csel-in .16s var(--ease); }
.csel__option { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border-radius: 3px; cursor: pointer; color: var(--ink); }
.csel__option--empty { color: var(--muted); }
.csel__option.is-active { background: var(--ice); color: var(--navy); }
.csel__tick { flex: none; color: var(--blue); opacity: 0; }
.csel__option[aria-selected="true"] { font-weight: 700; }
.csel__option[aria-selected="true"] .csel__tick { opacity: 1; }
.is-invalid .csel__btn { border-color: #b3261e; }
.is-valid .csel__btn { border-color: #1b7f4b; }
@keyframes csel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .csel__list { animation: none; } }

/* ===== Campos uniformes (mismo alto, borde, relleno y posición de la etiqueta en todos) ===== */
.field { position: relative; }
.field.field--float :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
    min-height: 3.9rem; padding: 1.75rem .95rem .55rem; border: 1.5px solid #8795a8; font-size: 1rem; line-height: 1.4;
}
.field.field--float textarea { min-height: 9rem; }
.field--float > label { padding: 1.2rem .95rem; font-size: 1rem; line-height: 1.4; }
.field--float input:focus ~ label, .field--float input:not(:placeholder-shown) ~ label,
.field--float textarea:focus ~ label, .field--float textarea:not(:placeholder-shown) ~ label,
.field--float select:focus ~ label, .field--static > label { padding-top: .5rem; padding-bottom: 0; font-size: .72rem; letter-spacing: .01em; }
.field--float textarea ~ label { top: 2px; left: 2px; right: 18px; padding: 1.2rem .95rem .2rem; border-radius: 0; }
.field--float textarea:focus ~ label, .field--float textarea:not(:placeholder-shown) ~ label { padding: .5rem .95rem .2rem; }
.csel__btn { min-height: 3.9rem; padding: 1.75rem .95rem .55rem; border-width: 1.5px; font-size: 1rem; line-height: 1.4; }
.field--date input[type="text"] { padding-right: 2.8rem; }
.field--phone .iti { display: block; }
.field--phone .iti__country-container { height: 100%; }
.field--phone .iti__selected-country { height: 100%; padding-top: 1rem; background: transparent; border-right: 1px solid var(--line); }
.field--phone .iti__selected-country:hover, .field--phone .iti__selected-country[aria-expanded="true"] { background: var(--ice); }
.field--phone > label { left: var(--phone-offset, 0px); }
.iti__dropdown-content { border-radius: 0; }
.iti__country.iti__highlight { background: var(--ice); }
.flatpickr-calendar, .csel__list { border-radius: 0; }

/* ===== Mensaje de error flotante sobre el campo (no mueve el resto del formulario) ===== */
.field__error { position: absolute; z-index: 6; right: .7rem; top: -.95rem; margin: 0; padding: .3rem .65rem .35rem; max-width: calc(100% - 1.4rem); background: #b3261e; color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.25; box-shadow: 0 4px 12px rgb(179 38 30 / 30%); pointer-events: none; }
.field__error::after { content: ""; position: absolute; right: .8rem; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #b3261e; }
.field--check .field__error, .field--radio .field__error { grid-column: auto; right: 0; top: -1.3rem; }
.field--float.is-invalid .field__help { visibility: hidden; }

/* ===== Etiqueta como placeholder en TODOS los controles (lista, fecha y teléfono incluidos) ===== */
.field--float.is-filled > label, .field--float.is-focus > label { padding-top: .5rem; padding-bottom: 0; font-size: .72rem; font-weight: 600; letter-spacing: .01em; }
.field--float.is-focus > label { color: var(--blue); }
.field--date:not(.is-filled):not(.is-focus) > label { padding: 1.2rem .95rem; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.csel--empty .csel__value { visibility: hidden; }
.field.field--float :is(input[type="text"], input[type="tel"]).iti__search-input { min-height: 0; }

/* Buscador del selector de país */
.iti__search-input { min-height: 0 !important; padding: .7rem .9rem .7rem 2.5rem !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; font: inherit; font-size: .95rem !important; line-height: 1.4 !important; background-color: #fff; }
.iti__search-input:focus { outline: 0; box-shadow: none; }
.iti__country-list, .iti__dropdown-content { font-size: .95rem; }

/* Casillas y opciones propias (cuadradas, con el azul de la marca) */
.field__option input[type="radio"], .field--check input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 1.3rem; height: 1.3rem; margin: 0; border: 2px solid #8795a8; background: #fff; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.field__option input[type="radio"]::before, .field--check input[type="checkbox"]::before { content: ""; transform: scale(0); transition: transform .15s var(--ease); }
.field__option input[type="radio"]::before { width: .62rem; height: .62rem; background: var(--blue); }
.field--check input[type="checkbox"]::before { width: .8rem; height: .8rem; background: #fff; clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 18%, 82% 0, 40% 62%); }
.field__option input[type="radio"]:checked { border-color: var(--blue); }
.field--check input[type="checkbox"]:checked { border-color: var(--blue); background: var(--blue); }
.field__option input:checked::before, .field--check input:checked::before { transform: scale(1); }
.field__option input:hover, .field--check input:hover { border-color: var(--blue); }
.field__option input:focus-visible, .field--check input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgb(11 92 173 / 25%); }
.field__option { gap: .7rem; padding: .85rem 1.2rem; min-width: 9.5rem; }
.field--check { align-items: center; gap: .2rem .8rem; padding: .85rem 1rem; background: var(--ice); border: 1px solid var(--line); }
.field--check label { cursor: pointer; line-height: 1.45; }
.field--check input { margin-top: 0; }

/* Orden del formulario */
.form-group { margin-bottom: 2.4rem; }
.form-group legend { display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--line); }
.form-group legend::before { content: ""; width: .3rem; height: 1.15rem; background: var(--blue); }
.form-grid { gap: 1.5rem 1.4rem; align-items: start; }
.field__help { margin: .45rem 0 0; font-size: .85rem; line-height: 1.45; }
.field--radio > legend { margin-bottom: .7rem; padding: 0; border: 0; font-size: .95rem; }
.field--radio > legend::before { display: none; }
.form-note { margin: 1.4rem 0 1.6rem; }

/* ===== Selector de país: bandera, flecha y código centrados y con el mismo espacio a cada lado ===== */
.field--phone .iti__selected-country { display: flex; align-items: center; justify-content: center; padding: 0 .9rem; transition: padding-top .18s var(--ease), background-color .2s; }
.field--phone .iti__selected-country-primary { display: flex; align-items: center; height: auto; padding: 0; gap: .5rem; }
.field--phone .iti__flag { margin: 0; }
.field--phone .iti__arrow { margin: 0; }
.field--phone .iti__selected-dial-code { margin: 0 0 0 .55rem; font-size: 1rem; line-height: 1.4; color: var(--ink); }
/* Con la etiqueta como placeholder el código va al centro; al escribir baja junto con el texto */
.field--phone.is-filled .iti__selected-country, .field--phone.is-focus .iti__selected-country { padding-top: 1.2rem; }