/* === nosotros.html === */
/* ── Nosotros: Hero ── */
    .about-hero {
      background: linear-gradient(145deg, var(--c-primary) 0%, #1a3557 55%, #1e4a8a 100%);
      color: var(--c-white);
      padding: var(--sp-16) 0 var(--sp-12);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .about-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 20% 80%, rgba(33,150,243,0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
      pointer-events: none;
    }
    .about-hero-content { position: relative; z-index: 1; }
    .about-hero h1 {
      color: var(--c-white);
      font-size: clamp(1.75rem, 4vw, 3rem);
      font-weight: 800;
      margin-bottom: var(--sp-4);
      letter-spacing: -0.5px;
    }
    .about-hero p {
      font-size: var(--text-lg);
      color: rgba(255,255,255,0.75);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── Stats ── */
    .stats-strip {
      background: var(--c-white);
      border-bottom: 1px solid var(--c-border);
      padding: var(--sp-8) 0;
    }
    .stats-grid {
      display: flex;
      justify-content: center;
      gap: var(--sp-16);
      flex-wrap: wrap;
    }
    .stat-item { text-align: center; }
    .stat-item strong {
      display: block;
      font-size: var(--text-3xl);
      font-weight: 800;
      color: var(--c-primary);
      line-height: 1;
      margin-bottom: var(--sp-1);
    }
    .stat-item span {
      font-size: var(--text-sm);
      color: var(--c-text-muted);
      font-weight: 600;
    }

    /* ── Misión & Visión ── */
    .mv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-8); }
    .mv-card {
      background: var(--c-white);
      border: 1.5px solid var(--c-border);
      border-radius: var(--r-xl);
      padding: var(--sp-8);
      box-shadow: var(--shadow-card);
      transition: box-shadow var(--t-base), transform var(--t-base);
    }
    .mv-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
    .mv-card-icon {
      width: 56px; height: 56px;
      background: var(--c-primary);
      border-radius: var(--r-lg);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      color: var(--c-white);
      margin-bottom: var(--sp-5);
    }
    .mv-card h3 {
      font-size: var(--text-xl);
      color: var(--c-primary);
      margin-bottom: var(--sp-3);
    }
    .mv-card p { color: var(--c-text-muted); line-height: 1.7; }

    /* ── Valores ── */
    .values-section { background: var(--c-bg-2); padding: var(--sp-12) 0; }
    .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); }
    .value-card {
      background: var(--c-white);
      border-radius: var(--r-xl);
      padding: var(--sp-6);
      text-align: center;
      box-shadow: var(--shadow-card);
      border: 1.5px solid var(--c-border);
      transition: box-shadow var(--t-base), transform var(--t-base);
    }
    .value-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
    .value-icon {
      width: 60px; height: 60px;
      background: var(--c-primary);
      border-radius: var(--r-lg);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      color: var(--c-white);
      margin: 0 auto var(--sp-4);
    }
    .value-card h4 {
      font-size: var(--text-lg);
      color: var(--c-primary);
      margin-bottom: var(--sp-2);
    }
    .value-card p { font-size: var(--text-sm); color: var(--c-text-muted); line-height: 1.6; }

    /* ── CTA Final ── */
    .cta-section {
      background: var(--c-primary);
      padding: var(--sp-16) 0;
      text-align: center;
      color: var(--c-white);
    }
    .cta-section h2 { color: var(--c-white); font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: var(--sp-4); }
    .cta-section p { color: rgba(255,255,255,0.75); font-size: var(--text-lg); margin-bottom: var(--sp-8); max-width: 500px; margin-left: auto; margin-right: auto; }
    .cta-buttons { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }
    .btn-primary {
      display: inline-flex; align-items: center; gap: var(--sp-2);
      background: var(--c-accent); color: var(--c-white);
      padding: var(--sp-4) var(--sp-8);
      border-radius: var(--r-full); font-size: var(--text-base); font-weight: 700;
      transition: background var(--t-base), transform var(--t-base);
      text-decoration: none;
    }
    .btn-primary:hover { background: var(--c-accent-dark); transform: translateY(-2px); }
    .btn-outline-white {
      display: inline-flex; align-items: center; gap: var(--sp-2);
      border: 2px solid rgba(255,255,255,0.4); color: var(--c-white);
      padding: var(--sp-4) var(--sp-8);
      border-radius: var(--r-full); font-size: var(--text-base); font-weight: 700;
      transition: border-color var(--t-base), background var(--t-base);
      text-decoration: none;
    }
    .btn-outline-white:hover { border-color: var(--c-white); background: rgba(255,255,255,0.1); }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .mv-cards { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: 1fr 1fr; }
      .stats-grid { gap: var(--sp-8); }
    }
    @media (max-width: 480px) {
      .values-grid { grid-template-columns: 1fr; }
    }

