/* ============================================================
   CHURROS AND WAFFLES — San Bernardo, Región Metropolitana
   TEMA OSCURO a propósito: su identidad real es neón blanco sobre muro de ladrillo negro, tal como se ve en sus propias fotos de Instagram. El dorado es el del churro recién frito, el rojo el de la frutilla y el café el del chocolate.
   Tipografías: Pacifico + Plus Jakarta Sans.
   ============================================================ */
:root{
  --acento:      #E8A93C;
  --acento-osc:  #C4881F;
  --segundo:     #D8384B;
  --apoyo:       #8A5C33;
  --suave:       #232329;
  --crema:       #131316;
  --crema-osc:   #2E2E35;
  --papel:       #1C1C21;
  --tinta:       #F4F2EE;
  --tinta-suave: #A3A099;

  --font-display:'Pacifico', cursive;
  --font-body:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radio:14px; --radio-g:24px;
  --sombra:0 4px 16px rgba(0,0,0,.35);
  --sombra-alta:0 14px 36px rgba(0,0,0,.5);
  --max:1160px;
}
*{ box-sizing:border-box; }
/* Sin esto, cualquier .pill o .status-line con display propio le gana
   al display:none que trae [hidden] en la hoja del navegador. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--crema); color:var(--tinta); font-family:var(--font-body);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.14; }
.price,.uc-line-price{ font-variant-numeric:tabular-nums; }

#loader{
  position:fixed; inset:0; z-index:9999; background:var(--crema);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .45s ease, visibility .45s ease;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-marca{ animation:latido 1s ease-in-out infinite; }
.loader-marca img{ width:64px; height:64px; border-radius:50%; display:block; box-shadow:0 0 0 3px var(--acento); }
@keyframes latido{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.86); opacity:.6; } }

.site-header{
  position:sticky; top:0; z-index:900; background:rgba(19,19,22,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--crema-osc);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer; padding:0; }
.brand-ico{ color:var(--acento); display:flex; }
.brand-ico img{ width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; }
.brand-name{ font-family:var(--font-display); font-size:1.35rem; color:var(--tinta); font-weight:400; }
.nav-links{ display:flex; gap:4px; }
.nav-link{
  background:none; border:none; cursor:pointer; font-family:var(--font-body);
  font-size:.93rem; font-weight:600; color:var(--tinta-suave); padding:9px 14px;
  border-radius:999px; transition:color .2s ease, background .2s ease;
}
.nav-link:hover{ color:var(--acento); }
.nav-link.active{ color:#17130A; background:var(--acento); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--tinta); border-radius:2px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:.95rem; font-weight:600; padding:13px 26px;
  border-radius:999px; border:2px solid transparent; cursor:pointer; text-decoration:none;
  min-height:44px; transition:transform .14s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}
.btn-sm{ padding:9px 18px; font-size:.87rem; }
.btn-solid{ background:var(--acento); color:#17130A; box-shadow:var(--sombra); }
.btn-solid:hover{ background:var(--acento-osc); box-shadow:var(--sombra-alta); }
.btn-ghost{ background:transparent; color:var(--tinta); border-color:var(--crema-osc); }
.btn-ghost:hover{ background:var(--tinta); color:var(--crema); }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:scale(.97); }

.tab-panel{ display:none; animation:entra .45s ease; }
.tab-panel.active{ display:block; }
@keyframes entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.hero{ position:relative; min-height:min(86vh,740px); display:flex; align-items:center; overflow:hidden; }
.hero-photo{ position:absolute; inset:0; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 56% at 50% 50%, rgba(8,8,10,.62) 0%, transparent 74%),
    linear-gradient(180deg, rgba(8,8,10,.30) 0%, rgba(10,10,12,.58) 60%, rgba(11,11,13,.90) 100%);
}
.hero-content{
  position:relative; z-index:2; max-width:var(--max); margin:0 auto;
  padding:110px 24px 90px; color:#fff; text-align:center;
}
.hero-eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:#E8A93C; margin:0 0 14px;
}
.hero h1{ font-size:clamp(2.4rem,6.5vw,4.2rem); margin:0 0 18px; color:#fff; text-shadow:0 3px 26px rgba(0,0,0,.45); }
.hero-lead{ max-width:560px; margin:0 auto 30px; font-size:1.08rem; color:#F2EEE9; }
.hero-pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px; }
.pill{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3); color:#fff; padding:8px 16px; border-radius:999px;
  font-size:.86rem; font-weight:600; backdrop-filter:blur(6px);
}
.status-dot{ width:9px; height:9px; border-radius:50%; background:#6FD08C; color:#6FD08C; display:inline-block; flex:0 0 auto; }
.status-dot.closed{ background:#E8A6A6; color:#E8A6A6; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.hero-ctas .btn-solid{ background:#fff; color:var(--acento); }
.hero-ctas .btn-solid:hover{ background:var(--acento); color:#17130A; }
.hero-ctas .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.75); }
.hero-ctas .btn-ghost:hover{ background:#fff; color:var(--tinta); }

.section{ padding:84px 0; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.eyebrow-row{ text-align:center; margin-bottom:50px; }
.eyebrow{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acento); margin-bottom:10px;
}
.section-title{ font-size:clamp(1.8rem,4.2vw,2.6rem); margin:0; color:var(--tinta); }
.section-sub{ max-width:600px; margin:14px auto 0; color:var(--tinta-suave); font-size:.96rem; }

.pilares{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.info-card{
  background:var(--papel); border:1px solid var(--crema-osc);
  border-radius:var(--radio-g); padding:32px 28px; box-shadow:var(--sombra);
}
.pilar-ico{
  width:52px; height:52px; border-radius:15px; background:var(--suave); color:var(--acento);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pilar-ico svg{ width:26px; height:26px; }
.info-card h3{ font-size:1.22rem; margin:0 0 10px; color:var(--tinta); }
.info-card p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }

.nosotros-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.nosotros-text .lead{ font-size:1.13rem; }
.nosotros-text p{ color:var(--tinta-suave); }
.nosotros-text strong{ color:var(--tinta); }
.badges{ display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 10px; }
.badge{
  background:var(--suave); color:var(--acento); border:1px solid var(--crema-osc);
  padding:7px 15px; border-radius:999px; font-size:.83rem; font-weight:700;
}
.nosotros-fotos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.nosotros-fotos figure{ margin:0; border-radius:var(--radio); overflow:hidden; position:relative; box-shadow:var(--sombra); }
.nosotros-fotos .foto-grande{ grid-column:1 / -1; }
.nosotros-fotos img{ width:100%; height:210px; object-fit:cover; }
.nosotros-fotos .foto-grande img{ height:320px; }
.nosotros-fotos figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(0,0,0,.85)); color:#fff;
  font-size:.8rem; font-weight:600; padding:22px 14px 11px;
}

.menu-tabs{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:38px; }
.menu-tab{
  background:var(--papel); border:1.5px solid var(--crema-osc); color:var(--tinta-suave);
  font-family:var(--font-body); font-size:.87rem; font-weight:700; padding:10px 19px;
  border-radius:999px; cursor:pointer; min-height:44px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.menu-tab:hover{ border-color:var(--acento); color:var(--acento); }
.menu-tab.active{ background:var(--acento); border-color:var(--acento); color:#17130A; }
.menu-panel{ display:none; } .menu-panel.active{ display:block; }
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
/* Grid de 3 columnas (miniatura · texto · botón +) con el precio bajo la
   descripción. En flex, la miniatura, el precio y el "+" eran tres columnas
   más y el texto se quedaba con ~100px; así gana casi el doble de ancho.
   Las áreas que no existen (proyectos sin miniatura o sin carrito) colapsan
   solas porque sus pistas son "auto". */
