:root {
      --crimson:      #B01020;
      --crimson-dark: #850B18;
      --crimson-glow: rgba(176, 16, 32, 0.12);
      --white:        #FFFFFF;
      --ivory:        #FAF8F5;
      --parchment:    #F2EEE8;
      --sand:         #E8E2D9;
      --warm-gray:    #9A9290;
      --charcoal:     #282420;
      --ink:          #1A1614;
      --whatsapp:     #25D366;
      --whatsapp-dark:#1aab52;
      --font-display: 'Playfair Display SC', Georgia, serif;
      --font-body:    'DM Sans', system-ui, sans-serif;
      --font-mono:    'DM Mono', monospace;
      --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    }
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: var(--font-body); background: var(--ivory); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

    #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--crimson); width: 0%; z-index: 9998; transition: width 0.1s linear; }

    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 64px; height: 76px;
      background: rgba(250, 248, 245, 0.95); border-bottom: 1px solid var(--sand);
      backdrop-filter: blur(16px) saturate(1.2); transition: box-shadow 0.4s var(--ease-out);
    }
    nav.scrolled { box-shadow: 0 1px 40px rgba(26, 22, 20, 0.08); }
    .nav-logo { font-family: var(--font-display); font-size: 22px; letter-spacing: 4px; color: var(--ink); text-decoration: none; }
    .nav-logo span { color: var(--crimson); }
    .nav-links { display: flex; gap: 44px; list-style: none; align-items: center; }
    .nav-links a { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--warm-gray); transition: color 0.25s; position: relative; }
    .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 1px; background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); }
    .nav-links a:hover { color: var(--ink); }
    .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
    .nav-links a.active { color: var(--crimson); }
    .nav-cta { background: var(--crimson) !important; color: var(--white) !important; padding: 10px 22px !important; font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 2.5px !important; transition: background 0.25s, transform 0.2s !important; }
    .nav-cta:hover { background: var(--crimson-dark) !important; transform: translateY(-1px) !important; }
    .nav-cta::after { display: none !important; }

    .page-header { margin-top: 76px; background: var(--charcoal); padding: 72px 80px 60px; position: relative; overflow: hidden; }
    .page-header::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,0.012) 40px, rgba(255,255,255,0.012) 41px); pointer-events: none; }
    .page-header-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; position: relative; z-index: 1; }
    .page-header-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: rgba(176,16,32,0.75); margin-bottom: 16px; }
    .page-header-tag::before { content: ''; width: 28px; height: 1px; background: rgba(176,16,32,0.75); }
    .page-header-title { font-family: var(--font-display); font-size: clamp(48px, 5vw, 80px); font-weight: 700; line-height: 1; color: var(--white); letter-spacing: 1px; }
    .page-header-title em { color: var(--crimson); font-style: italic; }
    .page-header-right { text-align: right; flex-shrink: 0; }
    .page-header-sub { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.35); line-height: 1.8; max-width: 300px; margin-bottom: 18px; }
    .breadcrumb { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
    .breadcrumb-item { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.2s; }
    .breadcrumb-item:hover { color: rgba(255,255,255,0.55); }
    .breadcrumb-sep { color: rgba(255,255,255,0.15); }
    .breadcrumb-item.current { color: var(--crimson); }

    .divider-crimson { height: 2px; background: linear-gradient(to right, var(--crimson) 60%, transparent); }

    .section-tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase; color: var(--crimson); margin-bottom: 16px; }
    .section-tag::before { content: ''; width: 24px; height: 1px; background: var(--crimson); }
    .section-title { font-family: var(--font-display); font-size: clamp(36px, 4vw, 58px); font-weight: 700; letter-spacing: 1px; line-height: 1.05; color: var(--ink); }

    #contacto-main { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; }

    .contacto-info { background: var(--parchment); padding: 88px 72px; display: flex; flex-direction: column; justify-content: center; }
    .contacto-info .section-title { margin-bottom: 10px; }
    .contacto-info-sub { font-size: 14px; font-weight: 300; color: var(--warm-gray); line-height: 1.8; margin-bottom: 44px; max-width: 360px; }

    .info-cards { display: flex; flex-direction: column; gap: 2px; }
    .info-card { display: flex; align-items: flex-start; gap: 18px; background: var(--white); border-left: 2px solid transparent; padding: 22px 26px; transition: border-color 0.25s, box-shadow 0.25s; text-decoration: none; }
    .info-card:hover { border-left-color: var(--crimson); box-shadow: 2px 0 20px rgba(0,0,0,0.04); }
    .info-card-icon { width: 40px; height: 40px; background: var(--crimson-glow); border: 1px solid rgba(176,16,32,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.25s, border-color 0.25s; }
    .info-card:hover .info-card-icon { background: var(--crimson); border-color: var(--crimson); }
    .info-card-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--crimson); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s; }
    .info-card-icon.wa-icon svg { fill: var(--crimson); stroke: none; transition: fill 0.25s; }
    .info-card:hover .info-card-icon svg { stroke: #fff; }
    .info-card:hover .info-card-icon.wa-icon svg { fill: #fff; stroke: none; }
    .info-card-label { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--warm-gray); display: block; margin-bottom: 3px; }
    .info-card-value { font-size: 15px; font-weight: 400; color: var(--ink); display: block; }
    .info-card-detail { font-size: 12px; font-weight: 300; color: var(--warm-gray); display: block; margin-top: 2px; }

    .info-horario { margin-top: 32px; border-top: 1px solid var(--sand); padding-top: 26px; }
    .horario-title { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 14px; }
    .horario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
    .horario-item { display: flex; justify-content: space-between; align-items: center; }
    .horario-day { font-size: 12px; font-weight: 300; color: var(--warm-gray); }
    .horario-time { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink); }
    .horario-item.closed .horario-time { color: rgba(176,16,32,0.55); }

    .contacto-form-panel { background: var(--ivory); padding: 88px 72px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
    .contacto-form-panel::after { content: 'NE'; position: absolute; right: -20px; bottom: -50px; font-family: var(--font-display); font-size: 280px; color: rgba(0,0,0,0.025); pointer-events: none; user-select: none; line-height: 1; }

    .form-header { margin-bottom: 40px; }
    .form-header .section-title { margin-bottom: 10px; }
    .form-header p { font-size: 14px; font-weight: 300; color: var(--warm-gray); line-height: 1.8; }

    .contact-form { display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
    .form-group { display: flex; flex-direction: column; gap: 7px; }
    .form-group label { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--warm-gray); }
    .form-group input, .form-group select, .form-group textarea { border: 1px solid var(--sand); padding: 13px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 300; color: var(--ink); background: var(--white); outline: none; transition: border-color 0.25s, box-shadow 0.25s; appearance: none; resize: none; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(176,16,32,0.08); }
    .form-group textarea { height: 110px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

    .btn-send-email { background: var(--crimson); color: var(--white); border: 1px solid var(--crimson); padding: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: background 0.25s, transform 0.2s var(--ease-out), box-shadow 0.3s; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
    .btn-send-email:hover:not(:disabled) { background: var(--crimson-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(176,16,32,0.22); }
    .btn-send-email:disabled { opacity: 0.65; cursor: wait; }
    .btn-send-email svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; flex-shrink: 0; }

    .btn-send-whatsapp { background: var(--whatsapp); color: var(--white); border: 1px solid var(--whatsapp); padding: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: background 0.25s, transform 0.2s var(--ease-out), box-shadow 0.3s; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
    .btn-send-whatsapp:hover:not(:disabled) { background: var(--whatsapp-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.25); }
    .btn-send-whatsapp:disabled { opacity: 0.65; cursor: wait; }
    .btn-send-whatsapp svg { width: 15px; height: 15px; fill: #fff; flex-shrink: 0; }

    .form-feedback { display: none; padding: 12px 16px; border-left: 2px solid var(--whatsapp); background: rgba(37,211,102,0.07); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: #1a7a40; font-weight: 500; }
    .form-feedback.show { display: block; }
    .form-feedback.error { border-left-color: var(--crimson); color: var(--crimson-dark); background: rgba(176,16,32,0.06); }

    #faq { padding: 96px 80px; background: var(--parchment); }
    .faq-header { margin-bottom: 48px; }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--sand); }
    .faq-item { background: var(--ivory); padding: 34px 42px; border-top: 2px solid transparent; transition: border-color 0.3s, background 0.3s; cursor: default; }
    .faq-item:hover { border-top-color: var(--crimson); background: var(--white); }
    .faq-q { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.5px; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
    .faq-a { font-size: 13px; font-weight: 300; color: var(--warm-gray); line-height: 1.8; }

    footer { background: var(--ink); padding: 44px 80px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 2px solid var(--crimson); }
    .footer-copy { font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.25); font-family: var(--font-mono); }
    .footer-back { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 8px; }
    .footer-back:hover { color: var(--crimson); }
    .footer-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    .page-header-tag   { animation: fadeUp 0.8s 0.1s var(--ease-out) both; }
    .page-header-title { animation: fadeUp 0.8s 0.25s var(--ease-out) both; }
    .page-header-right { animation: fadeUp 0.8s 0.4s var(--ease-out) both; }

    @media (max-width: 1024px) {
      nav { padding: 0 24px; }
      .nav-links { display: none; }
      .page-header { padding: 52px 28px 44px; }
      .page-header-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
      .page-header-right { text-align: left; }
      .breadcrumb { justify-content: flex-start; }
      #contacto-main { grid-template-columns: 1fr; }
      .contacto-info, .contacto-form-panel { padding: 60px 28px; }
      .contacto-form-panel::after { display: none; }
      .horario-grid { grid-template-columns: 1fr; }
      #faq { padding: 60px 28px; }
      .faq-grid { grid-template-columns: 1fr; }
      footer { padding: 36px 28px; }
    }
    @media (max-width: 480px) {
      .form-row { grid-template-columns: 1fr; }
    }
     .nav-logo {
      max-width: 230px;
      max-height: 100px;
      object-fit: contain;
      display: block;
      text-decoration: none;
    }