/* Paleta tomada del logo "Chipiona Municipio Turístico" */
:root {
  color-scheme: light;
  --blue: #5f74b5;      /* letras "Chipiona" */
  --blue-d: #3f4f86;    /* sombra de las letras */
  --blue-50: #eef1fa;
  --orange: #e8761c;    /* "Municipio Turístico" */
  --orange-d: #cc6311;
  --sun: #f6c21c;       /* sol */
  --mint: #bfe3d2;      /* nubes */
  --mint-50: #eef8f3;
  --red: #c63b2f;       /* vela */
  --ink: #252e47;
  --muted: #69728a;
  --line: #e5e7ef;
  --bg: #fafaf7;
  --card: #ffffff;

  --radius: 20px;
  --shadow: 0 1px 2px rgba(37, 46, 71, .05), 0 10px 30px -18px rgba(37, 46, 71, .25);
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Movimiento: 4 duraciones y curvas fuertes */
  --t-100: 100ms;
  --t-150: 150ms;
  --t-200: 200ms;
  --t-300: 300ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Idioma */
html[lang="es"] .en, html[lang="en"] .es { display: none; }
.i18n-fade { transition: opacity var(--t-150) var(--ease-out), filter var(--t-150) var(--ease-out); }
.is-switching .i18n-fade { opacity: .35; filter: blur(2px); transition-timing-function: var(--ease-in); }

.sr-only, .hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Barra de progreso: solo transform */
.progress { position: fixed; inset: 0 0 auto; z-index: 20; height: 4px; background: transparent; pointer-events: none; }
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--sun), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-300) var(--ease-out);
  border-radius: 0 4px 4px 0;
}

/* Cabecera */
.hero {
  position: relative;
  text-align: center;
  padding: 16px 16px 8px;
  background:
    radial-gradient(420px 260px at 12% 0%, rgba(191, 227, 210, .55), transparent 70%),
    radial-gradient(360px 240px at 92% 6%, rgba(246, 194, 28, .22), transparent 70%);
}
.hero__logo {
  display: block;
  width: min(240px, 60vw);
  height: auto;
  margin: 4px auto 12px;
}
.hero h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blue-d);
  text-wrap: balance;
}
.hero__lead { margin: 0 auto; max-width: 36ch; color: var(--muted); font-size: 17px; text-wrap: balance; }

/* Selector de idioma con píldora deslizante */
.lang {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  width: max-content;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.lang__pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--blue);
  transition: transform var(--t-200) var(--ease-out);
}
.lang[data-active="en"] .lang__pill { transform: translateX(100%); }
.lang button {
  position: relative;
  font: 700 13px/1 var(--font);
  color: var(--muted);
  background: none; border: 0;
  border-radius: 999px;
  min-width: 44px; min-height: 34px;
  cursor: pointer;
  transition: color var(--t-200) ease, transform var(--t-150) var(--ease-out);
}
.lang button[aria-pressed="true"] { color: #fff; }
.lang button:active { transform: scale(.94); }
.lang button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Contenido */
.wrap { max-width: 680px; margin: 0 auto; padding: 20px 16px 32px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
  margin-bottom: 16px;
}
@media (min-width: 640px) { .card { padding: 28px 32px; } }
.card h2 {
  margin: 0 0 16px;
  font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
  color: var(--blue-d);
  display: flex; align-items: center; gap: 10px;
}
.num, legend b {
  display: inline-grid; place-items: center;
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue);
  font: 800 13px/1 var(--font);
}
.scale-key { margin: -8px 0 12px; color: var(--muted); font-size: 14px; }

/* Insignia de sección completada */
.done {
  margin-left: auto;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mint-50);
  color: #2f8a63;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--t-150) var(--ease-in), transform var(--t-150) var(--ease-in);
}
.done svg { width: 14px; height: 14px; }
.is-done .done {
  opacity: 1; transform: scale(1);
  transition: opacity var(--t-200) var(--ease-out), transform var(--t-300) var(--ease-out);
}

.grid2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1.6fr; } }

.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.counter { text-align: right; font-variant-numeric: tabular-nums; }

input[type="text"], input[type="email"], input[type="date"], textarea {
  width: 100%;
  font: 16px/1.4 var(--font);
  color: var(--ink);
  background: #fbfbfd;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--t-150) ease, box-shadow var(--t-150) ease, background-color var(--t-150) ease;
}
textarea { resize: vertical; min-height: 130px; }
input:focus-visible, textarea:focus-visible {
  outline: none;
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(95, 116, 181, .16);
}
input[aria-invalid="true"] { border-color: var(--red); }
.field-error { margin: 6px 0 0; font-size: 14px; color: var(--red); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Leyenda flotante: evita que el borde superior del fieldset la atraviese */
.rate legend, .choice legend { float: left; width: 100%; }
.scale, .chips { clear: both; }
legend small { flex-basis: 100%; font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 36px; }

/* Escala 1-5 */
.rate { padding: 14px 0; border-top: 1px solid #f1f2f6; }
.rate:first-of-type { border-top: 0; padding-top: 4px; }
.rate legend { margin-bottom: 10px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 340px; }
.scale label, .chips label { position: relative; cursor: pointer; }
.scale input, .chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scale span {
  display: grid; place-items: center;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fbfbfd;
  font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--t-150) ease,
    color var(--t-150) ease,
    border-color var(--t-150) ease,
    transform var(--t-150) var(--ease-out);
}
.scale label:active span { transform: scale(.94); }
.scale input:checked + span {
  background: var(--blue); border-color: var(--blue); color: #fff;
  animation: pop var(--t-300) var(--ease-out);
}
.scale input:focus-visible + span,
.chips input:focus-visible + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--orange); }

