/* Generado desde src/ventajas.src.css: no editar a mano */
/* Ventajas BabyOrca · componente embebible.
   Se compila con prefijo .bov (ver tools/build-css.mjs) para no chocar con el tema de Shopify. */
.bov {
  --bg:#ffffff; --tint:#f4f8fb; --sky:#e1edf5; --sky-2:#cfe2ee; --line:#e6ebef; --line-2:#d3dce3;
  --navy:#2c3e50; --teal:#0f4c5c; --ink-2:#4b5d6b; --ink-3:#7d8b96;
  --blue:#5ba8c4; --blue-deep:#2f7f9d; --coral:#e8927c; --coral-deep:#d97a62; --coral-soft:#fdf0ec;
  --ok:#2e7d32; --ok-soft:#e9f3ea; --warn:#a7641c;
  --shadow:0 1px 2px rgba(44,62,80,.05),0 4px 14px rgba(44,62,80,.06);
  --shadow-lg:0 2px 6px rgba(44,62,80,.06),0 18px 44px rgba(44,62,80,.13);
  --serif:"Alice",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  container:bov / inline-size;
  font:16px/1.6 var(--sans); color:var(--teal); -webkit-font-smoothing:antialiased; text-align:left;
}
.bov *, .bov *::before, .bov *::after { box-sizing:border-box }
.bov img { max-width:100%; display:block }
.bov button, .bov input, .bov select { font:inherit; color:inherit; margin:0 }
.bov h1, .bov h2, .bov h3, .bov h4 { font-family:var(--serif); font-weight:700; color:var(--navy); letter-spacing:-.4px; line-height:1.18; margin:0; text-transform:none; text-align:left }
.bov p { margin:0; text-align:inherit }
.bov a { color:var(--blue-deep) }
.bov .wrap { max-width:1200px; margin:0 auto; padding:0 24px }
.bov .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.bov :focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:8px }
.bov .eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue) }
.bov .eyebrow svg { width:14px; height:14px }

