/* Hoja base del sitio. Todo el color/tipografía sale de los
   tokens del tema (variables CSS inyectadas por sitio), así cada sitio se ve propio. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --border: color-mix(in srgb, var(--c-text) 12%, transparent);
  --border-soft: color-mix(in srgb, var(--c-text) 7%, transparent);
  --shadow: 0 10px 30px -12px color-mix(in srgb, var(--c-text) 25%, transparent);
  --shadow-sm: 0 2px 10px -4px color-mix(in srgb, var(--c-text) 18%, transparent);
}

html { scroll-behavior: smooth; }
/* El header es sticky: sin este margen, saltar a un ancla (#planes, #contacto) deja el
   título del destino debajo del header. En escritorio el relleno de la sección alcanzaba
   a salvarlo, en móvil no: medido, el título quedaba 11px por debajo del borde. */
/* El header es pegajoso: sin este margen, saltar a #servicios deja el título debajo del
   header. `[id]` a secas y no solo `section[id]` porque el bloque de HTML libre cuelga su
   ancla de un <div> (no puede meterla dentro del marcado del cliente). */
:target, section[id], .section-html[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-heading);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
  /* Reparte las líneas en vez de dejar una palabra sola colgando: los títulos los escribe
     el cliente y no se puede elegir dónde cortan. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1em; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- Botones ---------- */

.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  line-height: 1.3;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  background: var(--c-primary);
  /* Derivado del primario: una marca con color claro necesita texto oscuro encima. */
  color: var(--c-on-primary);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--c-primary) 70%, transparent);
}
.btn-primary:hover { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--c-primary) 75%, transparent); }
.btn-outline { border-color: var(--border); color: var(--c-text); background: transparent; }
.btn-outline:hover { border-color: var(--c-primary-text); color: var(--c-primary-text); }
.btn-outline-light { border-color: rgba(255,255,255,0.7); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-cta { background: var(--c-bg); color: var(--c-text); font-weight: 700; }
.btn-lg { padding: 15px 34px; font-size: 1.02rem; }
.btn-sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Iconos ---------- */
/* Vectoriales de Phosphor (interfaz) y Simple Icons (marcas), servidos desde
   /assets/icons.svg. Heredan el color y escalan con el texto; los emojis no hacían ninguna
   de las dos cosas y se veían distinto en cada sistema operativo. */
.icon { display: inline-block; vertical-align: middle; fill: currentColor; flex-shrink: 0; }

.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary-text);
}

/* Redes: círculo con el logo de la marca dentro. */
.social-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c-footer-text) 26%, transparent);
  color: var(--c-footer-text);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.social-dot:hover {
  background: var(--c-footer-text);
  color: var(--c-footer-bg);
  border-color: var(--c-footer-text);
  transform: translateY(-2px);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--c-header-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  color: var(--c-header-text);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.brand-logo { height: 36px; width: auto; max-width: 120px; object-fit: contain; }
.brand-name { font-family: var(--f-heading); font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El gap se encoge con la ventana: un sitio de una página puede tener seis entradas de
   ancla en el header y con 26px fijos el nombre del negocio se comía a sí mismo. */
.site-nav { display: flex; align-items: center; gap: clamp(13px, 1.9vw, 26px); }
.site-nav a { text-decoration: none; font-size: 0.95rem; font-weight: 500; opacity: 0.85; }
.site-nav a:hover { opacity: 1; color: var(--c-primary-on-header); }
/* Página actual: subrayado con el color de la marca. El estado no se apoya solo en el
   color (hay quien no lo distingue), por eso además va la línea y el aria-current. */
.site-nav a.is-current { opacity: 1; color: var(--c-primary-on-header); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* Las entradas de ancla no llevan subrayado permanente: en una sola página el subrayado
   viaja con el visitante (lo mueve el observador de public/js/site.js) y una línea fija
   competiría con él. El botón de WhatsApp nunca se marca: no es un destino del sitio. */
.site-nav .nav-wa.is-current { text-decoration: none; }
.site-nav .nav-wa { color: var(--c-on-primary); opacity: 1; }
.site-nav .nav-wa:hover { color: var(--c-on-primary); }
.cart-link { position: relative; display: inline-flex; align-items: center; }
.cart-count {
  position: absolute; top: -7px; right: -10px;
  background: var(--c-accent); color: var(--c-on-accent);
  font-size: 0.66rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
/* padding 12 y no 8: con 8 el área táctil quedaba en 38 px y la guía son 48. */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 12px; margin-right: -12px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--c-header-text); margin: 5px 0; border-radius: 2px; transition: 0.2s; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch;
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--border-soft);
    padding: 8px 16px 16px;
    gap: 0;
    box-shadow: var(--shadow);
  }
  /* Cada entrada ocupa el ancho completo y mide 48 px: en el escritorio el cursor apunta a
     un píxel, pero en el celular la yema del dedo tapa un cuadrado de 8 mm. Con el enlace
     ajustado al texto había que acertarle a una tira de 24 px de alto por 65 de ancho. */
  .site-nav > a {
    display: flex; align-items: center;
    min-height: 48px; padding: 0 8px;
    font-size: 1.02rem; opacity: 1;
    border-bottom: 1px solid var(--border-soft);
  }
  .site-nav > a:last-of-type { border-bottom: 0; }
  .site-nav a.is-current { text-decoration: none; }
  /* La entrada activa se marca con una barra al costado y no con subrayado: en una lista
     vertical el subrayado se confunde con la línea que separa las filas. */
  .site-nav a.is-current { box-shadow: inset 3px 0 0 var(--c-primary-on-header); }
  /* El botón de WhatsApp no es una fila más de la lista: es la acción. */
  .site-nav .nav-wa {
    justify-content: center; margin-top: 12px;
    min-height: 48px; border-radius: var(--radius-btn); border-bottom: 0;
  }
  .site-nav .cart-link { min-height: 48px; padding: 0 8px; }
  .site-nav.is-open { display: flex; }
  /* Con seis o siete entradas el cajón puede pasar del alto de la pantalla. Que ruede solo:
     si no, las últimas quedan fuera de alcance y el visitante cree que no existen. */
  .site-nav { max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Hero ---------- */

.hero-center { padding: clamp(52px, 9vw, 120px) 0; text-align: center; }
.hero-center-inner { max-width: 780px; margin: 0 auto; }
.hero-sub { font-size: 1.15rem; color: var(--c-muted); max-width: 56ch; margin: 0 auto 1.5em; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.hero-split { padding: clamp(40px, 6.5vw, 96px) 0; }
.hero-split-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-split-text .hero-sub { margin: 0 0 1.5em; }
.hero-split-text .hero-actions { justify-content: flex-start; }
.hero-split-media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3.2; object-fit: cover; width: 100%; }

.hero-cover {
  min-height: min(78dvh, 720px);
  display: flex; align-items: center;
  background-size: cover; background-position: center;
  color: #fff; text-align: center;
  padding: 80px 0;
}
.hero-cover-inner { max-width: 820px; margin: 0 auto; }
.hero-cover .hero-sub { color: rgba(255,255,255,0.88); }

@media (max-width: 820px) {
  .hero-split-grid { grid-template-columns: 1fr; }
  .hero-split-text .hero-actions { justify-content: center; }
  .hero-split-text { text-align: center; }
  .hero-split-text .hero-sub { margin-inline: auto; }
}

/* ---------- Secciones ---------- */

/* El aire vertical escala con el ANCHO y no con el alto. Con `vh` un celular —alto y
   angosto— recibía el espaciado de escritorio (73 px arriba y 73 abajo, en 375 px de
   ancho), y el sitio se volvía un scroll eterno por espacio vacío. */
.section { padding: clamp(44px, 7vw, 104px) 0; }
.section-alt { background: var(--c-surface); }
.section-head { max-width: 640px; margin: 0 0 clamp(22px, 3.5vw, 48px); }
.section-sub { color: var(--c-muted); font-size: 1.05rem; }
.section-more { margin-top: 40px; }

/* Destacados */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 36px); }
.feature-icon { font-size: 1.9rem; margin-bottom: 12px; }
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--c-muted); font-size: 0.97rem; margin: 0; }