/* === perfil.html === */
.hidden { display: none !important; }

/* === privacidad.html === */
/* ── Privacidad: Hero simple ── */
    .legal-hero {
      background: var(--c-primary);
      color: var(--c-white);
      padding: var(--sp-12) 0 var(--sp-8);
    }
    .legal-hero h1 { color: var(--c-white); font-size: clamp(1.6rem, 3.5vw, 2.5rem); margin-bottom: var(--sp-2); }
    .legal-hero .update-date {
      display: inline-flex; align-items: center; gap: var(--sp-2);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.6);
      margin-top: var(--sp-3);
    }

    /* ── Prose layout ── */
    .legal-body {
      padding: var(--sp-12) 0 var(--sp-16);
    }
    .legal-wrap {
      max-width: 760px;
      margin: 0 auto;
    }
    .legal-section {
      padding-bottom: var(--sp-8);
      margin-bottom: var(--sp-8);
      border-bottom: 1px solid var(--c-border);
    }
    .legal-section:last-child {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
    .legal-section h3 {
      font-size: var(--text-xl);
      color: var(--c-primary);
      margin-bottom: var(--sp-4);
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }
    .legal-num {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 32px; height: 32px;
      background: var(--c-primary);
      color: var(--c-white);
      border-radius: var(--r-md);
      font-size: var(--text-sm);
      font-weight: 800;
      flex-shrink: 0;
    }
    .legal-section p {
      color: var(--c-text-muted);
      line-height: 1.8;
      margin-bottom: var(--sp-3);
    }
    .legal-section p:last-child { margin-bottom: 0; }
    .legal-section ul {
      list-style: disc;
      padding-left: var(--sp-6);
      color: var(--c-text-muted);
      line-height: 1.8;
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }
    .legal-section a { color: var(--c-accent); }
    .legal-section a:hover { text-decoration: underline; }

    /* Intro box */
    .legal-intro {
      background: var(--c-accent-light);
      border-left: 4px solid var(--c-accent);
      border-radius: var(--r-md);
      padding: var(--sp-4) var(--sp-5);
      margin-bottom: var(--sp-8);
      font-size: var(--text-sm);
      color: var(--c-primary);
      line-height: 1.7;
    }

    /* Data chip */
    .data-chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
      margin-top: var(--sp-3);
    }
    .data-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--c-bg-2);
      border: 1px solid var(--c-border);
      border-radius: var(--r-full);
      padding: 4px 12px;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--c-primary);
    }
    .data-chip i { color: var(--c-accent); font-size: 0.7rem; }

