/* ==========================================================================
PET ALIMENTOS — hoja de estilos principal
Basada en el sistema de diseño "Organic" (tokens) + la maqueta
"Catalogo Pet Alimentos.dc.html" del proyecto claude.ai/design.
Sin build step: CSS plano, variables nativas. Ver /assets/js/data.js
para los datos placeholder que luego se van a reemplazar por la base
de datos real de productos.
========================================================================== */
/* Las fuentes (Caprasimo/Figtree) se cargan desde en el de
cada página, no con @import acá — @import obliga al navegador a
esperar a este archivo, descubrir el import, y recién ahí pedir las
fuentes (3 saltos en cadena). Con en paralelo llegan antes del
primer render y se evita el salto de layout al cambiar de fuente. */
/* Transición nativa entre páginas (Chrome/Edge): evita el corte brusco
al navegar — si el navegador no la soporta, no pasa nada (mejora
progresiva). */
@view-transition{
navigation: auto;
}
:root{
/* Paleta de marca Pet Alimentos (musgo/oliva) — reemplaza el acento
por defecto del sistema "Organic" */
--color-accent-100:#f7f8e4;
--color-accent-200:#e9eab4;
--color-accent-300:#d5d685;
--color-accent-400:#b8ba52;
--color-accent-500:#8f9024;
--color-accent-600:#75761c;
--color-accent-700:#5b5c15;
--color-accent-800:#40410f;
--color-accent-900:#2a2b09;
--color-accent: var(--color-accent-500);
/* Acento secundario (salvia) — se usa en Gatos, badges y notas */
--color-accent-2-100:#f0fae1;
--color-accent-2-200:#e1eecc;
--color-accent-2-300:#ccdbb2;
--color-accent-2-400:#aebf92;
--color-accent-2-500:#8fa073;
--color-accent-2-600:#728157;
--color-accent-2-700:#56633f;
--color-accent-2-800:#3d472b;
--color-accent-2-900:#272e1b;
--color-bg:#f6f1e3;
--color-surface:#ebddc5;
--color-text:#201e1d;
--color-divider: color-mix(in srgb, #201e1d 16%, transparent);
--color-neutral-100:#f9f4ed;
--color-neutral-200:#eee7db;
--color-neutral-300:#dcd3c4;
--color-neutral-400:#c0b6a5;
--color-neutral-500:#a19786;
--color-neutral-600:#82796a;
--color-neutral-700:#645c50;
--color-neutral-800:#474238;
--color-neutral-900:#2e2b25;
--font-heading:"Caprasimo", system-ui, sans-serif;
--font-body:"Figtree", system-ui, sans-serif;
--space-1:4px; --space-2:8px; --space-3:13px; --space-4:18px; --space-6:26px; --space-8:35px;
--radius-sm:8px; --radius-md:16px; --radius-lg:28px;
--shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
--shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
--shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
--header-h: 72px;
--tabbar-h: 64px;
}
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--color-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:15px;
line-height:1.55;
}
h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading); font-weight:400; margin:0 0 var(--space-2);
line-height:1.1; letter-spacing:-0.01em; color:var(--color-accent-800);
}
p{ margin:0 0 var(--space-3); }
a{ color:var(--color-accent-700); text-decoration:none; }
a:hover{ color:var(--color-accent-800); }
img{ display:block; max-width:100%; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
@media (max-width:640px){ .container{ padding:0 16px; } }
.visually-hidden{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ── Encabezado ─────────────────────────────────────────────────────── */
.site-header{
background:var(--color-accent-200);
position:sticky; top:0; z-index:20;
}
.site-header__bar{
display:flex; align-items:center; gap:24px; padding-block:13px;
}
.site-header__brand{ display:flex; align-items:center; gap:11px; flex:none; }
.site-header__mark{
width:40px; height:40px; border-radius:999px; flex:none;
background:var(--color-accent-700); color:var(--color-accent-200);
font-family:var(--font-heading); font-size:18px;
display:flex; align-items:center; justify-content:center;
}
.site-header__name{ display:block; font-family:var(--font-heading); font-size:19px; color:var(--color-accent-800); line-height:1.05; }
.site-header__tagline{
display:block; margin-top:2px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--color-accent-700); font-weight:700;
}
.site-nav{ display:flex; gap:20px; font-size:14px; font-weight:600; color:var(--color-accent-800); }
.site-nav a{ color:inherit; opacity:.72; padding-bottom:3px; border-bottom:2px solid transparent; }
.site-nav a:hover{ opacity:1; }
.site-nav a[aria-current="page"]{ opacity:1; border-bottom-color:var(--color-accent-700); }
.site-header__spacer{ flex:1; }
.searchbox{
display:flex; align-items:center; gap:9px;
background:var(--color-neutral-100); border:1px solid var(--color-accent-400);
border-radius:999px; padding:9px 16px; width:270px; color:var(--color-neutral-600);
font-size:13px;
}
.searchbox svg{ flex:none; color:var(--color-accent-600); }
.searchbox input{
border:0; background:transparent; outline:0; width:100%;
font:inherit; font-size:13px; color:var(--color-neutral-900);
}
.searchbox input::placeholder{ color:var(--color-neutral-600); }
.btn-whatsapp{
display:flex; align-items:center; gap:8px; flex:none;
background:var(--color-accent-700); color:var(--color-accent-100);
border-radius:999px; padding:10px 18px; font-size:13.5px; font-weight:700;
}
.btn-whatsapp:hover{ background:var(--color-accent-800); color:var(--color-accent-100); }
.btn-whatsapp svg{ flex:none; }
@media (max-width:900px){
.site-nav{ display:none; }
.searchbox{ display:none; }
.site-header__spacer{ display:none; }
.site-header__bar{ justify-content:space-between; gap:12px; }
.site-header__brand{ flex:1 1 auto; min-width:0; }
.site-header__brand > span:last-child{ min-width:0; overflow:hidden; }
.site-header__name, .site-header__tagline{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* ── Barra de pestañas móvil ───────────────────────────────────────── */
.mobile-tabbar{
display:none;
position:fixed; left:0; right:0; bottom:0; z-index:30;
background:var(--color-neutral-100); border-top:1px solid var(--color-divider);
padding:9px 8px calc(10px + env(safe-area-inset-bottom));
justify-content:space-around;
}
.mobile-tabbar a{
display:flex; flex-direction:column; align-items:center; gap:3px;
color:var(--color-neutral-600); font-size:10.5px; font-weight:600; min-width:56px;
}
.mobile-tabbar a[aria-current="page"]{ color:var(--color-accent-700); font-weight:700; }
@media (max-width:900px){
.mobile-tabbar{ display:flex; }
body{ padding-bottom: calc(var(--tabbar-h) + 8px); }
}
/* ── Hero de inicio ─────────────────────────────────────────────────── */
.hero{
display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center;
padding:48px 0 40px;
}
.hero__badge{
display:inline-flex; align-items:center; gap:7px;
background:var(--color-accent-2-200); color:var(--color-accent-2-800);
border-radius:999px; padding:6px 14px; font-size:11.5px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px;
}
.hero h1{ font-size:54px; max-width:12ch; text-wrap:balance; margin-bottom:16px; }
.hero p{ font-size:16.5px; max-width:42ch; color:var(--color-neutral-700); margin-bottom:26px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-pill{
border-radius:999px; padding:13px 26px; font-family:var(--font-heading); font-size:15px;
display:inline-flex; align-items:center; justify-content:center;
}
.btn-pill--primary{ background:var(--color-accent); color:#fff; }
.btn-pill--primary:hover{ background:var(--color-accent-600); color:#fff; }
.btn-pill--outline{ border:1.5px solid var(--color-accent-400); color:var(--color-accent-800); }
.btn-pill--outline:hover{ border-color:var(--color-accent-600); }
.btn-pill--block{ width:100%; }
.hero__art{ position:relative; height:320px; }
.hero__art-blob{ position:absolute; inset:0; border-radius:999px 999px 200px 200px; background:var(--color-accent-200); }
.hero__art-dot{ position:absolute; right:0; top:18px; width:104px; height:104px; border-radius:999px; background:var(--color-accent-2-200); }
.hero__art-frame{
position:absolute; inset:26px 44px; border-radius:var(--radius-lg);
background:var(--color-neutral-200); overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.hero__art-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
.hero{ grid-template-columns:1fr; padding-top:28px; }
.hero h1{ font-size:34px; }
.hero__art{ display:none; }
}
/* ── Tarjetas de categoría ──────────────────────────────────────────── */
.category-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:40px; }
.category-card{
border-radius:var(--radius-lg); padding:24px 26px;
display:flex; align-items:center; gap:20px;
}
.category-card--perros{ background:var(--color-accent-200); }
.category-card--gatos{ background:var(--color-accent-2-200); }
.category-card__icon{
width:88px; height:88px; border-radius:999px; flex:none;
display:flex; align-items:center; justify-content:center;
}
.category-card--perros .category-card__icon{ background:var(--color-accent-100); }
.category-card--gatos .category-card__icon{ background:var(--color-accent-2-100); }
.category-card h3{ font-size:26px; margin-bottom:4px; }
.category-card--gatos h3{ color:var(--color-accent-2-800); }
.category-card p{ margin:0 0 10px; font-size:13.5px; opacity:.8; }
.category-card--perros p, .category-card--perros .tag{ color:var(--color-accent-800); }
.category-card--gatos p, .category-card--gatos .tag{ color:var(--color-accent-2-800); }
.category-card__tags{ display:flex; gap:7px; flex-wrap:wrap; }
.tag{ border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:700; }
.category-card--perros .tag{ background:var(--color-accent-100); }
.category-card--gatos .tag{ background:var(--color-accent-2-100); }
@media (max-width:640px){ .category-grid{ grid-template-columns:1fr 1fr; gap:12px; } .category-card{ flex-direction:column; align-items:flex-start; padding:16px; } .category-card__icon{ width:56px; height:56px; } .category-card__icon svg{ width:26px; height:26px; } }
/* ── Secciones genéricas ────────────────────────────────────────────── */
.section{ padding:0 0 44px; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.section__head h2{ font-size:32px; margin:0; }
.section__head a{ font-size:13.5px; font-weight:700; color:var(--color-accent-700); white-space:nowrap; }
/* ── Grilla y tarjeta de producto ───────────────────────────────────── */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1024px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){
.product-grid{ grid-template-columns:1fr 1fr; gap:12px; }
.product-card__price{ font-size:19px; }
.product-card__cta{ padding:7px 12px; }
}
.product-card{
background:var(--color-neutral-100); border-radius:var(--radius-md);
overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.product-card__media{
position:relative; background:var(--color-neutral-200); height:166px;
display:flex; align-items:flex-end; justify-content:center; flex:none;
}
.product-card__kg{
position:absolute; top:10px; left:10px; background:var(--color-accent); color:#fff;
border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:700;
}
.product-card__stock{
position:absolute; top:10px; right:10px; background:var(--color-accent-2-200); color:var(--color-accent-2-800);
border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:700;
}
.product-card__stock--low{ background:#f3d7c2; color:#7a3a13; }
.product-card__media img{
width:100%; height:100%; object-fit:contain; display:block;
}
.product-card__bag{
width:84px; height:118px; border-radius:12px 12px 7px 7px; position:relative; margin-bottom:14px;
}
.product-card__bag::before{
content:""; position:absolute; top:-7px; left:16px; right:16px; height:13px; border-radius:8px;
background:var(--bag-cap, var(--color-accent-400));
}
.product-card__bag::after{
content:""; position:absolute; left:15px; right:15px; bottom:26px; height:26px; border-radius:6px;
background:rgba(255,255,255,.75);
}
.product-card__body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:2px; flex:1; }
.product-card__brand{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--color-neutral-600); }
.product-card__name{ font-family:var(--font-heading); font-size:17px; color:var(--color-accent-800); line-height:1.15; margin:3px 0 5px; }
.product-card__desc{ font-size:12.5px; color:var(--color-neutral-700); margin-bottom:12px; flex:1; }
.product-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px 10px; flex-wrap:wrap; }
.product-card__price{ font-family:var(--font-heading); font-size:22px; color:var(--color-accent-700); flex-shrink:1; min-width:0; }
.product-card__cta{
border:1.5px solid var(--color-accent-400); color:var(--color-accent-800); border-radius:999px;
padding:7px 14px; font-size:12.5px; font-weight:700; white-space:nowrap; flex-shrink:0;
}
.product-card__cta:hover{ background:var(--color-accent-200); }
.product-grid--compact .product-card__media{ height:130px; }
.product-grid--compact .product-card__bag{ width:66px; height:92px; margin-bottom:11px; }
/* ── Franja de servicios (inicio) ───────────────────────────────────── */
.service-strip{
background:var(--color-accent-200); padding:24px 0; display:flex; align-items:center; gap:30px; flex-wrap:wrap;
}
.service-item{ display:flex; align-items:center; gap:13px; flex:1; min-width:220px; }
.service-item svg{ flex:none; color:var(--color-accent-700); }
.service-item strong{ font-family:var(--font-heading); font-weight:400; font-size:18px; color:var(--color-accent-800); display:block; }
.service-item span{ font-size:12.5px; color:var(--color-accent-800); opacity:.8; white-space:nowrap; }
.service-divider{ width:1px; height:42px; background:var(--color-accent-400); }
@media (max-width:900px){ .service-divider{ display:none; } }
/* ── Pie de página ──────────────────────────────────────────────────── */
.site-footer{
background:var(--color-accent-900); color:var(--color-accent-200);
padding:28px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-footer__brand{ font-family:var(--font-heading); font-size:20px; }
.site-footer__addr{ font-size:12.5px; opacity:.75; margin-top:3px; }
.site-footer__links{ display:flex; gap:22px; font-size:13px; opacity:.85; flex-wrap:wrap; }
.site-footer a{ color:inherit; }
/* ── Página de catálogo ─────────────────────────────────────────────── */
.catalog-head{ padding:24px 0 16px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.catalog-head__crumb{ font-size:12px; color:var(--color-neutral-600); margin-bottom:8px; }
.catalog-head__crumb strong{ color:var(--color-accent-700); }
.catalog-head h1{ font-size:40px; margin:0 0 6px; }
.catalog-head__count{ margin:0; font-size:14px; color:var(--color-neutral-700); }
.catalog-sort{
display:flex; align-items:center; gap:8px; background:var(--color-neutral-100);
border:1px solid var(--color-divider); border-radius:999px; padding:9px 16px;
font-size:13px; color:var(--color-neutral-700); position:relative;
}
.catalog-sort__select{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
border:none; background:transparent; font:inherit; font-weight:700;
color:var(--color-neutral-900); padding-right:16px; cursor:pointer;
}
.catalog-sort__select:focus-visible{ outline:2px solid var(--color-accent-600); outline-offset:2px; border-radius:4px; }
.catalog-sort__chevron{ pointer-events:none; flex:none; }
.catalog-layout{ display:grid; grid-template-columns:246px 1fr; gap:24px; padding:6px 0 40px; align-items:start; }
@media (max-width:900px){ .catalog-layout{ grid-template-columns:1fr; } }
.filters{
background:var(--color-neutral-100); border-radius:var(--radius-lg); padding:22px 20px;
box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:22px;
}
.filters__head{ display:flex; align-items:center; justify-content:space-between; }
.filters__head h2{ font-size:17px; margin:0; }
.filters__reset{ font-size:12px; font-weight:700; color:var(--color-accent-700); background:none; border:0; cursor:pointer; padding:0; }
.filter-label{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--color-neutral-600); margin-bottom:10px; }
.filter-seg{ display:flex; gap:8px; }
.filter-seg button{
flex:1; text-align:center; border-radius:999px; padding:8px 0; font-size:13px; font-weight:600;
border:1px solid var(--color-divider); background:none; color:var(--color-neutral-700); cursor:pointer;
}
.filter-seg button[aria-pressed="true"]{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); font-weight:700; }
.filter-list{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--color-neutral-800); }
.filter-check{ display:flex; align-items:center; gap:10px; cursor:pointer; position:relative; }
.filter-check input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.filter-check__box{ width:18px; height:18px; border-radius:6px; border:1.5px solid var(--color-neutral-400); flex:none; display:flex; align-items:center; justify-content:center; color:transparent; }
.filter-check input:checked + .filter-check__box{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.filter-check__n{ margin-left:auto; color:var(--color-neutral-600); font-size:12px; }
.filter-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.filter-chip-btn{
border:1px solid var(--color-divider); border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600;
color:var(--color-neutral-700); background:none; cursor:pointer;
}
.filter-chip-btn[aria-pressed="true"]{ background:var(--color-accent-200); border-color:var(--color-accent-400); color:var(--color-accent-800); font-weight:700; }
.filters__help{ background:var(--color-accent-2-200); border-radius:var(--radius-md); padding:16px; }
.filters__help h3{ font-size:15px; color:var(--color-accent-2-800); margin-bottom:5px; }
.filters__help p{ margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--color-accent-2-800); opacity:.85; }
.filters__help a{ display:block; background:var(--color-accent-2-700); color:#fff; border-radius:999px; padding:9px 0; text-align:center; font-size:13px; font-weight:700; }
.filters__help a:hover{ background:var(--color-accent-2-800); color:#fff; }
.active-chips{ display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; font-size:12.5px; color:var(--color-neutral-600); }
.chip{
display:inline-flex; align-items:center; gap:7px; background:var(--color-accent-200); color:var(--color-accent-800);
border-radius:999px; padding:5px 12px; font-size:12.5px; font-weight:600; border:0; cursor:pointer;
}
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:26px; }
.pagination button{
width:34px; height:34px; border-radius:999px; border:1px solid var(--color-divider); background:none;
color:var(--color-neutral-700); font-size:13px; font-weight:600; cursor:pointer;
}
.pagination button[aria-current="true"]{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); font-weight:700; }
.empty-state{ padding:60px 20px; text-align:center; color:var(--color-neutral-600); }
/* ── Página de búsqueda ─────────────────────────────────────────────── */
.search-hero{ padding:40px 0 20px; }
.search-hero h1{ font-size:36px; }
.search-field{ position:relative; max-width:640px; margin:0 auto 40px; }
.search-field__box{
display:flex; align-items:center; gap:10px; background:var(--color-neutral-100);
border:2px solid var(--color-accent); border-radius:22px; padding:12px 18px;
}
.search-field__box svg{ flex:none; color:var(--color-accent-600); }
.search-field__box input{
border:0; background:transparent; outline:0; width:100%; font:inherit;
font-size:14.5px; color:var(--color-neutral-900);
}
.search-suggestions{
position:absolute; left:0; right:0; top:100%; background:var(--color-neutral-100);
border:2px solid var(--color-accent); border-top:none; border-radius:0 0 22px 22px;
padding:8px 0 10px; box-shadow:var(--shadow-lg); z-index:5;
}
.search-suggestions[hidden]{ display:none; }
.search-suggestions__label{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--color-neutral-600); padding:6px 18px 6px; }
.search-suggestions button{
width:100%; display:flex; align-items:center; gap:12px; padding:9px 18px; background:none; border:0;
cursor:pointer; text-align:left; font-size:14px; color:var(--color-neutral-900);
}
.search-suggestions button:hover{ background:var(--color-accent-100); }
.search-suggestions button svg{ flex:none; color:var(--color-neutral-500); }
.search-suggestions button span:last-child{ margin-left:auto; font-size:11.5px; color:var(--color-neutral-600); }
.search-results__meta{ margin:0 0 22px; font-size:14px; color:var(--color-neutral-700); }
.search-results__meta strong{ color:var(--color-accent-700); }
/* ── Página de contacto ─────────────────────────────────────────────── */
.contact-hero{ padding:44px 0 20px; text-align:center; }
.contact-hero h1{ font-size:44px; }
.contact-hero p{ margin:0 auto; max-width:52ch; font-size:16px; color:var(--color-neutral-700); }
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:26px 0 40px; }
@media (max-width:768px){ .steps-grid{ grid-template-columns:1fr; } }
.step-card{ background:var(--color-neutral-100); border-radius:var(--radius-lg); padding:26px 24px; box-shadow:var(--shadow-sm); }
.step-card__n{
width:40px; height:40px; border-radius:999px; background:var(--color-accent-200); color:var(--color-accent-800);
font-family:var(--font-heading); font-size:19px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.step-card h3{ font-size:21px; margin-bottom:7px; }
.step-card p{ margin:0; font-size:14px; color:var(--color-neutral-700); }
.contact-panels{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:44px; align-items:stretch; }
@media (max-width:768px){ .contact-panels{ grid-template-columns:1fr; } }
.panel{ border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; gap:18px; }
.panel--location{ background:var(--color-accent-200); }
.panel--reach{ background:var(--color-neutral-100); box-shadow:var(--shadow-sm); }
.panel h2{ font-size:28px; margin:0; }
.info-rows{ display:flex; flex-direction:column; gap:14px; font-size:14.5px; color:var(--color-accent-800); }
.info-row{ display:flex; gap:12px; align-items:flex-start; }
.info-row svg{ flex:none; margin-top:2px; color:var(--color-accent-700); }
.map-placeholder{
flex:1; min-height:150px; border-radius:var(--radius-md); background:var(--color-accent-100);
border:1.5px dashed var(--color-accent-400); display:flex; align-items:center; justify-content:center;
gap:9px; color:var(--color-accent-700); font-size:12.5px; font-weight:600;
}
.map-embed{
flex:1; min-height:220px; border-radius:var(--radius-md); position:relative; overflow:hidden;
background:var(--color-accent-100);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; pointer-events:none; }
.map-embed__link{
position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:10px;
}
.map-embed__badge{
display:flex; align-items:center; gap:7px; background:var(--color-neutral-100); color:var(--color-accent-800);
border-radius:999px; padding:7px 13px; font-size:12px; font-weight:700; box-shadow:var(--shadow-sm);
transition:background .15s;
}
.map-embed__link:hover .map-embed__badge{ background:#fff; }
.whatsapp-cta{
display:flex; align-items:center; gap:12px; background:#25543a; color:#eaf3ec;
border-radius:var(--radius-md); padding:16px 20px;
}
.whatsapp-cta:hover{ background:#1d4530; color:#eaf3ec; }
.whatsapp-cta strong{ display:block; font-family:var(--font-heading); font-weight:400; font-size:19px; }
.whatsapp-cta span{ font-size:12.5px; opacity:.85; }
.reach-row{
display:flex; align-items:center; gap:12px; border:1px solid var(--color-divider); border-radius:var(--radius-md);
padding:14px 18px; font-size:14.5px; color:var(--color-neutral-800);
}
.reach-row svg{ color:var(--color-accent-600); flex:none; }
.disclaimer{ margin-top:auto; background:var(--color-accent-2-200); border-radius:var(--radius-md); padding:14px 18px; font-size:13px; line-height:1.55; color:var(--color-accent-2-800); }