/* Nosotros */
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Sin imagen, dos columnas dejarían media sección vacía. El límite de ancho va en el texto
   y no en el contenedor, para no perder la alineación con el resto de las secciones. */
.about-grid:not(:has(.about-media)) { grid-template-columns: 1fr; }
.about-grid:not(:has(.about-media)) .about-text { max-width: 68ch; }
.about-image-left { direction: rtl; }
.about-image-left > * { direction: ltr; }
.about-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.rich-text { color: color-mix(in srgb, var(--c-text) 82%, var(--c-muted)); }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* Servicios */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
/* Igualar alturas solo cuando hay MÁS DE UNA columna. En una sola —o sea, en todo celular—
   igualar significa estirar cada tarjeta hasta la más larga, y las cortas quedan con medio
   recuadro vacío abajo. En el celular cada tarjeta mide lo que dice. */
@media (min-width: 620px) { .services-grid { grid-auto-rows: 1fr; } }
.service-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.service-media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.service-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.service-body p { color: var(--c-muted); font-size: 0.95rem; flex: 1; }
.service-price { font-weight: 700; color: var(--c-primary-text); margin-top: 8px; }

/* Galería */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-item { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.gallery-item img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item figcaption {
  position: absolute; inset: auto 0 0;
  padding: 24px 14px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff; font-size: 0.85rem;
}

/* Testimonios */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.testimonial {
  margin: 0; padding: 26px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.testimonial p { font-size: 1.02rem; }
.testimonial footer { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.testimonial footer span { color: var(--c-muted); font-size: 0.85rem; }

/* FAQ */
.faq-container { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item summary {
  cursor: pointer; padding: 18px 0;
  font-weight: 600; font-size: 1.02rem;
  list-style: none; position: relative; padding-right: 32px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--c-muted); transition: transform 0.2s;
}
.faq-item[open] .faq-mark { transform: translateY(-50%) rotate(45deg); }
.faq-answer { padding: 0 0 18px; color: var(--c-muted); }

/* CTA */
.section-cta { background: var(--c-primary); color: var(--c-on-primary); }
.cta-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.cta-inner p { color: color-mix(in srgb, var(--c-on-primary) 82%, transparent); font-size: 1.08rem; }
.cta-inner .btn { margin-top: 10px; }
/* El botón del CTA invierte: se rellena con el color del texto sobre la banda. */
.section-cta .btn-cta { background: var(--c-on-primary); color: var(--c-primary); }

/* Horario */
/* Un dia puede tener varios rangos (mediodia y noche): el nombre queda a la izquierda y
   los rangos se apilan a la derecha, en vez de repetir la fila con el dia en blanco. */

.hours-container { max-width: 620px; }
.hours-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.hours-head h2 { margin: 0; }

/* Estado en vivo: lo calcula site.js, y sin JS simplemente no aparece. */
.hours-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 600;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid currentColor;
}
.hours-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: currentColor;
}
.hours-status.is-open { color: #22b866; }
.hours-status.is-closed { color: var(--c-muted); }

.hours-list { margin-top: 26px; }
.hours-day {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding: 15px 2px;
  border-bottom: 1px solid var(--border-soft);
}
.hours-day:last-child { border-bottom: 0; }
.hours-day-name {
  font-weight: 600; font-size: 1rem;
  color: var(--c-text);
}
/* Los rangos se alinean a la derecha y en columna cuando hay más de uno. */
.hours-day-times {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted); font-size: 0.97rem;
  text-align: right;
}
.hours-closed { color: var(--c-muted); opacity: 0.7; }

/* El día en curso se destaca, para no obligar a buscarlo. */
.hours-day.is-today .hours-day-name { color: var(--c-primary-text); }
.hours-day.is-today .hours-day-times { color: var(--c-text); }

@media (max-width: 520px) {
  .hours-day { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hours-day-times { align-items: flex-start; text-align: left; }
}

/* Contacto */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-grid:has(.contact-map:only-child), .contact-grid:not(:has(.contact-map)) { grid-template-columns: 1fr; }
.contact-row { margin-bottom: 18px; }
.contact-label {
  display: block; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-muted); margin-bottom: 2px;
}
.contact-row p { margin: 0; font-size: 1.02rem; }
.contact-info .btn { margin-top: 10px; }
.contact-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-map iframe { width: 100%; height: 340px; border: 0; display: block; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Menú de restaurante ---------- */

.menu-page { padding: clamp(28px, 4.5vw, 64px) 0 72px; }
.menu-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.menu-header h1 { margin: 0; }
.menu-search {
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--c-surface);
  color: var(--c-text);
  padding: 10px 16px;
  font-size: 0.95rem;
  min-width: 220px;
  font-family: var(--f-body);
}
.menu-search:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.menu-cats {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 14px 0; margin-bottom: 10px;
  position: sticky; top: 68px;
  background: var(--c-bg);
  z-index: 10;
  scrollbar-width: none;
}
.menu-cats::-webkit-scrollbar { display: none; }
.menu-cats a {
  white-space: nowrap; text-decoration: none;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.88rem; font-weight: 500;
}
.menu-cats a:hover { border-color: var(--c-primary-text); color: var(--c-primary-text); }
.menu-category { padding: 28px 0 8px; }
.menu-category h2 { border-bottom: 2px solid var(--c-primary); display: inline-block; padding-bottom: 6px; margin-bottom: 4px; }
.menu-cat-desc { color: var(--c-muted); margin-bottom: 10px; }
.menu-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; margin-top: 14px; }
@media (max-width: 820px) { .menu-items { grid-template-columns: 1fr; } }
.menu-item { display: flex; gap: 16px; padding: 14px 0; }
.menu-item-media img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: calc(var(--radius) * 0.7);
}
.menu-item-body { flex: 1; min-width: 0; }
.menu-item-top { display: flex; align-items: baseline; gap: 10px; }
.menu-item-top h3 { margin: 0; font-size: 1.02rem; }
.menu-dots { flex: 1; border-bottom: 2px dotted var(--border); transform: translateY(-4px); }
.menu-price { font-weight: 700; color: var(--c-primary-text); white-space: nowrap; }
.menu-item-desc { color: var(--c-muted); font-size: 0.9rem; margin: 4px 0 0; }
.menu-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tag {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary-text);
}
.tag-picante { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
.tag-vegetariano, .tag-vegano { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; }
.tag-nuevo { background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: color-mix(in srgb, var(--c-accent) 80%, var(--c-text)); }

/* Adelanto del menú (home) */
/* `grid-auto-rows: 1fr` iguala la altura de TODAS las tarjetas, no solo las de una misma
   fila: una cuadrícula con filas de distinta altura se ve desordenada. */
.menu-preview-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; align-items: stretch;
}
/* Solo con dos columnas o más: en una sola, igualar alturas deja huecos (ver .services-grid). */
@media (min-width: 660px) { .menu-preview-grid { grid-auto-rows: 1fr; } }
/* Todas las tarjetas miden lo mismo: una cuadrícula con alturas distintas se ve
   desordenada. La descripción se recorta a 3 líneas y, si no cabe, aparece "Ver más". */
