/* ============================================================
   AYULEM — REDISEÑO VISUAL («vitrina»)
   Solo cambia el aspecto: mismo HTML, mismos textos, mismos datos.
   Estilo: editorial-gráfico, colores planos de pastelería, bordes de tinta,
   sombras duras, esquinas rectas, tipografía grande y pesada.
   Se carga DESPUÉS de los demás CSS y los pisa.
   ============================================================ */
:root {
  --crema: #FFF6E5;
  --tinta: #1A1613;
  --rosa: #FF9DB8;
  --rosa-claro: #FFD3DF;
  --pistacho: #BFE08E;
  --manteca: #FFD84A;
  --cacao: #3A1D14;
  --papel: var(--crema);
  --durazno: #FFEBC9;
  --oro: #1A1613;
  --oro-claro: var(--manteca);
  --coral: var(--rosa);
  --titulo: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --texto: 'DM Sans', system-ui, sans-serif;
  --borde: 2.5px solid var(--tinta);
  --sombra: 6px 6px 0 var(--tinta);
  --sombra-s: 4px 4px 0 var(--tinta);
}
html { scroll-padding-top: 80px; }
body { background: var(--crema); color: var(--tinta); font-family: var(--texto); font-size: 17px; }
body::before, .adorno, .tapa { display: none !important; }
::selection { background: var(--manteca); color: var(--tinta); }

/* ---------- tipografía ---------- */
h1, h2, h3, .sub-tit, .gc-v, .grupo-t, .det-nombre, .cat2-t, .paso .hora {
  font-family: var(--titulo); font-weight: 800; letter-spacing: -.02em; color: var(--tinta);
}
h1 { font-size: clamp(46px, 7vw, 104px); line-height: .95; letter-spacing: -.035em; }
h2 { font-size: clamp(32px, 4.6vw, 62px); line-height: 1; letter-spacing: -.03em; }
h3 { font-size: 22px; line-height: 1.1; }
.etq, .s-etq, .sub, .nov span {
  display: inline-block; align-self: flex-start; font-family: var(--texto); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); background: var(--manteca); border: 2px solid var(--tinta); padding: 5px 11px; margin-bottom: 16px; text-shadow: none !important;
}
.encabezado h2, .encabezado .etq, .encabezado p { text-shadow: none; }
.encabezado { max-width: 820px; margin-bottom: 40px; }
.encabezado p, .cuerpo p, .carta-desc p { color: var(--tinta); }
.encabezado p { font-size: 19px; line-height: 1.5; max-width: 620px; }

/* ---------- botones ---------- */
.boton, .menu .cta, .ver-todas {
  border-radius: 0; background: var(--tinta); color: var(--crema); border: var(--borde); box-shadow: var(--sombra-s);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 14px 24px; transition: transform .15s, box-shadow .15s, background .15s;
}
.boton:hover, .menu .cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta); background: var(--rosa); color: var(--tinta); }
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.boton.claro { background: var(--crema); color: var(--tinta); box-shadow: var(--sombra-s); }
.boton.claro:hover { background: var(--manteca); color: var(--tinta); box-shadow: 7px 7px 0 var(--tinta); }
.botones { gap: 14px; }

