/* Artemisa Floral · paleta extraída del logo (olivo + arena) y de las fotos (girasol, rosa, vino) */
:root {
  --olivo: #6c6834;
  --olivo-osc: #4b4824;
  --olivo-claro: #8c8851;
  --arena: #dfc4a5;
  --arena-claro: #efe0cd;
  --crema: #f8f1e7;
  --papel: #fffaf3;
  --tinta: #29230e;
  --tinta-suave: #5d5638;
  --girasol: #e39a1c;
  --rosa: #d9658a;
  --rosa-palo: #e8bfb4;
  --vino: #6e3844;
  --ok: #4f7a3a;
  --alerta: #b3402e;
  --radio: 18px;
  --sombra: 0 10px 30px -12px rgba(75, 72, 36, .35);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--crema);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--olivo-osc); }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.serif { font-family: var(--serif); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px solid transparent; border-radius: 999px;
  padding: .7rem 1.3rem; font-weight: 500; letter-spacing: .02em;
  cursor: pointer; text-decoration: none; transition: transform 160ms var(--ease-out), background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible, .chip:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--girasol); outline-offset: 2px;
}
.btn-wa { background: var(--olivo); color: var(--crema); box-shadow: var(--sombra); }
.btn-wa:hover { background: var(--olivo-osc); }
.btn-ghost { background: transparent; border-color: var(--olivo); color: var(--olivo-osc); }
.btn-ghost:hover { background: var(--arena-claro); }
.btn-danger { background: transparent; border-color: var(--alerta); color: var(--alerta); }
.btn-danger:hover { background: #f7e1dc; }
.btn-sm { padding: .4rem .9rem; font-size: .875rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Cabecera / hero ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--arena);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--olivo-osc); }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand b { font-family: var(--serif); font-size: 1.55rem; letter-spacing: .14em; font-weight: 600; line-height: 1; }
.brand small { display: block; font-size: .65rem; letter-spacing: .5em; font-family: var(--serif); margin-top: 2px; }

.hero {
  background: var(--olivo); color: var(--arena);
  position: relative; overflow: hidden; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(227,154,28,.22), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(217,101,138,.18), transparent 60%);
}
.hero .wrap { display: grid; gap: 1.5rem; padding-block: clamp(2.2rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 820px) { .hero .wrap { grid-template-columns: 1.2fr .8fr; } }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5.5vw, 3.9rem); line-height: 1.04; margin: 0 0 .8rem; color: var(--arena-claro); }
.hero h1 em { color: var(--girasol); font-style: italic; }
.hero p { margin: 0 0 1.4rem; max-width: 46ch; color: var(--arena); font-size: 1.05rem; }
.hero .logo-wrap { justify-self: center; width: min(260px, 60%); opacity: .95; }
.hero .btn-wa { background: var(--arena); color: var(--olivo-osc); }
.hero .btn-wa:hover { background: var(--arena-claro); }

/* ---------- Filtros ---------- */
.filters { padding-block: 1.5rem .5rem; display: grid; gap: .9rem; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  border: 1.5px solid var(--olivo); background: transparent; color: var(--olivo-osc);
  border-radius: 999px; padding: .4rem 1rem; cursor: pointer; font-weight: 500; transition: background .2s, color .2s;
}
.chip[aria-pressed="true"] { background: var(--olivo); color: var(--crema); }
.filter-row { display: grid; gap: .8rem; }
@media (min-width: 720px) { .filter-row { grid-template-columns: 1fr 1fr 1fr; } }
.field { display: grid; gap: .25rem; }
.field label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.input {
  width: 100%; padding: .65rem .9rem; border-radius: 12px;
  border: 1.5px solid var(--arena); background: var(--papel);
}
.input:focus { border-color: var(--olivo); }
textarea.input { min-height: 90px; resize: vertical; }

/* ---------- Grilla de productos ---------- */
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); padding-block: 1rem 3rem; }
.card {
  background: var(--papel); border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--arena); display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(0,0,0,.02); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.card .ph { aspect-ratio: 4 / 5; background: var(--arena-claro); overflow: hidden; border: 0; padding: 0; cursor: pointer; width: 100%; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.card .body { padding: .9rem 1rem 1.1rem; display: grid; gap: .35rem; flex: 1; }
.card .tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa); font-weight: 600; }
.card h3 { margin: 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.1; font-weight: 600; }
.card .price { font-family: var(--serif); font-size: 1.5rem; color: var(--olivo-osc); font-weight: 600; }
.card .actions { margin-top: auto; padding-top: .5rem; }
.card .actions .btn { width: 100%; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--tinta-suave); grid-column: 1 / -1; }
.demo-banner { background: var(--girasol); color: var(--tinta); text-align: center; padding: .45rem 1rem; font-size: .9rem; font-weight: 500; }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(41,35,14,.55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal-back.open { display: flex; }
.modal { background: var(--papel); border-radius: 22px; width: min(860px, 100%); max-height: 92vh; overflow: auto; display: grid; position: relative; }
@media (min-width: 720px) { .modal.two { grid-template-columns: 1fr 1fr; } }
.modal .pic { background: var(--arena-claro); min-height: 260px; }
.modal .pic img { width: 100%; height: 100%; object-fit: cover; max-height: 70vh; }
.modal .info { padding: 1.5rem; display: grid; gap: .7rem; align-content: start; }
.modal h2 { margin: 0; font-family: var(--serif); font-size: 2rem; line-height: 1.05; }
.modal .close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--crema); cursor: pointer; font-size: 1.2rem; z-index: 2; }

/* ---------- Footer / flotante ---------- */
.footer { background: var(--olivo-osc); color: var(--arena); padding: 2rem 0; text-align: center; }
.footer img { margin: 0 auto .6rem; width: 70px; }
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; background: var(--olivo); color: var(--crema);
  display: grid; place-items: center; box-shadow: var(--sombra); text-decoration: none; font-size: 1.5rem;
}