.menu-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; background: var(--c-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.menu-card-media img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.menu-card-body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; }
.menu-card-cat {
  display: block; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--c-muted); margin-bottom: 5px;
}
.menu-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.menu-card-top h3 { margin: 0; }
.menu-card-body p {
  color: var(--c-muted); font-size: 0.92rem; margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3; overflow: hidden;
}
/* Cuando la tarjeta está expandida, la descripción se muestra completa. */
.menu-card.is-open .menu-card-body p { -webkit-line-clamp: unset; line-clamp: unset; }
.menu-card-more {
  align-self: flex-start; margin-top: 10px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--c-primary-text); font-family: var(--f-body);
  font-size: 0.84rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.menu-card-more:hover { text-decoration: underline; }
.menu-card-more .icon { transition: transform 0.2s ease; }
.menu-card.is-open .menu-card-more .icon { transform: rotate(180deg); }
.menu-card-spacer { flex: 1; }

/* ---------- Tienda ---------- */

.shop-page, .product-page, .cart-page { padding: clamp(28px, 4.5vw, 64px) 0 72px; }
.shop-header h1 { margin-bottom: 4px; }
/* Texto solo para lectores de pantalla. El buscador tiene un icono por boton y un
   placeholder por etiqueta; sin esto, quien navega con lector oye "boton" y "cuadro de
   texto" y no sabe para que son. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shop-search { display: flex; gap: 8px; margin-bottom: 4px; max-width: 26rem; }
.shop-search input {
  flex: 1; padding: 11px 14px; font: inherit;
  color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.shop-search input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.shop-search button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--c-bg); color: var(--c-text); cursor: pointer;
}
.shop-search button:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); }

.shop-cats { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 22px; scrollbar-width: none; }
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cats a {
  white-space: nowrap; text-decoration: none;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 0.88rem; font-weight: 500;
}
.shop-cats a.is-active { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }

/* DOS columnas desde el celular. `auto-fill` con 230px de mínimo daba UNA sola columna a
   375px —el ancho por donde entra casi todo el tráfico de una tienda que se comparte por
   WhatsApp e Instagram— y ahí un catálogo de doce piezas se siente infinito: doce pantallas
   de scroll. Dos es lo que hacen las tiendas de verdad a ese ancho.
   `grid-auto-rows: 1fr` acá SÍ (la regla de no igualar alturas era para UNA columna, donde
   estira cada tarjeta hasta la más larga; con dos, igualar la fila es lo correcto). */