/* === registrar.html === */
/* ── HERO ─────────────────────────────────── */
    .reg-hero {
      background: var(--c-primary);
      color: #fff;
      padding: var(--sp-16) 0 var(--sp-12);
      text-align: center;
    }
    .reg-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: var(--sp-4); }
    .reg-hero p  { color: rgba(255,255,255,.8); font-size: var(--text-lg); max-width: 540px; margin: 0 auto var(--sp-6); }
    .reg-badge   { display: inline-block; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 6px 16px; border-radius: var(--r-full); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--sp-5); }

    /* ── CÓMO FUNCIONA ────────────────────────── */
    .steps-section { padding: var(--sp-16) 0; background: var(--c-bg-2); }
    .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-8); margin-top: var(--sp-10); }
    .step-card { text-align: center; }
    .step-num { width: 52px; height: 52px; background: var(--c-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; margin: 0 auto var(--sp-4); }
    .step-card h3 { font-size: var(--text-lg); color: var(--c-primary); margin-bottom: var(--sp-2); }
    .step-card p  { font-size: var(--text-sm); color: var(--c-text-muted); line-height: 1.6; }

    /* ── PLANES ───────────────────────────────── */
    .planes-section { padding: var(--sp-16) 0; }
    .planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-10); }
    .plan-card { border: 2px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-8); text-align: center; transition: border-color var(--t-base), box-shadow var(--t-base); }
    .plan-card.featured { border-color: #1877F2; box-shadow: 0 0 0 4px rgba(24,119,242,.1); }
    .plan-card.gold-card { border-color: #B8860B; box-shadow: 0 0 0 4px rgba(184,134,11,.1); }
    .plan-top-badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); margin-bottom: var(--sp-3); }
    .plan-top-badge.badge-popular { background: #EBF3FF; color: #1877F2; }
    .plan-top-badge.badge-gold    { background: #FFFBE6; color: #B8860B; }
    .plan-name  { font-size: var(--text-xl); font-weight: 800; color: var(--c-primary); margin-bottom: var(--sp-1); }
    .plan-price { font-size: 1.8rem; font-weight: 800; color: var(--c-primary); margin: var(--sp-3) 0; }
    .plan-price span { font-size: var(--text-sm); font-weight: 400; color: var(--c-text-muted); }
    .plan-features { list-style: none; padding: 0; margin: var(--sp-5) 0; text-align: left; }
    .plan-features li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--text-sm); color: var(--c-text-muted); margin-bottom: var(--sp-2); }
    .plan-features li .fi { flex-shrink: 0; width: 16px; text-align: center; }
    .plan-features li .fi.yes { color: var(--c-success); }
    .plan-features li .fi.no  { color: var(--c-text-muted); opacity: 0.4; }
    .plan-btn {
      display: block; width: 100%; padding: 12px 16px; margin-top: var(--sp-5);
      border-radius: var(--r-md); font-family: inherit; font-size: var(--text-base);
      font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
      border: 2px solid transparent; transition: opacity 0.15s;
    }
    .plan-btn:hover { opacity: 0.85; }
    .plan-btn-outline { background: transparent; border-color: var(--c-primary); color: var(--c-primary); }
    .plan-btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
    .plan-btn-gold    { background: #B8860B; border-color: #B8860B; color: #fff; }

    /* ── FORMULARIO WRAPPER ───────────────────── */
    .form-section { padding: var(--sp-16) 0; background: var(--c-bg-2); }
    .reg-form-wrap { max-width: 780px; margin: 0 auto; background: var(--c-white); border-radius: var(--r-2xl); box-shadow: var(--shadow-card); overflow: hidden; }

    /* ── STEPPER HEADER ───────────────────────── */
    .reg-stepper {
      display: flex;
      background: var(--c-primary);
      padding: var(--sp-6) var(--sp-8);
      gap: 0;
    }
    .reg-step {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      color: rgba(255,255,255,.5);
      font-size: var(--text-sm);
      font-weight: 700;
      position: relative;
    }
    .reg-step:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 60%;
      background: rgba(255,255,255,.2);
    }
    .reg-step-num {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.3);
      display: flex; align-items: center; justify-content: center;
      font-size: var(--text-sm);
      font-weight: 800;
      flex-shrink: 0;
      color: rgba(255,255,255,.5);
    }
    .reg-step.active { color: #fff; }
    .reg-step.active .reg-step-num {
      background: var(--c-accent);
      border-color: var(--c-accent);
      color: #fff;
    }
    .reg-step-label { line-height: 1.2; }
    .reg-step-label small { display: block; font-weight: 400; font-size: var(--text-xs); opacity: .7; }
    @media (max-width: 520px) {
      .reg-stepper { padding: var(--sp-4) var(--sp-4); gap: var(--sp-2); }
      .reg-step-label small { display: none; }
      .reg-step { font-size: var(--text-xs); gap: var(--sp-2); }
    }

    /* ── FORM BODY ────────────────────────────── */
    .reg-form-body { padding: var(--sp-8) var(--sp-10); }
    @media (max-width: 600px) { .reg-form-body { padding: var(--sp-6) var(--sp-5); } }

    .reg-section {
      padding-bottom: var(--sp-8);
      margin-bottom: var(--sp-8);
      border-bottom: 1.5px solid var(--c-border);
    }
    .reg-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

    .reg-section-header {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      margin-bottom: var(--sp-6);
    }
    .reg-section-icon {
      width: 40px; height: 40px;
      background: var(--c-primary);
      border-radius: var(--r-lg);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .reg-section-title { font-size: var(--text-lg); font-weight: 800; color: var(--c-primary); margin: 0; }
    .reg-section-sub   { font-size: var(--text-xs); color: var(--c-text-muted); margin: 2px 0 0; }

    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
    @media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

    .reg-form-group { margin-bottom: var(--sp-5); }
    .reg-form-group:last-child { margin-bottom: 0; }
    .reg-label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--c-text); margin-bottom: var(--sp-2); }
    .reg-label .req { color: var(--c-danger); }
    .reg-label .opt { font-weight: 400; color: var(--c-text-muted); font-size: var(--text-xs); }
    .reg-input, .reg-select, .reg-textarea {
      width: 100%; padding: 12px 14px; border: 1.5px solid var(--c-border);
      border-radius: var(--r-md); font-family: inherit; font-size: var(--text-base);
      color: var(--c-text); background: var(--c-white); transition: border-color var(--t-base);
      box-sizing: border-box;
    }
    .reg-input:focus, .reg-select:focus, .reg-textarea:focus { outline: none; border-color: var(--c-accent); }
    .reg-textarea { resize: vertical; min-height: 90px; }
    .reg-hint { font-size: var(--text-xs); color: var(--c-text-muted); margin-top: 5px; line-height: 1.5; }

    /* Phone prefix */
    .input-prefix-group { display: flex; }
    .input-prefix {
      background: var(--c-bg-2); border: 1.5px solid var(--c-border); border-right: none;
      border-radius: var(--r-md) 0 0 var(--r-md); padding: 12px 12px;
      font-size: var(--text-sm); font-weight: 700; color: var(--c-text-muted);
      white-space: nowrap; display: flex; align-items: center;
    }
    .input-prefix-group .reg-input { border-radius: 0 var(--r-md) var(--r-md) 0; }

    /* Tags chip picker */
    .tags-chip-picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-height: 36px; }
    .tags-chip-picker:empty::before { content: 'Selecciona un tipo de negocio primero'; font-size: var(--text-xs); color: var(--c-text-muted); align-self: center; }
    .tag-chip {
      padding: 5px 12px; border-radius: var(--r-full);
      border: 1.5px solid var(--c-border); background: var(--c-bg-2);
      font-size: var(--text-xs); font-weight: 700; cursor: pointer;
      transition: all 0.15s; font-family: inherit; color: var(--c-text);
    }
    .tag-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
    .tag-chip.selected { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

    /* ── SERVICIOS EDITOR (registro público) ──── */
    .reg-srv-row {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-2);
      margin-bottom: var(--sp-3);
      background: var(--c-bg-2);
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg);
      padding: var(--sp-3);
    }
    .reg-srv-fields {
      flex: 1;
      display: grid;
      grid-template-columns: 2fr 3fr 1fr;
      gap: var(--sp-2);
    }
    @media (max-width: 600px) { .reg-srv-fields { grid-template-columns: 1fr; } }
    .reg-srv-count { font-size: var(--text-xs); color: var(--c-text-muted); margin-bottom: var(--sp-3); }
    .reg-srv-add-btn { margin-top: var(--sp-2); }

    /* ── NOTA INFORMATIVA ─────────────────────── */
    .reg-info-box {
      background: #EBF3FF;
      border: 1px solid #BDD8FF;
      border-radius: var(--r-lg);
      padding: var(--sp-4) var(--sp-5);
      font-size: var(--text-sm);
      color: #1a3a6c;
      line-height: 1.6;
      margin-top: var(--sp-6);
    }
    .reg-info-box strong { color: var(--c-primary); }

    /* ── SUBMIT ───────────────────────────────── */
    .reg-submit-wrap { padding: var(--sp-6) var(--sp-10) var(--sp-8); border-top: 1.5px solid var(--c-border); }
    @media (max-width: 600px) { .reg-submit-wrap { padding: var(--sp-5); } }
    .reg-submit {
      width: 100%; padding: 16px;
      background: var(--c-primary); color: #fff; border: none;
      border-radius: var(--r-md); font-family: inherit; font-size: var(--text-lg);
      font-weight: 700; cursor: pointer; transition: background var(--t-base);
    }
    .reg-submit:hover { background: #1a3a5c; }
    .reg-submit:disabled { opacity: .6; cursor: not-allowed; }

    /* ── ERROR ────────────────────────────────── */
    .reg-error {
      background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626;
      border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
      font-size: var(--text-sm); margin: 0 var(--sp-10) var(--sp-4);
      display: none;
    }
    .reg-error.visible { display: block; }
    @media (max-width: 600px) { .reg-error { margin: 0 var(--sp-5) var(--sp-4); } }

    /* ── SUCCESS ──────────────────────────────── */
    .reg-success { display: none; text-align: center; padding: var(--sp-12) var(--sp-10); }
    .reg-success.visible { display: block; }
    .success-icon { font-size: 4rem; margin-bottom: var(--sp-4); }
    .reg-success h3 { color: var(--c-primary); font-size: var(--text-2xl); margin-bottom: var(--sp-3); }
    .reg-success p  { color: var(--c-text-muted); max-width: 460px; margin: 0 auto var(--sp-4); line-height: 1.7; }

    /* ── FAQ ──────────────────────────────────── */
    .faq-section { padding: var(--sp-16) 0; }
    .faq-list { max-width: 700px; margin: var(--sp-10) auto 0; }
    .faq-item { border-bottom: 1px solid var(--c-border); padding: var(--sp-5) 0; }
    .faq-q { font-weight: 700; color: var(--c-primary); margin-bottom: var(--sp-2); cursor: pointer; }
    .faq-a { color: var(--c-text-muted); font-size: var(--text-sm); line-height: 1.7; }

    .section-label { font-size: var(--text-sm); font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--sp-3); }
    .section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--c-primary); margin-bottom: var(--sp-4); }
    .section-sub   { color: var(--c-text-muted); max-width: 560px; margin: 0 auto; line-height: 1.7; }
    .text-center   { text-align: center; }

    /* ── Cobertura chips ───────────────────────── */
    .cobertura-chips { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
    .cob-chip {
      padding: 10px 18px; border: 2px solid var(--c-border); border-radius: var(--r-full);
      background: var(--c-white); font-size: var(--text-sm); font-weight: 600;
      color: var(--c-text-muted); cursor: pointer; transition: all var(--t-base);
      font-family: inherit;
    }
    .cob-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
    .cob-chip.active {
      border-color: var(--c-accent); background: var(--c-accent-light);
      color: var(--c-accent); font-weight: 700;
    }

    /* ── Horario builder ───────────────────────── */
    .horario-row {
      display: grid; grid-template-columns: 24px 110px 1fr; gap: var(--sp-3);
      align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border);
    }
    .horario-row:last-child { border-bottom: none; }
    .horario-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--c-accent); cursor: pointer; }
    .horario-dia { font-size: var(--text-sm); font-weight: 700; color: var(--c-primary); }
    .horario-times { display: flex; align-items: center; gap: var(--sp-2); }
    .horario-times input[type=time] {
      padding: 8px 10px; border: 1.5px solid var(--c-border); border-radius: var(--r-md);
      font-family: inherit; font-size: var(--text-sm); color: var(--c-text);
      background: var(--c-white); width: 110px;
    }
    .horario-times input[type=time]:focus { outline: none; border-color: var(--c-accent); }
    .horario-times .time-sep { color: var(--c-text-muted); font-size: var(--text-sm); font-weight: 600; }
    .horario-cerrado { font-size: var(--text-xs); color: var(--c-text-muted); font-style: italic; }
    .horario-row.closed .horario-times { display: none; }
    .horario-row.closed .horario-cerrado { display: inline; }
    .horario-row:not(.closed) .horario-cerrado { display: none; }
    @media (max-width: 500px) {
      .horario-row { grid-template-columns: 24px 80px 1fr; }
      .horario-times input[type=time] { width: 90px; }
    }