/* ---------- Panel admin ---------- */
.admin-shell { min-height: 100vh; }
.login { min-height: 100vh; display: grid; place-items: center; background: var(--olivo); padding: 16px; }
.login .box { background: var(--papel); border-radius: 22px; padding: 2rem; width: min(400px, 100%); display: grid; gap: 1rem; }
.login img { width: 120px; margin: 0 auto; }
.tabs { display: flex; gap: .4rem; overflow-x: auto; padding-block: 1rem; }
.tab { white-space: nowrap; }
.panel { background: var(--papel); border: 1px solid var(--arena); border-radius: var(--radio); padding: 1rem; margin-bottom: 1rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.stat { background: var(--papel); border: 1px solid var(--arena); border-radius: 14px; padding: .8rem 1rem; }
.stat b { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--olivo-osc); }
.stat span { font-size: .8rem; color: var(--tinta-suave); letter-spacing: .06em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--arena-claro); vertical-align: top; font-size: .93rem; }
th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.b-nuevo { background: #fbe7c4; color: #7a4d00; }
.b-confirmado { background: #dbe8cf; color: #2f5420; }
.b-en_preparacion { background: #e6dcf2; color: #4a3270; }
.b-en_ruta { background: #d4e6f1; color: #1d4d6b; }
.b-entregado { background: #cfe3c8; color: #264d1a; }
.b-cancelado { background: #f1d4cf; color: #7a2418; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: .35rem .8rem; font-size: .93rem; }
.kv dt { color: var(--tinta-suave); }
.kv dd { margin: 0; word-break: break-word; }
.form-grid { display: grid; gap: .8rem; }
@media (min-width: 720px) { .form-grid.cols { grid-template-columns: 1fr 1fr; } .span2 { grid-column: 1 / -1; } }
.prod-row { display: grid; grid-template-columns: 64px 1fr auto; gap: .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--arena-claro); }
.prod-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--arena-claro); }
.prod-row .meta small { color: var(--tinta-suave); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--olivo-osc); color: var(--crema); padding: .7rem 1.2rem; border-radius: 999px; z-index: 80; box-shadow: var(--sombra); }
.toast.err { background: var(--alerta); }
.link-box { display: flex; gap: .5rem; align-items: center; background: var(--crema); border: 1px dashed var(--olivo-claro); border-radius: 12px; padding: .5rem .7rem; font-size: .8rem; word-break: break-all; }
.hidden { display: none !important; }

/* prefers-reduced-motion: ver bloque unificado más abajo */

/* Experiencia React: colección, controles y movimientos */
:root { --motion-fast: 180ms; --motion-normal: 260ms; --ease-out: cubic-bezier(.23,1,.32,1); }
html { scroll-padding-top: 86px; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.boot-screen { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:.7rem; color:var(--olivo-osc); font-size:.9rem; }
.boot-flower { color:var(--rosa); font-size:2.5rem; animation: bloom .9s ease-in-out infinite alternate; }
.boot-title { margin:0; font-family:var(--serif); font-size:1.3rem; font-weight:600; text-align:center; padding-inline:16px; }
@keyframes bloom { to { transform:rotate(18deg) scale(1.08); } }
.demo-banner { overflow:hidden; }
.topbar { z-index:40; }
.header-cta { gap:.45rem; }
.hero { background:linear-gradient(112deg,#55512a 0%,var(--olivo) 55%,#777244 100%); }
.hero-inner { min-height:400px; grid-template-columns:1.1fr .9fr; }
.hero-copy { position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:.42rem; color:var(--arena); font-size:.72rem; letter-spacing:.16em; font-weight:600; }
.eyebrow.olive { color:var(--olivo); }
.hero .eyebrow { margin-bottom:1rem; }
.hero .btn { text-decoration:none; }
.hero-btn { background:var(--arena); color:var(--olivo-osc); padding:.78rem 1.2rem; }
.hero-btn:hover { background:var(--arena-claro); }
.hero-note { display:flex; align-items:center; gap:.45rem; margin-top:1.5rem; color:#e6d8bd; font-size:.86rem; }
.logo-wrap { position:relative; width:min(320px,75%); }
.logo-wrap img { position:relative; z-index:1; border-radius:50% !important; box-shadow:0 24px 55px #29230e30; }
.logo-halo { position:absolute; inset:-12%; border-radius:50%; background:radial-gradient(circle,rgba(239,224,205,.24),transparent 68%); }
.catalog { padding-top:3.1rem; padding-bottom:2rem; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.section-title { margin:.35rem 0 0; color:var(--olivo-osc); font:600 clamp(2rem,4vw,2.7rem)/1.05 var(--serif); }
.section-heading>p { color:var(--tinta-suave); margin:0 0 .25rem; max-width:34ch; }
.filters-panel { background:var(--papel); border:1px solid #dfc4a580; border-radius:20px; padding:1.1rem; box-shadow:0 8px 28px -24px #4b4824; }
.filter-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.chips { gap:.4rem; }
.chip { min-height:40px; padding:.45rem 1.05rem; border-color:#d8c9ac; }
.chip:hover:not([aria-pressed="true"]) { background:#f5eddf; }
.chip[aria-pressed="true"] { box-shadow:0 4px 12px #4b48242c; }
.sort-field { display:flex; align-items:center; gap:.45rem; color:var(--olivo); }
.sort-field select { max-width:190px; background:transparent; border:0; padding:.45rem .1rem; color:var(--tinta-suave); font-size:.88rem; }
.sort-field select:focus-visible { outline:2px solid var(--girasol); }
.filter-row { grid-template-columns:minmax(220px,1.7fr) 1fr 1fr; gap:.75rem; }
.field { gap:.35rem; }
.field>span { font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-suave); font-weight:500; }
.input-wrap,.price-wrap { display:flex; align-items:center; min-height:46px; border:1px solid var(--arena); background:#fffdf9; border-radius:12px; padding:0 .75rem; color:#8b815f; }
.input-wrap:focus-within,.price-wrap:focus-within { outline:3px solid #e39a1c50; border-color:var(--olivo); }
.input-wrap .input,.price-wrap .input { border:0; outline:0; box-shadow:none; min-width:0; background:transparent; padding:.55rem .45rem; min-height:44px; }
.input-wrap .input:focus-visible,.price-wrap .input:focus-visible { outline:0; }
.input-wrap .input { padding-left:.65rem; }
.price-wrap .input { padding-left:.35rem; }
.results-line { min-height:33px; display:flex; align-items:end; justify-content:space-between; gap:1rem; padding-top:.7rem; }
.results-line p { color:var(--tinta-suave); font-size:.87rem; margin:0; }
.reset-btn { display:inline-flex; gap:.35rem; align-items:center; padding:.2rem 0; border:0; background:transparent; color:var(--olivo-osc); cursor:pointer; font-size:.84rem; }
.reset-btn:hover { text-decoration:underline; }
.grid { gap:1.2rem; padding-block:1.2rem 3.5rem; }
.card { border-radius:18px; border-color:#e6d7c2; box-shadow:0 7px 20px -18px #29230e; }
.card .ph { position:relative; aspect-ratio:4/4.7; background:#eee2cf; }
.card .ph img { transition:transform 400ms var(--ease-out); }
.image-hint { position:absolute; bottom:.75rem; right:.75rem; display:flex; align-items:center; gap:.3rem; padding:.4rem .65rem; background:#fffaf3ed; color:var(--olivo-osc); border-radius:999px; font-size:.73rem; opacity:0; transform:translateY(4px); transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out); }
.card .ph:focus-visible .image-hint { opacity:1; transform:translateY(0); }
.card .body { gap:.45rem; padding:1rem 1.05rem 1.05rem; }
.card .tag,.modal .tag { display:inline-flex; align-items:center; gap:.35rem; color:#a85d68; letter-spacing:.08em; }
.product-title { border:0; padding:0; text-align:left; background:transparent; cursor:pointer; font:600 1.45rem/1.08 var(--serif); color:var(--tinta); min-height:3.1rem; }
.product-title:hover { color:var(--olivo); }
.card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:.15rem; }
.card .price { font-size:1.55rem; }
.order-icon { width:37px; height:37px; display:grid; place-items:center; color:var(--olivo); background:#f1eadc; border-radius:50%; transition:background .2s,color .2s,transform 200ms var(--ease-out); }
.order-icon:hover { background:var(--olivo); color:white; }
.card .actions { padding-top:.3rem; }
.card-cta { width:100%; border:1px solid #d8c9ac; background:transparent; color:var(--olivo-osc); padding:.58rem .8rem; font-size:.88rem; }
.card-cta:hover { background:var(--olivo); color:var(--crema); border-color:var(--olivo); }
.skeleton-card { background:var(--papel); border:1px solid #e6d7c2; border-radius:18px; overflow:hidden; }
.skeleton-image { aspect-ratio:4/4.7; background:linear-gradient(100deg,#eee5d7 20%,#f9f4eb 40%,#eee5d7 60%); background-size:200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-copy { height:116px; margin:1rem; border-radius:10px; background:linear-gradient(100deg,#f0e8dc 20%,#faf6ef 40%,#f0e8dc 60%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position-x:-200%; } }
.empty { min-height:250px; display:grid; justify-items:center; align-content:center; gap:.45rem; color:var(--olivo); }
.empty p { margin:0; color:var(--tinta-suave); }
.empty .empty-title { color:var(--olivo-osc); font:600 1.7rem var(--serif); }
.empty .btn { margin-top:.7rem; }
.closing-cta { background:#eee2cf; }
.closing-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:2.4rem; }
.closing-inner .eyebrow { color:var(--olivo); }
.closing-inner h2 { margin:.35rem 0; font:600 clamp(1.8rem,4vw,2.5rem)/1.05 var(--serif); color:var(--olivo-osc); }
.closing-inner p { margin:0; color:var(--tinta-suave); }
.closing-btn { background:var(--olivo); color:var(--crema); white-space:nowrap; }
.closing-btn:hover { background:var(--olivo-osc); }
.footer { padding:2rem 1rem 1.3rem; }
.footer-brand { font-size:1.25rem; letter-spacing:.2em; }
.footer-caption { font-size:.9rem; opacity:.88; margin:.25rem 0 .9rem; }
.footer-caption a { color:var(--arena); }
.footer>small { font-size:.75rem; opacity:.58; }
.fab { display:grid; place-items:center; font-size:1rem; border:2px solid #f8f1e750; transition:background .2s; }
.fab:hover { background:var(--olivo-osc); }
.product-modal-back { display:flex; overflow:auto; }
.modal { overflow:auto; box-shadow:0 25px 90px #201c1470; }
.modal .pic { min-height:360px; }
.modal .pic img { max-height:min(76vh,700px); }
.modal .info { padding:clamp(1.4rem,4vw,2.5rem); align-content:center; gap:1rem; }
.modal h2 { font-size:clamp(2rem,4vw,2.7rem); }
.modal-price { font:600 2rem var(--serif); color:var(--olivo-osc); }
.modal-desc { margin:0; color:var(--tinta-suave); }
.modal-promise { display:flex; align-items:center; gap:.5rem; color:var(--olivo); font-size:.88rem; padding:.7rem 0; }
.modal-cta { justify-self:start; }
.modal .close { display:grid; place-items:center; box-shadow:0 2px 8px #29230e1e; }
@media (max-width:720px) {
 .hero-inner { grid-template-columns:1fr; min-height:auto; padding-block:2.8rem 2.2rem; }
 .hero .logo-wrap { position:absolute; width:150px; right:-14px; bottom:-20px; opacity:.22 !important; }
 .hero-copy { max-width:580px; }
 .hero h1 { max-width:12ch; }
 .hero p { max-width:38ch; }
 .section-heading { display:block; }
 .section-heading>p { margin-top:.55rem; }
 .filter-row { grid-template-columns:1fr 1fr; }
 .search-field { grid-column:1/-1; }
 .modal.two { grid-template-columns:1fr; }
 .modal .pic { min-height:0; height:min(42vh,360px); }
 .modal .pic img { max-height:100%; }
 .modal .info { gap:.7rem; }
}
@media (max-width:480px) {
 .wrap { width:min(100% - 24px,1180px); }
 .topbar .wrap { padding-block:.45rem; }
 .brand { gap:.45rem; }
 .brand img { width:38px; height:38px; }
 .brand b { font-size:1.35rem; }
 .header-cta { padding:.45rem .7rem; font-size:.78rem; }
 .hero-inner { padding-block:2.3rem 1.8rem; }
 .hero h1 { font-size:2.6rem; }
 .hero p { font-size:.98rem; max-width:34ch; }
 .catalog { padding-top:2.2rem; }
 .filters-panel { padding:.8rem; border-radius:16px; }
 .filter-top { align-items:flex-start; flex-direction:column; gap:.5rem; }
 .sort-field { align-self:flex-end; margin-top:-2.7rem; }
 .sort-field select { max-width:165px; font-size:.78rem; }
 .filter-row { gap:.55rem; }
 .field>span { font-size:.65rem; }
 .input-wrap,.price-wrap { padding-inline:.55rem; }
 .input-wrap .input,.price-wrap .input { font-size:.88rem; }
 .grid { gap:.7rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .card { border-radius:14px; }
 .card .body { padding:.75rem; gap:.35rem; }
 .card .tag { font-size:.59rem; letter-spacing:.04em; }
 .product-title { font-size:1.15rem; min-height:2.5rem; }
 .card .price { font-size:1.3rem; }
 .order-icon { width:33px; height:33px; }
 .card-cta { font-size:.75rem; padding:.55rem .3rem; gap:.25rem; }
 .image-hint { display:none; }
 .closing-inner { align-items:flex-start; flex-direction:column; padding-block:1.8rem; }
 .closing-btn { white-space:normal; }
 .fab { right:13px; bottom:13px; width:51px; height:51px; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
 .btn,.card,.card .ph img,.image-hint,.order-icon,.hero-btn,.seasonal-card img,.catalog-index-card,.catalog-index-thumb img,.catalog-photo-link img,.catalog-photo-cta { transform:none !important; }
}

/* Ramo a medida: selección de flores y vista ilustrada */
.search-only { grid-template-columns:minmax(220px,1fr); }
.card-description { margin:0; color:var(--tinta-suave); font-size:.88rem; min-height:2.6em; }
.quote-label { color:var(--olivo-osc); font:600 1rem var(--serif); }
.card-illustration { position:relative; width:100%; height:100%; min-height:220px; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 45%,#fffdf8 0,#f3ecdd 68%,#e9dfcf 100%); }
.card-illustration .bouquet-svg { width:78%; height:90%; }
.preview-stamp { position:absolute; left:.65rem; top:.65rem; background:#fffaf3dc; color:var(--olivo-osc); border-radius:999px; padding:.3rem .6rem; font-size:.65rem; letter-spacing:.04em; }
.modal .pic-illustration { display:grid; place-items:center; min-height:360px; background:radial-gradient(ellipse at 50% 45%,#fffdf8 0,#f0e8d9 72%,#e6dbc9 100%); }
.modal .pic-illustration .bouquet-svg { width:min(88%,410px); max-height:390px; }
.customize-toggle { justify-self:start; background:#f1eadc; border-color:#dfd2bc; color:var(--olivo-osc); }

/* Navegación, fotografía protagonista y atajos de confianza */
.main-nav { display:flex; align-items:center; gap:clamp(.75rem,2vw,1.6rem); margin-left:auto; }
.main-nav a { color:var(--olivo-osc); text-decoration:none; font-size:.9rem; transition:color .2s; }
.main-nav a:hover { color:var(--rosa); }
.hero-inner { grid-template-columns:1.05fr .95fr; }
.hero-visual { position:relative; justify-self:end; width:min(100%,440px); padding:0 0 1.7rem 1.7rem; }
.hero-photo-frame { height:clamp(280px,36vw,430px); overflow:hidden; border:8px solid #f8f1e7d9; border-radius:48% 48% 18px 18px; box-shadow:0 24px 55px #27230d40; transform:rotate(1.4deg); }
.hero-photo-frame img { width:100%; height:100%; object-fit:cover; }
.hero-photo-caption { position:absolute; left:0; bottom:0; display:flex; align-items:center; gap:.5rem; max-width:92%; padding:.8rem 1rem; border-radius:14px; background:var(--papel); color:var(--olivo-osc); box-shadow:var(--sombra); font:600 1rem var(--serif); }
.service-strip { background:var(--papel); border-bottom:1px solid #dfc4a566; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); padding-block:1.2rem; }
.service-item { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.4rem 1rem; }
.service-item+.service-item { border-left:1px solid #dfc4a5a0; }
.service-icon { display:grid; place-items:center; flex:0 0 40px; height:40px; border-radius:50%; background:#eee7d8; color:var(--olivo); }
.service-item strong,.service-item small { display:block; }
.service-item strong { color:var(--olivo-osc); font:600 1.02rem var(--serif); }
.service-item small { color:var(--tinta-suave); font-size:.78rem; }
.seasonal-section { padding-block:clamp(2.6rem,6vw,4.5rem); background:#f1eadc; scroll-margin-top:84px; }
.seasonal-heading { margin-bottom:1.25rem; }
.seasonal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.seasonal-card { position:relative; min-height:190px; padding:0; border:0; border-radius:var(--radio); overflow:hidden; cursor:pointer; background:var(--olivo-osc); text-align:left; box-shadow:var(--sombra); }
.seasonal-card img { width:100%; height:clamp(190px,24vw,280px); object-fit:cover; transition:transform 400ms var(--ease-out); }
.seasonal-card::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,#211e12b8); }
.seasonal-card span { position:absolute; z-index:1; right:1rem; bottom:1rem; left:1rem; display:flex; justify-content:space-between; align-items:center; color:white; font:600 1.45rem var(--serif); }
.seasonal-card:focus-visible,.main-nav a:focus-visible { outline:3px solid var(--girasol); outline-offset:3px; }
.catalog { scroll-margin-top:84px; }
#contacto { scroll-margin-top:84px; }
@media (max-width:820px) {
 .main-nav { display:none; }
 .hero-visual { width:min(100%,370px); }
}
@media (max-width:720px) {
 .hero-inner { grid-template-columns:1fr; }
 .hero-visual { justify-self:center; width:min(78%,340px); margin-top:.4rem; padding:0 0 1rem; }
 .hero-photo-frame { height:clamp(230px,68vw,320px); }
 .hero-photo-caption { font-size:.9rem; padding:.65rem .8rem; }
 .service-grid { grid-template-columns:1fr; padding-block:.5rem; }
 .service-item { justify-content:flex-start; padding:.65rem .4rem; }
 .service-item+.service-item { border-left:0; border-top:1px solid #dfc4a566; }
 .seasonal-grid { grid-template-columns:1fr 1fr; }
 .seasonal-card:last-child:nth-child(odd) { grid-column:1/-1; }
}
@media (max-width:480px) {
 .hero-visual { width:80%; }
 .seasonal-grid { gap:.65rem; }
 .seasonal-card,.seasonal-card img { min-height:155px; height:155px; }
 .seasonal-card span { font-size:1.08rem; right:.65rem; bottom:.65rem; left:.65rem; }
 .service-item { gap:.6rem; }
}

.catalog { scroll-margin-top:84px; }

.catalog-index { padding-block:clamp(2rem,5vw,3.4rem); background:#f1eadc; scroll-margin-top:84px; }
.catalog-index .section-heading { margin-bottom:1.25rem; }
.catalog-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.catalog-index-card { min-width:0; display:grid; grid-template-columns:38px 1fr 18px; align-items:center; gap:.7rem; padding:.8rem; border:1px solid #dfc4a5a8; border-radius:14px; background:var(--papel); color:var(--olivo-osc); text-align:left; text-decoration:none; cursor:pointer; transition:transform 200ms var(--ease-out),border-color .2s,box-shadow .2s,background .2s; }
.catalog-index-card:hover,.catalog-index-card.is-active { border-color:var(--olivo); box-shadow:0 8px 18px -14px #4b4824a6; background:#fffefa; }
.catalog-index-card.is-active { transform:translateY(-2px); }
.catalog-index-card:focus-visible { outline:3px solid var(--girasol); outline-offset:2px; }
.catalog-index-number { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#eee7d8; color:var(--olivo); font-size:.78rem; font-weight:600; }
.catalog-index-card.is-active .catalog-index-number { background:var(--olivo); color:var(--crema); }
.catalog-index-text { min-width:0; }
.catalog-index-text strong,.catalog-index-text small { display:block; }
.catalog-index-text strong { font:600 1.05rem/1.1 var(--serif); }
.catalog-index-text small { margin-top:.22rem; color:var(--tinta-suave); font-size:.73rem; line-height:1.25; }
.catalog-index-card>svg { color:var(--olivo-claro); }
.catalog-gallery { padding-block:clamp(2.3rem,5vw,4rem); background:var(--crema); scroll-margin-top:84px; }
.catalog-unified { padding-top:clamp(2.2rem,5vw,3.4rem); }
.unified-heading { margin-bottom:1.4rem; }
.unified-index { margin-bottom:clamp(1.8rem,4vw,3rem); padding:1rem; border:1px solid #dfc4a58c; border-radius:20px; background:#f1eadc; scroll-margin-top:84px; }
.unified-collection { scroll-margin-top:84px; }
.unified-filters { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:.35rem 1rem; margin-bottom:1rem; }
.unified-filters .search-field { grid-column:1; }
.unified-filters .sort-field { grid-column:2; grid-row:1; padding-bottom:.15rem; }
.unified-filters .results-line { grid-column:1/-1; }
.unified-gallery-grid { padding-block:.25rem 2rem; }
.gallery-heading { margin-bottom:.45rem; }
.gallery-count { margin:0 0 1rem; color:var(--tinta-suave); font-size:.82rem; }
.catalog-gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.catalog-photo-card { overflow:hidden; border:1px solid #e5d8c6; border-radius:16px; background:var(--papel); box-shadow:0 9px 24px -20px #4b4824a6; }
.catalog-photo-link { display:block; width:100%; padding:0; border:0; overflow:hidden; aspect-ratio:4/5; background:#eee7d8; cursor:pointer; }
.catalog-photo-link img { width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease-out); }
.catalog-photo-caption { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.75rem; }
.catalog-photo-caption strong,.catalog-photo-caption small { display:block; }
.catalog-photo-caption strong { color:var(--olivo-osc); font:600 1rem/1.05 var(--serif); }
.catalog-photo-caption small { margin-top:.25rem; color:var(--tinta-suave); font-size:.66rem; }
.catalog-photo-cta { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:.3rem; padding:.4rem .55rem; border:0; border-radius:999px; background:#eee7d8; color:var(--olivo-osc); font:inherit; font-size:.73rem; cursor:pointer; }
.catalog-photo-cta:hover { background:var(--olivo); color:var(--crema); }
.catalog-photo-link:focus-visible,.catalog-photo-cta:focus-visible { outline:3px solid var(--girasol); outline-offset:2px; }
@media (max-width:920px) {
 .catalog-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .catalog-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px) {
 .catalog-index-grid { gap:.45rem; }
 .catalog-index-card { grid-template-columns:31px 1fr 14px; gap:.45rem; padding:.55rem; }
 .catalog-index-number { width:30px; height:30px; font-size:.7rem; }
 .catalog-index-text strong { font-size:.95rem; }
 .catalog-index-text small { font-size:.65rem; }
 .catalog-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
 .unified-filters { grid-template-columns:minmax(0,1fr); }
 .unified-filters .search-field,.unified-filters .sort-field,.unified-filters .results-line { grid-column:1; grid-row:auto; }
 .unified-filters .sort-field { justify-self:end; }
 .catalog-photo-caption { align-items:flex-start; flex-direction:column; padding:.6rem; }
 .catalog-photo-caption strong { font-size:.95rem; }
 .catalog-photo-cta { padding:.38rem .55rem; }
}
@media (max-width:380px) {
 .catalog-index-grid { grid-template-columns:1fr; }
 .catalog-photo-caption { gap:.4rem; }
}

/* Dirección botánica elegante inspirada en la referencia Weblium */
:root {
 --olivo:#6f6c4e;
 --olivo-osc:#4d4d3d;
 --olivo-claro:#a3a18d;
 --arena:#c0bfa8;
 --arena-claro:#f6f1ed;
 --crema:#f6f1ed;
 --papel:#fff;
 --tinta:#302e29;
 --tinta-suave:#77746c;
 --rosa:#cf9393;
 --sombra:0 14px 38px -23px rgba(54,52,42,.3);
}
body { background:#f6f1ed; }
.topbar { background:#ffffffeb; border-bottom-color:#e6e1d9; }
.hero { color:var(--tinta); background:linear-gradient(112deg,#fff 0%,#f8f5f0 58%,#f2eee7 100%); }
.hero::before { background:radial-gradient(55% 75% at 90% 18%,rgba(192,191,168,.24),transparent 66%),radial-gradient(48% 65% at 8% 88%,rgba(207,147,147,.1),transparent 68%); }
.hero h1 { color:var(--olivo-osc); }
.hero h1 em { color:var(--olivo); }
.hero .eyebrow { color:var(--olivo); }
.hero p { color:#6f6d65; }
.hero-note { color:var(--olivo); }
.hero-btn { background:var(--olivo); color:white; }
.hero-btn:hover { background:var(--olivo-osc); }
.hero-photo-frame { border-color:#fff; box-shadow:0 28px 60px #3f3c2b26; transform:rotate(0); border-radius:46% 46% 18px 18px; }
.hero-photo-caption { background:#fff; color:var(--olivo-osc); }
.service-strip { background:#fff; border-bottom-color:#e9e4dc; }
.service-icon { background:#f3f1e9; color:var(--olivo); }
.catalog-unified { background:#fff; border:1px solid #ece7de; border-radius:28px; box-shadow:0 20px 60px -48px #3533288a; padding:clamp(1.4rem,4vw,3rem); margin-top:clamp(1.8rem,4vw,3rem); margin-bottom:clamp(2rem,5vw,4rem); }
.unified-index { background:#f7f5f0; border-color:#ece8df; }
.catalog-index-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.catalog-index-card { grid-template-columns:62px 1fr 18px; min-height:88px; padding:.62rem; border-color:#e8e4dc; background:#fff; }
.catalog-index-card:hover,.catalog-index-card.is-active { border-color:var(--olivo); box-shadow:0 10px 25px -19px #3533288a; }
.catalog-index-thumb { position:relative; display:block; width:62px; height:72px; overflow:hidden; border-radius:10px; background:#ece9df; }
.catalog-index-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease-out); }
.catalog-index-thumb i { position:absolute; left:5px; bottom:5px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fffF; color:var(--olivo-osc); font-size:.62rem; font-style:normal; font-weight:600; box-shadow:0 2px 8px #27251d20; }
.catalog-index-card.is-active .catalog-index-thumb i { color:white; background:var(--olivo); }
.catalog-index-text strong { font-size:1.12rem; }
.catalog-index-text small { font-size:.75rem; }
.catalog-index-number { display:none; }
.section-title { color:var(--olivo-osc); }
.filters-panel { border-color:#e9e5dc; box-shadow:none; }
.catalog-photo-card { border-color:#ebe6dd; box-shadow:0 12px 28px -23px #34312670; }
.catalog-photo-cta { background:var(--olivo); color:white; padding:.5rem .72rem; transition:background .2s,transform 200ms var(--ease-out); }
.catalog-photo-cta:hover { background:var(--olivo-osc); color:white; }
.closing-cta { background:#eeece4; }
.closing-btn { background:var(--olivo); }
.closing-btn:hover { background:var(--olivo-osc); }
@media (max-width:920px) { .catalog-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) {
 .catalog-unified { padding:1rem; border-radius:21px; }
 .catalog-index-card { grid-template-columns:50px 1fr 15px; min-height:74px; padding:.48rem; }
 .catalog-index-thumb { width:50px; height:62px; border-radius:8px; }
 .catalog-index-thumb i { width:21px; height:21px; font-size:.57rem; }
 .catalog-index-text strong { font-size:.98rem; }
 .catalog-index-text small { font-size:.66rem; }
}
.customize-toggle:hover { background:#e9dfce; }
.customizer { grid-column:1/-1; border-top:1px solid var(--arena-claro); margin-top:.2rem; padding-top:1rem; }
.customizer-heading h3 { margin:.25rem 0; color:var(--olivo-osc); font:600 1.65rem/1.05 var(--serif); }
.customizer-heading p { margin:.45rem 0 1rem; font-size:.86rem; color:var(--tinta-suave); }
.customizer-layout { display:grid; grid-template-columns:minmax(210px,1fr) minmax(190px,.9fr); gap:1rem; align-items:start; }
.flower-options { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; max-height:310px; overflow:auto; padding:.1rem .2rem .2rem 0; }
.flower-choice { min-width:0; display:grid; align-content:start; gap:.25rem; border:1px solid #e7ddcd; background:#fffdf9; border-radius:11px; padding:.4rem; }
.flower-choice.is-selected { border-color:#9c9a76; background:#f7f5ec; }
.flower-toggle { min-height:30px; display:flex; align-items:center; gap:.35rem; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; font-size:.8rem; line-height:1.1; }
.flower-check { width:17px; height:17px; flex:0 0 17px; display:grid; place-items:center; border:1px solid #c9bea9; border-radius:5px; color:white; }
.flower-choice.is-selected .flower-check { border-color:var(--olivo); background:var(--olivo); }
.color-select-label { display:flex; align-items:center; gap:.35rem; margin-left:22px; }
.color-select-label select { width:100%; min-width:0; border:0; background:transparent; color:var(--tinta-suave); font-size:.75rem; padding:.15rem; }
.color-dot { width:11px; height:11px; flex:0 0 11px; border:1px solid #7774; border-radius:50%; }
.preview-card { display:grid; justify-items:center; padding:.65rem; border-radius:15px; border:1px solid #e7ddcd; background:#faf6ed; }
.preview-label { display:flex; align-items:center; gap:.35rem; color:var(--olivo); font-size:.73rem; letter-spacing:.03em; }
.bouquet-svg { width:100%; max-width:240px; display:block; }
.preview-caption { margin:.15rem 0 0; min-height:2.5em; color:var(--tinta-suave); font-size:.72rem; text-align:center; }
.modal-cta { justify-self:stretch; }
.modal-customizing { width:min(1020px,100%); }
@media (max-width:720px) {
 .customizer-layout { grid-template-columns:1fr; }
 .flower-options { max-height:260px; }
 .preview-card { grid-row:1; }
 .preview-card .bouquet-svg { max-height:190px; }
 .modal .pic-illustration { min-height:245px; height:245px; }
 .modal .pic-illustration .bouquet-svg { max-height:220px; }
}
@media (max-width:480px) {
 .flower-options { grid-template-columns:1fr 1fr; gap:.35rem; }
 .flower-choice { padding:.33rem; }
 .flower-toggle { font-size:.73rem; }
 .card-illustration { min-height:140px; }
 .preview-stamp { font-size:.56rem; left:.4rem; top:.4rem; }
}
.boot-error { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:.55rem; padding:1.5rem; text-align:center; color:var(--olivo-osc); }
.boot-error strong { font:600 1.6rem var(--serif); }
.boot-error span { color:var(--tinta-suave); }

/* Hero editorial inspirado en la referencia, con fotografía de Artemisa */
.hero { background:linear-gradient(105deg,#f7f3ee 0%,#f7f3ee 53%,#f2eee7 100%); }
.hero::before { background:radial-gradient(48% 90% at 88% 34%,rgba(192,191,168,.18),transparent 70%); }
.hero-inner { width:min(1320px,100% - 48px); min-height:min(690px,calc(100svh - 72px)); grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(1.5rem,5vw,5rem); padding-block:clamp(2.5rem,6vw,5rem); }
.hero-copy { max-width:560px; padding-left:clamp(0px,2vw,20px); }
.hero-brand { display:block; margin-bottom:1.1rem; color:#aaa89f; font:italic 500 clamp(1.05rem,1.8vw,1.35rem) var(--serif); letter-spacing:.025em; }
.hero h1 { max-width:11ch; margin-bottom:1rem; color:#777468; font-size:clamp(3.25rem,6vw,5.2rem); line-height:.99; letter-spacing:-.025em; }
.hero h1 em { color:#777468; }
.hero-rule { display:block; width:56px; height:1px; margin:1.25rem 0 1rem; background:#aaa99f; }
.hero p { max-width:42ch; margin-bottom:1.65rem; color:#888679; font-size:clamp(1rem,1.35vw,1.15rem); }
.hero-btn { min-height:52px; padding:.85rem 1.45rem; border:1.5px solid #777468; border-radius:0; background:transparent; color:#777468; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.hero-btn:hover { border-color:var(--olivo); background:#fff9; color:var(--olivo-osc); }
.hero-btn { transition:transform 200ms var(--ease-out),background .2s,border-color .2s,color .2s; }
.hero-note { margin-top:1.3rem; color:#979487; font-size:.88rem; }
.hero-visual { position:relative; justify-self:stretch; display:grid; place-items:center; width:100%; min-height:clamp(390px,49vw,600px); padding:0; }
.hero-visual::before,.hero-visual::after { content:""; position:absolute; z-index:0; width:min(74%,430px); aspect-ratio:.78; border:1px solid #d8d5c9; border-radius:50%; pointer-events:none; }
.hero-visual::before { transform:rotate(-7deg); }
.hero-visual::after { width:min(69%,400px); border-color:#e2dfd5; transform:rotate(7deg); }
.hero-photo-frame { position:relative; z-index:1; width:min(94%,560px); height:clamp(400px,50vw,610px); overflow:hidden; border:0; border-radius:49% 49% 45% 45%; background:transparent; box-shadow:0 25px 55px -45px #3533289c; }
.hero-photo-frame img { width:100%; height:100%; object-fit:cover; object-position:center 47%; }
.hero-photo-caption { z-index:2; left:4%; bottom:1.2rem; padding:.65rem .9rem; border:1px solid #e9e5dc; border-radius:999px; background:#fffdf9e8; box-shadow:0 8px 24px -20px #333; font-size:.92rem; }
@media (max-width:820px) {
 .hero-inner { min-height:auto; grid-template-columns:1fr 1fr; gap:1rem; }
 .hero h1 { font-size:clamp(3rem,7vw,4.3rem); }
 .hero-visual { min-height:430px; }
 .hero-photo-frame { height:440px; }
}
@media (max-width:720px) {
 .hero-inner { width:min(100% - 32px,560px); grid-template-columns:1fr; gap:.5rem; padding-block:2.6rem 1.7rem; }
 .hero-copy { max-width:100%; padding-left:0; }
 .hero-brand { margin-bottom:.7rem; }
 .hero h1 { max-width:10ch; font-size:clamp(3.25rem,13vw,4.5rem); }
 .hero p { max-width:38ch; }
 .hero-visual { width:100%; min-height:clamp(310px,92vw,430px); margin-top:.15rem; }
 .hero-visual::before { width:min(70%,340px); }
 .hero-visual::after { width:min(65%,310px); }
 .hero-photo-frame { width:min(100%,400px); height:clamp(320px,92vw,430px); }
 .hero-photo-caption { left:2%; bottom:.4rem; font-size:.84rem; }
}
@media (max-width:480px) {
 .hero-inner { padding-block:2.2rem 1.3rem; }
 .hero h1 { font-size:3.1rem; }
 .hero-note { font-size:.8rem; }
 .hero-visual { min-height:300px; }
 .hero-photo-frame { height:320px; }
 .hero-photo-caption { max-width:96%; }
}

/* Hover con movimiento solo en dispositivos con puntero real (evita hover "pegado" en móvil) */
@media (hover: hover) and (pointer: fine) {
 .card:hover { transform:translateY(-4px); box-shadow:0 18px 35px -20px #4b4824a8; }
 .card:hover .ph img { transform:scale(1.055); }
 .card:hover .image-hint { opacity:1; transform:translateY(0); }
 .order-icon:hover { transform:scale(1.06); }
 .hero-btn:hover { transform:translateY(-2px); }
 .seasonal-card:hover img { transform:scale(1.045); }
 .catalog-index-card:hover { transform:translateY(-2px); }
 .catalog-index-card:hover .catalog-index-thumb img { transform:scale(1.06); }
 .catalog-photo-card:hover .catalog-photo-link img { transform:scale(1.035); }
 .catalog-photo-cta:hover { transform:translateY(-1px); }
}

/* ---------- Rediseño 2026-11: contraste, jerarquía y móvil ---------- */
h1,h2,h3,.section-title { text-wrap:balance; }
p { text-wrap:pretty; }

/* Enlace de salto (visible solo al enfocarlo con teclado) */
.skip-link { position:absolute; left:16px; top:-64px; z-index:100; padding:.6rem 1rem; border-radius:10px; background:var(--olivo-osc); color:var(--crema); text-decoration:none; font-weight:500; }
.skip-link:focus { top:12px; }

/* Hero: contraste AA y titular con más presencia */
.hero-brand { color:#747060; }
.hero h1,.hero h1 em { color:var(--olivo-osc); }
.hero h1 { letter-spacing:-.03em; }
.hero p { color:var(--tinta-suave); }
.hero-note { color:#6b6651; }
.hero-btn { border-color:var(--olivo-osc); color:var(--olivo-osc); }

/* Índice de colecciones: sin caja dentro de la tarjeta */
.unified-index { padding:0; border:0; background:transparent; }

/* Etiqueta del buscador en minúsculas, más legible */
.field>span { font-size:.82rem; letter-spacing:0; text-transform:none; font-weight:500; }

/* CTA de cada foto: secundario, para que manden las fotos */
.catalog-photo-cta { border:1px solid #d9d4c6; background:transparent; color:var(--olivo-osc); }
.catalog-photo-cta:hover { border-color:var(--olivo); background:var(--olivo); color:#fff; }

/* Cierre con más presencia */
.closing-cta { background:radial-gradient(60% 140% at 88% 50%,#e3dfd1 0%,transparent 70%),#eeece4; }
.closing-inner { padding-block:clamp(3rem,7vw,5.5rem) clamp(3.25rem,7.5vw,6rem); }
.closing-inner h2 { font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.02em; }
.closing-inner p { margin-top:.4rem; font-size:1.02rem; }
.closing-btn { min-height:52px; padding-inline:1.5rem; }

@media (max-width:620px) {
 .catalog-index-grid { grid-template-columns:1fr; gap:.5rem; }
 .catalog-index-card { grid-template-columns:52px 1fr 16px; min-height:68px; }
 .catalog-index-text strong { font-size:1.05rem; }
 .catalog-index-text small { font-size:.75rem; }
}
@media (max-width:480px) {
 .header-cta .cta-extra { display:none; }
 .unified-filters .sort-field { margin-top:0; }
 .field>span { font-size:.8rem; }
}

/* Redes sociales en el pie */
.footer-social { display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem; margin:0 0 1.1rem; }
.footer-social a { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem 1rem; border:1px solid #dfc4a55c; border-radius:999px; color:var(--arena); font-size:.88rem; text-decoration:none; transition:background .2s,border-color .2s,color .2s; }
.footer-social a:hover { border-color:var(--arena); background:#dfc4a51f; color:var(--crema); }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:.3rem 1.1rem; max-width:760px; margin:0 auto .8rem; font-size:.9rem; }
.footer-links a { color:var(--arena-claro); text-decoration:underline; text-decoration-color:#dfc4a566; text-underline-offset:3px; padding:.3rem 0; }
.footer-links a:hover { color:var(--crema); }
.footer-place { margin:0 0 1rem; font-size:.88rem; opacity:.85; }
.footer-legal { display:flex; justify-content:center; flex-wrap:wrap; gap:.3rem 1rem; margin:0 0 .6rem; font-size:.85rem; }
.footer-legal a { color:var(--arena-claro); opacity:.85; padding:.3rem 0; }
.footer-legal a:hover { opacity:1; }
.footer-social a:focus-visible { outline:3px solid var(--girasol); outline-offset:2px; }

/* Hero: ramo recortado (PNG transparente), sin marco */
.hero-visual::before,.hero-visual::after { display:none; }
.hero-visual { min-height:0; padding:0; }
.hero-bouquet { position:relative; z-index:1; width:min(100%,540px); aspect-ratio:1; display:grid; place-items:center; }
.hero-bouquet::before { content:""; position:absolute; inset:9% 7% 5%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,#efe9df 0%,#f4f0e9 62%,transparent 100%); }
.hero-bouquet::after { content:""; position:absolute; left:26%; right:26%; bottom:1.5%; height:5%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,#3f3c2b2e,transparent); filter:blur(4px); }
.hero-bouquet img { width:100%; height:auto; filter:drop-shadow(0 18px 28px #3f3c2b1f); }
@media (max-width: 760px) {
  .hero-bouquet { width:min(86vw,400px); margin-inline:auto; }
}

/* Hero: movimiento ambiental (empieza cuando la app monta: .is-live) */
.hero-rule { transform-origin:left center; }
.hero:not(.is-live) .hero-rule { transform:scaleX(0); }
.hero.is-live .hero-rule { animation:af-rule .8s .15s cubic-bezier(.22,1,.36,1) both; }
.hero-bouquet img { transform-origin:50% 92%; will-change:transform; }
.hero.is-live .hero-bouquet img { animation:af-breathe 7s ease-in-out infinite; }
.hero.is-live .hero-bouquet::before { animation:af-halo 7s ease-in-out infinite; }
.hero.is-live .hero-bouquet::after { animation:af-shadow 7s ease-in-out infinite; }
.hero-btn svg { transition:transform .25s cubic-bezier(.22,1,.36,1); }
@keyframes af-rule { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes af-breathe {
  0%,100% { transform:translateY(0) rotate(0deg); }
  25% { transform:translateY(-3px) rotate(-.8deg); }
  50% { transform:translateY(-6px) rotate(0deg); }
  75% { transform:translateY(-3px) rotate(.8deg); }
}
@keyframes af-halo { 0%,100% { transform:scale(1); opacity:.85; } 50% { transform:scale(1.04); opacity:1; } }
@keyframes af-shadow { 0%,100% { transform:scaleX(1); opacity:1; } 50% { transform:scaleX(.92); opacity:.75; } }
@media (hover:hover) and (pointer:fine) { .hero-btn:hover svg { transform:translateY(3px); } }
@media (prefers-reduced-motion:reduce) {
  .hero .hero-rule { transform:none !important; animation:none !important; }
  .hero .hero-bouquet img,.hero .hero-bouquet::before,.hero .hero-bouquet::after { animation:none !important; }
}

/* Vista previa del ramo con fotos reales */
.photo-bouquet { position:relative; width:100%; max-width:320px; aspect-ratio:1; margin-inline:auto; isolation:isolate; user-select:none; }
.pb-halo { position:absolute; inset:6% 4% 10%; border-radius:50%; background:radial-gradient(closest-side,#fff 0%,#f6efe4 60%,transparent 100%); z-index:-1; }
.pb-layer { position:absolute; inset:0; pointer-events:none; }
.pb-wrap { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.pb-wrap-front { filter:drop-shadow(0 -2px 3px #3f3c2b14); }
.pb-head, .pb-leaf { position:absolute; height:auto; translate:-50% -50%; filter:drop-shadow(0 4px 6px #3f3c2b2e); will-change:transform; }
.pb-leaf { filter:drop-shadow(0 3px 4px #3f3c2b1f); }
.pb-filler { position:absolute; width:10%; aspect-ratio:1; translate:-50% -50%; background:radial-gradient(circle at 20% 22%,var(--c) 0 9%,transparent 10%),radial-gradient(circle at 48% 12%,var(--c) 0 10%,transparent 11%),radial-gradient(circle at 76% 24%,var(--c) 0 9%,transparent 10%),radial-gradient(circle at 34% 44%,var(--c) 0 10%,transparent 11%),radial-gradient(circle at 62% 40%,var(--c) 0 11%,transparent 12%),radial-gradient(circle at 86% 52%,var(--c) 0 8%,transparent 9%),radial-gradient(circle at 14% 58%,var(--c) 0 9%,transparent 10%),radial-gradient(circle at 46% 70%,var(--c) 0 10%,transparent 11%),radial-gradient(circle at 72% 76%,var(--c) 0 9%,transparent 10%),radial-gradient(circle at 30% 86%,var(--c) 0 8%,transparent 9%),radial-gradient(circle at 56% 90%,var(--c) 0 8%,transparent 9%),radial-gradient(circle at 90% 80%,var(--c) 0 7%,transparent 8%); filter:drop-shadow(0 .5px 1px #3f3c2b38); opacity:.95; z-index:30; }
.pb-filler.flor-de-cera { width:8%; }
.pb-empty { position:absolute; left:0; right:0; top:34%; margin:0; text-align:center; color:var(--tinta-suave); font-size:.8rem; }
.preview-card .photo-bouquet { max-width:300px; }
.modal .pic-illustration .photo-bouquet { max-width:min(88%,420px); }
@media (max-width:760px) { .preview-card .photo-bouquet { max-width:240px; } .modal .pic-illustration .photo-bouquet { max-width:300px; } }
.pic-live { background:radial-gradient(circle at 50% 40%,#fffdf9,#f4eee4); display:grid; place-items:center; }
.modal .pic-live .photo-bouquet { max-width:min(92%,460px); }
@media (min-width:761px) { .modal-customizing .preview-card .photo-bouquet { display:none; } .modal-customizing .preview-card .preview-label { display:none; } }
.pb-leaf { max-width:30%; }
.photo-bouquet img.pb-head, .photo-bouquet img.pb-leaf { height:auto !important; min-height:0; max-height:none; object-fit:contain; border-radius:0; aspect-ratio:auto; box-shadow:none; }
.modal .pic.pic-live { overflow:hidden; }
.modal .pic-live .photo-bouquet { width:min(92%,460px); height:auto; }
.pb-head { -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%); mask-image:linear-gradient(to bottom,#000 80%,transparent 100%); }
@media (max-width:760px) { .modal .pic.pic-live { height:auto; min-height:0; padding:.6rem 0 .2rem; } .modal .pic-live .photo-bouquet { width:min(80vw,320px); } }