/* Materia Travel House: formulario de solicitud de viaje.
   Un solo formulario para la landing de campañas, /contacto y /en/contact. */

.sv { --sv-ink: #1C1C1A; --sv-line: #CFC4B8; --sv-olive: #3E4336; --sv-muted: rgba(28,28,26,0.68); --sv-err: #8A2E1F;
  font-family: 'Figtree', system-ui, sans-serif; color: var(--sv-ink); display: flex; flex-direction: column; gap: 28px; width: 100%; }
.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }

.sv-row { display: flex; flex-wrap: wrap; gap: 20px; }
.sv-row > .sv-field { flex: 1 1 220px; min-width: 0; }

.sv-field { display: flex; flex-direction: column; gap: 8px; border: none; margin: 0; padding: 0; min-width: 0; }
.sv-label { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sv-olive); padding: 0; }
.sv-req { color: #948373; }
.sv-help { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--sv-muted); margin: 0; }
.sv-note { font-size: 12px; color: var(--sv-muted); margin: 0; }
.sv-sublabel { font-size: 12px; color: var(--sv-muted); }

.sv-input, .sv-select, .sv-textarea {
  width: 100%; font-family: inherit; font-size: 16px; font-weight: 300; color: var(--sv-ink);
  background: transparent; border: 1px solid var(--sv-line); border-radius: 0; padding: 13px 14px;
  outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; }