.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; grid-auto-rows: 1fr; }
@media (min-width: 560px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; } }
/* Columnas fijas, mismo mecanismo que gallery/services/portfolio: con catorce productos,
   cuatro columnas dejan la tarjeta chica y la página rala; tres la llenan. */
@media (min-width: 900px) {
  .products-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .products-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .products-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 559px) {
  .product-body { padding: 10px 12px 14px; }
  .product-body h2, .product-body h3 { font-size: 0.9rem; }
}
.product-card {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; background: var(--c-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-media { position: relative; background: var(--c-surface); }
.product-media img { aspect-ratio: 1; object-fit: cover; width: 100%; }
/* La vitrina (settings.shop.vitrina). Un producto ALTO —una figura, una botella, un vestido
   en percha— recortado a cuadrado pierde la cabeza o la base, que es justo su silueta. Y
   `contain` sin una placa detrás se ve accidental, así que van juntos: la placa es más CLARA
   que la página, que es lo que hace que fotos de orígenes distintos (el render del fabricante
   sobre blanco y la foto casera del dueño en su repisa) se lean como una sola grilla en vez
   de como dos tiendas. Se deriva del fondo, así que también funciona en un tema oscuro. */
.product-media.media-4x5 img, .product-media.media-4x5 .product-placeholder,
.product-gallery-main.media-4x5 img { aspect-ratio: 4 / 5; }
.product-media.media-3x4 img, .product-media.media-3x4 .product-placeholder,
.product-gallery-main.media-3x4 img { aspect-ratio: 3 / 4; }
.product-media.media-contain,
.product-gallery-main.media-contain img,
.product-gallery-main.media-contain ~ .product-thumbs .thumb img {
  background: color-mix(in srgb, var(--c-bg) 82%, #fff);
}
.product-media.media-contain img,
.product-gallery-main.media-contain img { object-fit: contain; padding: 6%; }
.product-gallery-main.media-contain ~ .product-thumbs .thumb img { object-fit: contain; padding: 8%; }
.product-placeholder {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-heading); font-size: 3rem; font-weight: 800;
  color: color-mix(in srgb, var(--c-text) 22%, transparent);
}
.product-placeholder-lg { font-size: 5rem; border-radius: var(--radius); background: var(--c-surface); }
.product-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: 999px; color: #fff;
}
.badge-sale { background: var(--c-accent); color: var(--c-on-accent); }
/* Agotado: el sello no alcanza. Una tarjeta muerta con la misma prestancia que una
   disponible es el catálogo mintiendo —el visitante se ilusiona y hace clic para nada—, y
   es el defecto que cometen casi todas las tiendas del rubro. Al pasar el mouse vuelve
   entera, para poder mirarla igual. El gris sale del tema y no fijo: uno azulado sobre una
   página cálida se ve sucio. */
.badge-out { background: color-mix(in srgb, var(--c-muted) 82%, #000); }
/* Se apagan la FOTO y el TEXTO, no la tarjeta. La tarjeta lleva `.reveal`, que ya maneja su
   propia opacity para la animación de entrada y gana por especificidad: bajarle la opacidad
   ahí no se veía nunca. El sello se queda entero —es lo único que hay que leer— y al pasar
   el mouse vuelve todo, para poder mirarla igual. */
.product-card:has(.badge-out) .product-media img { filter: grayscale(1); opacity: 0.5; }
.product-card:has(.badge-out) .product-body { opacity: 0.6; }
.product-card:has(.badge-out):hover .product-media img { filter: none; opacity: 1; }
.product-card:has(.badge-out):hover .product-body { opacity: 1; }
.product-media img, .product-body { transition: opacity 0.2s ease, filter 0.2s ease; }
.product-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.product-body h2 { margin: 0 0 4px; font-size: 0.98rem; }
.product-price { display: flex; gap: 10px; align-items: baseline; font-weight: 700; color: var(--c-primary-text); }
.product-price s { color: var(--c-muted); font-weight: 400; font-size: 0.88rem; }
.product-price-lg { font-size: 1.5rem; margin-bottom: 16px; }

/* Detalle de producto */
.breadcrumb { font-size: 0.88rem; color: var(--c-muted); margin-bottom: 22px; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary-text); }
.product-detail { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 820px) { .product-detail { grid-template-columns: 1fr; } }
.product-gallery-main { position: relative; }
.product-gallery-main img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; }
.product-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb {
  border: 2px solid transparent; border-radius: calc(var(--radius) * 0.6);
  padding: 0; overflow: hidden; cursor: pointer; background: none; width: 68px; height: 68px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--c-primary-text); }
.product-desc { margin-bottom: 22px; }
.product-form .field { margin-bottom: 14px; }
.product-buy-row { display: flex; gap: 14px; align-items: stretch; margin-top: 18px; flex-wrap: wrap; }
.qty-control {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden;
}
.qty-control button {
  width: 42px; height: 100%; min-height: 48px; border: 0; background: var(--c-surface);
  font-size: 1.1rem; cursor: pointer; color: var(--c-text);
}
.qty-control input {
  width: 52px; border: 0; text-align: center; font-size: 1rem;
  font-family: var(--f-body); color: var(--c-text); background: var(--c-bg);
  -moz-appearance: textfield; appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; }
