:root{
    --rose:#c17767;
    --rose-dark:#a85f4f;
    --rose-light:#f3e2dc;
    --green:#3a4a3a;
    --green-light:#5c7062;
    --cream:#faf6f1;
    --cream-dark:#f2ebe1;
    --ink:#2c2620;
    --ink-soft:#6b6259;
    --white:#ffffff;
    --radius:14px;
    --shadow:0 10px 30px rgba(44,38,32,0.08);
    --shadow-hover:0 16px 40px rgba(44,38,32,0.14);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins',sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.logo{font-family:'Poppins',sans-serif;font-weight:700;}
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  .container{max-width:1200px;margin:0 auto;padding:0 24px;}
  section{padding:72px 0;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 28px;border-radius:999px;font-weight:600;font-size:0.95rem;
    border:none;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--rose);color:#fff;box-shadow:0 8px 20px rgba(193,119,103,0.35);}
  .btn-primary:hover{background:var(--rose-dark);transform:translateY(-2px);}
  .btn-outline{background:transparent;color:var(--green);border:1.5px solid var(--green);}
  .btn-outline:hover{background:var(--green);color:#fff;}
  .btn-dark{background:var(--green);color:#fff;}
  .btn-dark:hover{background:var(--green-light);transform:translateY(-2px);}
  .eyebrow{
    text-transform:uppercase;letter-spacing:2px;font-size:0.78rem;font-weight:600;
    color:var(--rose-dark);margin-bottom:10px;display:block;
  }
  .section-title{font-size:2rem;font-weight:600;color:var(--ink);}
  .section-sub{color:var(--ink-soft);margin-top:10px;font-size:1rem;max-width:560px;}
  .center{text-align:center;margin-left:auto;margin-right:auto;}
  /* "mi" estilizado en cursiva, como en el logo (TODO PARA "mi" EVENTO MX) — para usarlo
     dentro de texto normal en vez de insertar la imagen del logo. */
  .brand-mi{font-style:italic;color:var(--rose-dark);}

  /* Header */
  header{
    position:sticky;top:0;z-index:100;background:rgba(250,246,241,0.92);
    backdrop-filter:blur(8px);border-bottom:1px solid rgba(44,38,32,0.06);
  }
  .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1300px;margin:0 auto;}
  .logo{font-size:1.5rem;font-weight:700;color:var(--green);flex-shrink:0;}
  .logo em{color:var(--rose);font-style:italic;font-weight:600;}
  .nav-links{display:flex;align-items:center;gap:24px;}
  .nav-links a{font-size:0.92rem;font-weight:500;color:var(--ink);transition:color .15s;}
  .nav-links a:hover{color:var(--rose);}
  .nav-actions{display:flex;align-items:center;gap:14px;}
  .icon-btn{font-size:1.15rem;color:var(--ink);cursor:pointer;transition:color .15s;}
  .icon-btn:hover{color:var(--rose);}
  .provider-avatar{
    border-radius:50%;flex-shrink:0;overflow:hidden;
    background:linear-gradient(135deg,var(--rose),var(--rose-dark));color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Poppins',sans-serif;font-weight:700;
  }
  .provider-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .provider-avatar.plan-ring-pro{box-shadow:0 0 0 2px var(--white),0 0 0 4px #b8bac0;}
  .provider-avatar.plan-ring-premium{box-shadow:0 0 0 2px var(--white),0 0 0 4px #d9a94a;}
  .avatar-plan-wrap{position:relative;display:inline-flex;flex-shrink:0;}
  .avatar-plan-seal{
    position:absolute;bottom:-2px;right:-2px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;
    box-shadow:0 0 0 2px var(--white);
  }
  .avatar-plan-seal.pro{background:linear-gradient(135deg,#b8bac0,#8a8d94);}
  .avatar-plan-seal.premium{background:linear-gradient(135deg,#f0cf7a,#c99b3f);}
  .plan-pill{
    display:inline-flex;align-items:center;gap:5px;
    font-size:0.7rem;font-weight:700;letter-spacing:.03em;
    padding:3px 10px;border-radius:999px;color:#fff;white-space:nowrap;
  }
  .plan-pill i{font-size:0.65rem;}
  .plan-pill-pro{background:linear-gradient(120deg,#8a8d94,#b8bac0);}
  .plan-pill-premium{background:linear-gradient(120deg,#a9782a,#d9a94a);}
  .plan-pill-corner{
    position:absolute;bottom:9px;right:9px;
    display:inline-flex;align-items:center;gap:4px;
    font-size:0.66rem;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap;
    padding:4px 10px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,0.25);
  }
  .plan-pill-corner i{font-size:0.62rem;}
  .plan-pill-corner.pro{background:linear-gradient(120deg,#8a8d94,#b8bac0);}
  .plan-pill-corner.premium{background:linear-gradient(120deg,#a9782a,#d9a94a);}
  .menu-toggle{display:none;font-size:1.4rem;background:none;border:none;color:var(--green);cursor:pointer;}
  .login-dropdown{position:relative;}
  .login-dropdown-toggle{
    display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;white-space:nowrap;
    color:var(--ink);font-family:inherit;font-size:0.88rem;font-weight:500;padding:6px 2px;transition:color .15s;
  }
  .login-dropdown-toggle:hover{color:var(--rose);}
  .login-dropdown-toggle i.fa-chevron-down{font-size:0.7rem;transition:transform .15s;}
  .login-dropdown.open .login-dropdown-toggle i.fa-chevron-down{transform:rotate(180deg);}
  .login-dropdown-menu{
    position:absolute;top:calc(100% + 12px);right:0;background:#fff;border-radius:12px;
    box-shadow:var(--shadow-hover);min-width:190px;padding:8px;z-index:200;
  }
  .login-dropdown-menu a{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
    font-size:0.88rem;font-weight:500;color:var(--ink);transition:background .15s;
  }
  .login-dropdown-menu a i{width:16px;text-align:center;color:var(--rose-dark);}
  .login-dropdown-menu a:hover{background:var(--cream-dark);}
  .login-dropdown-menu a + a{margin-top:2px;}
  /* En el header móvil el acceso rápido "Iniciar sesión" (icono + desplegable de
     Soy cliente / Soy proveedor) se queda visible en la barra — así el header móvil
     trae logo + Iniciar sesión + ☰. El botón "Publica tu negocio" (para quien no ha
     iniciado sesión) se mueve dentro del menú (☰) en su lugar. */
  .nav-mobile-publish{display:none;}
  @media (max-width:1240px){
    .nav-actions .btn-guest-publish{display:none;}
    .nav-mobile-publish{
      display:block;width:100%;
      margin-top:6px;padding-top:14px;border-top:1px solid rgba(44,38,32,0.08);
    }
    .nav-mobile-publish-link{
      display:inline-flex;align-items:center;gap:8px;
      background:var(--rose);color:#fff;font-weight:600;font-size:0.92rem;
      padding:10px 20px;border-radius:30px;
    }
    .nav-mobile-publish-link:hover{background:var(--rose-dark);}
    .nav-mobile-publish-link i{font-size:0.85rem;}
  }

  /* Hero */
  .hero{
    position:relative;overflow:hidden;padding:0;
    background:
      radial-gradient(ellipse at 20% 20%, rgba(193,119,103,0.35), transparent 55%),
      radial-gradient(ellipse at 80% 0%, rgba(58,74,58,0.45), transparent 50%),
      linear-gradient(160deg,#2c2620 0%, #4a3d33 45%, #7a5847 75%, #c17767 100%);
    min-height:620px;display:flex;align-items:center;
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size:26px 26px;opacity:0.08;pointer-events:none;
  }
  .hero-inner{position:relative;z-index:2;padding:32px 24px 28px;max-width:1200px;margin:0 auto;width:100%;}
  .hero h1{
    color:#fff;font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:600;max-width:680px;
    line-height:1.2;
  }
  .hero h1 .accent{color:#f4c9b8;font-style:italic;}
  .hero p{color:rgba(255,255,255,0.85);font-size:1.05rem;margin-top:18px;max-width:520px;}
  .search-card{
    background:#fff;border-radius:18px;padding:14px;margin-top:36px;max-width:640px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);display:flex;gap:10px;flex-wrap:wrap;
  }
  .search-field{
    flex:1 1 200px;display:flex;align-items:center;gap:10px;padding:10px 16px;
    border-radius:12px;background:var(--cream-dark);
  }
  .search-field i{color:var(--rose-dark);}
  .search-field input{border:none;background:none;outline:none;font-family:'Poppins',sans-serif;font-size:0.95rem;width:100%;color:var(--ink);}
  .search-card .btn-primary{flex:0 0 auto;}
  .trust-badges{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap;}
  .trust-badges span{color:rgba(255,255,255,0.9);font-size:0.9rem;display:flex;align-items:center;gap:8px;}
  .trust-badges i{color:#f4c9b8;}

  /* Categories */
  .cat-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:26px;
  }
  .cat-card{
    position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/3.6;
    display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;
    cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:var(--shadow);
  }
  .cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
  .cat-bg{position:absolute;inset:0;}
  .cat1 .cat-bg{background:linear-gradient(155deg,#8a5a4d,#3a2b24);}
  .cat2 .cat-bg{background:linear-gradient(155deg,#2c2620,#5c4636);}
  .cat3 .cat-bg{background:linear-gradient(155deg,#5c7062,#2c3a2e);}
  .cat4 .cat-bg{background:linear-gradient(155deg,#c17767,#8a5245);}
  .cat5 .cat-bg{background:linear-gradient(155deg,#7a5847,#2c2620);}
  .cat6 .cat-bg{background:linear-gradient(155deg,#e3b8a8,#a85f4f);}
  .cat-card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 35%, transparent 72%);}
  .cat-icon{
    position:absolute;top:18px;left:50%;transform:translateX(-50%);
    width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.92);
    display:flex;align-items:center;justify-content:center;color:var(--rose-dark);font-size:1.1rem;
  }
  .cat-label{position:relative;color:#fff;font-weight:600;font-size:1rem;text-align:center;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 1px 10px rgba(0,0,0,0.5);}

  /* Providers */
  .providers-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
  .see-all{color:var(--rose-dark);font-weight:600;font-size:0.92rem;display:inline-flex;align-items:center;gap:6px;}
  .prov-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:36px;}
  .prov-card{
    background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .prov-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
  .prov-photo{
    height:140px;position:relative;
    background:linear-gradient(135deg,var(--rose-light),var(--cream-dark));
    display:flex;align-items:center;justify-content:center;color:var(--rose-dark);font-size:1.6rem;
  }
  .fav-heart{
    position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;
    color:var(--rose);font-size:0.9rem;cursor:pointer;
  }
  .fav-heart.active i{font-weight:900;}
  /* Insignia de "Promoción" — misma esquina inferior que .plan-pill-corner, pero del lado
     izquierdo, para que un proveedor Pro/Premium con promoción activa pueda traer las dos a la
     vez sin que se encimen. */
  .promo-badge-corner{
    position:absolute;bottom:9px;left:9px;
    display:inline-flex;align-items:center;gap:4px;
    font-size:0.66rem;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap;
    padding:4px 10px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,0.25);
    background:linear-gradient(120deg,var(--rose),var(--rose-dark));
  }
  .promo-badge-corner i{font-size:0.62rem;}
  .prov-body{padding:16px;}
  .prov-name-row{display:flex;align-items:center;gap:8px;}
  .prov-body h3{
    font-size:1.02rem;font-weight:600;font-family:'Poppins',sans-serif;min-width:0;
    /* Respaldo para el caso raro de una sola palabra larguísima sin ningún símbolo
       (ni &, /, -, ni cambio de minúscula a mayúscula) donde nombre_con_quiebres()
       no tiene dónde meter un punto de quiebre invisible. */
    overflow-wrap:break-word;word-break:break-word;
    /* Máximo 2 renglones: si aun así el nombre no cupo, se recorta con "..." en vez
       de seguir empujando la tarjeta hacia abajo o saliéndose de ella. */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;
  }
  .prov-cat{color:var(--ink-soft);font-size:0.85rem;margin-top:2px;}
  .prov-rating{color:#e0a542;font-size:0.85rem;margin-top:8px;display:flex;align-items:center;gap:6px;}
  .prov-rating span{color:var(--ink-soft);}
  .prov-rating.sin-resenas{color:var(--ink-soft);font-style:italic;}
  .prov-loc{margin-top:8px;font-size:0.82rem;color:var(--ink-soft);display:flex;align-items:center;gap:6px;}

  /* CTA banner */
  .cta-banner{
    background:linear-gradient(120deg,var(--green),#4d5f4f);
    border-radius:24px;padding:52px;display:flex;justify-content:space-between;
    align-items:center;gap:40px;flex-wrap:wrap;color:#fff;
  }
  .cta-banner h2{color:#fff;font-size:1.7rem;max-width:620px;}
  /* Variante clara de .brand-mi para usarse sobre fondos oscuros (como este banner verde) —
     el rosa oscuro normal no contrasta bien ahí, así que usamos el mismo rosa claro que ya
     usan los íconos de esta tarjeta. */
  .cta-banner .brand-mi{color:#f4c9b8;}
  .cta-list{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap;}
  .cta-list div{display:flex;align-items:center;gap:10px;font-size:0.92rem;max-width:180px;}
  .cta-list i{font-size:1.2rem;color:#f4c9b8;}
  .cta-side{
    background:#fff;color:var(--ink);border-radius:18px;padding:26px 30px;text-align:center;
    min-width:220px;
  }
  .cta-side .price-word{font-family:'Poppins',sans-serif;font-weight:600;font-style:italic;color:var(--rose-dark);font-size:1.3rem;display:block;margin:4px 0 14px;}
  .cta-side small{display:block;margin-top:10px;color:var(--ink-soft);}

  /* Why choose us */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:20px;}
  .why-card{text-align:center;padding:12px;}
  .why-icon{
    width:64px;height:64px;border-radius:50%;background:var(--rose-light);color:var(--rose-dark);
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 16px;
  }
  .why-card h3{font-size:1.05rem;font-weight:600;}
  .why-card p{color:var(--ink-soft);font-size:0.9rem;margin-top:8px;}

  /* Newsletter */
  .newsletter{
    background:linear-gradient(120deg,var(--rose),var(--rose-dark));
    border-radius:24px;padding:48px;display:flex;justify-content:space-between;
    align-items:center;gap:30px;flex-wrap:wrap;color:#fff;
  }
  .newsletter h2{color:#fff;font-size:1.5rem;}
  .newsletter p{color:rgba(255,255,255,0.9);margin-top:6px;}
  .news-form{display:flex;gap:10px;flex-wrap:wrap;}
  .news-form input{
    padding:14px 18px;border-radius:999px;border:none;outline:none;min-width:240px;
    font-family:'Poppins',sans-serif;
  }
  .news-form button{background:var(--green);color:#fff;}
  .news-form button:hover{background:var(--green-light);}

  /* Footer */
  footer{background:#241f1a;color:rgba(255,255,255,0.75);padding:64px 0 0;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:32px;padding-bottom:44px;}
  .footer-grid .logo{color:#fff;font-size:1.3rem;}
  .footer-grid p{margin-top:14px;font-size:0.88rem;line-height:1.7;}
  .footer-grid h4{color:#fff;font-size:0.95rem;margin-bottom:16px;font-weight:600;}
  .footer-grid ul li{margin-bottom:10px;font-size:0.88rem;display:flex;align-items:flex-start;gap:8px;}
  .footer-grid ul li i{margin-top:3px;flex-shrink:0;}
  .footer-grid ul li span{overflow-wrap:break-word;min-width:0;}
  .footer-grid ul li a:hover{color:#fff;}
  .footer-social{display:flex;gap:12px;margin-top:20px;}
  .footer-social a{
    width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);
    display:flex;align-items:center;justify-content:center;transition:background .15s;
  }
  .footer-social a:hover{background:var(--rose);}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);padding:22px 0;text-align:center;
    font-size:0.82rem;color:rgba(255,255,255,0.5);
  }

  @media (max-width:1240px){
    .nav-links{display:none;}
    .menu-toggle{display:block;margin-left:14px;}
    .nav-wrap{flex-wrap:wrap;row-gap:8px;}
    header .logo img{height:26px !important;}
  }
  @media (max-width:980px){
    .cat-grid{grid-template-columns:repeat(3,1fr);}
    .prov-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:repeat(2,1fr);}
    .nav-wrap{padding:14px 16px;}
    .nav-actions{gap:8px;}
    .nav-actions .btn-primary{padding:9px 14px;font-size:0.8rem;}
    /* El botón de cuenta (Mi lista / Mi panel / Admin) trae su tamaño de escritorio
       escrito como style="" directo en el HTML de cada página (para no tener que crear
       una clase nueva) -- eso pesa más que cualquier regla de aquí, así que sin
       !important esta reducción nunca se aplicaba y el botón se quedaba en su tamaño
       de escritorio en cualquier ancho de pantalla. */
    .nav-actions .btn-outline{padding:8px 14px !important;font-size:0.8rem !important;}
  }
  @media (max-width:480px){
    /* El logo a 19.2px (x1.2) se salía de la línea en pantallas de ~390-393px de ancho
       (iPhone estándar) porque el bloque de "Iniciar sesión" + la hamburguesa ya usan
       casi todo el ancho disponible -- por eso se recortó el padding lateral y los
       espacios internos aquí, para hacerle lugar al logo más grande sin que se baje de
       renglón. Con esto sí cabe en pantallas de ~376px en adelante. */
    .nav-wrap{flex-wrap:wrap;row-gap:8px;padding:14px 12px 14px 6px;}
    header .logo img{height:18px !important;}
    /* Antes gap:4px -- cabía en una sola línea, pero el botón de cuenta, el ícono de cerrar
       sesión y la hamburguesa quedaban pegados entre sí (se sentía "aplastado" aunque no se
       partiera de renglón). Hay margen de sobra en este ancho (el logo no llega a tocar este
       grupo ni de cerca), así que se le da más aire sin riesgo de que se rompa la línea. */
    .nav-actions{gap:11px;}
    .login-dropdown-toggle{padding:6px 0;font-size:0.76rem;gap:2px;}
    .nav-actions .btn-primary{font-size:0;padding:9px 12px;}
    .nav-actions .btn-primary::before{content:"Publicar";font-size:0.78rem;}
    /* Mismo motivo que arriba: el botón de cuenta (Mi lista / Mi panel / Admin) traía un
       tamaño fijo por style="" que nunca dejaba lugar para el ícono de cerrar sesión y la
       hamburguesa en pantallas angostas (~393px, iPhone estándar) -- eso era lo que hacía
       que el encabezado se partiera en dos renglones al iniciar sesión. Aquí se encoge
       un poco más (nunca en escritorio, solo en este ancho) para que quepan los tres
       elementos en una sola línea. */
    .nav-actions .btn-outline{padding:7px 10px !important;font-size:0.72rem !important;gap:5px;}
    .nav-actions .icon-btn{font-size:1rem;}
    /* El margin-left extra ya no hace falta -- el gap de .nav-actions de arriba separa la
       hamburguesa del ícono de cerrar sesión igual que separa a los otros dos elementos. */
    .menu-toggle{font-size:1.25rem;}
  }
  @media (max-width:383px){
    /* En pantallas más angostas que esto (celulares más chicos/viejos) ya no alcanza el
       espacio ni con el padding recortado -- aquí se regresa el logo a su tamaño
       original para que "Iniciar sesión" y la hamburguesa no se bajen de renglón.
       Verificado: 384px es el punto exacto donde deja de caber en una sola línea (se
       corrió un poco al agregarle más aire al padding derecho del header). */
    header .logo img{height:16px !important;}
  }
  @media (max-width:600px){
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    section{padding:52px 0;}
    .cta-banner,.newsletter{padding:32px 22px;}
    .footer-grid{grid-template-columns:1fr;}

    /* Hero más compacto en móvil: la versión de escritorio deja mucho aire
       arriba/abajo (min-height:620px + padding:100px/90px) y en pantallas
       angostas eso empuja el resto del sitio fuera de la primera pantalla. */
    .hero{min-height:0;}
    .hero-inner{padding:52px 20px 36px;}
    .hero h1{font-size:1.65rem;line-height:1.25;}
    .hero p{font-size:0.92rem;margin-top:12px;}
    .search-card{margin-top:20px;padding:10px;gap:8px;}
    .search-field{padding:9px 14px;}
    .search-field input{font-size:0.9rem;}
    .trust-badges{gap:12px 18px;margin-top:16px;}
    .trust-badges span{font-size:0.78rem;gap:6px;}

    /* "¿Eres proveedor de eventos?" también quedaba muy alto en móvil */
    .cta-banner{padding:26px 20px;border-radius:18px;gap:16px;}
    .cta-banner h2{font-size:1.15rem;line-height:1.3;}
    .cta-list{gap:10px;margin-top:10px;}
    .cta-list div{font-size:0.82rem;max-width:none;gap:8px;}
    .cta-side{padding:16px 20px;min-width:0;width:100%;}
    .cta-side .price-word{margin:2px 0 10px;}
    .cta-side small{margin-top:6px;}

    /* Encabezados de sección y la cuadrícula "¿Por qué elegirnos?" también
       dejaban mucho espacio muerto en celular (título grande + gap/márgenes
       pensados para escritorio). */
    section{padding:40px 0;}
    .section-title{font-size:1.5rem;line-height:1.3;}
    .cat-grid{margin-top:24px;gap:14px;}
    .why-grid{gap:26px 18px;margin-top:24px;}
    .why-card{padding:6px;}
    .why-icon{width:52px;height:52px;font-size:1.15rem;margin:0 auto 10px;}
    .why-card h3{font-size:0.98rem;}
    .why-card p{font-size:0.85rem;margin-top:6px;line-height:1.45;}
  }