body { background: #f8fbff; }

    /* ── PAGE HERO ─────────────────────────────── */
    .contact-hero {
      background: linear-gradient(160deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
      padding: 9rem 0 5rem;
      position: relative;
      overflow: hidden;
    }
    .contact-hero::before {
      content:'';
      position:absolute; inset:0;
      background: radial-gradient(ellipse 70% 60% at 60% 40%, rgba(34,211,238,0.18) 0%, transparent 65%);
      pointer-events:none;
    }
    .contact-hero-grid {
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 55px 55px;
    }
    .contact-hero-wave {
      position:absolute; bottom:-2px; left:0; right:0; line-height:0;
    }
    .contact-hero-inner {
      position:relative; z-index:2; text-align:center;
    }
    .contact-hero-tag {
      display:inline-flex; align-items:center; gap:0.5rem;
      background:rgba(255,255,255,0.12);
      border:1px solid rgba(255,255,255,0.28);
      border-radius:50px; padding:0.35rem 1rem;
      font-family:var(--font-head); font-size:0.72rem; font-weight:700;
      color:#fff; letter-spacing:0.1em; text-transform:uppercase;
      margin-bottom:1.2rem; backdrop-filter:blur(8px);
    }
    .contact-hero h1 {
      font-family:var(--font-head);
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight:900; color:#fff; letter-spacing:-0.04em;
      line-height:1.1; margin-bottom:1rem;
    }
    .contact-hero h1 span {
      background: linear-gradient(135deg, #22d3ee, #fbbf24);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .contact-hero p {
      font-size:1rem; color:rgba(255,255,255,0.78);
      max-width:520px; margin:0 auto; line-height:1.75;
    }

    /* ── BODY ──────────────────────────────────── */
    .contact-body {
      padding: 5rem 0 7rem;
    }

    /* ── FORM CARD — centrada ──────────────────── */
    .contact-form-card {
      background: #ffffff;
      border: 1px solid #d1e9ff;
      border-radius: 24px;
      padding: 2.8rem;
      box-shadow: 0 4px 30px rgba(14,165,233,0.08);
      max-width: 680px;
      margin: 0 auto;
    }
    @media(max-width:600px){
      .contact-form-card { padding: 1.8rem 1.4rem; }
    }
    .contact-form-card h2 {
      font-family: var(--font-head);
      font-size: 1.5rem;
      font-weight: 800;
      color: #0c1f3f;
      letter-spacing: -0.03em;
      margin-bottom: 0.35rem;
    }
    .contact-form-card .form-sub {
      font-size: 0.88rem;
      color: #4a6080;
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    /* ── FORM FIELDS ───────────────────────────── */
    .cf-form { display:flex; flex-direction:column; gap:1.1rem; }

    .cf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media(max-width:560px){ .cf-row { grid-template-columns:1fr; } }

    .cf-field { display:flex; flex-direction:column; gap:0.32rem; }

    .cf-label {
      font-size: 0.74rem;
      font-weight: 700;
      color: #334e68;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .cf-label span { color: #0ea5e9; margin-left:2px; }

    .cf-input,
    .cf-select,
    .cf-textarea {
      width: 100%;
      box-sizing: border-box;
      background: #f8fbff;
      border: 1.5px solid #d1e9ff;
      border-radius: 10px;
      padding: 0.7rem 1rem;
      font-size: 0.9rem;
      color: #0c1f3f;
      font-family: var(--font-body, inherit);
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      outline: none;
      appearance: none;
    }
    .cf-input::placeholder, .cf-textarea::placeholder { color: #9bb5cc; }
    .cf-input:focus, .cf-select:focus, .cf-textarea:focus {
      border-color: #38bdf8;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
    }
    .cf-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a6080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
      cursor: pointer;
      color: #0c1f3f;
    }
    .cf-select option[value=""] { color: #9bb5cc; }
    .cf-textarea { resize: vertical; min-height: 120px; }

    .cf-input.cf-error, .cf-select.cf-error, .cf-textarea.cf-error {
      border-color: #f87171;
      background: #fff8f8;
    }
    .cf-error-msg { font-size: 0.7rem; color: #dc2626; display: none; }
    .cf-field.has-error .cf-error-msg { display: block; }

    /* ── SUBMIT ────────────────────────────────── */
    .cf-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      width: 100%;
      padding: 0.9rem 1.5rem;
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      cursor: pointer;
      font-family: var(--font-head, inherit);
      transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 6px 22px rgba(14,165,233,0.3);
      margin-top: 0.4rem;
    }
    .cf-submit:hover { opacity:0.9; transform:translateY(-2px); box-shadow:0 10px 30px rgba(14,165,233,0.4); }
    .cf-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

    .cf-spinner {
      display: none;
      width: 17px; height: 17px;
      border: 2px solid rgba(255,255,255,0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: cf-spin 0.7s linear infinite;
    }
    @keyframes cf-spin { to { transform: rotate(360deg); } }

    .cf-privacy {
      font-size: 0.72rem;
      color: #7a9ab8;
      text-align: center;
      line-height: 1.5;
      margin-top: 0.6rem;
    }

    /* ── SUCCESS ───────────────────────────────── */
    #cf-success {
      display: none;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 3rem 1rem;
      gap: 1rem;
    }
    .cf-success-icon {
      width: 72px; height: 72px;
      background: linear-gradient(135deg, #e8f4fd, #dbeafe);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 2.2rem;
      border: 2px solid #bae6fd;
    }
    #cf-success h3 { font-family:var(--font-head,inherit); font-size:1.4rem; font-weight:900; color:#0c1f3f; margin:0; }
    #cf-success p  { font-size:0.9rem; color:#4a6080; margin:0; max-width:360px; line-height:1.65; }
    .cf-back-btn {
      margin-top:0.5rem; padding:0.65rem 2rem;
      background:#0ea5e9; color:#fff; border:none; border-radius:10px;
      font-size:0.88rem; font-weight:700; cursor:pointer;
      font-family:var(--font-head,inherit); text-decoration:none;
      display:inline-block; transition:opacity 0.2s;
    }
    .cf-back-btn:hover { opacity:0.85; }