.added-note { color: #16a34a; font-weight: 600; margin-top: 12px; }
.related-section { padding-bottom: 0; }
.related-section h2 { margin-bottom: 24px; }

/* ---------- Carrito ---------- */

.cart-container { max-width: 720px; }
.cart-items { border-top: 1px solid var(--border-soft); margin-top: 10px; }
.cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); align-items: center; }
.cart-item-media img, .cart-item-media .ph {
  width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--radius) * 0.6);
}
.cart-item-media .ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); font-weight: 800; font-family: var(--f-heading);
  color: color-mix(in srgb, var(--c-text) 25%, transparent);
}
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-body h3 { margin: 0; font-size: 0.98rem; }
.cart-item-opts { color: var(--c-muted); font-size: 0.84rem; margin: 2px 0 0; }
.cart-item-price { font-weight: 700; white-space: nowrap; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.cart-item-qty button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--c-surface); cursor: pointer; color: var(--c-text); font-size: 0.95rem; line-height: 1;
}
.cart-item-remove { background: none; border: 0; color: var(--c-muted); cursor: pointer; font-size: 1.1rem; padding: 6px; }
.cart-item-remove:hover { color: #dc2626; }
.cart-summary { padding: 18px 0; }
.cart-total-row { display: flex; justify-content: space-between; font-size: 1.2rem; }
/* Subtotal y envio en gris y mas chicos: el numero que importa es el total, y tres lineas
   del mismo peso obligan a leer las tres para encontrarlo. */
.cart-sub-row { font-size: 0.95rem; color: var(--c-muted); margin-bottom: 4px; }
.cart-envio-falta {
  margin-top: 8px; font-size: 0.88rem; font-weight: 600;
  color: var(--c-primary-text);
}
.cart-note { color: var(--c-muted); font-size: 0.88rem; margin-top: 6px; }

/* Confirmacion del pedido. Es la unica prueba que le queda al cliente de que ordeno, asi
   que se ve como un recibo y no como un aviso al pasar. */
.cart-done { text-align: center; padding: 32px 0 48px; max-width: 26rem; margin: 0 auto; }
.cart-done-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-primary) 14%, transparent);
  color: var(--c-primary-text);
}
.cart-done h2 { margin: 0 0 6px; }
.cart-done-code { font-size: 1.05rem; color: var(--c-muted); margin: 0 0 2px; }
.cart-done-code strong { color: var(--c-text); letter-spacing: 0.08em; }
.cart-done-total { font-size: 1.15rem; font-weight: 700; margin: 0 0 20px; }
.cart-done .btn { width: 100%; }
.cart-done-help { color: var(--c-muted); font-size: 0.9rem; margin-top: 14px; line-height: 1.5; }
.cart-done-back {
  display: inline-block; margin-top: 18px; font-size: 0.9rem;
  color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px;
}
.checkout-form { border-top: 1px solid var(--border-soft); padding-top: 22px; }
.checkout-form h2 { font-size: 1.25rem; }
.error-note { color: #dc2626; font-weight: 600; margin-top: 10px; }

/* ---------- Formularios ---------- */

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: calc(var(--radius-btn) * 0.8 + 2px);
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--f-body); font-size: 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.radio-row { display: flex; gap: 20px; padding: 6px 0; }
.radio-row label { display: flex; gap: 7px; align-items: center; font-size: 0.95rem; cursor: pointer; }

.empty-note { color: var(--c-muted); padding: 32px 0; text-align: center; }
.empty-note .btn { margin-top: 12px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--c-footer-bg); color: var(--c-footer-text); margin-top: 40px; }
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1.15fr;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(34px, 5vw, 64px) 24px 28px;
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { margin-bottom: 12px; }
.footer-brand .brand-name { font-size: 1.2rem; }
.footer-text { opacity: 0.75; font-size: 0.93rem; max-width: 40ch; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
/* h2 y no h4: son títulos de sección del pie, hermanos de los del cuerpo. Con h4 la
   página saltaba de h2 a h4 y un lector de pantalla pierde el hilo de la jerarquía. */
.footer-col h2 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.6; margin-bottom: 14px;
}
.footer-col p { margin: 0 0 8px; font-size: 0.93rem; opacity: 0.85; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
/* Horario del footer: grilla de dos columnas. La primera mide lo que el día más largo
   necesite (y puede envolver si no cabe); la segunda alinea todas las horas a la derecha,
   con los turnos de un mismo día apilados. */
.footer-hours {
  display: grid; grid-template-columns: minmax(min-content, max-content) auto;
  gap: 8px 14px; align-items: baseline; font-size: 0.93rem;
  /* Acota el bloque: sin esto, en el footer de una columna el día queda pegado a la
     izquierda y la hora en el borde derecho con medio metro de vacío entre ambos. */
  max-width: 360px;
}
.fh-times { display: grid; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.fh-times span { white-space: nowrap; }
.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--c-footer-text) 15%, transparent);
  padding: 18px 24px; font-size: 0.82rem; opacity: 0.6;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }

/* ---------- Botón flotante de WhatsApp ---------- */

.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 54px; height: 54px; border-radius: 999px;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.55);
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: scale(1.06); }

/* ---------- Animaciones de entrada ---------- */