@keyframes pop {
  0% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* Opciones */
.choice { padding: 14px 0; border-top: 1px solid #f1f2f6; }
.choice:first-of-type { border-top: 0; padding-top: 4px; }
.choice legend { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label > span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fbfbfd;
  font-size: 15px;
  transition:
    background-color var(--t-150) ease,
    color var(--t-150) ease,
    border-color var(--t-150) ease,
    transform var(--t-150) var(--ease-out);
}
.chips label:active > span { transform: scale(.97); }
.chips input:checked + span { background: var(--blue-50); border-color: var(--blue); color: var(--blue-d); font-weight: 600; }

/* Casilla dibujada en las opciones de selección múltiple */
.chips input[type="checkbox"] + span { padding-left: 12px; }
.chips input[type="checkbox"] + span::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1.5px solid #c5cad8;
  background: #fff center / 12px no-repeat;
  transition: background-color var(--t-150) ease, border-color var(--t-150) ease, transform var(--t-150) var(--ease-out);
}
.chips input[type="checkbox"]:checked + span::before {
  background-color: var(--blue);
  border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: pop var(--t-200) var(--ease-out);
}

/* Campos que aparecen: "Otros", consentimiento, errores */
.other { margin-top: 10px; display: none; }
.other:enabled { display: block; }
.other:enabled, .consent:not([hidden]), .notice:not([hidden]), .field-error:not([hidden]) {
  transition: opacity var(--t-200) var(--ease-out), transform var(--t-200) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}

@media (hover: hover) and (pointer: fine) {
  .scale label:hover span, .chips label:hover > span { border-color: #c5cad8; }
  .scale label:hover input:checked + span { border-color: var(--blue); }
  .btn:hover { background: var(--orange-d); }
  .lang button:not([aria-pressed="true"]):hover { color: var(--ink); }
}

/* Envío */
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; color: var(--muted); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex: none; }
.cf-turnstile { margin: 20px 0 4px; min-height: 65px; }

.btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  border: 0; border-radius: 16px;
  background: var(--orange);
  color: #fff;
  font: 800 17px/1 var(--font);
  cursor: pointer;
  transition: background-color var(--t-150) ease, transform var(--t-150) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn[aria-busy="true"] { cursor: progress; }
.btn__label { transition: opacity var(--t-150) ease, filter var(--t-150) ease; }
.btn[aria-busy="true"] .btn__label { opacity: .7; }
.btn__spin {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}
.btn[aria-busy="true"] .btn__spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
.notice--error { background: #fdeeec; color: #8f2a21; border: 1px solid #f4cbc6; }
.privacy { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* Gracias */
.thanks { text-align: center; padding: 48px 24px; outline: none; }
.thanks h2 { justify-content: center; font-size: 28px; }
.thanks p { color: var(--muted); max-width: 40ch; margin: 0 auto 8px; }
.thanks__icon { position: relative; width: 84px; height: 84px; margin: 0 auto 16px; }
.thanks__icon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thanks__icon .sun { fill: var(--sun); }
.thanks__icon .rays line { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.thanks__icon .check { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }

/* ---------- Animaciones de entrada (solo con JS) ---------- */
html.js .enter { opacity: 0; animation: rise var(--t-300) var(--ease-out) forwards; }
html.js .hero__logo.enter { animation-name: rise-logo; }
html.js h1.enter { animation-delay: 80ms; }
html.js .hero__lead.enter { animation-delay: 140ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise-logo { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }

/* Tarjetas que aparecen al hacer scroll */
html.js .card[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-300) var(--ease-out), transform var(--t-300) var(--ease-out);
}
html.js .card[data-reveal].is-in { opacity: 1; transform: none; }

/* Salida del formulario y entrada del agradecimiento */
form.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-150) var(--ease-in), transform var(--t-150) var(--ease-in);
}
.thanks:not([hidden]) { animation: rise-logo var(--t-300) var(--ease-out); }
.thanks:not([hidden]) .sun { transform-origin: 42px 42px; animation: sun-in var(--t-300) var(--ease-out) 100ms both; }
.thanks:not([hidden]) .rays { transform-origin: 42px 42px; animation: rays-in var(--t-300) var(--ease-out) 200ms both; }
.thanks:not([hidden]) .check { animation: draw var(--t-300) var(--ease-out) 300ms forwards; }
@keyframes sun-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rays-in { from { transform: scale(.8) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.foot { text-align: center; padding: 8px 16px 32px; font-size: 13px; color: var(--muted); }

/* Movimiento reducido: sin desplazamientos, solo fundidos suaves */
@media (prefers-reduced-motion: reduce) {
  html.js .enter, .thanks:not([hidden]) { animation: fade var(--t-200) ease forwards; }
  html.js .card[data-reveal] { transform: none; transition: opacity var(--t-200) ease; }
  .scale input:checked + span, .chips input[type="checkbox"]:checked + span::before { animation: none; }
  .scale label:active span, .chips label:active > span, .btn:active, .lang button:active { transform: none; }
  .lang__pill, .progress__bar, .done { transition-property: opacity; }
  form.is-leaving { transform: none; }
  .thanks:not([hidden]) .sun, .thanks:not([hidden]) .rays { animation: fade var(--t-200) ease both; }
  .thanks .check { stroke-dashoffset: 0; animation: none !important; }
  .other:enabled, .consent:not([hidden]), .notice:not([hidden]), .field-error:not([hidden]) {
    @starting-style { transform: none; }
  }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }