/* ============================================================
       MARKETING HIDALGO — Sistema de diseño
       Paleta: Obsidiana / Papel / Rosa mexicano / Bordado tenango
       Display: Archivo (ancho, 900) · Cuerpo: Archivo · Utility: Space Grotesk
       Firma visual: la "cinta tenango" (bordado multicolor de Hidalgo)
       ============================================================ */
    :root{
      --ink:        #191E29;   /* obsidiana */
      --ink-soft:   #4A5261;
      --paper:      #FFFFFF;
      --mist:       #F3F5F8;
      --line:       #E2E6EC;
      --rosa:       #D81E5B;   /* rosa mexicano — acento principal */
      --rosa-dark:  #B0154A;
      --marigold:   #F5A623;   /* solo en la cinta tenango */
      --nopal:      #0E8A7B;   /* solo en la cinta tenango */
      --azul:       #2F55C4;   /* solo en la cinta tenango */
      --radius: 14px;
      --wrap: 1120px;
      --font-display: "Archivo", sans-serif;
      --font-body: "Archivo", sans-serif;
      --font-util: "Space Grotesk", monospace;
    }

    *{ margin:0; padding:0; box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      *, *::before, *::after{ animation:none!important; transition:none!important; }
    }
    body{
      font-family:var(--font-body);
      font-variation-settings:"wdth" 100;
      color:var(--ink);
      background:var(--paper);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
    }
    img{ max-width:100%; height:auto; display:block; }
    a{ color:inherit; }
    :focus-visible{ outline:3px solid var(--rosa); outline-offset:3px; border-radius:4px; }

    .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.txt__white{
  color:#fff !important;
}

    /* ---------- Firma: cinta tenango ---------- */
    .tenango{
      height:6px;
      background:repeating-linear-gradient(90deg,
        var(--rosa) 0 28px,
        var(--marigold) 28px 56px,
        var(--nopal) 56px 84px,
        var(--azul) 84px 112px);
    }

    /* ---------- Header ---------- */
    header{
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(8px);
      transition:box-shadow .25s ease;
    }
    header.scrolled{ box-shadow:0 2px 18px rgba(25,30,41,.08); }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding-block:16px;
    }
    .logo{
      font-family:var(--font-display);
      font-weight:900; font-size:1.15rem; letter-spacing:-.01em;
      text-decoration:none; line-height:1.1;
    }
    .logo span{ color:var(--rosa); }
    .logo small{
      display:block; font-family:var(--font-util); font-weight:500;
      font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
    }
    .nav ul{ display:flex; gap:28px; list-style:none; align-items:center; }
    .nav ul a{
      text-decoration:none; font-size:.95rem; font-weight:500; color:var(--ink-soft);
      transition:color .2s;
    }
    .nav ul a:hover{ color:var(--rosa); }
    .btn{
      display:inline-block; text-decoration:none; font-weight:700;
      padding:13px 26px; border-radius:999px; font-size:.95rem;
      transition:transform .15s ease, background .2s, box-shadow .2s;
      border:2px solid transparent;
    }
    .btn:hover{ transform:translateY(-2px); }
    .btn-rosa{ background:var(--rosa); color:#fff; box-shadow:0 6px 20px rgba(216,30,91,.28); }
    .btn-rosa:hover{ background:var(--rosa-dark); }
    .btn-ghost{ border-color:var(--line); color:var(--ink); }
    .btn-ghost:hover{ border-color:var(--ink); }
    .nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
    .nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.25s; }

    /* ---------- Hero ---------- */
    .hero{ padding:88px 0 72px; }
    .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
    .eyebrow{
      font-family:var(--font-util); font-size:.72rem; font-weight:700;
      letter-spacing:.24em; text-transform:uppercase; color:var(--rosa);
      display:inline-flex; align-items:center; gap:10px;
    }
    .eyebrow::before{ content:""; width:26px; height:2px; background:var(--rosa); }
    .hero h1{
      font-family:var(--font-display); font-weight:900;
      font-variation-settings:"wdth" 112;
      font-size:clamp(2.3rem, 5.2vw, 3.9rem);
      line-height:1.03; letter-spacing:-.02em; margin:18px 0 22px;
      text-wrap:balance;
    }
    .hero h1 em{
      font-style:normal; color:var(--rosa);
      background:linear-gradient(transparent 78%, rgba(216,30,91,.18) 78%);
    }
    .hero p.lead{ font-size:1.15rem; color:var(--ink-soft); max-width:34rem; margin-bottom:32px; }
    .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
    .hero-visual{ position:relative; }
    .hero-visual img{
      border-radius:var(--radius);
      box-shadow:0 24px 60px rgba(25,30,41,.18);
      aspect-ratio:4/5; object-fit:cover;
    }
    .hero-visual::after{ /* marco desplazado, guiño a marco bordado */
      content:""; position:absolute; inset:18px -18px -18px 18px;
      border:2px solid var(--rosa); border-radius:var(--radius); z-index:-1;
    }
    .hero-badge{
      position:absolute; bottom:-20px; left:-20px;
      background:var(--ink); color:#fff; border-radius:12px;
      padding:14px 20px; font-family:var(--font-util); font-size:.8rem;
      line-height:1.4;
    }
    .hero-badge strong{ color:var(--marigold); font-size:1rem; display:block; }

    /* ---------- Nichos (barra de confianza) ---------- */
    .nichos{ border-block:1px solid var(--line); padding:22px 0; }
    .nichos .wrap{
      display:flex; gap:18px 40px; flex-wrap:wrap; justify-content:center;
      font-family:var(--font-util); font-size:.82rem; letter-spacing:.12em;
      text-transform:uppercase; color:var(--ink-soft);
    }
    .nichos b{ color:var(--rosa); font-weight:700; }

    /* ---------- Secciones ---------- */
    section{ padding:88px 0; }
    .sec-head{ max-width:640px; margin-bottom:52px; }
    .sec-head h2{
      font-family:var(--font-display); font-weight:900;
      font-variation-settings:"wdth" 110;
      font-size:clamp(1.7rem, 3.4vw, 2.5rem);
      line-height:1.12; letter-spacing:-.015em; margin:14px 0 14px;
      text-wrap:balance;
    }
    .sec-head p{ color:var(--ink-soft); font-size:1.05rem; }

    /* ---------- Servicios ---------- */
    .servicios{ background:var(--mist); }
    .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .card{
      background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
      padding:34px 30px; display:flex; flex-direction:column; position:relative;
      overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
    }
    .card::before{ /* cinta tenango que aparece al hover */
      content:""; position:absolute; top:0; left:0; right:0; height:6px;
      background:repeating-linear-gradient(90deg,
        var(--rosa) 0 20px, var(--marigold) 20px 40px, var(--nopal) 40px 60px, var(--azul) 60px 80px);
      transform:translateY(-6px); transition:transform .25s ease;
    }
    .card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(25,30,41,.10); }
    .card:hover::before{ transform:translateY(0); }
    .card h3{
      font-family:var(--font-display); font-weight:800; font-size:1.28rem;
      line-height:1.2; margin-bottom:12px; letter-spacing:-.01em;
    }
    .card p{ color:var(--ink-soft); font-size:.97rem; margin-bottom:18px; }
    .card ul{ list-style:none; margin-bottom:26px; }
    .card ul li{
      padding-left:26px; position:relative; font-size:.94rem; margin-bottom:9px;
    }
    .card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--rosa); font-weight:700; }
    .card .card-link{
      margin-top:auto; font-weight:700; color:var(--rosa); text-decoration:none;
      font-size:.95rem;
    }
    .card .card-link:hover{ text-decoration:underline; }
    .card .precio{
      font-family:var(--font-util); color:var(--rosa); font-weight:700;
      font-size:1.15rem; margin-bottom:16px;
    }
    .card.featured{ border-color:var(--rosa); box-shadow:0 18px 44px rgba(216,30,91,.14); }
    .card.featured::before{ transform:translateY(0); }
    .card .badge-destacado{
      position:absolute; top:16px; right:-32px; transform:rotate(45deg);
      background:var(--rosa); color:#fff; font-family:var(--font-util);
      font-size:.65rem; font-weight:700; letter-spacing:.1em;
      padding:4px 40px; text-transform:uppercase;
    }

    /* ---------- Cobertura local ---------- */
    .cobertura-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
    .ciudades{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
    .ciudades a{
      font-family:var(--font-util); font-size:.85rem; font-weight:500;
      text-decoration:none; padding:9px 18px; border:1.5px solid var(--line);
      border-radius:999px; color:var(--ink); transition:border-color .2s, color .2s;
    }
    .ciudades a:hover{ border-color:var(--rosa); color:var(--rosa); }
    .cobertura-mapa{
      background:var(--ink); color:#fff; border-radius:var(--radius);
      padding:40px; font-family:var(--font-util);
    }
    .cobertura-mapa h3{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; margin-bottom:18px; }
    .stat-row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:.9rem; }
    .stat-row:last-child{ border-bottom:0; }
    .stat-row strong{ color:var(--marigold); }

    /* ---------- Proceso ---------- */
    .proceso{ background:var(--mist); }
    .pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:paso; }
    .paso{
      background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
      padding:30px 26px; counter-increment:paso;
    }
    .paso::before{
      content:"0" counter(paso);
      font-family:var(--font-util); font-weight:700; font-size:.8rem;
      letter-spacing:.18em; color:var(--rosa);
      display:inline-block; margin-bottom:14px;
      border-bottom:2px solid var(--rosa); padding-bottom:4px;
    }
    .paso h3{ font-family:var(--font-display); font-weight:800; font-size:1.06rem; margin-bottom:10px; }
    .paso p{ font-size:.92rem; color:var(--ink-soft); }

    /* ---------- FAQs ---------- */
    .faq-list{ max-width:780px; }
    .faq-item{ border-bottom:1px solid var(--line); }
    .faq-q{
      width:100%; background:none; border:0; cursor:pointer;
      display:flex; justify-content:space-between; align-items:center; gap:18px;
      padding:24px 4px; text-align:left;
      font-family:var(--font-display); font-weight:700; font-size:1.06rem;
      color:var(--ink); line-height:1.35;
    }
    .faq-q .icon{
      flex:0 0 auto; width:28px; height:28px; border-radius:50%;
      border:2px solid var(--rosa); color:var(--rosa);
      display:grid; place-items:center; font-size:1.1rem; font-weight:700;
      transition:transform .25s ease, background .2s, color .2s;
    }
    .faq-q[aria-expanded="true"] .icon{ transform:rotate(45deg); background:var(--rosa); color:#fff; }
    .faq-a{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
    .faq-a p{ padding:0 4px 26px; color:var(--ink-soft); max-width:64ch; }

    /* ---------- Contacto ---------- */
    .contacto{ background:var(--ink); color:#fff; }
    .contacto .sec-head h2{ color:#fff; }
    .contacto .sec-head p{ color:rgba(255,255,255,.75); }
    .contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
    .nap{ font-family:var(--font-util); font-size:.95rem; line-height:2.1; }
    .nap a{ color:var(--marigold); text-decoration:none; }
    .nap a:hover{ text-decoration:underline; }
    .form-field{ margin-bottom:18px; }
    .form-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; font-family:var(--font-util); letter-spacing:.05em; }
    .form-field input, .form-field textarea{
      width:100%; padding:14px 16px; border-radius:10px; border:1.5px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.07); color:#fff; font-family:var(--font-body); font-size:1rem;
    }
    .form-field input::placeholder, .form-field textarea::placeholder{ color:rgba(255,255,255,.4); }
    .form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--marigold); border-color:transparent; }

    /* ---------- Footer ---------- */
    footer{ padding:56px 0 32px; border-top:1px solid var(--line); }
    .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px; }
    .footer-grid h4{ font-family:var(--font-util); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; color:var(--ink-soft); }
    .footer-grid ul{ list-style:none; }
    .footer-grid ul li{ margin-bottom:10px; }
    .footer-grid a{ text-decoration:none; color:var(--ink); font-size:.95rem; }
    .footer-grid a:hover{ color:var(--rosa); }
    .footer-bottom{
      display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
      padding-top:24px; border-top:1px solid var(--line);
      font-size:.85rem; color:var(--ink-soft); font-family:var(--font-util);
    }

    /* ---------- Contenido legal ---------- */
    .legal{ max-width:760px; }
    .legal h2{
      font-family:var(--font-display); font-weight:800; font-size:1.3rem;
      letter-spacing:-.01em; margin:40px 0 14px;
    }
    .legal h2:first-child{ margin-top:0; }
    .legal p{ color:var(--ink-soft); margin-bottom:16px; }
    .legal ul{ margin:0 0 16px 22px; color:var(--ink-soft); }
    .legal li{ margin-bottom:8px; }
    .legal strong{ color:var(--ink); }

    /* ---------- Reveal on scroll ---------- */
    .reveal{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
    .reveal.in{ opacity:1; transform:none; }
    @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

    /* ---------- Responsive ---------- */
    @media (max-width: 940px){
      .hero-grid, .cobertura-grid, .contacto-grid{ grid-template-columns:1fr; gap:44px; }
      .cards{ grid-template-columns:1fr; }
      .pasos{ grid-template-columns:1fr 1fr; }
      .hero{ padding:56px 0; }
      section{ padding:64px 0; }
      .hero-visual{ max-width:440px; }
      .nav ul{
        position:fixed; inset:64px 0 auto 0; background:var(--paper);
        flex-direction:column; padding:28px; gap:20px;
        border-bottom:1px solid var(--line);
        transform:translateY(-130%); transition:transform .3s ease;
      }
      .nav ul.open{ transform:none; }
      .nav-toggle{ display:block; }
      .footer-grid{ grid-template-columns:1fr; }
    }
    @media (max-width: 560px){
      .pasos{ grid-template-columns:1fr; }
    }