/* El contenido solo se oculta cuando el JS confirmó que está corriendo (clase .js), y
   `reveal-fallback` lo destapa si el observador nunca llegó a activarlo. Sin JS, o con JS
   roto, el sitio se ve completo: un sitio de cliente jamás debe quedar en blanco. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible,
.js.reveal-fallback .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Lightbox */
.menu-item-media img, .menu-card-media img, .gallery-item img, .product-gallery-main img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, #000 88%, transparent);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
body.lightbox-open { overflow: hidden; }
.lightbox-stage { margin: 0; max-width: min(92vw, 1100px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox-stage img {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.lightbox-caption { color: #fff; font-size: .95rem; opacity: .85; text-align: center; }
.lightbox-caption:empty { display: none; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; display: grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, #fff 14%, transparent); color: #fff;
  transition: background .15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: color-mix(in srgb, #fff 26%, transparent); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #fff; opacity: .7; font-size: .85rem; letter-spacing: .06em;
}
@media (max-width: 640px) {
  .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; }
  .lightbox-stage { max-width: 96vw; }
}

/* Reseñas */
.reviews-platforms { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 34px; }
.review-badge {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; min-width: 230px;
  background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  color: inherit; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.review-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.review-badge-brand { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary-text); flex: none; }
.review-badge-body { display: flex; flex-direction: column; gap: 2px; }
.review-badge-rating { display: flex; align-items: center; gap: 5px; font-size: 1.2rem; color: var(--c-text); }
.review-badge-rating .icon { color: var(--c-primary-text); }
.review-badge-meta { font-size: .85rem; color: var(--c-muted); }
.review-badge-go { margin-left: auto; color: var(--c-muted); transition: transform .15s ease, color .15s ease; }
.review-badge:hover .review-badge-go { transform: translateX(3px); color: var(--c-primary-text); }
.reviews-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.review-quote {
  margin: 0; padding: 22px; position: relative;
  background: var(--c-bg); border-radius: var(--radius); box-shadow: var(--shadow);
}
.review-quote-mark { color: var(--c-primary-text); opacity: .55; display: block; margin-bottom: 8px; }
.review-quote p { font-size: 1rem; margin-bottom: 12px; }
.review-quote footer { font-size: .88rem; color: var(--c-muted); display: flex; gap: 6px; align-items: baseline; }
.review-quote footer strong { color: var(--c-text); }
.review-quote-stars { display: inline-flex; gap: 2px; color: var(--c-primary-text); margin-bottom: 8px; }

/* Página de error (404) */
.error-page { display: flex; align-items: center; min-height: 60vh; padding: 60px 0; }
.error-box { text-align: center; max-width: 520px; margin: 0 auto; }
.error-code { font-size: 5rem; font-weight: 800; line-height: 1; color: var(--c-primary-text); opacity: .25; margin: 0; }
.error-box h1 { margin: 8px 0 10px; }
.error-text { color: var(--c-muted); margin-bottom: 22px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Formas de pago en el carrito */
.cart-payment { margin-top: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--c-primary) 7%, var(--c-bg)); border-radius: var(--radius); font-size: .92rem; }
.cart-payment-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.cart-payment-title .icon { color: var(--c-primary-text); }
.cart-payment ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.cart-iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Filtro de etiquetas y agotado del menú */
.menu-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.menu-filter {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  background: transparent; color: var(--c-text); font: inherit; font-size: .86rem;
}
.menu-filter.is-active { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary-text); }
.menu-item.is-agotado .menu-item-media img { filter: grayscale(1); opacity: .55; }
.menu-item.is-agotado .menu-item-body { opacity: .6; }
.badge-agotado {
  flex: none; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-muted);
}

/* Franja de aviso */
.announce-bar {
  display: block; text-align: center; padding: 9px 16px;
  background: var(--c-accent); color: var(--c-on-accent);
  font-size: .88rem; font-weight: 600; text-decoration: none;
}
.announce-bar .icon { vertical-align: -2px; }
a.announce-bar:hover { filter: brightness(1.06); }

/* Equipo */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.team-card { text-align: center; }
.team-photo { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; margin: 0 auto 14px; box-shadow: var(--shadow); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo-ph { display: grid; place-items: center; background: color-mix(in srgb, var(--c-primary) 14%, var(--c-surface)); color: var(--c-primary-text); font-size: 2.4rem; font-weight: 700; }
.team-card h3 { font-size: 1.05rem; margin-bottom: 2px; }
.team-role { color: var(--c-primary-text); font-size: .88rem; font-weight: 600; margin: 0 0 4px; }
.team-creds { color: var(--c-muted); font-size: .8rem; margin: 0 0 8px; }
.team-bio { color: var(--c-muted); font-size: .86rem; margin: 0; }

/* Sellos de confianza */
.trust-row { display: flex; flex-wrap: wrap; gap: 18px 34px; justify-content: center; }
.trust-item { display: flex; align-items: flex-start; gap: 12px; max-width: 260px; }
.trust-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary-text); }
.trust-item strong { display: block; font-size: .94rem; }
.trust-text { color: var(--c-muted); font-size: .84rem; }

/* Link-in-bio */
.links-container { max-width: 520px; }
.links-list { display: flex; flex-direction: column; gap: 12px; }
.link-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--radius-btn);
  background: var(--c-surface); border: 1.5px solid color-mix(in srgb, var(--c-text) 14%, transparent);
  color: var(--c-text); text-decoration: none; font-weight: 600;
  transition: transform .14s ease, border-color .14s ease;
}
.link-btn:hover { transform: translateY(-2px); border-color: var(--c-primary-text); }
.link-btn-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary-text); flex: none; }
.link-btn-go { margin-left: auto; color: var(--c-muted); }
.link-btn:hover .link-btn-go { color: var(--c-primary-text); }

/* Consulta por WhatsApp */
.lead-container { max-width: 560px; }
.lead-form { background: var(--c-surface); padding: 26px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Planes / paquetes */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; align-items: stretch; }
/* Con exactamente 4 planes, auto-fit deja 3 arriba y 1 huérfano abajo en pantallas
   medianas. Se fuerza 2×2 y, cuando hay lugar de verdad, los 4 en una fila: comparar
   precios exige verlos juntos. El :has cuenta los hijos sin tocar el partial. */
@media (min-width: 620px) {
  .pricing-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .pricing-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid:has(> :nth-child(4):last-child) .pricing-card { padding: 28px 20px 22px; }
}
.pricing-card {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 26px 26px;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--c-bg);
}
/* El plan destacado se marca con el color de la marca, no con tamaño: crecer una tarjeta
   descuadra la grilla en móvil y con 2 columnas. */
