/* =========================================================
   PINTURERÍA SILVA – UI BASE (COMPLETO)
   ========================================================= */

:root{
  /* Paleta */
  --brown:#3b2b23;
  --yellow:#ffd700;
  --cream:#f7f3ee;

  /* Texto */
  --text:#1e1e1e;
  --muted:#6b6b6b;

  /* Tokens */
  --radius:14px;
  --shadow:0 12px 28px rgba(0,0,0,.08);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --glow:0 8px 24px rgba(255,215,0,.22);

  /* Tamaños */
  --social-size:36px;
  --nav-social-size:44px;
}

/* ===== Reset + base tipográfica ===== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

/* ===== Accesibilidad: skip link ===== */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  background:#fff; padding:8px 12px; border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.12)
}

/* ===== Contenedores y secciones ===== */
.container{ width:min(1140px,92%); margin-inline:auto }
.section{ padding:76px 0 }
.section--alt{ background:var(--cream) }
.section__title{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(1.6rem,2.2vw,2.2rem);
  margin:0 0 10px; color:var(--brown);
}
.section__subtitle{ margin:0 0 28px; color:var(--muted) }

/* Despeje para anclas bajo header sticky */
section[id]{ scroll-margin-top: 96px; }
@media (min-width:861px){
  section[id]{ scroll-margin-top: 110px; }
}

/* =========================================================
   HEADER STICKY + PROGRESO DE LECTURA
   ========================================================= */
.header{
  position:sticky; top:0; z-index:20;
  background:#000; /* Header negro */
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:transform .35s var(--ease-out), background .35s var(--ease-out);
}
.header--scrolled{ background:#000; transform:translateY(-6px) }

.header__inner{ display:flex; align-items:center; gap:16px; padding:12px 0 }
.brand{ display:flex; align-items:center }
.logo{ height:56px }
@media (min-width:861px){
  .logo{ height:72px }
  .header--scrolled .logo{ height:64px }
}

/* Barra de progreso (lectura) */
.header__progress{
  position:absolute; left:0; right:0; bottom:0;
  height:3px; background:rgba(255,255,255,.10); overflow:hidden; pointer-events:none;
}
.header__progress .bar{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#ffdf6d,#ffd700);
  box-shadow:0 2px 8px rgba(255,215,0,.35) inset;
  transition:width .15s linear;
}

/* =========================================================
   NAVEGACIÓN (Desktop + Mobile) – Menú moderno
   ========================================================= */
.nav{ display:flex; gap:22px; align-items:center; margin-left:auto }
.nav a{
  color:#fff; font-weight:600; position:relative;
  font-family:'Poppins',sans-serif; font-size:.98rem; padding:6px 0;
}

/* Toggle móvil */
.nav-toggle{ display:none; width:44px; height:44px; border:none; background:transparent; margin-left:auto; cursor:pointer }
.nav-toggle span{ display:block; height:3px; background:#fff; margin:7px 0; border-radius:2px }

@media (max-width:860px){
  .nav-toggle{ display:block }
  .nav{
    position:fixed; inset:72px 0 auto 0; background:#000; /* mantiene negro en mobile */
    flex-direction:column; gap:12px; padding:6px 8px; /* compacto */
    transform:translateY(-120%); transition:transform .25s var(--ease-out);
    box-shadow:0 8px 20px rgba(0,0,0,.3);
  }
  .nav.is-open{ transform:translateY(0) }
}

/* ---- Pills + Indicador ---- */
.nav--modern{ position:relative; gap:6px }
.nav--modern a{
  position:relative; z-index:1;
  padding:10px 14px; border-radius:999px; line-height:1; letter-spacing:.2px;
  transition:
    background .25s var(--ease-out),
    color .25s var(--ease-out),
    transform .15s var(--ease-out),
    box-shadow .25s var(--ease-out),
    text-shadow .25s var(--ease-out);
}

/* Indicador (visible si se usa; en tu HTML se oculta con inline CSS) */
.nav__indicator{ height:3px; background:var(--yellow); border-radius:2px; position:absolute; bottom:-4px; left:0; right:auto; width:0 }

/* Activo */
.nav--modern a.is-active{
  color:#fff;
  background:transparent;
  border-radius:999px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.20),
    0 0 10px rgba(255,255,0,.15);
  transform:none;
}

/* Hover/focus */
.nav--modern a:not(.btn--store):hover,
.nav--modern a:not(.btn--store):focus-visible{
  background:transparent;
  color:#fff; text-shadow:0 0 6px rgba(255,255,255,.35);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.25),
    0 0 12px rgba(255,255,255,.18);
  transform:none;
  outline:none;
}

/* Redes dentro del menú móvil */
.nav-social{
  display:none; width:100%; margin-top:4px; padding-top:6px; border-top:1px solid rgba(255,255,255,.15);
  justify-content:center; gap:8px;
}
@media (max-width:860px){
  .nav-social{ display:flex }
  .nav.nav--modern{ border-top-left-radius:18px; border-top-right-radius:18px; outline:1px solid rgba(255,255,255,.10) }
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  background:var(--yellow); color:#000; border:none; cursor:pointer;
  padding:12px 18px; border-radius:10px; font-weight:700;
  box-shadow:var(--glow);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 10px 28px rgba(255,215,0,.35) }

/* CTA Tienda (principal) */
.btn--store{
  --y1:#ffe680; --y2:#ffd700; --y3:#ffb300;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:13px 20px; font-size:1.05rem; line-height:1; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:#2b1f1a;
  background:linear-gradient(180deg,var(--y1),var(--y2) 55%,var(--y3));
  border-radius:999px; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 18px rgba(255,215,0,.35), inset 0 1px 0 rgba(255,255,0,.65);
  position:relative;
}
.header .btn--store{ padding-block:14px; padding-inline:28px; gap:.75rem }

/* Botón flotante de Tienda (MÓVIL): oculto por defecto */
.btn--store--mobile{
  display: none; /* <-- evita que aparezca en escritorio/tablet */
}

/* Botón contorno base (se sobreescribe por contexto abajo) */
.btn--ghost{
  background:transparent; color:var(--brown); border:2px solid var(--brown);
  padding:10px 14px; border-radius:10px; font-weight:700;
  transition:color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn--ghost:hover{ transform:translateY(-2px); color:#000; border-color:#000 }

/* =========================================================
   REDES (desktop y dentro del menú móvil)
   ========================================================= */
.social{ display:flex; gap:10px; margin-left:8px }
.social a{
  width:var(--social-size); height:var(--social-size); display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.12); outline:1px solid rgba(255,255,255,.12);
  transition:background .2s, transform .2s, outline-color .2s;
}
.social a:hover{ background:rgba(255,255,255,.22); outline-color:rgba(255,255,255,.28); transform:translateY(-1px) }
.social svg{ width:20px; height:20px; fill:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)) }

