/* tuDeCA.es — hoja de estilos. Basada en el sistema de diseño de tuDeCA.es.
   Sin dependencias externas: la tipografía Figtree se sirve desde /fonts. */

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-bg: #F5F5F5;
  --surface: #FFFFFF;
  --ink: #1B1E25;
  --ink-2: #3A3F4B;
  --ink-muted: #5B6170;
  --ink-placeholder: #6B7180;
  --brand-600: #2468C0;
  --brand-700: #1B55A8;
  --brand-300: #8DB3E8;
  --brand-100: #E8F1FD;
  --brand-50: #F1F6FD;
  --info-bg: #EEF4FD;
  --info-border: #CFE0F7;
  --focus-ring: #7FB0F0;
  --focus-halo: #D6E6FA;
  --border: #D5DCE8;
  --border-input: #C4CBD8;
  --divider: #E6E6E6;
  --success-600: #1E7A3C;
  --success-100: #E3F4E8;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(0, 0, 0, 0.10);
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, dl, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; }

a { color: var(--brand-600); }
a:hover { color: var(--brand-700); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--brand-600); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-md); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 8px; color: #fff; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- Tipografía ---------- */
h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.12; font-weight: 800; color: var(--ink); }
h2 { font-size: clamp(26px, 3.6vw, 34px); line-height: 1.2; font-weight: 800; color: var(--ink); }
h3 { font-size: 18px; line-height: 24px; font-weight: 800; color: var(--ink); }
.page-title { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.15; }

.overline {
  font-size: 13px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-600);
}
.lead { font-size: 17px; line-height: 27px; color: var(--ink-2); max-width: 760px; }
.lead--lg { font-size: 18px; line-height: 29px; max-width: 820px; }
.fineprint { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; min-width: 168px; padding: 0 24px;
  border-radius: var(--radius-md); border: 1.5px solid var(--brand-600);
  background: var(--brand-600); color: #fff;
  font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn--secondary { background: #fff; color: var(--brand-700); }
.btn--secondary:hover { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-600); }
.btn--sm { min-height: 44px; min-width: 0; padding: 0 18px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) {
  .btn:not(.btn--sm) { width: 100%; }
}

/* ---------- Cabecera ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--divider); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; max-width: 1280px;
}
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__mobile { display: none; align-items: center; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; color: var(--brand-700); text-decoration: none;
}
.icon-btn:hover { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-300); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 40px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 0 4px; }
.main-nav a, .menu__nav a.mlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-radius: var(--radius-sm);
}
.main-nav a:hover { color: var(--brand-700); background: var(--page-bg); }
.main-nav a[aria-current="page"] { color: var(--brand-700); background: var(--brand-100); }

.menu__btn {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; color: var(--ink);
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn:hover { background: var(--page-bg); }
.menu .i-close { display: none; }
.menu[open] .i-close { display: block; }
.menu[open] .i-open { display: none; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: #fff; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}
.menu__nav { display: flex; flex-direction: column; padding: 8px 24px 20px; max-width: 1120px; margin: 0 auto; }
.menu__nav a.mlink { min-height: 48px; padding: 0 4px; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--divider); }
.menu__nav a.mlink[aria-current="page"] { color: var(--brand-700); }
.menu__nav .btn { margin-top: 20px; }
.menu__nav .btn + .btn { margin-top: 12px; }

@media (max-width: 1200px) {
  .main-nav, .header__actions { display: none; }
  .header__mobile { display: flex; }
}
@media (max-width: 380px) {
  .brand img { height: 32px; width: auto; }
}

/* ---------- Secciones ---------- */
.sec { padding: clamp(48px, 7vw, 88px) 0; background: #fff; }
.sec--gray { background: var(--page-bg); }
.stack { display: flex; flex-direction: column; gap: 40px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }

.grid { display: flex; flex-wrap: wrap; gap: 20px; }
.card {
  flex: 1 1 var(--w, 240px); min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px;
}
.card--gray { background: var(--page-bg); }
.card p { font-size: 15px; line-height: 23px; color: var(--ink-2); }
.w-230 { --w: 230px; } .w-280 { --w: 280px; } .w-300 { --w: 300px; } .w-320 { --w: 320px; }

.badge {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-600);
}
.badge--ok { background: var(--success-100); color: var(--success-600); }
.badge--muted { background: var(--page-bg); color: var(--ink-muted); }
.stepnum {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-600); color: #fff; font-size: 18px; font-weight: 800;
}

.rows { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.row {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px;
}
.row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row h3 { font-size: 16px; line-height: 22px; font-weight: 700; }
.row p { font-size: 15px; line-height: 23px; color: var(--ink-2); }

.notice {
  display: flex; flex-direction: column; gap: 8px; max-width: 760px;
  background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--radius-lg); padding: 18px 20px;
}
.notice p { font-size: 15px; line-height: 23px; color: var(--ink-2); }
.notice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.notice--icon { flex: 1 1 360px; min-width: 0; flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px 18px; max-width: none; }
.notice--icon svg { color: var(--brand-600); margin-top: 1px; flex: none; }
.notice--icon p { font-size: 14px; line-height: 22px; }