.sv-input::placeholder, .sv-textarea::placeholder { color: rgba(28,28,26,0.38); }
.sv-input:focus, .sv-select:focus, .sv-textarea:focus, .sv-dial:focus-within { border-color: var(--sv-ink); }
.sv-textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.sv-select { cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233E4336' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.sv-select.sv-empty { color: rgba(28,28,26,0.45); }
.sv-select option { color: var(--sv-ink); }

/* Teléfono con indicativo */
.sv-phone { display: flex; }
.sv-dial { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--sv-line); border-right: none; font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
.sv-dial-flag { font-size: 17px; line-height: 1; }
.sv-dial select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.sv-phone .sv-input { flex: 1; min-width: 0; }

/* Opciones tipo pastilla (radios) */
.sv-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-pill { position: relative; }
.sv-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 18px; font-size: 14px; border: 1px solid var(--sv-line); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; user-select: none; }
.sv-pill span:hover { border-color: var(--sv-ink); }
.sv-pill input:checked + span { background: var(--sv-ink); color: #F2EFEA; border-color: var(--sv-ink); }
.sv-pill input:focus-visible + span { outline: 2px solid var(--sv-olive); outline-offset: 2px; }

/* Bloques que aparecen según la respuesta */
.sv-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease, opacity 0.35s ease; opacity: 0; }
.sv-reveal > div { overflow: hidden; }
.sv-reveal.sv-open { grid-template-rows: 1fr; opacity: 1; }
.sv-reveal-inner { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.sv-dates { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-dates > label { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; }
.sv-date { cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233E4336' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* Contadores */
.sv-counters { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-counter { flex: 1 1 220px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--sv-line); padding: 10px 10px 10px 16px; }
.sv-counter-label { font-size: 15px; line-height: 1.3; }
.sv-counter-label small { display: block; font-size: 12px; color: var(--sv-muted); }
.sv-counter-ctrl { display: flex; align-items: center; gap: 4px; }
.sv-counter-ctrl button { width: 44px; height: 44px; font-family: inherit; font-size: 18px; color: var(--sv-ink); background: transparent; border: 1px solid var(--sv-line); cursor: pointer; transition: background 0.2s, color 0.2s; }
.sv-counter-ctrl button:hover:not(:disabled) { background: var(--sv-ink); color: #F2EFEA; }
.sv-counter-ctrl button:disabled { opacity: 0.35; cursor: default; }
.sv-counter-ctrl output { min-width: 36px; text-align: center; font-size: 17px; }

/* Errores, sin agresividad */
.sv-error { display: none; font-size: 13px; color: var(--sv-err); margin: 0; }
.sv-field.sv-invalid .sv-error { display: block; }
.sv-field.sv-invalid .sv-input, .sv-field.sv-invalid .sv-dial { border-color: var(--sv-err); }

/* Autorización de datos */
.sv-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--sv-ink); cursor: pointer; }
.sv-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #1C1C1A; cursor: pointer; }
.sv-consent a { color: inherit; text-decoration: underline; }

/* Envío */
.sv-submit { display: flex; flex-direction: column; gap: 14px; }
.sv-cta { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: #F2EFEA; background: var(--sv-ink); border: none; padding: 19px 24px; cursor: pointer; transition: background 0.25s; width: 100%; }
.sv-cta:hover { background: var(--sv-olive); }
.sv-cta:disabled { opacity: 0.6; cursor: progress; }
.sv-fail { display: none; font-size: 14px; line-height: 1.6; color: var(--sv-err); margin: 0; }
.sv-fail.sv-show { display: block; }
.sv-fail a { color: inherit; }
.sv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Calendario de fechas, con los colores de la marca */
.flatpickr-calendar { font-family: 'Figtree', system-ui, sans-serif; border-radius: 0; box-shadow: 0 8px 28px rgba(28,28,26,0.14); }
.flatpickr-day { border-radius: 0; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: #1C1C1A; border-color: #1C1C1A; color: #F2EFEA; }
.flatpickr-day.inRange { background: #E6E0D7; border-color: #E6E0D7; box-shadow: -5px 0 0 #E6E0D7, 5px 0 0 #E6E0D7; }
.flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 #1C1C1A; }
.flatpickr-day.today { border-color: #AFA699; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { font-family: 'Figtree', system-ui, sans-serif; }

/* Columna de introducción: cómo trabajamos */
.sv-layout { align-items: start !important; }
.sv-steps-title { font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: 0.04em; margin: 36px 0 20px; color: #1C1C1A; }
.sv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.sv-steps li { display: flex; gap: 18px; }
.sv-steps-num { font-family: 'Cinzel', serif; font-size: 15px; color: #3E4336; min-width: 24px; padding-top: 1px; }
.sv-steps-head { margin: 0 0 4px; font-size: 15px; font-weight: 500; color: #1C1C1A; }
.sv-steps-text { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(28,28,26,0.75); }
.sv-cost { border-top: 1px solid #CFC4B8; padding-top: 24px; margin-top: 36px; font-size: 16px; font-weight: 300; line-height: 1.7; color: #1C1C1A; }
.sv-cost strong { font-weight: 500; }

/* Página de gracias con la agenda */
.sv-agenda { background: #FFFFFF; border: 1px solid #CFC4B8; min-height: 200px; }
.sv-agenda iframe { display: block; width: 100%; height: 760px; border: 0; }
.sv-agenda-vacia { padding: 40px 32px; font-size: 16px; font-weight: 300; line-height: 1.7; color: #1C1C1A; }
.sv-agenda-vacia a { color: inherit; }
.sv-band { background: #CFC4B8; padding: 72px 52px; }
.sv-band-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; }
.sv-band-title { margin: 0; font-family: 'Cinzel', serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; letter-spacing: 0.03em; color: #1C1C1A; }
.sv-band .label { color: #3E4336; }
@media (max-width: 1024px) { .sv-band { padding: 56px 28px; } .sv-agenda iframe { height: 900px; } }

/* Bloque del formulario: dos columnas, lado fijo en computador y formulario en tarjeta */
.sv-b { display: grid; grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; max-width: 1200px; margin: 0 auto; }
.sv-b-side { position: sticky; top: calc(var(--nav-h, 68px) + 40px); padding-top: 8px; }
.sv-b-side .title { margin-bottom: 20px; }
.sv-b-side .body { margin-bottom: 0; }
.sv-b-steps { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.sv-b-steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 2px; }
.sv-b-num { font-family: 'Cinzel', serif; font-size: 14px; color: #3E4336; padding-top: 1px; grid-row: span 2; }
.sv-b-head { margin: 0; font-size: 15px; font-weight: 500; color: #1C1C1A; }
.sv-b-text { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(28,28,26,0.62); }
.sv-b-cost { border-bottom: 1px solid #CFC4B8; margin: 32px 0 0; padding-bottom: 28px; font-size: 15px; font-weight: 500; line-height: 1.7; color: #1C1C1A; }
.sv-contact { margin-top: 40px; }
.sv-contact > div > div > span:first-child { flex: none; width: 14px; display: inline-flex; justify-content: center; }
.sv-card { background: #FBF9F6; border: 1px solid #CFC4B8; padding: 48px 44px; }
.sv-alt { margin: 28px 0 0; font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(28,28,26,0.55); }
.sv-alt a { color: rgba(28,28,26,0.8); }
.sv-alt-mob { display: none; }
@media (max-width: 900px) {
  .sv-b { grid-template-columns: 1fr; gap: 40px; }
  .sv-b-side { position: static; padding-top: 0; }
  .sv-b-steps { margin-top: 36px; }
  .sv-b-cost { margin-top: 32px; }
  .sv-card { padding: 28px 20px; margin-left: -8px; margin-right: -8px; }
  .sv-alt-desk { display: none; }
  .sv-alt-mob { display: block; margin-top: 0; }
}