/* ============================================================
   NoMásCaos — capa global de pulido visual (público)
   Se carga la ÚLTIMA. Solo añade acabado (transiciones, hover,
   foco accesible, selección, micro-interacción). No cambia
   layout ni colores base. Marca: #e30613.
   ============================================================ */

:root{
  --nmc-brand:#e30613;
  --nmc-brand-dark:#b00611;
  --nmc-brand-tint:#fdeaec;
  --nmc-ink:#0f172a;
  --nmc-muted:#64748b;
  --nmc-ring:0 0 0 3px rgba(227,6,19,.28);
  --nmc-ease:cubic-bezier(.22,.61,.36,1);
}

/* Tipografía más nítida en todo el sitio */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }

/* Selección de texto con color de marca */
::selection{ background:rgba(227,6,19,.16); color:var(--nmc-ink); }

/* Foco accesible y consistente (teclado) en toda la web pública */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none !important;
  box-shadow:var(--nmc-ring) !important;
  border-radius:12px;
}

@media (prefers-reduced-motion: no-preference){

  /* Transición suave y uniforme en elementos interactivos */
  a, button, .btn,
  [class*="-actions"] a,
  [class*="-card"],
  [class*="-panel"]{
    transition:transform .18s var(--nmc-ease),
               box-shadow .22s var(--nmc-ease),
               background-color .18s var(--nmc-ease),
               border-color .18s var(--nmc-ease),
               color .18s var(--nmc-ease);
  }

  /* Elevación al pasar el ratón por tarjetas */
  [class*="-card"]:hover{
    transform:translateY(-3px);
    box-shadow:0 26px 60px rgba(15,23,42,.14);
  }

  /* Botones: elevación + respuesta al pulsar */
  .btn:hover,
  [class*="-actions"] a:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(227,6,19,.22); }
  .btn:active,
  [class*="-actions"] a:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(227,6,19,.20); }

  /* Zoom sutil de imágenes dentro de tarjetas/galerías */
  [class*="-card"] img,
  [class*="gallery"] img,
  [class*="-media"] img{ transition:transform .5s var(--nmc-ease); will-change:transform; }
  [class*="-card"]:hover img,
  [class*="gallery"] a:hover img,
  [class*="-media"]:hover img{ transform:scale(1.045); }
}

/* Imágenes: nunca desbordan, esquinas coherentes */
img{ max-width:100%; height:auto; }

/* Enlaces de texto: subrayado más elegante */
p a:not(.btn),
li a:not(.btn){
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(227,6,19,.45);
}
p a:not(.btn):hover,
li a:not(.btn):hover{ text-decoration-color:var(--nmc-brand); color:var(--nmc-brand-dark); }

/* CTA fija / WhatsApp flotante: latido suave para captar la vista */
@media (prefers-reduced-motion: no-preference){
  [class*="whatsapp-float"],
  [class*="float-cta"],
  [class*="sticky-cta"]{ animation:nmc-pulse 2.6s var(--nmc-ease) infinite; }
  @keyframes nmc-pulse{
    0%,100%{ box-shadow:0 12px 30px rgba(37,211,102,.28); }
    50%{ box-shadow:0 12px 30px rgba(37,211,102,.28), 0 0 0 12px rgba(37,211,102,0); }
  }
}

/* Aparición suave de secciones al entrar en viewport (sin JS) */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    section[class*="nmc-"],
    .wrap > section{
      animation:nmc-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 32%;
    }
    @keyframes nmc-reveal{
      from{ opacity:0; transform:translateY(22px); }
      to{ opacity:1; transform:translateY(0); }
    }
  }
}

/* Barra de scroll discreta con acento de marca */
@media (min-width:900px){
  *{ scrollbar-width:thin; scrollbar-color:rgba(227,6,19,.5) transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:rgba(227,6,19,.45); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(227,6,19,.7); background-clip:content-box; }
}

/* ============================================================
   Barra de acciones prácticas (bajo la cabecera, toda la web)
   Convierte la web informativa en accionable: los 4 trabajos
   reales del usuario siempre a la vista.
   ============================================================ */
.nmc-quick-actions{ background:linear-gradient(180deg,#fff, #fbfbfd); border-bottom:1px solid rgba(15,23,42,.07); }
.nmc-quick-actions__inner{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  padding:14px 0;
}
.nmc-quick-actions a{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:#fff; border:1px solid rgba(15,23,42,.09); border-radius:18px;
  padding:12px 14px; color:var(--nmc-ink,#0f172a);
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}
@media (prefers-reduced-motion: no-preference){
  .nmc-quick-actions a{ transition:transform .18s var(--nmc-ease,ease), box-shadow .2s ease, border-color .2s ease; }
  .nmc-quick-actions a:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(227,6,19,.14); border-color:rgba(227,6,19,.35); }
}
.nmc-qa-ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--nmc-brand-tint,#fdeaec); color:var(--nmc-brand,#e30613);
}
.nmc-qa-ic svg{ width:23px; height:23px; }
.nmc-qa-tx{ display:grid; line-height:1.15; min-width:0; }
.nmc-qa-tx strong{ font-family:Sora,Inter,Arial,sans-serif; font-size:1rem; color:var(--nmc-ink,#0f172a); letter-spacing:-.01em; }
.nmc-qa-tx small{ color:var(--nmc-muted,#64748b); font-size:.82rem; }
/* Tile de WhatsApp con acento verde */
.nmc-quick-actions a.nmc-qa-wa .nmc-qa-ic{ background:#e7f9ee; color:#16a34a; }
.nmc-quick-actions a.nmc-qa-wa:hover{ box-shadow:0 20px 44px rgba(22,163,74,.16); border-color:rgba(22,163,74,.35); }

@media(max-width:900px){
  .nmc-quick-actions__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px 0; }
  .nmc-qa-tx small{ display:none; }
}
@media(max-width:400px){
  .nmc-qa-ic{ width:40px; height:40px; border-radius:12px; }
  .nmc-qa-tx strong{ font-size:.92rem; }
}