.shot {
  width: 100%; max-width: 520px; background: #fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.shot img { width: 100%; border-radius: var(--radius-sm); }
.shot figcaption { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- Portada ---------- */
.hero { background: #fff; }
.hero__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
  padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px);
}
.hero__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__copy .lead { max-width: 560px; font-size: 18px; line-height: 29px; }
.hero__media { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--brand-100); color: var(--brand-700); font-size: 14px; line-height: 22px; font-weight: 700;
}
.status {
  width: 100%; max-width: 520px; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px;
  font-size: 15px; line-height: 23px; font-weight: 700; color: var(--success-600);
}
.status__icon {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--success-100); color: var(--success-600);
}

/* ---------- Precio ---------- */
.price { max-width: 760px; width: 100%; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.price__cols { display: flex; flex-wrap: wrap; gap: 32px 40px; padding: clamp(24px, 5vw, 44px); }
.price__col { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.price__vdiv { width: 1px; flex: none; background: var(--divider); }
@media (max-width: 700px) { .price__vdiv { display: none; } }
.price__label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.price__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.price__num { font-size: 48px; line-height: 1; font-weight: 800; color: var(--ink); }
.price__unit { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink-2); }
.price__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(24px, 5vw, 44px); background: var(--page-bg); border-top: 1px solid var(--divider);
}
.checks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.checks svg { color: var(--success-600); flex: none; margin-top: 1px; }

/* ---------- Preguntas frecuentes ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; width: 100%; }
.faq { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.faq__q {
  list-style: none; cursor: pointer; min-height: 64px; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--page-bg); }
.faq__q h3 { font-size: 16px; line-height: 22px; font-weight: 700; }
.faq__chev { color: var(--brand-600); flex: none; }
@media (prefers-reduced-motion: no-preference) { .faq__chev { transition: transform 0.15s ease; } }
.faq[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 20px 20px; font-size: 15px; line-height: 23px; color: var(--ink-2); }

/* ---------- Contacto y formulario ---------- */
.contact { display: flex; flex-wrap: wrap; gap: 40px; }
.form { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.form__row { display: flex; flex-wrap: wrap; gap: 20px; }
.field-group { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.field-group--full { flex-basis: 100%; }
/* En la columna del formulario el bloque no debe heredar la altura base de 240 px que usa en filas. */
.form > .field-group { flex: 0 0 auto; }
.lbl { font-size: 14.5px; line-height: 20px; font-weight: 700; color: var(--ink); }
.lbl small { font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.field {
  width: 100%; height: 52px; padding: 0 14px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 16px;
}
textarea.field { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.field::placeholder { color: var(--ink-placeholder); }
.field:hover { border-color: var(--brand-300); }
.field:focus { border-color: var(--brand-600); box-shadow: 0 0 0 4px var(--focus-halo); outline: none; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--brand-600); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__aside {
  flex: 1 1 300px; min-width: 0; align-self: flex-start;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--page-bg); border: 1px solid var(--divider); border-radius: var(--radius-xl); padding: 28px;
}
.cinfo { display: flex; align-items: center; gap: 14px; }
.cinfo__label { display: block; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.cinfo a { font-size: 20px; line-height: 28px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.contact__aside p { font-size: 14px; line-height: 22px; color: var(--ink-2); }

/* ---------- Páginas interiores ---------- */
.page-intro { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 24px; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.page-intro__head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.toc { display: flex; flex-direction: column; gap: 10px; }
.toc__title { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.chip:hover { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-700); }

.split { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.split__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split__text p { font-size: 17px; line-height: 27px; color: var(--ink-2); }
.split__media { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.split--top { align-items: flex-start; }

.scope__head { display: flex; align-items: center; gap: 12px; }
.card ul.list { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; font-size: 15px; line-height: 23px; color: var(--ink-2); }

.ref-list {
  list-style: none; max-width: 760px; width: 100%; padding: 8px 24px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ref-list li { padding: 6px 0; border-top: 1px solid var(--divider); }
.ref-list li:first-child { border-top: 0; }
.ref-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px;
  font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none;
}
.ref-list svg { flex: none; }

.cta-card {
  max-width: 760px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(24px, 5vw, 44px);
}

.dl-list { list-style: none; display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.dl-list li { display: flex; gap: 14px; font-size: 16px; line-height: 26px; color: var(--ink-2); }
.dl-list b { flex: none; width: 24px; font-weight: 800; color: var(--brand-600); }

/* ---------- Textos legales ---------- */
.legal {
  max-width: 760px; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  padding: clamp(24px, 5vw, 44px); display: flex; flex-direction: column; gap: 36px;
}
.legal section { display: flex; flex-direction: column; gap: 14px; }
.legal h2 { font-size: clamp(20px, 2.6vw, 24px); line-height: 1.25; }
.legal p, .legal li { font-size: 16px; line-height: 26px; color: var(--ink-2); }
.legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
.facts { display: flex; flex-direction: column; border-bottom: 1px solid var(--divider); }
.facts > div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--divider); }
.facts dt { flex: 0 0 200px; font-size: 13px; line-height: 22px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.facts dd { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); overflow-wrap: anywhere; }
.legal-updated { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- Mensajes de formulario / 404 ---------- */
.message { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(56px, 9vw, 112px); }
.message__icon { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--brand-600); }
.message__icon--ok { background: var(--success-100); color: var(--success-600); }

/* ---------- Pie ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--divider); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 32px; padding-bottom: 32px; }
.footer__inner img { height: 38px; width: auto; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 22px; color: var(--ink-2); text-decoration: underline; }
.footer__by { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.footer__by strong { color: var(--ink); }

@media print {
  .site-header, .site-footer, .menu, .skip-link { display: none; }
  body { color: #000; }
}

ol.grid--steps { list-style: none; }