/* =============================
   Flor de mayo — Visual Website
   ============================= */

:root {
  /* Paleta semi-rústica e industrial */
  --bg: #f6f2eb;            /* Papel / calizo suave */
  --bg-accent: #eee7dd;     /* Superficie alterna */
  --ink: #1f1f1f;           /* Carbón */
  --muted: #5f5f5f;         /* Gris cálido */
  --rose: #1f1f1f;          /* Botones primarios oscuros */
  --rose-2: #3a3a3a;        /* Variante oscura */
  --leaf: #b68c62;          /* Acabado latón/bronze */
  --gold: #b68c62;          /* Alias */
  --card: #ffffff;          /* Tarjetas */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  padding-top: var(--nav-offset, 76px);
  scroll-padding-top: calc(var(--nav-offset, 76px) + 8px);
}

/* Performance: evita trabajo de render hasta que es visible */
.section { content-visibility: auto; contain-intrinsic-size: 1px 720px; }

/* Enlaces: alto contraste y subrayado sutil */
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--leaf); }

h1, h2, h3 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  line-height: 1.2;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); letter-spacing: .02em; text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

/* Nav */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 70; width: 100%; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .65rem .9rem; max-width: 1200px; margin: .6rem auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  border: 1px solid #00000012;
}
.site-header .nav { transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.site-header.is-scrolled .nav {
  background: color-mix(in oklab, #ffffff 82%, var(--bg-accent) 18%);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom-color: transparent;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 700; letter-spacing: .02em; padding: .15rem .25rem; border-radius: 999px; }
.logo { width: 44px; height: auto; aspect-ratio: 428/379; border-radius: 12px; background: #fff; border: 1px solid #00000010; box-shadow: 0 6px 14px rgba(0,0,0,.08); transition: transform .2s ease; }
.brand:hover .logo { transform: translateY(-1px) scale(1.02); }
.nav__links { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { position: relative; text-decoration: none; color: var(--ink); font-weight: 700; padding: .45rem .9rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid #00000010; background: #fff; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.nav__links a:hover { background: color-mix(in oklab, var(--bg-accent) 35%, #fff 65%); color: var(--ink); border-color: #0000001a; box-shadow: 0 6px 16px rgba(0,0,0,.06); transform: translateY(-1px); }
/* Píldora activa */
.nav__links a::after { content: none; }
.nav__links a.is-active { color: var(--leaf); background: color-mix(in oklab, var(--bg-accent) 55%, #fff 45%); border-color: color-mix(in oklab, var(--leaf) 18%, #000 2%); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.nav__toggle { display: none; border: 0; background: transparent; font-size: 1.5rem; cursor: pointer; }

/* Barra de progreso de lectura en el header */
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; width: var(--scroll-progress, 0%); background: linear-gradient(90deg, var(--leaf), var(--rose)); box-shadow: 0 1px 0 rgba(0,0,0,.05) inset; }

@media (max-width: 840px) {
  .nav { border-radius: 0; margin-top: 0; }
  .nav__toggle { display: inline-block; }
  .logo { width: 40px; height: auto; }
  .nav__links { position: fixed; inset: var(--nav-offset, 64px) 0 auto 0; background: color-mix(in oklab, var(--bg-accent) 70%, white 30%);
    padding: 1rem; transform: translateY(-20px); opacity: 0; pointer-events: none; flex-direction: column; gap: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }
  .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* Hero */
.hero { position: relative; min-height: 60vh; display: grid; place-items: start center; color: var(--ink); }
.hero .wave { display: none; }
.petals { display: none; }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; align-items: center; justify-items: center; gap: clamp(1rem, 4vw, 3rem); max-width: 1000px; margin: 0 auto; padding: 2rem 1rem 1rem; }
.hero__copy { text-align: center; display: block; width: min(100%, 720px); margin: 0 auto; background: #fff; padding: 1.25rem 1.5rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.08); border: 1px solid #e6e1d8; }
/* Párrafos justificados dentro del bloque del héroe */
.hero__copy p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.hero__logo { display: block; width: clamp(200px, 32vw, 420px); height: auto; margin: 0 auto .5rem; filter: drop-shadow(0 8px 24px rgba(0,0,0,.12)); }
.hero__copy .lead { font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--muted); max-width: 48ch; }
.hero__ctas { display: flex; gap: .75rem; margin: 1.25rem 0; }
.hero__badges { list-style: none; display: flex; gap: .75rem; padding: 0; margin: 1rem 0 0; flex-wrap: wrap; }
.hero__badges li { background: #fff; border: 1px solid #00000010; padding: .4rem .7rem; border-radius: 999px; font-size: .875rem; color: var(--muted); }
/* Hero visual desactivado en esta versión minimal */

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1fr 1.1fr; }
  .hero__copy { text-align: left; margin: 0; }
}

.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; border-radius: 6px; text-decoration: none; font-weight: 700; letter-spacing: .02em; }
.btn--primary { background: var(--rose); color: #fff; box-shadow: none; border: 1px solid #00000020; }
.btn--primary:hover { filter: brightness(0.98); }
.btn--ghost { color: var(--ink); background: transparent; border: 1px solid #d9d2c8; }

/* Sections */
.section { padding: clamp(3rem, 8vw, 6rem) 1rem; }
.section#destacados, #destacados.section, .section#productos, #productos.section { padding-top: .5rem; }
.section__head { max-width: 900px; margin: 0 auto 2rem; text-align: center; }
.section__head p { color: var(--muted); margin: .5rem auto 0; max-width: 60ch; }
/* Compensación de anclas por header fijo */
.hero, .section, #inicio, #nosotros, #esencia { scroll-margin-top: var(--nav-offset, 76px); }

/* Variante de sección alterna */
.section--alt { background: var(--bg-accent); border-top: 1px solid #e6e1d8; border-bottom: 1px solid #e6e1d8; }

/* Eyebrow label */
.eyebrow { display: inline-block; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }

/* Colección / Tiles */
.tiles { max-width: 1200px; margin: 1rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; display: flex; flex-direction: column; background: transparent; overflow: hidden; border: 2px solid #1f1f1f; border-radius: 10px; box-shadow: 6px 6px 0 #e6e1d8; width: 100%; }
/* Contenedor de imagen dentro de la tarjeta */
.tile__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--tile-bg);
  border-radius: 8px 8px 0 0; /* Redondea solo las esquinas superiores */
  overflow: hidden; /* Evita que la imagen se salga del contenedor redondeado */
}
/* Zoom out ~10% para Torta Flor de Mayo (más alto = muestra más imagen) */
.tile--tfm .tile__img { aspect-ratio: 400 / 330; background-size: cover; background-position: center; }
/* Igualar altura para evitar huecos en la grilla */
.tile--tall .tile__img { aspect-ratio: 400 / 330; background-size: cover; background-position: center; }
.tile__meta {
  position: static;
  color: #fff;
  padding: 1.1rem 1rem;
  background: rgba(0,0,0,.95);
  display: block;
  width: 100%;
  margin: 0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: none;
  backdrop-filter: blur(1px) saturate(120%);
  box-sizing: border-box;
}
.tile__meta .eyebrow { color: #fff; opacity: .9; }
.tile__meta h3 { margin: .2rem 0 0; color: #fff; }
.tile:hover { transform: translate(-2px, -2px); transition: transform .18s ease, box-shadow .18s ease; box-shadow: 8px 8px 0 #e6e1d8; }

/* Nuestra esencia */
.esencia__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 900px) { .esencia__inner { grid-template-columns: 1fr; } }
.esencia__copy p { color: var(--muted); }
.bullets { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.bullets li { position: relative; padding-left: 1.25rem; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .58rem; width: 10px; height: 2px; background: var(--leaf); }
.frame { background: #fff; border: 2px solid #1f1f1f; box-shadow: 6px 6px 0 #e6e1d8; border-radius: 10px; overflow: hidden; }
.frame img { display: block; width: 100%; height: auto; }

/* Proceso */
.steps { max-width: 1000px; margin: 1rem auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
.step { background: #fff; border: 1px dashed #d9d2c8; border-radius: 12px; padding: 1rem; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.05); }
.badge { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--leaf); color: #fff; font-weight: 700; margin-bottom: .35rem; }

/* Destacados / Carrusel */
.destacados .carousel { position: relative; max-width: 1200px; margin: 0 auto; border-radius: 24px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}
.carousel__viewport { display: flex; width: 100%; height: clamp(260px, 45vw, 520px); transform: translateX(0); transition: transform .7s cubic-bezier(.2,.7,0,1); }
.slide { position: relative; flex: 0 0 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.02); }
/* (revert) contain variant removed to use cover as antes */
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 25%, rgba(0,0,0,.22) 70%); }
.slide__caption { position: absolute; left: 10px; right: auto; bottom: 10px; color: #fff; padding: 0; z-index: 2; }
.caption-panel { display: inline-block; background: rgba(0,0,0,.55); color: #fff; padding: .75rem 1rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,.25); backdrop-filter: blur(2px); max-width: min(92vw, 640px); }
.caption-panel h3 { margin: 0 0 .25rem; }
.caption-panel p { margin: 0; opacity: .95; }
.slide__caption h3 { margin: 0 0 .25rem; color: #fff; }
.slide__caption p { margin: 0; opacity: .9; }
.carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; font-size: 28px; color: #fff; background: color-mix(in oklab, var(--rose) 75%, black 10%);
  box-shadow: 0 10px 25px rgba(0,0,0,.2); backdrop-filter: blur(4px); }
.carousel__btn:hover { filter: brightness(1.05); }
.carousel__btn.prev { left: 10px; }
.carousel__btn.next { right: 10px; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: .5rem; display: flex; gap: .4rem; justify-content: center; z-index: 2; }
.carousel__dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.55); cursor: pointer; }
.carousel__dots button[aria-current="true"] { background: #fff; width: 26px; border-radius: 999px; }

/* Carta */
.card { position: relative; min-height: 260px; border-radius: 24px; overflow: hidden; background: #fff; transform-style: preserve-3d;
  background-image: var(--img); background-size: cover; background-position: center; box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.card::before { content: ""; position: absolute; inset: 0; background: var(--bg-accent); mix-blend-mode: multiply; opacity: .1; }
.card__content { position: absolute; inset: auto 0 0 0; padding: 1rem; background: linear-gradient(180deg, #0000, #0003 20%, #0007);
  color: #fff; }
.card h3 { margin: 0 0 .25rem; }
.card p { margin: 0; opacity: .9; }

/* Variantes de tarjetas (removidas) */

/* Tilt effect variables (controlled by JS) */
.tilt { transition: transform .2s ease; will-change: transform; }
.tilt.is-tilting { transition: none; }

/* Galería */
.filters { display: inline-flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .75rem; }
.filter { border: 1px solid #f7cb4b66; background: #fff; color: var(--muted); border-radius: 999px; padding: .45rem .9rem; cursor: pointer; font-weight: 500; }
.filter.is-active, .filter:hover { background: linear-gradient(120deg, var(--rose), var(--rose-2)); color: #fff; border-color: transparent; }

.masonry { columns: 4 260px; column-gap: 1rem; max-width: 1200px; margin: 2rem auto 0; }
.gallery-item { break-inside: avoid; margin: 0 0 1rem; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.12); opacity: 1; transform: translateY(0); transition: opacity .35s, transform .35s; }
.gallery-item img { display: block; width: 100%; height: auto; }
.gallery-item.is-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* Historia (removida) */

/* Contacto */
.contacto__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
.contacto__card { background: var(--card); border: 1px solid #00000008; border-radius: 20px; padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.06); width: 100%; max-width: 560px; }
/* Centrar contenido e ítems de contacto */
.contacto__card { text-align: center; }
.contacto__item { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin: .25rem 0; }
.contacto__icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
@media (max-width: 900px) { .contacto__grid { grid-template-columns: 1fr; } }

/* Footer */
.footer { text-align: center; padding: 2rem 1rem 3rem; color: var(--muted); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px) scale(.98); filter: saturate(.8); }
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); filter: none; transition: .7s cubic-bezier(.2,.7,0,1); }

/* Subtle hover lift */
.card:hover { transform: translateY(-3px); }

/* Utilities */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Botones sociales flotantes */
.social-fabs { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; z-index: 65; }
.fab { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; overflow: visible;
  transform: translateZ(0); animation: float 4.5s ease-in-out infinite; background: #fff; border: 1px solid #00000010; box-shadow: 0 10px 28px rgba(0,0,0,.16);
  will-change: transform, box-shadow; transition: transform .18s ease, box-shadow .18s ease; }
.fab img { width: 28px; height: 28px; display: block; }
/* Glow base */
.fab::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; filter: blur(10px); opacity: .55; transform: scale(.9); transition: transform .25s ease, opacity .25s ease; }
/* Pulso de halo */
.fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand, #888); opacity: 0; transform: scale(.8);
  animation: pulse 2.8s ease-out infinite; pointer-events: none; }
.fab:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 14px 36px rgba(0,0,0,.22); }
.fab:hover::before { transform: scale(1); opacity: .95; }
.fab:focus-visible { outline: 0; box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand, #888) 28%, white 72%); transform: translateY(-1px) scale(1.04); }

/* Glow colors por marca */
.fab--wa { --brand: #25D366; }
.fab--ig { --brand: #E1306C; }
.fab--wa::before { background: radial-gradient(40% 40% at 50% 50%, rgba(37,211,102,.65), rgba(37,211,102,.15) 60%, rgba(37,211,102,0) 70%); }
.fab--ig::before { background: radial-gradient(40% 40% at 50% 50%, rgba(254,218,117,.55), rgba(214,41,118,.35) 50%, rgba(88,81,219,.2) 65%, rgba(0,0,0,0) 75%); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pulse {
  0% { opacity: 0; transform: scale(.85); }
  25% { opacity: .55; }
  100% { opacity: 0; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .fab { animation: none; }
  .fab::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { transition: none; }
}

/* Overrides: animaciones generales de botones y enlaces */
.nav__links a { transition: transform .16s ease, background-color .16s ease, color .16s ease; }
.nav__links a:hover { transform: translateY(-1px); }
.filter { transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease; }
.filter:hover { transform: translateY(-1px); }
/* Map CTA removed */
.carousel__btn { transition: transform .16s ease; }
.carousel__btn:hover { transform: translateY(-50%) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .btn, .nav__links a, .filter, .carousel__btn { transition: none; transform: none !important; }
}
@media (prefers-reduced-motion: reduce){.tile,.tile__img,.contacto__card{transition:none;transform:none!important}}

/* Overrides: hover interacciones para tarjetas */
.tile__img{position:relative;transition:transform .25s ease,filter .25s ease;will-change:transform}
.tile__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,rgba(0,0,0,.20));opacity:0;transition:opacity .25s ease}
.tile:hover .tile__img{transform:scale(1.06);filter:saturate(1.05) contrast(1.05) brightness(.95)}
.tile:hover .tile__img::after{opacity:1}
.tile:hover .tile__meta{transform:translateY(-2px)}
.tile:hover,.tile:focus{color:var(--ink)}
.tile:hover .tile__meta h3{color:inherit;text-shadow:0 0 10px rgba(182,140,98,.35)}
.tile:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in oklab, var(--leaf) 35%, white 65%);transform:translateY(-3px)}
.contacto__card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.contacto__card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.10);border-color:#00000014}