.pricing-featured { border-color: var(--c-primary-text); box-shadow: 0 16px 38px -20px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.pricing-badge {
  position: absolute; top: -12px; left: 24px;
  padding: 3px 12px; border-radius: 999px;
  background: var(--c-primary); color: var(--c-on-primary);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.pricing-card h3 { font-size: 1.08rem; margin: 0; }
/* tabular-nums: los precios se leen en fila comparándose entre tarjetas, y con cifras de
   ancho variable las comas y los dígitos no alinean. */
.pricing-price { font-family: var(--f-heading); font-size: 1.9rem; font-weight: 800; color: var(--c-primary-text); margin: 6px 0 2px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pricing-period { font-size: 0.95rem; font-weight: 600; color: var(--c-muted); margin-left: 3px; }
.pricing-text { color: var(--c-muted); font-size: 0.92rem; margin: 0 0 16px; }
.pricing-features {
  list-style: none; margin: 0 0 24px; padding: 16px 0 0;
  border-top: 1px solid var(--border-soft);
  display: grid; gap: 9px; align-content: start; flex: 1;
}
/* min-width: 0 en el texto: sin eso, una línea larga sin espacios desborda la tarjeta en
   vez de cortarse (el copy lo escribe el cliente desde el admin). */
.pricing-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; }
.pricing-features li span { min-width: 0; overflow-wrap: anywhere; }
.pricing-features .icon { flex: none; color: var(--c-primary-text); margin-top: 2px; }
/* Lo que no viene en el plan pero se puede sumar, con su precio: se muestra como camino,
   no como carencia. */
.pricing-features .pricing-addon { color: var(--c-muted); }
.pricing-features .pricing-addon .icon { color: color-mix(in srgb, var(--c-primary) 55%, transparent); }

.pricing-footnote { color: var(--c-muted); font-size: 0.85rem; margin: 24px 0 0; }

/* Escribir reseña */
.reviews-write { text-align: center; margin: -14px 0 30px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.reviews-write a { color: var(--c-muted); font-size: .88rem; text-decoration: none; border-bottom: 1px dashed currentColor; }
.reviews-write a:hover { color: var(--c-primary-text); }
.reviews-write .icon { vertical-align: -2px; margin-right: 3px; }

/* Compartir por WhatsApp */
.share-wa {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .88rem;
  color: var(--c-muted); padding: 0;
}
.share-wa:hover { color: var(--c-primary-text); }
.checkout-form .btn .icon { margin-right: 8px; }
/* El crédito de la agencia es su única publicidad en el sitio de un cliente, así que el
   enlace tiene que LEERSE como enlace. Antes heredaba el color del párrafo y solo se
   distinguía por el subrayado: en un pie tenue, a 13 px, eso no alcanza. Ahora el texto de
   alrededor va atenuado y el nombre va a color pleno, con subrayado más marcado y un hover
   que responde. Sigue siendo discreto — no es el sitio de la agencia. */
.footer-credit { color: color-mix(in srgb, var(--c-footer-text) 65%, transparent); }
.footer-credit a {
  color: var(--c-footer-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--c-footer-text) 55%, transparent);
  transition: text-decoration-color .15s ease, opacity .15s ease;
}
.footer-credit a:hover { text-decoration-color: currentColor; }
.footer-credit a:focus-visible { outline: 2px solid var(--c-footer-text); outline-offset: 3px; border-radius: 2px; }

/* ---------- Armá tu plan (selector de add-ons) ---------- */
/* Dos columnas en escritorio: las opciones a la izquierda y el total pegado a la derecha,
   siempre a la vista. En móvil el total baja al final pero se queda fijo abajo, porque un
   total que hay que ir a buscar no sirve para decidir. */

.picker { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) {
  .picker { grid-template-columns: 1.55fr 1fr; align-items: start; }
  /* Las dos listas se apilan a la izquierda y el total queda fijo a la derecha: decidir
     mirando el número es el punto del selector, así que no puede quedar fuera de vista. */
  .picker-block { grid-column: 1; }
  .picker-total { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 96px; }
}
.picker-block { border: 0; margin: 0; padding: 0; min-width: 0; }
.picker-block legend {
  font-family: var(--f-heading); font-weight: 700; font-size: 1.02rem;
  margin-bottom: 12px; padding: 0;
}
.picker-block + .picker-block { margin-top: 6px; }
.picker-bases, .picker-addons { display: grid; gap: 10px; }

.picker-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.picker-option:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, transparent); }
.picker-option:has(input:checked) { border-color: var(--c-primary-text); background: color-mix(in srgb, var(--c-primary) 6%, var(--c-bg)); }
.picker-option:has(input:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.picker-option input { margin: 3px 0 0; accent-color: var(--c-primary-text); flex: none; width: 18px; height: 18px; }
.picker-option-body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.picker-option-name { font-weight: 600; font-size: 0.95rem; }
.picker-option-text { color: var(--c-muted); font-size: 0.85rem; }
.picker-option-price { font-weight: 700; color: var(--c-primary-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.picker-per { font-size: 0.78rem; font-weight: 600; color: var(--c-muted); }
/* Lo que todavía no existe se ve, pero no se puede marcar: muestra que la plataforma
   crece sin prometer algo que hoy no se entrega. */
.picker-option.is-soon { opacity: 0.6; cursor: default; }
.picker-option.is-soon:hover { border-color: var(--border-soft); }
.picker-soon {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  background: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-muted);
}

.picker-total {
  padding: 22px; border-radius: var(--radius);
  border: 1.5px solid var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 7%, var(--c-bg));
}
.picker-total-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.picker-total-line span { color: var(--c-muted); font-size: 0.9rem; }
.picker-total-line strong { font-family: var(--f-heading); font-size: 1.9rem; font-weight: 800; color: var(--c-primary-text); font-variant-numeric: tabular-nums; }
.picker-total-once { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.picker-total-once strong { font-size: 1.2rem; }
.picker-total-note { color: var(--c-muted); font-size: 0.85rem; margin: 12px 0 16px; }

/* ---------- Menú enfocado (QR de mesa) ---------- */
/* La carta se sirve sin el resto del sitio: nada de columnas de enlaces ni redes. Quien
   escaneó en la mesa quiere ver la comida y poder pedir, no navegar. */

.footer-bare { padding: 26px 0 30px; text-align: center; }
.footer-bare-line {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 0 6px; font-size: 0.88rem; opacity: 0.85;
}
.footer-bare .footer-credit { margin: 10px 0 0; font-size: 0.78rem; opacity: 0.7; }

/* Enlace a la reseña original: la cita se vuelve comprobable. */
.review-quote-src { display: inline-flex; align-items: center; gap: 4px; color: var(--c-primary-text); font-size: 0.85rem; text-decoration: none; }
.review-quote-src:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Videos (fachada) ---------- */
/* La miniatura es nuestra y el reproductor de YouTube/Instagram se crea al tocar play
   (public/js/site.js). Además de ahorrar peso, evita que un visitante que solo pasó por la
   página le quede registrado a Meta: el iframe de Instagram deja cookie al dibujarse. */

.video-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.video-apaisado { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.video-card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden;
}
.video-thumb {
  position: relative; display: block;
  border-radius: var(--radius); overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--border);
}
/* El alto lo fija el CSS y no el embed: sin el script de Instagram nadie nos dice cuánto
   mide el video, y un iframe sin alto colapsa a cero. */
.video-vertical .video-thumb { aspect-ratio: 9 / 16; }
.video-cuadrado .video-thumb { aspect-ratio: 1 / 1; }
.video-apaisado .video-thumb { aspect-ratio: 16 / 9; }

.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin miniatura, la placa lleva el logo de la plataforma arriba a la izquierda y no en el
   centro: ahí va el botón de play y los dos se pisaban. */
.video-thumb-vacia {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 14px;
  background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
  color: var(--c-primary-text);
  opacity: .55;
}
/* El iframe reemplaza a la miniatura DENTRO de la misma caja: sin salto de página al
   apretar play, que es lo que hace perder el hilo de lectura. */
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-bg) 78%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: var(--c-primary-text);
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.5);
  transition: transform .15s ease, background .15s ease;
}
.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-card:focus-visible { outline: 2px solid var(--c-primary-text); outline-offset: 3px; }
.video-card.is-playing .video-play,
.video-card.is-playing .video-thumb img { display: none; }