/* ---------- encabezado de navegación: barra plana de borde a borde ---------- */
.barra { inset: 0 0 auto 0; padding: 0; background: var(--manteca); border-bottom: var(--borde); pointer-events: auto; }
.barra-in { max-width: none; height: 68px; border-radius: 0; background: transparent; box-shadow: none; padding: 0 max(16px, 3vw); }
.logo img { height: 36px; filter: brightness(0); }
.menu { gap: 0; }
.menu a { border-radius: 0; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 24px 14px; position: relative; }
.menu a:not(.cta):hover { background: var(--tinta); color: var(--manteca); }
.menu a[aria-current="page"]:not(.cta) { background: var(--tinta); color: var(--manteca); }
.menu .cta { margin-left: 14px; background: var(--rosa); color: var(--tinta); padding: 12px 18px; }
.menu .cta:hover { background: var(--crema); }
.sub-lista { top: 100%; border-radius: 0; background: var(--crema); border: var(--borde); box-shadow: var(--sombra-s); padding: 0; gap: 0; }
.sub-lista a { padding: 14px 18px; border-bottom: 2px solid var(--tinta); }
.sub-lista a:last-child { border-bottom: 0; }
.burger { border-radius: 0; background: var(--tinta); color: var(--manteca); border: 0; height: 42px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.progreso { height: 6px; background: var(--rosa); border-bottom: 2px solid var(--tinta); top: 68px; }
[data-tema="oscuro"] .progreso { background: var(--rosa); }
main > .seccion:first-child { padding-top: calc(68px + 56px); }

/* ---------- portada (PC) ---------- */
.hero-local { background: var(--tinta); }
@media (min-width: 861px) {
  section.hero-local { padding: 68px 0 0; align-items: flex-end; }
  section.hero-local::before { display: none; }
  section.hero-local .portada { max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 0; align-items: stretch; background: var(--crema); border-top: var(--borde); padding: 0; }
  section.hero-local .portada > * { grid-column: 1; }
  section.hero-local .portada { padding: 20px max(24px, 4vw) 18px; row-gap: 0; }
  section.hero-local .portada > .etq { margin-bottom: 14px; background: var(--rosa); }
  section.hero-local .portada h1 { font-size: clamp(40px, 5.2vw, 80px); white-space: nowrap; margin: 0 0 8px; color: var(--tinta); text-shadow: none; }
  section.hero-local .portada > p { color: var(--tinta); text-shadow: none; font-size: 16px; max-width: 640px; margin: 0 0 12px; }
  section.hero-local .datos-rapidos { grid-column: 2; grid-row: 1 / span 5; align-self: center; display: grid; grid-template-columns: 1fr; width: 100%; gap: 12px; margin: 0; padding-left: 36px; }
  section.hero-local .dato { background: var(--tinta); color: var(--crema); border: var(--borde); border-radius: 0; box-shadow: 6px 6px 0 var(--rosa); padding: 10px 18px; font-size: 18px; font-family: var(--titulo); font-weight: 700; letter-spacing: -.01em; backdrop-filter: none; }
  section.hero-local .dato:nth-child(2) { box-shadow: 6px 6px 0 var(--pistacho); }
  section.hero-local .dato:nth-child(3) { box-shadow: 6px 6px 0 var(--manteca); }
  section.hero-local .dato b { color: var(--manteca); font-family: var(--texto); font-size: 11px; letter-spacing: .16em; margin-bottom: 4px; }
  section.hero-local .botones { margin: 4px 0 14px; }
  section.hero-local .boton:not(.claro) { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
  section.hero-local .boton:not(.claro):hover { background: var(--rosa); color: var(--tinta); border-color: var(--tinta); }
  section.hero-local .boton.claro { background: var(--manteca); color: var(--tinta); border: var(--borde); }
  section.hero-local .boton.claro:hover { background: var(--pistacho); }
  section.hero-local .baja { color: var(--tinta); margin: 0; }
}
.hero-local .etq { color: var(--tinta); }
.hero-local h1, .hero-local .dato { text-shadow: none; }
.baja { font-weight: 700; letter-spacing: .12em; }

/* ---------- secciones: bloques de color plano ---------- */
.seccion { padding: clamp(56px, 8vw, 110px) max(20px, 5vw); border-top: var(--borde); }
.seccion > .ancho { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
.ancho { max-width: 1240px; }
#inicio { border-top: 0; }
#destacados { background: var(--rosa); }
#local { background: var(--crema); }
#carta-teaser { background: var(--manteca); }
#nosotros { background: var(--pistacho); }
#donde { background: var(--cacao); }
main > .seccion:nth-child(odd):not([id]) { background: var(--crema); }
main > .seccion:nth-child(even):not([id]) { background: var(--rosa-claro); }
#destacados .etq { background: var(--crema); }
#carta-teaser .etq { background: var(--rosa); }
#nosotros .etq { background: var(--crema); }
.seccion.donde { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }

/* ---------- tarjetas ---------- */
.tarjeta, .seccion:not(#nosotros) > .ancho .tarjeta {
  border-radius: 0; background: var(--crema); border: var(--borde) !important; box-shadow: var(--sombra) !important; overflow: visible;
}
.banda { background: var(--tinta) !important; color: var(--manteca) !important; font-weight: 700; letter-spacing: .16em; padding: 12px 24px; }
.cuerpo { padding: 26px 26px 30px; }
.cuerpo h2 { font-size: clamp(26px, 3vw, 40px); }
.lista li { border-bottom: 2px dashed rgba(26,22,19,.35); }
.precio { font-family: var(--titulo); font-weight: 800; }
.chip { border-radius: 0; border: 2px solid var(--tinta); background: var(--manteca); }
.nota { color: var(--tinta); opacity: .75; }
.canales div { background: var(--crema); border: var(--borde); border-radius: 0; box-shadow: 4px 4px 0 var(--tinta); }
.canales { gap: 16px; }

/* ---------- carrusel ---------- */
.pistas { gap: 24px; padding: 6px 10px 30px 4px; }
.slide { border-radius: 0; background: var(--crema); border: var(--borde); box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.slide:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--tinta); }
.slide img { border-bottom: var(--borde); aspect-ratio: 4 / 3.2; }
.s-etq { background: var(--pistacho); }
.slide:nth-child(3n+2) .s-etq { background: var(--rosa); }
.slide:nth-child(3n) .s-etq { background: var(--manteca); }
.s-txt { padding: 20px 22px 22px; }
.s-txt h3 { font-size: 26px; }
.s-link { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border-top: 2px solid var(--tinta); margin-top: 14px; padding-top: 12px; }
.car-dots i { border-radius: 0; background: transparent; border: 2px solid var(--tinta); width: 14px; height: 14px; }
.car-dots i.on { width: 38px; background: var(--tinta); }
.car-flechas button { border-radius: 0; background: var(--crema); color: var(--tinta); border: var(--borde); box-shadow: var(--sombra-s); }
.car-flechas button:hover { background: var(--manteca); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }

/* ---------- el local: galería con fotos pegadas ---------- */
.galeria { gap: 22px; grid-auto-rows: 220px; padding: 10px; }
.galeria img { border-radius: 0; border: var(--borde); box-shadow: var(--sombra); background: var(--crema); transition: transform .25s; }
.galeria img.g1 { transform: rotate(-1.4deg); } .galeria img.g2 { transform: rotate(1.6deg); }
.galeria img.g3 { transform: rotate(-1deg); } .galeria img.g4 { transform: rotate(1.2deg); }
.galeria img.g5 { transform: rotate(-.8deg); } .galeria img.g6 { transform: rotate(1.4deg); } .galeria img.g7 { transform: rotate(-1.6deg); }
.galeria img:hover { transform: rotate(0) scale(1.02); position: relative; z-index: 3; }

/* ---------- la carta (teaser del inicio) ---------- */
.carta-dos { align-items: start; gap: clamp(28px, 5vw, 72px); }
.carta-desc h2 { font-size: clamp(34px, 5vw, 72px); }
.carta-desc p { font-size: 19px; }
.carta-desc .etq { color: var(--tinta); }
.tile img { border-radius: 0; border: var(--borde); aspect-ratio: 1; box-shadow: 4px 4px 0 var(--tinta); transition: transform .15s, box-shadow .15s; }
.tile:hover img { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta); }
.tile span { font-weight: 700; margin-top: 12px; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.tiles { gap: 18px; }

/* ---------- nosotros ---------- */
.nos { gap: 36px; }
.nos > img { border-radius: 0; border: var(--borde); box-shadow: var(--sombra); }

/* ---------- dónde estamos ---------- */
.panel-donde { background: transparent; border-radius: 0; box-shadow: none; padding: 0; gap: clamp(30px, 5vw, 70px); grid-template-columns: 1.1fr 1fr; align-items: center; }
.panel-donde .etq { background: var(--rosa); }
.panel-donde h2 { color: var(--crema); font-size: clamp(38px, 6vw, 88px); line-height: .95; margin: 8px 0 20px; }
.pd-dir { color: var(--crema); font-size: 22px; font-family: var(--titulo); font-weight: 600; margin-bottom: 18px; }
.pd-chips { gap: 10px; margin-bottom: 26px; }
.pd-chips span, .pd-chips a { border-radius: 0; background: var(--manteca); color: var(--tinta); border: 2px solid var(--crema); font-weight: 700; padding: 8px 14px; }
.pd-chips a:hover { background: var(--rosa); }
.panel-donde .boton { background: var(--rosa); color: var(--tinta); border-color: var(--crema); box-shadow: 4px 4px 0 var(--crema); }
.panel-donde .boton:hover { background: var(--manteca); box-shadow: 7px 7px 0 var(--crema); }
.panel-donde .boton.claro { background: transparent; color: var(--crema); box-shadow: 4px 4px 0 var(--crema); }
.panel-donde .boton.claro:hover { background: var(--crema); color: var(--tinta); }
.pd-campana { --h: 360px; max-width: none; }
.pd-campana .pd-mapa { border-radius: 0; border: 3px solid var(--crema); box-shadow: 10px 10px 0 var(--rosa); }
.marcador-logo { border-radius: 0; border: var(--borde); }

/* ---------- pie ---------- */
.pie { background: var(--tinta); color: var(--crema); border-top: var(--borde); padding: 70px max(20px, 5vw) 28px; }
.pie h4 { color: var(--tinta); background: var(--manteca); display: inline-block; padding: 4px 10px; letter-spacing: .14em; font-weight: 700; margin-bottom: 18px; }
.pie a { font-weight: 500; }
.pie a:hover { color: var(--rosa); }
.legal { border-top: 2px solid var(--crema); color: var(--crema); opacity: .8; }

/* ---------- WhatsApp y burbujas ---------- */
.wsp { border-radius: 0; background: #25D366; border: var(--borde); box-shadow: var(--sombra-s); width: 60px; height: 60px; }
.wsp:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta); }
.wsp svg path { fill: var(--tinta); }
.burbuja, .globo-movil, .parada .globo { border-radius: 0; border: var(--borde); box-shadow: var(--sombra-s); background: var(--crema); }

/* ---------- carta ---------- */
.carta2 { padding-top: 68px; }
.mb { margin-top: 0; border-bottom: var(--borde); background: var(--tinta); }
.mb::after { background: linear-gradient(90deg, rgba(26,22,19,.7), rgba(26,22,19,0) 70%); }
.mb-t { font-family: var(--titulo); font-weight: 800; letter-spacing: -.02em !important; color: var(--manteca); text-transform: uppercase; }
.mb.visible .mb-t { letter-spacing: -.02em; }
body { background: var(--crema); }
.carta2 .rail-cats, .carta2 .cat2 { background: var(--crema); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; border: var(--borde); box-shadow: var(--sombra); margin: 30px auto; }
.carta2 .rail-cats { padding: 24px 0 16px; background: var(--pistacho); }
.sec-t { font-family: var(--texto); font-weight: 800; font-size: 13px; letter-spacing: .16em; }
.cat-thumb { border-radius: 0; border: var(--borde); box-shadow: 3px 3px 0 var(--tinta); }
.cat-item:hover .cat-thumb { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.cat-item.on .cat-thumb { background: var(--manteca); box-shadow: 5px 5px 0 var(--tinta); border-width: 2.5px; }
.cat-label { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 11px; }
.rail-arrow { border-radius: 0; border: var(--borde); background: var(--crema); box-shadow: 3px 3px 0 var(--tinta); }
.cat2-cab { border-radius: 0; border-bottom: var(--borde); background: var(--cat, var(--rosa)); }
.cat2-t { font-family: var(--titulo); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 32px); }
.grupo2-t, .grupo-t { color: var(--tinta); font-weight: 800; }
.prod-card { border-radius: 0; border: var(--borde); box-shadow: 4px 4px 0 var(--tinta); background: var(--crema); transition: transform .15s, box-shadow .15s; }
.prod-card:hover, .prod-card:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta); border-color: var(--tinta); }
.prod-thumb { border-bottom: var(--borde); background: var(--rosa-claro); }
.prod-nombre { font-weight: 700; }
.prod-precio { color: var(--tinta); font-family: var(--titulo); font-weight: 800; font-size: 17px; background: var(--manteca); display: inline-block; align-self: flex-start; padding: 1px 8px; border: 2px solid var(--tinta); }
.ver-todas { padding: 7px 14px; box-shadow: 3px 3px 0 var(--tinta); background: var(--crema); color: var(--tinta); }
.ver-todas:hover { background: var(--manteca); color: var(--tinta); }
.det-fondo { background: rgba(26,22,19,.7); }
.det-caja { border-radius: 0; background: var(--crema); border: var(--borde); box-shadow: 10px 10px 0 var(--rosa); }
.det-volver { border-radius: 0; border: var(--borde); background: var(--manteca); }
.det-foto { border-radius: 0; border: var(--borde); }
.det-precio { color: var(--tinta); font-family: var(--titulo); font-weight: 800; }
.det-desc { color: var(--tinta); }
.carta-aviso { border-radius: 0; border: var(--borde); background: var(--manteca); color: var(--tinta); }
.carta-pie { color: var(--tinta); }
.buscar { border-radius: 0; border: var(--borde); box-shadow: var(--sombra-s); }
.buscar button { border-radius: 0; background: var(--tinta); color: var(--manteca); }
.chips-nav::before { background: var(--crema); border-bottom: var(--borde); box-shadow: none; }
.chips-in { border-radius: 0; background: var(--crema); border: var(--borde); box-shadow: none; }
.chips-in a { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.chips-in a.on { background: var(--tinta); color: var(--manteca); }
.cat .tarjeta, .sin-res { border-radius: 0; }
.sin-res { background: var(--crema); border: var(--borde); box-shadow: var(--sombra); }
.cat2-lemi, .mini-titulo { filter: none; }

/* ---------- regalos ---------- */
.rg-foto { border-radius: 0; border: var(--borde); box-shadow: 10px 10px 0 var(--tinta); }
.rg-sello { border-radius: 0; background: var(--rosa); color: var(--tinta); border: var(--borde); left: 0; bottom: 0; }
.rg-hero h1 { color: var(--tinta); font-size: clamp(44px, 6.4vw, 96px); }
.rg-hero .etq { color: var(--tinta); }
.rg-hero p, .rg-tit span, .bx p { color: var(--tinta); }
.rg-tit h2 { color: var(--tinta); }
.gc { border-radius: 0; border: var(--borde); box-shadow: var(--sombra); }
.gc:hover { transform: translate(-3px, -3px) rotate(-1deg); }
.bx { border-radius: 0; border: var(--borde); box-shadow: var(--sombra); background: var(--crema); }
.bx img { border-bottom: var(--borde); }
.bx-precio { color: var(--tinta); font-family: var(--titulo); font-weight: 800; font-size: 24px; }
.bx h3 { color: var(--tinta); }

/* ---------- otras páginas ---------- */
.servicio, .paso, .nov { border-radius: 0; background: var(--crema); border: var(--borde); box-shadow: var(--sombra-s); }
.nov:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--tinta); }
.nov img { border-bottom: var(--borde); }
.nov p { color: var(--tinta); }
.servicio span, .paso span { color: var(--tinta); }
.paso .hora { color: var(--tinta); font-size: 30px; }
.video { border-radius: 0; border: var(--borde); box-shadow: var(--sombra); }
.video .play { border-radius: 0; background: var(--manteca); border: var(--borde); }
.vtit small { color: var(--tinta); }
.loc-foto { border-radius: 0; border: var(--borde); }
.loc-aviso { border-radius: 0; background: var(--rosa); color: var(--tinta) !important; border: 2px solid var(--tinta); }
.loc-consultas a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--rosa); }
.subnav a { border-radius: 0; background: var(--crema); border: var(--borde); box-shadow: 3px 3px 0 var(--tinta); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 700; }
.subnav a:hover, .subnav a:focus-visible { background: var(--manteca); color: var(--tinta); border-color: var(--tinta); }
.productos-grid .tarjeta p { color: var(--tinta); }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .barra-in { height: 60px; }
  .menu { top: 60px; left: 0; right: 0; background: var(--crema); border-radius: 0; border: var(--borde); border-left: 0; border-right: 0; padding: 0; box-shadow: none; }
  .menu a { padding: 16px 20px; border-bottom: 2px solid var(--tinta); }
  .menu .cta { margin: 14px; text-align: center; border-bottom: var(--borde); }
  .sub-lista { box-shadow: none; border: 0; }
  .sub-lista a { padding: 12px 20px 12px 38px; border-bottom: 2px solid rgba(26,22,19,.2); }
  .progreso { top: 60px; }
  main > .seccion:first-child { padding-top: calc(60px + 40px); }
  .hero-local { background: var(--tinta); }
  .hero-local::before { background: linear-gradient(180deg, rgba(26,22,19,0) 0%, rgba(26,22,19,0) 30%, rgba(26,22,19,.85) 70%, rgba(26,22,19,.95) 100%); }
  .hero-local h1 { color: var(--crema); }
  .hero-local .etq { background: var(--manteca); color: var(--tinta); }
  .hero-local .portada > p { color: var(--crema); }
  .hero-local .boton:not(.claro) { background: var(--rosa); color: var(--tinta); border: var(--borde); }
  .hero-local .boton.claro { background: var(--manteca); border: var(--borde); }
  .hero-local .baja { color: var(--crema); }
  .seccion { padding: 56px 18px; }
  .cuerpo { padding: 20px 18px 24px; }
  .galeria { gap: 14px; }
  .panel-donde { grid-template-columns: 1fr; }
  .pd-campana { --h: 280px; }
  .carta2 .rail-cats, .carta2 .cat2 { margin: 20px 14px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .galeria img { transition: none; } }