.nav-social a{
  width:var(--nav-social-size); height:var(--nav-social-size);
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.12); outline:1px solid rgba(255,255,255,.12);
  transition:background .2s, transform .2s, outline-color .2s;
}
.nav-social a:hover{ background:rgba(255,255,255,.22); outline-color:rgba(255,255,255,.28); transform:translateY(-1px) }
.nav-social svg{ width:22px; height:22px; fill:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)) }

/* Utilidades de iconos en línea */
.link-icon{ display:inline-flex; align-items:center; gap:.45rem }
.icon{ display:inline-block; vertical-align:-2px }

/* =========================================================
   HERO + DECOR + CARRUSEL
   ========================================================= */
.hero{ min-height:72vh; display:grid; place-items:center; background:#0f0e0d; position:relative; overflow:hidden }

.hero-decor .shape{
  position:absolute; border-radius:50%; filter:blur(12px); opacity:.16; mix-blend-mode:screen; animation:float 14s ease-in-out infinite;
}
.shape--1{ width:240px; height:240px; background:#ffd700; top:-60px; left:-60px; animation-duration:16s }
.shape--2{ width:300px; height:300px; background:#ffb300; bottom:-90px; right:-40px; animation-duration:18s }
.shape--3{ width:200px; height:200px; background:#ffea80; top:20%; right:20%; animation-duration:20s }
@keyframes float{ 0%,100%{ transform:translateY(0) translateX(0) } 50%{ transform:translateY(-14px) translateX(8px) } }

.carousel{ position:relative; width:100%; height:72vh; overflow:hidden }
.slides{ position:relative; width:100%; height:100% }

.slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
  transition:opacity .7s var(--ease-out), transform 1s var(--ease-out);
}
.slide.is-active{ opacity:1; transform:scale(1) }
.slide.is-active::after{ content:""; position:absolute; inset:0; background:radial-gradient(100% 60% at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.55)) }

.slide__overlay{
  position:relative; z-index:2; background:rgba(0,0,0,.35);
  padding:26px 30px; border-radius:14px; backdrop-filter:saturate(1.2) blur(1px);
}
.slide__title{
  font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.3px;
  font-size:clamp(1.5rem,3.2vw,2.6rem); margin:0 0 14px;
}
@keyframes kenburns{ 0%{ transform:scale(1.06) } 100%{ transform:scale(1) } }
.slide.is-active{ animation:kenburns 10s ease-out forwards }

/* Controles y dots */
.ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.35); color:#fff; border:none; width:46px; height:46px; border-radius:50%;
  cursor:pointer; font-size:20px; backdrop-filter:blur(2px);
  transition:background .2s ease, transform .2s ease;
}
.ctrl:hover{ background:rgba(0,0,0,.5); transform:translateY(-50%) scale(1.05) }
.prev{ left:12px } .next{ right:12px }