.menu-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"thumb texto mas" "thumb precio mas";
  align-items:center; column-gap:14px; row-gap:4px; background:var(--papel);
  border:1px solid var(--crema-osc); border-radius:var(--radio); padding:15px 18px;
}
.menu-item > .cf-thumb{ grid-area:thumb; }
.menu-item > .menu-item-text{ grid-area:texto; min-width:0; }
.menu-item > .price{ grid-area:precio; justify-self:start; }
.menu-item > .uc-add{ grid-area:mas; }
.menu-item .name{ font-weight:700; font-size:.98rem; color:var(--tinta); display:block; }
.menu-item .desc{ font-size:.85rem; color:var(--tinta-suave); margin-top:3px; line-height:1.45; }
.menu-item .price{ font-weight:800; color:var(--acento); white-space:nowrap; font-size:.9rem; }
.menu-item-text{ min-width:0; }

.resenas-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px; }
.review-card{
  background:var(--papel); border:1px solid var(--crema-osc); border-radius:var(--radio-g);
  padding:30px 28px; box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.stars{ color:var(--segundo); font-size:1.05rem; letter-spacing:.12em; margin-bottom:14px; }
.review-card p{ margin:0 0 22px; color:var(--tinta-suave); font-size:.95rem; flex:1; }
.review-card footer{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; background:var(--suave);
  color:var(--acento); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.86rem;
}
.review-meta{ display:flex; flex-direction:column; font-size:.8rem; color:var(--tinta-suave); }
.review-meta strong{ color:var(--tinta); font-size:.92rem; }
.review-cta-bajo{ text-align:center; margin-top:36px; }
.review-cta-bajo a{ color:var(--acento); font-weight:700; font-size:.95rem; }

.promedio-box{
  max-width:520px; margin:0 auto; text-align:center; background:var(--papel);
  border:1px solid var(--crema-osc); border-radius:var(--radio-g);
  padding:44px 32px; box-shadow:var(--sombra);
}
.promedio-num{ font-family:var(--font-display); font-size:4.2rem; line-height:1; color:var(--acento); }
.promedio-stars{ color:var(--segundo); font-size:1.4rem; letter-spacing:.14em; margin:8px 0 16px; }
.promedio-txt{ color:var(--tinta-suave); margin:0 0 26px; font-size:.97rem; }

/* ---------- VISÍTANOS ----------
   Sin recuadros, a propósito. Las tarjetas con borde no quedaban parejas
   nunca: una caja obliga a su vecina a medir lo mismo, y una dirección de
   dos líneas no mide lo mismo que un horario de siete. Ahora la información
   es una columna de bloques separados por una línea fina, a la izquierda,
   y el mapa vuelve a la derecha. Sin cajas no hay nada que cuadrar. */
.visitanos-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:46px; align-items:stretch;
}
.visitanos-info{ display:flex; flex-direction:column; }
.info-bloque{ padding:24px 0; border-top:1px solid var(--crema-osc); }
.info-bloque:first-child{ padding-top:0; border-top:0; }
.info-bloque:last-child{ padding-bottom:0; }
.info-titulo{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-suave);
}
.info-titulo svg{ width:16px; height:16px; flex:0 0 auto; color:var(--acento); }
.info-dir{ margin:0; font-size:1.18rem; font-weight:600; color:var(--tinta); line-height:1.35; }
.info-sub{ margin:5px 0 0; color:var(--tinta-suave); font-size:.95rem; line-height:1.5; }
.info-estado{ margin:0 0 14px; font-weight:700; color:var(--tinta); font-size:.95rem; }