.video-info { display: flex; flex-direction: column; gap: 3px; }
.video-titulo { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.video-fuente {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; color: var(--c-muted);
}

/* ---------- Portafolio ---------- */
/* Una galería muestra fotos; un portafolio muestra TRABAJOS. De un trabajo importa para
   quién fue y de qué disciplina es — eso es lo que convierte "una foto linda" en "esto lo
   hicimos nosotros, para un cliente real". */

.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

.portfolio-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.portfolio-filtro {
  font: inherit; font-size: 0.86rem; font-weight: 600;
  min-height: 40px; padding: 0 16px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border);
  background: transparent; color: var(--c-muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.portfolio-filtro:hover { color: var(--c-text); border-color: var(--c-primary-text); }
.portfolio-filtro.is-active { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.portfolio-filtro:focus-visible { outline: 2px solid var(--c-primary-text); outline-offset: 2px; }

.portfolio-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; background: var(--c-bg);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.portfolio-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border); }
a.portfolio-item:focus-visible { outline: 2px solid var(--c-primary-text); outline-offset: 3px; }
.portfolio-item[hidden] { display: none; }

.portfolio-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface); }
.portfolio-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
a.portfolio-item:hover .portfolio-media img { transform: scale(1.03); }

.portfolio-body { padding: 16px 18px 18px; position: relative; }
/* La disciplina va arriba y chica: ubica el trabajo antes de leer el título. */
.portfolio-categoria {
  display: inline-block; margin-bottom: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-primary-text);
}
.portfolio-titulo { font-size: 1.02rem; margin: 0 0 2px; line-height: 1.3; }
.portfolio-cliente { margin: 0; font-size: 0.9rem; color: var(--c-muted); }
.portfolio-texto { margin: 8px 0 0; font-size: 0.9rem; color: var(--c-muted); line-height: 1.55; }
.portfolio-ir { position: absolute; right: 16px; bottom: 16px; color: var(--c-muted); transition: transform .15s ease, color .15s ease; }
a.portfolio-item:hover .portfolio-ir { transform: translateX(3px); color: var(--c-primary-text); }

/* ---------- Columnas elegidas por el cliente ---------- */
/* Reemplaza al CSS propio que escribieron tres de tres sitios: la grilla automática les
   dejaba la última fila coja o las miniaturas más chicas de lo que el trabajo merecía.
   Solo aplica en pantalla grande — en el celular manda una sola columna, siempre. */
@media (min-width: 900px) {
  .gallery-grid.cols-2, .services-grid.cols-2, .portfolio-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.cols-3, .services-grid.cols-3, .portfolio-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid.cols-4, .services-grid.cols-4, .portfolio-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- La última fila coja ---------- */
/* Cuatro piezas en una grilla de tres columnas quedan 3 + 1: una sola abajo, estirada a
   todo el ancho, que se lee como un error. Dos por dos se lee como un bloque.
   Es el defecto que empujó a los clientes a escribir CSS propio ("cuatro servicios: la
   grilla automática los ponía 3 + 1"), así que lo resuelve el core y no cada sitio.

   `:last-child:nth-child(4)` es una consulta por CANTIDAD: el último hijo es el cuarto,
   o sea que hay exactamente cuatro. Y `:not([class*="cols-"])` la desactiva cuando el
   cliente eligió columnas a mano — su decisión gana siempre.

   Sin soporte de `:has()` no pasa nada: se ve como antes. */
@media (min-width: 900px) {
  .video-grid:not([class*="cols-"]):has(> :last-child:nth-child(4)),
  .portfolio-grid:not([class*="cols-"]):has(> :last-child:nth-child(4)),
  .gallery-grid:not([class*="cols-"]):has(> :last-child:nth-child(4)),
  .services-grid:not([class*="cols-"]):has(> :last-child:nth-child(4)),
  .features-grid:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}