.dots{ position:absolute; left:0; right:0; bottom:18px; display:flex; gap:10px; justify-content:center; z-index:2 }
.dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.6); border:0; cursor:pointer; transition:transform .2s ease, background .2s ease }
.dot.is-active{ background:#fff; transform:scale(1.12) }

.carousel__progress{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15) }
.carousel__progress .bar{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#ffdf6d,#ffd700); transition:width .1s linear }

/* Fallback de texto (oculto por defecto; el HTML lo controla en mobile con CSS inline) */
.hero-fallback{ display:none; }
.hero-fallback h2{ margin:0 0 .4rem; font-family:'Poppins',sans-serif; }
.hero-fallback p{ margin:.25rem 0 1rem; }

/* =========================================================
   GRID + CARDS
   ========================================================= */
.grid{ display:grid; gap:22px; grid-template-columns:repeat(12,1fr) }

.card{
  background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.card:hover{ transform:translateY(-6px) rotateX(.8deg) rotateY(.8deg); box-shadow:0 18px 36px rgba(0,0,0,.12) }
.card__title{ margin:8px 0 8px; font-family:'Poppins',sans-serif; color:var(--brown) }
.card__list{ list-style:none; padding:0; margin:0 0 14px }
.card__list li{ margin:6px 0 }
.card__actions{ display:flex; gap:10px; flex-wrap:wrap }

/* Productos grid responsivo */
.products .card{ grid-column:span 4 }
@media (max-width:1000px){ .products .card{ grid-column:span 6 } }
@media (max-width:640px){ .products .card{ grid-column:span 12 } }

/* Ficha producto – icono superior */
.card--product{ position:relative; padding-top:26px }
.prod__icon{
  width:62px; height:62px; border-radius:50%; background:rgba(255,215,0,.18);
  display:grid; place-items:center; position:absolute; top:-31px; left:18px; box-shadow:var(--shadow);
  animation:pop-in .6s var(--ease-out) both;
}
@keyframes pop-in{ from{ transform:scale(.8); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* Sucursales grid responsivo */
.branches .card{ grid-column:span 4 }
@media (max-width:1000px){ .branches .card{ grid-column:span 6 } }
@media (max-width:640px){ .branches .card{ grid-column:span 12 } }

/* Empresa (bloques Misión/Visión/etc.) */
.mandates{ display:grid; gap:22px; grid-template-columns:repeat(12,1fr) }
.mandate{ grid-column:span 6; background:#fff; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow) }
.mandate h3{ margin:0 0 8px; color:var(--brown) }
.mandate p{ margin:0 }
.mandate ul{ margin:0; padding-left:18px }
@media (max-width:900px){ .mandate{ grid-column:span 12 } }

/* =========================================================
   FORMULARIO
   ========================================================= */
.contact-form{
  display:grid; gap:16px; grid-template-columns:repeat(12,1fr);
  background:#fff; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.form__row{ grid-column:span 6; display:flex; flex-direction:column; gap:8px }
.form__row:nth-child(4){ grid-column:span 12 }
label{ font-weight:700; color:#3b2b23 }
input,textarea{
  padding:12px 12px; border:1px solid #ddd; border-radius:10px; font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,textarea:focus{ outline:none; border-color:#ffda55; box-shadow:0 0 0 3px rgba(255,215,0,.25) }
textarea{ resize:vertical; min-height:120px }
.contact-form .btn{ grid-column:span 12; justify-self:start }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--yellow);
  color:#000;
  padding:20px 0; margin-top:28px;
  border-top:4px solid #000;
}
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer__nav{ display:flex; gap:16px; flex-wrap:wrap }
.footer__nav a{ color:#000 }
.footer__nav a:hover{ text-decoration:underline }
.to-top{
  color:#000; border:1px solid rgba(0,0,0,.4);
  padding:6px 10px; border-radius:8px; transition:transform .2s ease, background .2s ease;
}
.to-top:hover{ transform:translateY(-2px); background:rgba(0,0,0,.08) }

.footer__brand{ display:flex; align-items:center; gap:10px }
.footer__brand img{ height:44px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)) }
.footer__brand small{ color:#000; font-weight:600; letter-spacing:.2px }
@media (max-width:720px){
  .footer__brand{ width:100%; justify-content:center; text-align:center; gap:8px; margin-bottom:6px; flex-wrap:wrap }
  .footer__brand small{ flex-basis:100% }
}

/* =========================================================
   REVEAL-ON-SCROLL + REDUCED MOTION
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(22px) scale(.98);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.in-view{ opacity:1; transform:translateY(0) scale(1) }
.delay-1{ transition-delay:.1s } .delay-2{ transition-delay:.2s }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* =========================================================
   RESPONSIVE EXTRAS (tablet)
   ========================================================= */
@media (max-width:1024px){
  .carousel{ height:52vh; min-height:300px; }
}

/* =========================================================
   SOLO MÓVIL (≤ 860px): mejoras de lectura y compacidad
   ========================================================= */
@media (max-width: 860px){

  /* Header un poco más bajo sin tocar escritorio */
  .header__inner{ padding:8px 0; gap:10px; }
  .logo{ height:50px; }

  /* Secciones más compactas */
  .section { padding: 44px 0; }

  /* Tipografía */
  .section__title { font-size: clamp(1.3rem, 4.8vw, 1.7rem); }
  .section__subtitle { font-size: 0.98rem; }

  /* Cards y botones */
  .card { padding: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
  .card__title { margin: 6px 0 8px; font-size: 1.05rem; }
  .card__actions { gap: 8px; }
  .btn, .btn--ghost, .btn--shine, .btn--store { min-height: 44px; }

  /* Grilla */
  .grid { gap: 16px; }

  /* Formulario */
  .contact-form { gap: 12px; padding: 16px; }
  .form__row { gap: 6px; }
  input, textarea { padding: 12px; font-size: 1rem; }

  /* Listas sucursales un poco más respirables */
  .card__list li { margin: 4px 0; }

  /* Scroll margin por header más bajo */
  section[id]{ scroll-margin-top: 84px; }
}

/* =========================================================
   MÓVIL ESTRECHO (≤ 680px): alineaciones y toques finales
   ========================================================= */
@media (max-width:680px){

  /* Centrar header sin afectar desktop */
  .header__inner{
    position:relative;
    justify-content:center;
    padding:6px 0;
  }
  .brand{ margin:0 auto; }
  .logo{ height:62px; width:auto; }

  /* Hamburguesa a la derecha */
  .nav-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:36px; height:36px;
  }

  /* Menú del alto del botón (compacto) */
  .nav{ inset:72px 0 auto 0; padding:6px 8px; row-gap:6px; }
  .nav a{ padding-top:0; padding-bottom:0; line-height:1; }

  /* Acciones de cards en columna: más fácil de tocar */
  .card__actions{ flex-direction:column; gap:8px; }
}

/* =========================================================
   NUEVO: CAMBIOS SOLICITADOS PARA MÓVIL (≤ 680px)
   - Ocultar #hero por completo
   - Mostrar, mover y achicar botón flotante .btn--store--mobile
   - FAB group para TIENDA + WHATSAPP (solo móvil)
   - Centrar texto del botón de productos en móvil
   ========================================================= */

/* Por defecto, el FAB está oculto (escritorio/tablet) */
.mobile-fab{ display:none; }

@media (max-width: 680px){

  /* 1) Ocultar toda la sección hero (decor, fallback y carrusel) */
  #hero{
    display: none !important;
  }

  /* 2) Grupo FAB fijo abajo-derecha (contiene Tienda + WhatsApp) */
  .mobile-fab{
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 10px;
    z-index: 60;
  }

  /* 2.a) Tienda (visible en móvil) */
  .btn--store--mobile{
    display: inline-flex !important;
    align-items:center; justify-content:center;
    padding: 9px 14px !important;
    font-size: 0.95rem !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(255,215,0,.40) !important;
  }

  /* 2.b) WhatsApp: SOLO ÍCONO (botón redondo) */
  .btn--wa--mobile{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: #25D366;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
    transition: transform .18s cubic-bezier(.16,1,.3,1),
                box-shadow .18s cubic-bezier(.16,1,.3,1),
                filter .18s;
    overflow: hidden;
  }
  .btn--wa--mobile:hover,
  .btn--wa--mobile:focus-visible{
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
    outline: none;
    filter: saturate(1.05);
  }
  .btn--wa--mobile::before{
    content:"";
    width: 22px;
    height: 22px;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path fill='%23FFFFFF' d='M.5 24l1.7-6.2a11 11 0 1 1 4.1 4.1L.5 24zM6.7 19a9 9 0 1 0-3.1-3.1L3 19l3.7-.9zM17 13.3c-.2-.1-1.2-.6-1.4-.6s-.3 0-.5.2-.6.6-.7.8-.3.2-.5.1a7.1 7.1 0 0 1-2.1-1.3 7.8 7.8 0 0 1-1.5-1.9c-.2-.3 0-.4.1-.5a3 3 0 0 0 .3-.4 1.6 1.6 0 0 0 .2-.4.5.5 0 0 0 0-.5c0-.1-.5-1.2-.7-1.6s-.4-.4-.6-.4h-.5a1 1 0  0 0-.7.4 3 3 0 0 0-1 2.2 5.2 5.2 0 0 0 1.1 2.7 11.9 11.9 0 0 0 4.6 4.3 5.3 5.3 0 0 0 2.7 1 2.5 2.5 0 0 0 1.7-.6 2.1 2.1 0 0 0 .7-1.3c.1-.7.1-1.2 0-1.3s-.2-.2-.4-.3z'/>\
</svg>");
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
  }

  /* 3) Centrar el texto de los botones de productos */
  .products .card .btn,
  .products .card .btn--shine{
    display: inline-flex;
    align-items: center;
    justify-content: center;   /* <-- centrado del texto */
    text-align: center;        /* <-- por si hay saltos de línea */
  }
}

/* Pantallas muy pequeñas ≤ 380px */
@media (max-width:380px){
  .logo{ max-width:110px; height:auto; }
}

/* =========================================================
   SUCURSALES: ícono de WhatsApp junto al número (wa.me)
   ========================================================= */
.branches .card .card__list a[href*="wa.me"]{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  text-decoration:none;
}

.branches .card .card__list a[href*="wa.me"]::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));
  background:no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path fill='%2325D366' d='M.5 24l1.7-6.2a11 11 0 1 1 4.1 4.1L.5 24zM6.7 19a9 9 0 1 0-3.1-3.1L3 19l3.7-.9zM17 13.3c-.2-.1-1.2-.6-1.4-.6s-.3 0-.5.2-.6.6-.7.8-.3.2-.5.1a7.1 7.1 0 0 1-2.1-1.3 7.8 7.8 0 0 1-1.5-1.9c-.2-.3 0-.4.1-.5a3 3 0 0 0 .3-.4 1.6 1.6 0 0 0 .2-.4.5.5 0 0 0 0-.5c0-.1-.5-1.2-.7-1.6s-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.4 3 3 0 0 0-1 2.2 5.2 5.2 0 0 0 1.1 2.7 11.9 11.9 0 0 0 4.6 4.3 5.3 5.3 0 0 0 2.7 1 2.5 2.5 0 0 0 1.7-.6 2.1 2.1 0 0 0 .7-1.3c.1-.7.1-1.2 0-1.3s-.2-.2-.4-.3z'/>\
</svg>");
}

/* =========================================================
   SUCURSALES: hover/focus en WhatsApp (subrayado + color)
   ========================================================= */
.branches .card .card__list a[href*="wa.me"]{
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, text-decoration-color .2s ease;
  text-underline-offset: 2px;
}

.branches .card .card__list a[href*="wa.me"]:hover,
.branches .card .card__list a[href*="wa.me"]:focus-visible{
  color: #25D366;               /* verde WhatsApp */
  text-decoration: underline;
  text-decoration-color: #25D366;
  outline: none;
}

/* =========================================================
   RESALTAR botones ghost EN TODAS LAS VISTAS (desktop + móvil)
   - “Consultar” (Productos) y “Cómo llegar” (Sucursales)
   ========================================================= */
.products .card .btn--ghost,
.branches .card .btn--ghost{
  background:linear-gradient(180deg,#fff3a8,#ffe066 55%,#ffc533) !important;
  color:#2b1f1a !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:12px !important;
  font-weight:800 !important;
  box-shadow:0 12px 30px rgba(255,215,0,.45), inset 0 1px 0 rgba(255,255,255,.85) !important;
  padding:12px 18px !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s cubic-bezier(.16,1,.3,1);
}

.products .card .btn--ghost:hover,
.products .card .btn--ghost:focus-visible,
.branches .card .btn--ghost:hover,
.branches .card .btn--ghost:focus-visible{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px rgba(255,215,0,.60), 0 0 0 3px rgba(255,215,0,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
  outline: none;
}