/* Botones */
.bov .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; padding:13px 22px; font-weight:700; font-size:16px; cursor:pointer; text-decoration:none !important; transition:transform .12s,background .15s,box-shadow .15s; white-space:nowrap; line-height:1.2 }
.bov .btn:active { transform:translateY(1px) }
.bov .btn svg { width:18px; height:18px; flex:none }
.bov .btn-coral { background:var(--coral); color:#fff !important; box-shadow:0 4px 16px rgba(232,146,124,.35) }
.bov .btn-coral:hover { background:var(--coral-deep) }
.bov .btn-navy { background:var(--navy); color:#fff !important }
.bov .btn-navy:hover { background:#3a516a }
.bov .btn-ghost { background:#fff; color:var(--navy) !important; box-shadow:inset 0 0 0 1.5px var(--line-2) }
.bov .btn-ghost:hover { box-shadow:inset 0 0 0 1.5px var(--blue) }
.bov .btn-sm { padding:9px 14px; font-size:14.5px }

/* Cabecera de la sección */
.bov .hero { background:linear-gradient(180deg,var(--tint),#fff); border-bottom:1px solid var(--line) }
.bov .hero .wrap { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:44px; align-items:center; padding-top:44px; padding-bottom:40px }
.bov .hero h1 { font-size:clamp(30px,4.4vw,48px); margin:12px 0 14px }
.bov .hero h1 em { font-style:normal; color:var(--blue-deep) }
.bov .lead { font-size:clamp(16px,1.6vw,18px); color:var(--ink-2); margin:0 0 24px; max-width:56ch }
.bov .finder { display:flex; align-items:stretch; background:#fff; border:1.5px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow); max-width:640px; transition:border-color .15s,box-shadow .15s }
.bov .finder:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px rgba(91,168,196,.18) }
.bov .finder .f { display:flex; align-items:center; gap:10px; padding:8px 16px; min-width:0; margin:0; cursor:text }
.bov .finder .f svg { width:20px; height:20px; color:var(--blue-deep); flex:none }
.bov .finder .f > div { display:flex; flex-direction:column; min-width:0; flex:1 }
.bov .finder small { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
.bov .finder input, .bov .finder select { border:0 !important; background:transparent !important; outline:none; padding:2px 0 !important; font-size:16px; color:var(--navy); font-weight:500; min-width:0; width:100%; box-shadow:none !important; height:auto !important; min-height:0 !important }
.bov .finder select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:18px !important; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8b96' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/14px !important }
.bov .finder .what { flex:1.3 }
.bov .finder .where { flex:1; border-left:1px solid var(--line) }
.bov .finder .go { margin:6px; padding:0 20px }
.bov .quick { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; align-items:center; font-size:14px; color:var(--ink-3) }
.bov .quick button { border:1px solid var(--line-2); background:#fff; color:var(--teal); border-radius:999px; padding:6px 12px; font-size:14px; font-weight:500; cursor:pointer }
.bov .quick button:hover { border-color:var(--blue); color:var(--blue-deep) }

/* Tarjeta de pack (cliente / no cliente) */
.bov .packbox { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:24px; position:relative; overflow:hidden }
.bov .packbox::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--blue),var(--coral)) }
.bov .packbox h2 { font-size:22px; margin-bottom:12px }
.bov .packbox ol { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px }
.bov .packbox li { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2) }
.bov .packbox li b { color:var(--navy); display:block }
.bov .packbox li i { font-style:normal; flex:none; width:28px; height:28px; border-radius:50%; background:var(--sky); color:var(--navy); display:grid; place-items:center; font-weight:800; font-size:13px }
.bov .packbox .btn { width:100% }
.bov .packbox .have { margin-top:12px; font-size:13.5px; color:var(--ink-3); text-align:center }

/* Barra de filtros */
.bov .bar { background:#fff; border-bottom:1px solid var(--line); margin-top:8px }
.bov .bar .wrap { display:flex; align-items:center; gap:12px; padding-top:14px; padding-bottom:14px }
.bov .chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 40px 2px 2px; flex:1; min-width:0; -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent); mask-image:linear-gradient(90deg,#000 90%,transparent) }
.bov .chips::-webkit-scrollbar { display:none }
.bov .chip { flex:none; border:1.5px solid var(--line-2); background:#fff; color:var(--teal); border-radius:999px; padding:8px 14px; font-weight:600; font-size:14.5px; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:7px; line-height:1.3 }
.bov .chip:hover { border-color:var(--blue) }
.bov .chip .dot { width:8px; height:8px; border-radius:50% }
.bov .chip .n { font-size:12.5px; color:var(--ink-3); font-weight:600 }
.bov .chip[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:#fff }
.bov .chip[aria-pressed="true"] .n { color:rgba(255,255,255,.7) }
.bov .chip[disabled] { opacity:.45; cursor:default }
.bov .fbtn { display:none }
.bov .fbtn .badge-n { background:var(--coral); color:#fff; border-radius:999px; font-size:12px; padding:1px 7px; font-weight:800 }

/* Filtros aplicados */
.bov .applied { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0 4px; min-height:34px }
.bov .res { font-size:15px; color:var(--ink-2); margin-right:6px }
.bov .res b { color:var(--navy); font-family:var(--serif); font-size:18px }
.bov .pill { display:inline-flex; align-items:center; gap:6px; background:var(--sky); color:var(--navy); border:0; border-radius:999px; padding:5px 8px 5px 12px; font-size:14px; font-weight:600; cursor:pointer }
.bov .pill svg { width:14px; height:14px; opacity:.7 }
.bov .pill:hover { background:var(--sky-2) }
.bov .linkbtn { background:none; border:0; color:var(--blue-deep); font-weight:700; cursor:pointer; padding:4px 2px; font-size:14.5px; text-decoration:underline; text-underline-offset:3px }

/* Secciones */
.bov .section-t { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; margin:30px 0 0 }
.bov .section-t h2 { font-size:24px }
.bov .section-t p { color:var(--ink-3); font-size:14.5px }
.bov .section-t .badge { display:inline-flex; align-items:center; gap:6px; background:var(--ok-soft); color:var(--ok); font-size:12.5px; font-weight:700; border-radius:999px; padding:4px 10px }
.bov .section-t .badge svg { width:14px; height:14px }
.bov .online-band { background:linear-gradient(180deg,var(--tint),#fff 70%); border:1px solid var(--line); border-radius:22px; padding:6px 22px 24px; margin-top:22px }
.bov .online-band .section-t { margin-top:18px }

/* Tarjetas */
.bov .main { padding:6px 0 56px }
.bov .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; margin-top:14px }
.bov .card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); transition:transform .18s,box-shadow .18s,border-color .18s; cursor:pointer; position:relative; text-align:left; color:var(--teal) }
.bov .card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--sky-2) }
.bov .card-h { display:flex; gap:14px; align-items:center; padding-right:58px }
.bov .card.nodeal .card-h { padding-right:0 }
.bov .logo { width:60px; height:60px; border-radius:14px; flex:none; background:#fff; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden }
.bov .logo img { width:100%; height:100%; object-fit:contain; padding:5px }
.bov .logo.ini { font-family:var(--serif); font-weight:700; font-size:22px; color:#fff; border:0 }
.bov .card h3 { font-size:19px; margin-bottom:2px }
.bov .loc { font-size:14px; color:var(--ink-3); display:flex; align-items:flex-start; gap:5px }
.bov .loc span { min-width:0 }
.bov .loc svg { width:14px; height:14px; flex:none; margin-top:4px }
.bov .tags { display:flex; gap:6px; flex-wrap:wrap }
.bov .tag { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:6px; background:var(--tint); color:var(--ink-2); border:1px solid var(--line) }
.bov .tag .dot { width:7px; height:7px; border-radius:50% }
.bov .tag.star { background:#fff6e8; color:var(--warn); border-color:#f3e2c4 }
.bov .tag.online { background:var(--ok-soft); color:var(--ok); border-color:#d4e8d5 }
.bov .desc { color:var(--ink-2); font-size:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.bov .val { position:absolute; top:18px; right:18px; background:var(--coral); color:#fff; font-weight:800; font-size:15px; line-height:1; padding:9px; border-radius:12px; text-align:center; min-width:50px; box-shadow:0 4px 12px rgba(232,146,124,.35) }
.bov .val small { display:block; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.9; margin-top:3px }
.bov .deal { margin-top:auto; border-radius:12px; background:var(--coral-soft); padding:12px 14px; display:flex; gap:12px; align-items:center }
.bov .deal .t { flex:1; min-width:0 }
.bov .deal small { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--coral-deep) }
.bov .deal .o { font-size:15px; color:var(--navy); font-weight:600; line-height:1.3; margin-top:2px }
.bov .deal .lock { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11.5px; font-weight:700; color:var(--coral-deep); text-align:center; line-height:1.2; max-width:96px }
.bov .deal .lock svg { width:18px; height:18px }
.bov .more { margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600; color:var(--blue-deep); padding-top:2px }
.bov .deal + .more { margin-top:0 }
.bov .more svg { width:16px; height:16px; transition:transform .15s }
.bov .card:hover .more svg { transform:translateX(3px) }

/* Vacío / esqueleto */
.bov .empty { text-align:center; padding:44px 20px; background:var(--tint); border:1px dashed var(--line-2); border-radius:16px; margin-top:14px }
.bov .empty h3 { font-size:22px; margin:12px 0 6px }
.bov .empty p { color:var(--ink-2); margin:0 auto 18px; max-width:46ch }
.bov .empty .whale { width:84px; height:56px; margin:0 auto }
.bov .sk { background:linear-gradient(90deg,var(--tint),#fbfdfe,var(--tint)); background-size:200% 100%; animation:bovsk 1.2s infinite; border-radius:10px }
.bov .loadmore { display:flex; justify-content:center; margin-top:26px }

/* Ficha (modal) */
.bov dialog { border:0; padding:0; border-radius:22px; max-width:580px; width:calc(100% - 32px); max-height:calc(100dvh - 40px); background:#fff; color:var(--teal); box-shadow:var(--shadow-lg) }
.bov dialog::backdrop { background:rgba(44,62,80,.45); backdrop-filter:blur(3px) }
.bov dialog[open] { animation:bovpop .22s ease }
.bov .dlg { padding:28px; display:flex; flex-direction:column; gap:16px; position:relative }
.bov .dlg .logo { width:76px; height:76px; border-radius:18px }
.bov .dlg h2 { font-size:27px }
.bov .dlg .full { color:var(--ink-2); white-space:pre-line; font-size:15.5px }
.bov .dlg .deal { margin-top:0 }
.bov .x { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:0; background:var(--tint); cursor:pointer; display:grid; place-items:center; color:var(--navy); padding:0 }
.bov .x svg { width:18px; height:18px }
.bov .steps-mini { margin:0; list-style:none; display:grid; gap:8px; font-size:14.5px; color:var(--ink-2); background:var(--tint); border-radius:12px; padding:12px 14px }
.bov .steps-mini li { display:flex; gap:10px }
.bov .steps-mini i { font-style:normal; flex:none; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--line-2); display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--navy) }
.bov .dlg-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.bov .dlg-actions .btn:only-child { grid-column:1/-1 }
.bov .reg { font-size:13.5px; color:var(--ink-2); display:flex; gap:6px; align-items:center }
.bov .reg svg { width:16px; height:16px; color:var(--ok) }
.bov .fine { font-size:12.5px; color:var(--ink-3) }

/* Hoja de filtros móvil */
.bov .sheet .dlg { gap:20px }
.bov .sheet h2 { font-size:24px }
.bov .sheet .grp b { display:block; color:var(--navy); margin-bottom:8px; font-size:15px }
.bov .sheet .opts { display:flex; flex-wrap:wrap; gap:8px }
.bov .sheet .foot { position:sticky; bottom:0; background:#fff; display:flex; gap:10px; border-top:1px solid var(--line); margin:0 -18px; padding:12px 18px 0 }
.bov .sheet .foot .btn { flex:1 }
.bov .sel { width:100%; appearance:none; -webkit-appearance:none; border:1.5px solid var(--line-2); border-radius:10px; padding:12px 40px 12px 14px; font-size:16px; color:var(--navy); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8b96' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px }

/* Profesionales */
.bov .cta { background:var(--navy); color:#fff; border-radius:22px; padding:34px; display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:54px; position:relative; overflow:hidden }
.bov .cta::after { content:""; position:absolute; right:-70px; top:-90px; width:280px; height:280px; border-radius:50%; background:rgba(91,168,196,.22) }
.bov .cta h2 { font-size:26px; margin-bottom:6px; color:#fff }
.bov .cta p { color:#c8d4dd; max-width:58ch }
.bov .cta .btn { position:relative; z-index:1 }
.bov .note { font-size:13px; color:var(--ink-3); text-align:center; margin-top:22px }

.bov .toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--navy); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; font-size:15px; opacity:0; pointer-events:none; transition:all .25s; z-index:2147483000; box-shadow:var(--shadow-lg) }
.bov .toast.on { opacity:1; transform:translate(-50%,0) }

@container bov (max-width:900px) {
  .bov .hero .wrap { grid-template-columns:1fr; gap:24px; padding-top:28px; padding-bottom:28px }
  .bov .bar .chips, .bov .bar .toggle { display:none }
  .bov .fbtn { display:inline-flex; flex:1 }
}
@container bov (max-width:620px) {
  .bov .wrap { padding:0 16px }
  .bov .finder { flex-direction:column }
  .bov .finder .where { border-left:0; border-top:1px solid var(--line) }
  .bov .finder .f { padding:10px 14px }
  .bov .finder .go { padding:13px }
  .bov .grid { grid-template-columns:1fr }
  .bov .online-band { padding:2px 14px 18px; border-radius:18px }
  .bov .cta { padding:26px }
}
@media (max-width:620px) {
  .bov dialog { margin:auto 0 0; width:100%; max-width:none; border-radius:22px 22px 0 0; max-height:92dvh }
  .bov .dlg { padding:22px 18px calc(22px + env(safe-area-inset-bottom)) }
  .bov .dlg-actions { grid-template-columns:1fr }
}

/* Neutraliza estilos de la hoja de formularios si se cargan a la vez */
.bov .deal::before, .bov .deal::after { content:none; display:none }
.bov .deal .t { border-right:0; padding:0 }
.bov .empty h3, .bov .cta h2 { text-align:inherit }
.bov .empty h3 { text-align:center }

/* Interruptor «Con descuento» */
.bov .toggle { flex:none; display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; cursor:pointer; color:var(--teal); user-select:none; position:relative; margin:0 }
.bov .toggle input { position:absolute; opacity:0; width:1px; height:1px }
.bov .toggle .sw { width:38px; height:22px; border-radius:999px; background:var(--line-2); position:relative; transition:background .15s; flex:none }
.bov .toggle .sw::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s }
.bov .toggle input:checked + .sw { background:var(--coral) }
.bov .toggle input:checked + .sw::after { transform:translateX(16px) }
.bov .toggle input:focus-visible + .sw { outline:3px solid var(--blue); outline-offset:2px }

/* Marca */
.bov .empty .whale { width:96px; height:auto; margin:0 auto; display:block }
.bov .packbox .peek { position:absolute; right:18px; top:16px; width:58px; height:auto; opacity:.95; transform:scaleX(-1) }
.bov .packbox h2 { padding-right:70px }
.bov .cta-logo { height:28px; width:auto; margin-bottom:14px; opacity:.95 }

@keyframes bovsk{to{background-position:-200% 0}}
@keyframes bovpop{from{opacity:0;transform:translateY(12px) scale(.985)}}