/* === sugerencias.html === */
/* ── Hero ── */
    .sug-hero {
      background: linear-gradient(145deg, var(--c-primary) 0%, #1a3557 55%, #1e4a8a 100%);
      color: var(--c-white);
      padding: var(--sp-12) 0 var(--sp-10);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .sug-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 75% 25%, rgba(33,150,243,0.1) 0%, transparent 50%);
      pointer-events: none;
    }
    .sug-hero-content { position: relative; z-index: 1; }
    .sug-hero h1 {
      color: var(--c-white);
      font-size: clamp(1.6rem, 3.5vw, 2.5rem);
      font-weight: 800;
      margin-bottom: var(--sp-3);
    }
    .sug-hero p {
      color: rgba(255,255,255,0.75);
      font-size: var(--text-lg);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── Sección del formulario ── */
    .sug-section { padding: var(--sp-12) 0 var(--sp-16); }

    .sug-form-wrap {
      max-width: 600px;
      margin: 0 auto;
      background: var(--c-white);
      border: 1.5px solid var(--c-border);
      border-radius: var(--r-2xl);
      padding: var(--sp-10);
      box-shadow: var(--shadow-card);
    }

    .sug-form-title {
      font-size: var(--text-2xl);
      color: var(--c-primary);
      margin-bottom: var(--sp-2);
      text-align: center;
    }
    .sug-form-subtitle {
      text-align: center;
      color: var(--c-text-muted);
      font-size: var(--text-sm);
      margin-bottom: var(--sp-8);
    }

    /* Campos del formulario — reutiliza clases de main.css (.form-group, .form-label, .form-input, etc.) */
    .sug-submit {
      width: 100%;
      padding: var(--sp-4);
      background: var(--c-primary);
      color: var(--c-white);
      border: none;
      border-radius: var(--r-md);
      font-family: var(--font);
      font-size: var(--text-lg);
      font-weight: 700;
      cursor: pointer;
      transition: background var(--t-base), transform var(--t-base);
      margin-top: var(--sp-4);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
    }
    .sug-submit:hover { background: var(--c-primary-mid); transform: translateY(-1px); }
    .sug-submit:active { transform: translateY(0); }
    .sug-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

    /* Estado de éxito */
    .sug-success {
      display: none;
      text-align: center;
      padding: var(--sp-8) var(--sp-4);
    }
    .sug-success.visible { display: block; }
    .sug-success-icon {
      width: 72px; height: 72px;
      background: var(--c-success-bg);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem;
      color: var(--c-success);
      margin: 0 auto var(--sp-5);
    }
    .sug-success h3 {
      font-size: var(--text-2xl);
      color: var(--c-primary);
      margin-bottom: var(--sp-3);
    }
    .sug-success p {
      color: var(--c-text-muted);
      line-height: 1.7;
      max-width: 420px;
      margin: 0 auto var(--sp-6);
    }
    .sug-success a {
      display: inline-flex; align-items: center; gap: var(--sp-2);
      color: var(--c-accent);
      font-weight: 700;
      font-size: var(--text-sm);
      transition: color var(--t-fast);
    }
    .sug-success a:hover { color: var(--c-accent-dark); text-decoration: underline; }

    /* Mensaje de error de validación */
    .field-error {
      font-size: var(--text-xs);
      color: var(--c-danger);
      margin-top: 4px;
      display: none;
    }
    .field-error.visible { display: block; }

    /* ── Otras formas de contacto ── */
    .contact-alt-section {
      background: var(--c-bg-2);
      padding: var(--sp-12) 0;
    }
    .contact-alt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
      margin-top: var(--sp-8);
    }
    .contact-alt-card {
      background: var(--c-white);
      border: 1.5px solid var(--c-border);
      border-radius: var(--r-xl);
      padding: var(--sp-6);
      text-align: center;
      box-shadow: var(--shadow-card);
      transition: box-shadow var(--t-base), transform var(--t-base);
      text-decoration: none;
      display: block;
      color: inherit;
    }
    .contact-alt-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
    .contact-alt-icon {
      width: 56px; height: 56px;
      border-radius: var(--r-lg);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      margin: 0 auto var(--sp-4);
    }
    .contact-alt-icon.wa  { background: #E8F5E9; color: #25D366; }
    .contact-alt-icon.em  { background: var(--c-accent-light); color: var(--c-accent); }
    .contact-alt-icon.ig  { background: #FCE4EC; color: #E91E63; }
    .contact-alt-card h4 {
      font-size: var(--text-base);
      color: var(--c-primary);
      margin-bottom: var(--sp-1);
    }
    .contact-alt-card p {
      font-size: var(--text-sm);
      color: var(--c-text-muted);
      line-height: 1.5;
    }
    .contact-alt-card .contact-link {
      display: inline-block;
      margin-top: var(--sp-3);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--c-accent);
    }

    @media (max-width: 768px) {
      .contact-alt-grid { grid-template-columns: 1fr; }
      .sug-form-wrap { padding: var(--sp-6); }
    }

/* === terminos.html === */
/* ── Términos: Hero simple ── */
    .legal-hero {
      background: var(--c-primary);
      color: var(--c-white);
      padding: var(--sp-12) 0 var(--sp-8);
    }
    .legal-hero h1 { color: var(--c-white); font-size: clamp(1.6rem, 3.5vw, 2.5rem); margin-bottom: var(--sp-2); }
    .legal-hero .update-date {
      display: inline-flex; align-items: center; gap: var(--sp-2);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.6);
      margin-top: var(--sp-3);
    }

    /* ── Prose layout ── */
    .legal-body {
      padding: var(--sp-12) 0 var(--sp-16);
    }
    .legal-wrap {
      max-width: 760px;
      margin: 0 auto;
    }
    .legal-section {
      padding-bottom: var(--sp-8);
      margin-bottom: var(--sp-8);
      border-bottom: 1px solid var(--c-border);
    }
    .legal-section:last-child {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
    .legal-section h3 {
      font-size: var(--text-xl);
      color: var(--c-primary);
      margin-bottom: var(--sp-4);
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }
    .legal-num {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 32px; height: 32px;
      background: var(--c-primary);
      color: var(--c-white);
      border-radius: var(--r-md);
      font-size: var(--text-sm);
      font-weight: 800;
      flex-shrink: 0;
    }
    .legal-section p {
      color: var(--c-text-muted);
      line-height: 1.8;
      margin-bottom: var(--sp-3);
    }
    .legal-section p:last-child { margin-bottom: 0; }
    .legal-section ul {
      list-style: disc;
      padding-left: var(--sp-6);
      color: var(--c-text-muted);
      line-height: 1.8;
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }
    .legal-section a { color: var(--c-accent); }
    .legal-section a:hover { text-decoration: underline; }

    /* Intro box */
    .legal-intro {
      background: var(--c-accent-light);
      border-left: 4px solid var(--c-accent);
      border-radius: var(--r-md);
      padding: var(--sp-4) var(--sp-5);
      margin-bottom: var(--sp-8);
      font-size: var(--text-sm);
      color: var(--c-primary);
      line-height: 1.7;
    }