/* El horario va día por día, de lunes a domingo, y el de hoy queda
   marcado solo (lo hace el JS al cargar). */
.horario-semana{ list-style:none; margin:0; padding:0; }
.horario-semana li{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:8px 0; border-bottom:1px solid var(--crema-osc);
  font-size:.95rem; color:var(--tinta-suave);
}
.horario-semana li:last-child{ border-bottom:0; }
.hs-hora{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.hs-cerrado{ font-style:italic; opacity:.75; }
.horario-semana li.hs-hoy{ color:var(--tinta); font-weight:700; }
.horario-semana li.hs-hoy .hs-dia::after{
  content:"hoy"; margin-left:9px; padding:2px 8px; border-radius:999px;
  background:var(--acento); color:var(--sobre-acento,#fff);
  font-size:.62rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; vertical-align:2px;
}
.horario-parcial li{ justify-content:flex-start; }

.visitanos-ctas{ display:flex; flex-wrap:wrap; gap:11px; }

.redes-lista{ display:flex; flex-wrap:wrap; gap:9px; }
.red-link{
  display:inline-flex; align-items:center; gap:8px; box-sizing:border-box;
  min-height:44px; padding:11px 16px;
  border:1px solid var(--crema-osc); border-radius:999px;
  color:var(--tinta); text-decoration:none; font-size:.9rem; font-weight:600;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.red-link svg{ width:16px; height:16px; flex:0 0 auto; }
.red-link:hover{ border-color:var(--acento); color:var(--acento); background:var(--suave); }

.map-frame{
  border-radius:var(--radio-g); overflow:hidden; box-shadow:var(--sombra-alta);
  border:1px solid var(--crema-osc); min-height:520px;
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

.site-footer{ background:#0B0B0D; color:#B9B5AE; padding:52px 0 40px; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; }
.footer-brand-row{ display:flex; align-items:center; gap:11px; }
.footer-logo{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.footer-brand{ color:#fff; font-size:1.6rem; }
.site-footer p{ margin:6px 0 0; font-size:.9rem; opacity:.85; }
.status-line{ display:flex; align-items:center; gap:8px; }
.footer-links{ display:flex; flex-direction:column; gap:9px; }
.footer-links a{ color:#E8A93C; text-decoration:none; font-size:.92rem; font-weight:600; }
.footer-links a:hover{ color:#fff; }

.float-widget{ position:fixed; right:20px; bottom:20px; z-index:800; display:flex; flex-direction:column; gap:11px; }
.float-btn{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; box-shadow:var(--sombra-alta); text-decoration:none;
}
.float-btn svg{ width:24px; height:24px; }
.float-ig{ background:linear-gradient(45deg,#F09433,#DC2743,#BC1888); }
.float-wa{ background:#25D366; }
.float-tel{ background:var(--acento); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in{ opacity:1; transform:none; }

/* El hero se anima con más fuerza y un pequeño "rebote" (overshoot) al
   entrar, para que se note apenas carga la página — el resto del sitio
   mantiene el reveal normal, más discreto. */
.hero-content .reveal{
  transform:translateY(38px) scale(.94);
  transition:opacity .75s cubic-bezier(.22,1.12,.36,1), transform .75s cubic-bezier(.22,1.12,.36,1);
}
.hero-content .reveal.in{ transform:none; }

@media (max-width:900px){
  .nosotros-grid{ grid-template-columns:1fr; gap:34px; }
  .visitanos-wrap{ grid-template-columns:1fr; gap:30px; }
  .map-frame{ min-height:300px; }
}
@media (max-width:780px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--crema); border-bottom:1px solid var(--crema-osc);
    padding:10px 16px 18px; display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-link{ text-align:left; padding:14px 12px; border-radius:12px; }
  .header-inner{ position:relative; padding:12px 18px; }
  .section{ padding:60px 0; }
  .wrap{ padding:0 18px; }
  .hero-content{ padding:86px 20px 70px; }
  .nosotros-fotos img{ height:175px; }
  .nosotros-fotos .foto-grande img{ height:245px; }
  .menu-grid{ grid-template-columns:1fr; }
  .float-widget{ right:14px; bottom:14px; }
  .float-btn{ width:47px; height:47px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .tab-panel{ animation:none; }
  .loader-marca{ animation:none; }
}


/* ══════════════════════════════════════════════════════════════════════
   25-09-2026 · pestaña Redes, botones de contacto y aire abajo
   ══════════════════════════════════════════════════════════════════════ */

/* Puente con el bloque común. Comprobado: esta hoja no usaba --fx. */
:root{
  --fx:cubic-bezier(.22,.8,.3,1);
  --c-bloque:var(--papel); --c-linea:var(--crema-osc); --c-radio:var(--radio);
  --c-sombra:var(--sombra); --c-sombra-alta:var(--sombra-alta);
  --c-suave:var(--tinta-suave); --c-marca:var(--acento); --c-tinta:var(--tinta);
}

/* El aire de abajo. Esta página vive en "Webs Listas y Habladas" y no
   recibió el arreglo del 22-09, que fue sólo para "Web Listas". Es un
   bloque al final y no un padding, para no pisar el espacio que ya hubiera. */
.tab-panel.active::after, .tab-panel.on::after, .tab-section.active::after{
  content:""; display:block;
  height: var(--pl-aire-abajo, clamp(30px, 4.5vw, 56px));
  flex-basis:100%; flex-shrink:0; grid-column:1 / -1;
  pointer-events:none;
}

.redes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px; padding-top:24px;
}
.red-card{
  background:var(--c-bloque); border:1px solid var(--c-linea);
  border-radius:var(--c-radio); overflow:hidden; box-shadow:var(--c-sombra);
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .3s var(--fx), box-shadow .3s var(--fx);
}
.red-card:hover{ transform:translateY(-4px); box-shadow:var(--c-sombra-alta); }
.red-card-head{ display:flex; align-items:center; gap:14px;
  padding:18px 20px; text-decoration:none; color:inherit; }
.red-logo{ width:48px; height:48px; flex:none; border-radius:13px;
  display:grid; place-content:center; color:#fff; transition:transform .3s var(--fx); }
.red-card:hover .red-logo{ transform:rotate(-6deg) scale(1.07); }
.red-logo svg{ width:27px; height:27px; fill:currentColor; display:block; }
.red-logo-ig{ background:linear-gradient(45deg,#F9CE34,#EE2A7B 50%,#6228D7); }
.red-logo-wsp{ background:#25D366; }
.red-logo-map{ background:#EA4335; }
.red-card-txt{ display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1;
  font-family:var(--font-body); }
.red-card-txt b{ font-size:18px; }
.red-card-txt em{ font-style:normal; font-size:13.5px; color:var(--c-suave);
  overflow-wrap:anywhere; }
.red-card-cta{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-marca); white-space:nowrap; transition:transform .24s var(--fx); }
.red-card:hover .red-card-cta{ transform:translateX(3px); }
.red-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  text-decoration:none; }
.red-grid figure{ margin:0; overflow:hidden; aspect-ratio:1/1; }
.red-grid img{ width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--fx), filter .35s var(--fx); }
.red-grid::after{ content:attr(data-cta); position:absolute; inset:0; display:grid;
  place-content:center; background:rgba(0,0,0,.55); color:#fff;
  font-size:14.5px; font-weight:700; letter-spacing:.04em;
  opacity:0; transition:opacity .3s var(--fx); }
.red-grid:hover img{ transform:scale(1.07); filter:brightness(.82); }
.red-grid:hover::after{ opacity:1; }
.red-pie{ font-size:12px; color:var(--c-suave); padding:10px 20px 14px; margin:0;
  border-top:1px solid var(--c-linea); }

/* El patrón aprobado: la misma silueta para las tres tarjetas —cabecera,
   bloque en 4:3 y pie—. Lo que las empareja no es el ancho: es la silueta. */
.redes{ align-items:stretch; }
.redes .red-card{ height:100%; display:flex; flex-direction:column; }
.red-pie{ margin-top:auto; }
.redes .red-grid{ aspect-ratio:4/3; min-width:0; }
.redes .red-grid figure{ height:100%; min-width:0; width:100%; overflow:hidden; margin:0; }
.redes .red-grid figure img{ width:100%; height:100%; object-fit:cover; display:block;
  min-width:0; max-width:100%; }

/* Las tarjetas sin fotos propias de esa red muestran el dato grande. */
.red-panel{ aspect-ratio:4/3; display:grid; place-content:center; gap:3px; text-align:center;
  padding:16px; border-top:1px solid var(--c-linea); border-bottom:1px solid var(--c-linea); }
.red-num{ font-family:var(--font-body); font-weight:800; font-size:clamp(30px,3.5vw,42px);
  line-height:1.05; color:var(--tinta); }
.red-num-chico{ font-size:clamp(19px,2.2vw,25px); font-variant-numeric:tabular-nums; }
.red-sub{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin-top:5px; }
.red-nota{ font-size:12.5px; color:var(--tinta-suave); margin-top:8px; }
.red-card:hover .red-panel{ filter:brightness(1.1); }
.red-panel-wsp{ background:
    radial-gradient(120% 100% at 50% 0%, rgba(37,211,102,.22), transparent 70%),
    linear-gradient(160deg, rgba(37,211,102,.14), rgba(18,140,126,.10)); }
.red-panel-wsp .red-sub{ color:#25D366; }

/* Botones de contacto de Visítanos. */
.cbtn{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:13px 15px; margin-bottom:9px; text-decoration:none; color:inherit;
  background:var(--c-bloque); border:1px solid var(--c-linea); border-radius:12px;
  transition:transform .22s var(--fx), box-shadow .22s var(--fx), border-color .22s var(--fx); }
.cbtn:last-child{ margin-bottom:0; }
.cbtn:hover{ transform:translateY(-2px); box-shadow:var(--c-sombra-alta); }
.cbtn:active{ transform:scale(.99); }
.cbtn-ico{ width:40px; height:40px; border-radius:11px; display:grid; place-content:center;
  color:#fff; flex:none; }
.cbtn-ico svg{ width:21px; height:21px; fill:currentColor; display:block; }
.cbtn-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.cbtn-txt b{ font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-suave); font-weight:700; }
.cbtn-txt em{ font-style:normal; font-size:16.5px; font-weight:600;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; }
.cbtn-go{ font-size:19px; color:var(--c-suave); transition:transform .22s var(--fx); }
.cbtn:hover .cbtn-go{ transform:translateX(3px); }
.cbtn-wsp .cbtn-ico{ background:#25D366; }
.cbtn-wsp:hover{ border-color:#25D366; }
.cbtn-ig .cbtn-ico{ background:linear-gradient(45deg,#F9CE34,#EE2A7B 50%,#6228D7); }
.cbtn-ig:hover{ border-color:#EE2A7B; }

/* La ficha de Google, en el ámbar de la casa sobre el fondo oscuro. */
.red-panel-google{ background:
    radial-gradient(120% 100% at 50% 0%, rgba(232,169,60,.22), transparent 70%),
    linear-gradient(160deg, rgba(232,169,60,.12), rgba(196,136,31,.06)); }
.red-panel-google .red-sub{ color:var(--acento); }
.red-num{ font-weight:800; }
.cbtn-resena .cbtn-ico{ background:linear-gradient(135deg,#E8A93C,#C4881F); }
.cbtn-resena:hover{ border-color:#E8A93C; }
.redes-lista{ display:block; }

/* La tarjeta de Instagram lleva una sola portada: sus gráficas traen texto y
   en tres columnas angostas se cortaban a mitad de palabra. */
.red-grid-una{ grid-template-columns:1fr; }
.red-grid-una img{ object-position:50% 58%; }
/* La figura heredaba aspect-ratio:1/1 de la rejilla de tres, y sin eso la
   imagen imponía su propia proporción (4:5) y empujaba el bloque a 435 px.
   El bloque se queda en 4:3 —overflow:hidden desactiva el mínimo por
   contenido del aspect-ratio— y la imagen va encima, recortada. */
.red-grid-una{ overflow:hidden; }
.red-grid-una figure{ aspect-ratio:auto; position:relative; min-height:0; }
.red-grid-una img{ position:absolute; inset:0; width:100%; height:100%; }