/* ============================================================
   SocialVet — Sistema visual
   Turquesa de marca + acento coral cálido · Sora + Manrope
   ============================================================ */

:root{
  /* Neutrales cálidos */
  --cream:#FBF8F3;
  --sand:#F2EBDF;
  --paper:#FFFFFF;
  --ink:#13211F;
  --muted:#5B6A69;
  --line:rgba(14,40,42,.12);

  /* Marca */
  --teal:#0E3A45;        /* teal profundo para secciones oscuras */
  --teal-deep:#0A2C35;
  --turq:#12B0D4;        /* cian de marca */
  --turq-bright:#37C8E6;
  --turq-soft:#DDF1F6;
  --turq-ink:#0B7E99;

  /* Acento — rojo del logo SocialVet (hexágono) */
  --brand-red:#A31D33;     /* color base del hexágono del logo */
  --brand-blue:#2090B7;    /* azul de "Social" en el logo */
  --accent:#B3223B;        /* decorativo */
  --accent-cta:#A31D33;    /* con texto blanco encima (contraste 7.5:1) */
  --accent-2:#C33A50;
  --accent-soft:#F7DEE2;
  --turq-ink-text:#086379; /* turquesa para texto pequeño (contraste AA) */

  /* Tipografía */
  --display:'Sora', system-ui, sans-serif;
  --body:'Manrope', system-ui, sans-serif;

  --maxw:1240px;
  --gut:clamp(20px, 5vw, 64px);
  --radius:20px;
  --hex:polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.04; letter-spacing:-.02em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px,11vw,150px); position:relative; }

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--turq-ink-text);
  display:inline-flex;
  align-items:center;
  gap:11px;
}
.eyebrow::before{
  content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block;
}
.eyebrow.on-dark{ color:var(--turq-bright); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--accent-cta); --fg:#fff;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:100px; cursor:pointer; border:0;
  background:var(--bg); color:var(--fg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent-cta) 70%, transparent);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -12px color-mix(in srgb, var(--accent-cta) 75%, transparent); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn.ghost{
  background:transparent; color:var(--ink);
  border:1.5px solid rgba(14,40,42,.28); box-shadow:none; font-weight:600;
}
.btn.ghost:hover{ border-color:var(--ink); background:transparent; }
.btn.ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.35); }
.btn.ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn.teal{ --bg:var(--turq); box-shadow:0 10px 24px -10px color-mix(in srgb,var(--turq) 70%, transparent); }
.btn.lg{ padding:18px 32px; font-size:17px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.solid{
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-block:12px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--brand-blue); }
.brand .mark{ width:40px; height:40px; object-fit:contain; }
.brand b{ color:var(--brand-red); font-weight:800; }
.site-header.on-light .brand{ color:#fff; }
.site-header.on-light .brand b{ color:#fff; }
.site-header.solid.on-light .brand{ color:var(--brand-blue); }
.site-header.solid.on-light .brand b{ color:var(--brand-red); }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a.lnk{
  font-weight:600; font-size:15.5px; color:var(--ink); position:relative; padding-block:4px;
}
.nav a.lnk::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent);
  transition:width .35s var(--ease);
}
.nav a.lnk:hover::after{ width:100%; }
.site-header.on-light:not(.solid) .nav a.lnk{ color:rgba(255,255,255,.92); }
.site-header.on-light:not(.solid) .brand{ color:#fff; }

.nav-tools{ display:flex; align-items:center; gap:18px; }
.phone-min{ font-weight:700; font-size:15px; color:var(--ink); display:flex; align-items:center; gap:8px; white-space:nowrap; }
.site-header.on-light:not(.solid) .phone-min{ color:#fff; }

.burger{ display:none; width:46px; height:46px; border-radius:12px; border:1.5px solid var(--line); background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span{ width:20px; height:2px; background:var(--ink); display:block; transition:.3s; }
.site-header.on-light:not(.solid) .burger span{ background:#fff; }
.site-header.on-light:not(.solid) .burger{ border-color:rgba(255,255,255,.4); }

/* mobile menu */
.m-menu{
  position:fixed; inset:0; z-index:120; background:var(--teal-deep); color:#fff;
  display:flex; flex-direction:column; justify-content:flex-start; gap:2px; padding:88px var(--gut) 40px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%); transition:transform .5s var(--ease), visibility 0s linear .5s; pointer-events:none; visibility:hidden;
}
.m-menu.open{ transform:none; pointer-events:auto; visibility:visible; transition:transform .5s var(--ease), visibility 0s; }
.m-menu a{ font-family:var(--display); font-weight:600; font-size:clamp(19px,5vw,24px); line-height:1.2; color:#fff; padding-block:13px; border-bottom:1px solid rgba(255,255,255,.1); }
.m-menu .close{ position:absolute; top:22px; right:var(--gut); width:48px; height:48px; border-radius:12px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:24px; cursor:pointer; }
.m-menu .m-foot{ margin-top:26px; display:flex; flex-direction:column; gap:6px; font-size:16px; color:rgba(255,255,255,.7); border:0; }
/* Iconos + entrada escalonada de los enlaces del menú móvil (con vida) */
.m-menu > a{ display:flex; align-items:center; gap:14px; opacity:0; transform:translateX(-16px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), color .2s; }
.m-menu > a svg{ width:22px; height:22px; color:var(--turq-bright); flex:none; transition:transform .3s var(--ease); }
.m-menu.open > a{ opacity:1; transform:none; }
.m-menu.open > a:nth-of-type(1){ transition-delay:.06s }
.m-menu.open > a:nth-of-type(2){ transition-delay:.11s }
.m-menu.open > a:nth-of-type(3){ transition-delay:.16s }
.m-menu.open > a:nth-of-type(4){ transition-delay:.21s }
.m-menu.open > a:nth-of-type(5){ transition-delay:.26s }
.m-menu.open > a:nth-of-type(6){ transition-delay:.31s }
.m-menu.open > a:nth-of-type(7){ transition-delay:.36s }
.m-menu > a:active svg{ transform:translateX(3px); }

/* Botones del menú móvil: Reservar (coral) + WhatsApp (verde), como los de la página */
.m-menu .m-cta{ display:flex; flex-direction:column; gap:12px; margin:22px 0 6px; }
.m-menu .m-cta a{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:18px; line-height:1; border-bottom:0;
  padding:16px 24px; border-radius:100px; color:#fff; background:var(--accent-cta);
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent-cta) 70%, transparent); }
.m-menu .m-cta a.wa{ background:#25D366; box-shadow:0 10px 24px -10px rgba(37,211,102,.6); }
.m-menu .m-cta a svg{ width:1.25em; height:1.25em; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ display:none; }
.hero.hero-a{ display:block; }

/* shared hero bits */
.hero-eyebrow{ margin-bottom:24px; }
.hero h1{ font-size:clamp(40px, 6.6vw, 86px); }
.hero .lede{ font-size:clamp(17px,1.5vw,21px); color:var(--muted); max-width:38ch; margin-top:24px; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; align-items:center; }

/* ---- Hero A: Editorial split — ajustado a la primera vista ---- */
.hero-a{
  min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(84px,10vh,104px); padding-bottom:clamp(22px,3.2vw,44px);
}
.hero-a .grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; width:100%;
}
.hero-a h1{ font-size:clamp(33px,4.3vw,54px); }
.hero-a .lede{ margin-top:16px; }
.hero-a .cta-row{ margin-top:22px; }
.hero-a .trust-inline{ margin-top:20px; }
.hero-a h1 .ink-accent{ color:var(--turq-ink); }
.hero-a .visual{ position:relative; }
.hero-a .visual .photo{
  width:100%; aspect-ratio:4/4.3; max-height:72svh; border-radius:240px 240px 26px 26px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(10,44,53,.5);
  background:linear-gradient(160deg, var(--turq-soft), #fff);
}
.hero-a .visual .photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-a .hexbadge{
  position:absolute; left:-34px; bottom:46px; width:128px; height:128px;
  background:var(--accent-cta); clip-path:var(--hex); display:grid; place-items:center; text-align:center;
  color:#fff; font-family:var(--display); font-weight:700; line-height:1.1; font-size:14px; padding:14px;
  box-shadow:0 20px 40px -18px color-mix(in srgb,var(--accent-cta) 80%, transparent);
}
.hero-a .floatcard{
  position:absolute; right:-18px; top:40px; background:var(--paper); border-radius:16px;
  padding:16px 20px; box-shadow:0 24px 50px -24px rgba(10,44,53,.4); display:flex; align-items:center; gap:13px;
}
.hero-a .floatcard .dot{ width:10px; height:10px; border-radius:50%; background:#34C759; box-shadow:0 0 0 4px rgba(52,199,89,.18); }
.hero-a .floatcard b{ font-family:var(--display); font-size:15px; }
.hero-a .floatcard span{ font-size:13px; color:var(--muted); }

.trust-inline{ display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; }
.trust-inline .ti{ display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:600; color:var(--ink); }
.trust-inline .ti .ic{ width:30px; height:30px; border-radius:9px; background:var(--turq-soft); display:grid; place-items:center; color:var(--turq-ink); flex:none; }

/* ============================================================
   MARQUEE / valores strip
   ============================================================ */
.valstrip{ background:var(--teal); color:#fff; }
.valstrip .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1); }
.valstrip .cell{ background:var(--teal); padding:34px clamp(18px,2.4vw,36px); }
.valstrip .cell .k{ font-family:var(--display); font-weight:800; font-size:clamp(30px,3.4vw,46px); letter-spacing:-.03em; }
.valstrip .cell .k em{ color:var(--turq-bright); font-style:normal; }
.valstrip .cell .l{ margin-top:6px; font-size:14.5px; color:rgba(255,255,255,.72); font-weight:500; }

/* ============================================================
   SERVICIOS
   ============================================================ */
/* ---- Banner de sección (formato "Quiénes somos") ---- */
.page-banner{
  position:relative; height:clamp(200px,26vw,320px); overflow:hidden;
  margin-bottom:clamp(40px,5vw,66px);
}
.page-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-banner .pb-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,44,53,.82), rgba(10,44,53,.35) 70%, rgba(10,44,53,.15)); }
.page-banner .pb-txt{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff; }
.page-banner .pb-txt h2{ font-size:clamp(30px,4.4vw,56px); margin-top:16px; max-width:18ch; }

.serv-head{ margin-bottom:clamp(30px,4vw,52px); }
.serv-head p{ color:var(--muted); max-width:56ch; font-size:clamp(17px,1.6vw,20px); }

.serv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,30px); }
.scard{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:24px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.scard:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(10,44,53,.42); border-color:transparent; }
.scard .sphoto{ height:clamp(180px,20vw,220px); overflow:hidden; background:var(--turq-soft); }
.scard .sphoto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.scard:hover .sphoto img{ transform:scale(1.05); }
.scard .sbody{ position:relative; padding:26px 28px 28px; display:flex; flex-direction:column; flex:1; }
.scard .num{ position:absolute; top:-30px; right:22px; z-index:2; font-family:var(--display); font-weight:700; font-size:13px; color:#fff; background:var(--accent-cta); width:44px; height:44px; border-radius:12px; display:grid; place-items:center; box-shadow:0 12px 24px -12px color-mix(in srgb,var(--accent-cta) 80%, transparent); }
.scard h3{ font-size:21px; margin-bottom:9px; }
.scard p{ font-size:15px; color:var(--muted); }
.scard .go{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--turq-ink-text); align-self:flex-start; }
/* toda la tarjeta de servicio clicable (stretched link sobre el CTA) */
.scard .go::after{ content:""; position:absolute; inset:0; z-index:1; }
.scard .num{ pointer-events:none; }
.scard .go .arr{ transition:transform .35s var(--ease); }
.scard:hover .go .arr{ transform:translateX(4px); }

/* ---- Grilla de médicos veterinarios ---- */
.docs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,22px); margin-top:28px; }
.doc{ margin:0; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.doc .doc-ph{ aspect-ratio:1/1; overflow:hidden; background:var(--turq-soft); }
.doc .doc-ph img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.doc figcaption{ padding:14px 16px 16px; }
.doc figcaption b{ font-family:var(--display); font-size:16px; display:block; color:var(--ink); }
.doc figcaption span{ font-size:13px; color:var(--turq-ink-text); font-weight:600; }

/* ---- Instagram ---- */
.insta{ background:var(--cream); }
.insta-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,48px); }
.insta-head h2{ font-size:clamp(28px,3.6vw,46px); margin-top:16px; max-width:20ch; }
.insta-head h2 a{ color:var(--turq-ink); }
.insta-head p{ color:var(--muted); margin-top:12px; }
.insta-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1vw,14px); }
.insta-grid .ig{ position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; }
.insta-grid .ig img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.insta-grid .ig:hover img{ transform:scale(1.08); }
.insta-grid .ig-ov{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:26px; background:rgba(10,44,53,.35); opacity:0; transition:opacity .35s; }
.insta-grid .ig:hover .ig-ov{ opacity:1; }

/* ============================================================
   QUIÉNES SOMOS — full bleed split
   ============================================================ */
.about{ background:var(--sand); }
.about .grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.about .media{ position:relative; min-height:560px; background:linear-gradient(160deg, #e6dccd, #f1ebe0); }
.about .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.about .body{ padding:clamp(48px,7vw,100px) clamp(28px,5vw,80px); }
.about .body h2{ font-size:clamp(30px,3.8vw,48px); margin:20px 0 18px; }
.about .body p{ color:var(--muted); margin-bottom:18px; max-width:52ch; }
.about .body .sign{ margin-top:30px; display:flex; align-items:center; gap:14px; }
.about .body .sign .px{ width:46px; height:46px; border-radius:12px; background:var(--turq-soft); display:grid; place-items:center; color:var(--turq-ink); font-family:var(--display); font-weight:800; }
.about .body .sign b{ font-family:var(--display); }
.about .body .sign span{ display:block; font-size:13.5px; color:var(--muted); font-weight:500; }

/* ============================================================
   EXPERIENCIA / por qué
   ============================================================ */
.why{ background:var(--teal-deep); color:#fff; overflow:hidden; position:relative; }
.why::after{ content:""; position:absolute; left:-8vw; bottom:-8vw; width:34vw; height:34vw; border-radius:50%; background:radial-gradient(circle, rgba(55,200,230,.16), transparent 70%); }
.why .head{ max-width:60ch; margin-bottom:clamp(44px,5vw,72px); position:relative; z-index:1; }
.why .head h2{ font-size:clamp(32px,4.6vw,58px); margin-top:20px; }
.why .head h2 em{ font-style:normal; color:var(--turq-bright); }
.why .feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,40px); position:relative; z-index:1; }
.why .feat{ border-top:1px solid rgba(255,255,255,.18); padding-top:26px; }
.why .feat .hx{ width:54px; height:54px; clip-path:var(--hex); background:linear-gradient(150deg,var(--turq),var(--turq-ink)); display:grid; place-items:center; margin-bottom:22px; color:#fff; }
.why .feat h3{ font-size:20px; margin-bottom:10px; }
.why .feat p{ font-size:15px; color:rgba(255,255,255,.7); }

/* ============================================================
   BANDA emocional (quote)
   ============================================================ */
.band{ position:relative; min-height:64vh; display:flex; align-items:center; color:#fff; overflow:hidden; background:var(--teal); }
.band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.band .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,44,53,.82), rgba(10,44,53,.32) 70%, transparent); }
.band .q{ position:relative; z-index:2; max-width:20ch; }
.band .q .mark{ font-family:var(--display); font-size:80px; line-height:.6; color:var(--turq-bright); }
.band .q blockquote{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,44px); letter-spacing:-.02em; line-height:1.12; }
.band .q cite{ display:block; margin-top:22px; font-style:normal; font-size:15px; color:rgba(255,255,255,.78); }

/* ============================================================
   PRODUCTOS (Pawal) slim
   ============================================================ */
.pawal{ background:var(--paper); }
.pawal .grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.pawal h2{ font-size:clamp(30px,4vw,50px); margin:18px 0 18px; }
.pawal p{ color:var(--muted); margin-bottom:26px; max-width:46ch; }
.pawal .shelf{ border-radius:22px; overflow:hidden; box-shadow:0 30px 70px -34px rgba(10,44,53,.4); border:1px solid var(--line); aspect-ratio:4/3.4; }
.pawal .shelf img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{ background:var(--teal); color:#fff; }
.contact .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.contact h2{ font-size:clamp(34px,4.6vw,60px); margin:20px 0 24px; }
.contact .lede{ color:rgba(255,255,255,.8); margin-bottom:34px; max-width:40ch; }
.contact .info{ display:grid; gap:2px; }
.contact .row2{ display:flex; gap:16px; padding:20px 0; border-top:1px solid rgba(255,255,255,.16); align-items:flex-start; }
.contact .row2 .hx{ width:44px; height:44px; clip-path:var(--hex); background:var(--turq); display:grid; place-items:center; flex:none; color:#fff; }
.contact .row2 .k{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:700; }
.contact .row2 .v{ font-family:var(--display); font-weight:600; font-size:18px; margin-top:3px; }
.contact .row2 .v small{ display:block; font-family:var(--body); font-weight:500; font-size:14px; color:rgba(255,255,255,.7); margin-top:3px; }
.contact .map{ border-radius:22px; overflow:hidden; min-height:440px; position:relative; box-shadow:0 30px 70px -34px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18); }
.contact .map iframe{ width:100%; height:100%; border:0; position:absolute; inset:0; filter:grayscale(.2) contrast(1.02); }
.contact .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--teal-deep); color:#fff; padding-block:clamp(56px,7vw,90px) 36px; }
.footer .top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.14); }
.footer .brand{ color:#fff; margin-bottom:18px; }
.footer .brand b{ color:#fff; }
.footer .blurb{ color:rgba(255,255,255,.66); font-size:15px; max-width:34ch; }
.footer h4{ font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer ul a{ color:rgba(255,255,255,.82); font-size:15px; }
.footer ul a:hover{ color:var(--turq-bright); }
.footer .social{ display:flex; gap:10px; margin-top:6px; }
.footer .social a{ width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; color:#fff; transition:.3s; }
.footer .social a:hover{ background:var(--turq); border-color:var(--turq); transform:translateY(-3px); }
.footer .bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px 20px; flex-wrap:wrap; padding-top:26px; font-size:13.5px; color:rgba(255,255,255,.5); }
.footer .bottom a{ color:rgba(255,255,255,.6); }
.footer .bottom .credit{ color:rgba(255,255,255,.55); }
.footer .bottom .credit a{ color:var(--turq-bright); font-weight:600; }
.footer .bottom .credit a:hover{ color:#fff; }

/* ============================================================
   Reveal animation
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; }
  .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; }
}

/* ============================================================
   Responsive
   ============================================================ */
/* Rango intermedio: evita que el menú se apriete / solape con el logo (~981–1120px) */
@media (max-width:1120px) and (min-width:981px){
  .nav{ gap:20px; }
  .nav a.lnk{ font-size:14.5px; }
  .nav-tools{ gap:12px; }
  .phone-min{ display:none; }
}
@media (max-width:980px){
  .nav, .phone-min, .nav-tools .btn{ display:none; }
  .site-header{ padding-block:14px; }
  .burger{ display:flex; }
  .hero-a .grid, .about .grid, .why .feats, .pawal .grid, .contact .grid{ grid-template-columns:1fr; }
  .valstrip .row{ grid-template-columns:1fr 1fr; }
  .serv-grid{ grid-template-columns:1fr 1fr; }
  .why .feats{ grid-template-columns:1fr 1fr; }
  .hero-a .visual{ max-width:520px; margin:8px auto 0; }
  .about .media{ min-height:340px; }
  .about .body{ padding-block:clamp(40px,9vw,64px); padding-inline:var(--gut); }
}
@media (max-width:600px){
  body{ font-size:17px; }
  .serv-grid{ grid-template-columns:1fr; }
  .valstrip .row{ grid-template-columns:1fr 1fr; }
  .why .feats{ grid-template-columns:1fr; }
  .hero-a .floatcard{ right:0; }
  .hero-a .hexbadge{ left:6px; bottom:12px; width:104px; height:104px; }
}
@media (max-width:480px){ .docs-grid{ grid-template-columns:1fr; } }

.whatsapp-container{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:9999;
}

.whatsapp-float{
    width:68px;
    height:68px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:38px;
    box-shadow:0 10px 35px rgba(37,211,102,.45);
    text-decoration:none;
    animation:pulseWhatsapp 2s infinite;
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.12);
    background:#20c15b;
}

.whatsapp-tooltip{
    position:absolute;
    bottom:82px;
    right:0;
    background:#fff;
    color:#222;
    padding:12px 16px;
    border-radius:14px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    animation:floatText 4s infinite;
}

.whatsapp-tooltip::after{
    content:"";
    position:absolute;
    bottom:-8px;
    right:24px;
    border:8px solid transparent;
    border-top-color:#fff;
}

@keyframes pulseWhatsapp{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }
    70%{
        box-shadow:0 0 0 20px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

@keyframes floatText{
    0%,70%,100%{
        opacity:1;
        transform:translateY(0);
    }
    80%{
        transform:translateY(-8px);
    }
    90%{
        transform:translateY(0);
    }
}

@media(max-width:768px){
    .whatsapp-tooltip{
        display:none;
    }

    .whatsapp-float{
        width:62px;
        height:62px;
    }
}

/* ============================================================
   Ajustes 2026 — WhatsApp header, contacto, banners, responsive
   ============================================================ */
.phone-min{ transition:color .25s; }
.phone-min:hover{ color:var(--turq-ink); }
.phone-min svg{ color:#25D366; width:1.15em; height:1.15em; }
.contact .row2 .v a{ color:#fff; transition:color .25s; }
.contact .row2 .v a:hover{ color:var(--turq-bright); }
.contact .row2 .hx svg{ width:18px; height:18px; }

@media (max-width:980px){
  .insta-grid{ grid-template-columns:repeat(3,1fr); }
  .hero-a{ min-height:auto; padding-top:clamp(104px,18vh,140px); }
  .hero-a .visual{ max-width:460px; }
  .hero-a .visual .photo{ max-height:none; aspect-ratio:4/4; }
  .page-banner{ height:clamp(170px,40vw,240px); }
}
@media (max-width:600px){
  .insta-grid{ grid-template-columns:repeat(3,1fr); }
  .serv-grid{ grid-template-columns:1fr; }
  .insta-head{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   PÁGINAS INTERNAS (Blog / FAQs)
   ============================================================ */
.page-hero{
  position:relative; margin-top:74px; min-height:42vh; display:flex; align-items:flex-end; overflow:hidden;
  color:#fff; background:var(--teal);
}
.page-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0; }
.page-hero .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,44,53,.42), rgba(10,44,53,.35) 40%, rgba(10,44,53,.9)); }
.page-hero .wrap{ position:relative; z-index:2; padding-bottom:clamp(40px,6vh,72px); padding-top:clamp(36px,6vh,60px); }
.page-hero h1{ font-size:clamp(38px,6vw,74px); max-width:20ch; }
.page-hero p{ color:rgba(255,255,255,.85); margin-top:16px; max-width:52ch; font-size:clamp(17px,1.6vw,20px); }
.page-hero .crumbs{ font-size:14px; color:rgba(255,255,255,.75); margin-bottom:18px; }
.page-hero .crumbs a{ color:rgba(255,255,255,.75); }
.page-hero .crumbs a:hover{ color:#fff; }

/* ---- Páginas legales (Términos y condiciones) ---- */
.legal-hero{ min-height:0; background:linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 70%); }
.legal-hero h1{ font-size:clamp(32px,4.6vw,56px); max-width:18ch; }
.legal-hero .legal-date{ font-size:15px; color:rgba(255,255,255,.62); margin-top:8px; }

.legal-wrap{ padding-block:clamp(48px,7vw,88px); }
.legal-grid, .faq-grid{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start;
}

/* Índice lateral (compartido: Términos + FAQs) */
.legal-toc, .faq-toc{ position:sticky; top:100px; }
.legal-toc h2, .faq-toc h2{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:14px;
}
.legal-toc ol, .faq-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.legal-toc a, .faq-toc a{
  display:flex; gap:10px; align-items:baseline; padding:7px 10px; border-radius:9px;
  font-size:14.5px; line-height:1.35; color:var(--muted); transition:background .2s, color .2s;
}
.legal-toc a span, .faq-toc a .n{ color:var(--accent-cta); font-weight:700; font-variant-numeric:tabular-nums; min-width:1.4em; }
.legal-toc a:hover, .faq-toc a:hover{ background:var(--sand); color:var(--ink); }
/* Categoría visible actualmente (scrollspy) */
.faq-toc a.active{ background:var(--sand); color:var(--ink); font-weight:600; }

/* Cuerpo */
.legal-body{ max-width:74ch; }
.legal-sec{ scroll-margin-top:110px; }
.legal-sec + .legal-sec{ margin-top:clamp(30px,3.6vw,46px); }
.legal-sec h2{
  display:flex; gap:12px; align-items:baseline;
  font-size:clamp(21px,2.3vw,27px); margin-bottom:14px;
}
.legal-sec h2 .legal-num{
  color:var(--accent-cta); font-size:.72em; font-weight:800; font-variant-numeric:tabular-nums;
}
.legal-sec p{ color:var(--muted); margin-bottom:12px; font-size:17px; line-height:1.72; }
.legal-sec ul{ margin:0 0 14px; padding-left:0; list-style:none; display:grid; gap:9px; }
.legal-sec ul li{
  position:relative; padding-left:26px; color:var(--muted); font-size:17px; line-height:1.6;
}
.legal-sec ul li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:7px; height:7px; background:var(--accent-cta); clip-path:var(--hex);
}

.legal-sign{
  margin-top:clamp(34px,4vw,52px); padding:24px 26px; border-radius:var(--radius);
  background:var(--sand); border:1px solid var(--line);
}
.legal-sign p{ margin:0; font-size:15.5px; line-height:1.75; color:var(--ink); font-weight:500; }

@media (max-width:900px){
  .legal-grid, .faq-grid{ grid-template-columns:1fr; gap:28px; }
  .legal-toc, .faq-toc{ position:static; }
  .legal-toc ol, .faq-toc ol{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
  .legal-body{ max-width:none; }
}

/* ---- FAQs: índice lateral + buscador ---- */
.faq-toc a .n{ min-width:1.6em; }
.faq-toc a .lbl{ flex:1; }
.faq-toc a .c{
  font-size:12px; font-weight:700; color:var(--muted); background:var(--sand);
  border-radius:20px; padding:1px 8px; align-self:center;
}
.faq-toc a.active .c{ background:var(--paper); }

.faq-body{ max-width:78ch; }

/* Buscador */
.faq-search{ position:relative; margin-bottom:clamp(24px,3vw,34px); }
.faq-search input{
  width:100%; font-family:var(--body); font-size:16.5px; color:var(--ink);
  padding:15px 44px 15px 46px; border-radius:14px;
  border:1px solid var(--line); background:var(--paper);
  transition:border-color .2s, box-shadow .2s;
}
.faq-search input::placeholder{ color:var(--muted); }
.faq-search input:focus{
  outline:none; border-color:var(--turq);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--turq) 18%, transparent);
}
.faq-search .ic-search{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
.faq-search .clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer; color:var(--muted);
  font-size:20px; line-height:1; padding:6px 8px; border-radius:8px; display:none;
}
.faq-search .clear:hover{ color:var(--ink); background:var(--sand); }
.faq-search.has-value .clear{ display:block; }

.faq-count{ font-size:14.5px; color:var(--muted); margin:-16px 0 26px; }
.faq-empty{
  display:none; padding:30px 26px; border-radius:var(--radius);
  background:var(--sand); border:1px solid var(--line); text-align:center;
}
.faq-empty p{ color:var(--muted); }
.faq-empty b{ color:var(--ink); }
.faq-wrap.no-results .faq-empty{ display:block; }

/* Ocultar lo filtrado */
.faq-item[hidden], .faq-cat[hidden]{ display:none; }
.faq-cat{ scroll-margin-top:110px; }

/* El texto va en su propio elemento para que el resaltado no rompa el flex */
.faq-q .t{ flex:1; min-width:0; }
.faq-q mark{ background:color-mix(in srgb, var(--turq) 26%, transparent); color:inherit; border-radius:3px; padding:0 1px; }

/* ---- Página de contacto ---- */
.contacto-grid{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:start;
}

/* Formulario */
.form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,3.4vw,40px);
}
.form-card h2{ font-size:clamp(23px,2.6vw,31px); }
.form-lede{ color:var(--muted); font-size:16px; margin-top:10px; margin-bottom:26px; }
.req{ color:var(--accent-cta); }

.campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.campo{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.campo.ancho{ grid-column:1 / -1; }
.campo label{ font-size:14px; font-weight:600; color:var(--ink); }
.campo input, .campo select, .campo textarea{
  font-family:var(--body); font-size:16px; color:var(--ink);
  padding:12px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--cream); width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.campo textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.campo select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6A69' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.campo input::placeholder, .campo textarea::placeholder{ color:color-mix(in srgb, var(--muted) 65%, transparent); }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; background:var(--paper); border-color:var(--turq);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--turq) 18%, transparent);
}
.campo.malo input, .campo.malo select, .campo.malo textarea{
  border-color:var(--accent-cta); background:color-mix(in srgb, var(--accent-cta) 5%, var(--paper));
}
.campo .error{ font-size:13px; color:var(--accent-cta); font-weight:600; display:none; }
.campo.malo .error{ display:block; }

/* Campo trampa: fuera de la vista pero sin display:none (los bots lo rellenan igual) */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-pie{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:26px; }
.form-nota{ font-size:13.5px; color:var(--muted); flex:1; min-width:230px; line-height:1.5; }
.form-nota a{ color:var(--turq-ink-text); text-decoration:underline; text-underline-offset:2px; }
#formEnviar[disabled]{ opacity:.6; pointer-events:none; }

.form-aviso{
  display:none; margin-top:20px; padding:15px 18px; border-radius:12px;
  font-size:15px; line-height:1.55; border:1px solid transparent;
}
.form-aviso.ok{ display:block; background:color-mix(in srgb, var(--turq) 12%, var(--paper)); border-color:color-mix(in srgb, var(--turq) 40%, transparent); color:var(--turq-ink-text); }
.form-aviso.mal{ display:block; background:color-mix(in srgb, var(--accent-cta) 8%, var(--paper)); border-color:color-mix(in srgb, var(--accent-cta) 35%, transparent); color:var(--accent-cta); }
.form-aviso a{ color:inherit; font-weight:700; text-decoration:underline; }

/* Columna de datos */
.contacto-info{ display:grid; gap:12px; }
.cbox{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:17px 19px;
  transition:border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
a.cbox:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--turq) 45%, var(--line)); box-shadow:0 16px 34px -22px rgba(10,44,53,.4); }
.cbox .hx{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  background:var(--turq-soft); color:var(--turq-ink-text); clip-path:var(--hex);
}
.cbox .cb{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cbox .k{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.cbox .v{ font-size:16.5px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.cbox .s{ font-size:13.5px; color:var(--muted); line-height:1.45; }
.cbox.destacado{ background:linear-gradient(140deg, var(--teal), var(--teal-deep)); border-color:transparent; }
.cbox.destacado .k{ color:rgba(255,255,255,.62); }
.cbox.destacado .v{ color:#fff; }
.cbox.destacado .s{ color:rgba(255,255,255,.72); }
.cbox.destacado .hx{ background:#25D366; color:#fff; }

.contacto-acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }

/* Mapa a lo ancho */
.contacto-mapa{
  max-width:var(--maxw); margin:clamp(34px,4.5vw,60px) auto 0; padding-inline:var(--gut);
}
.contacto-mapa iframe{
  width:100%; height:clamp(300px,38vw,440px); border:0;
  border-radius:var(--radius); background:var(--turq-soft);
  box-shadow:0 30px 60px -40px rgba(10,44,53,.45);
}

@media (max-width:980px){
  .contacto-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .campos{ grid-template-columns:1fr; }
  .form-card{ padding:22px 18px; }
}

/* ---- Blog listado ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px); }
.bcard{
  background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bcard:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(10,44,53,.42); }
.bcard .bph{ height:190px; overflow:hidden; background:var(--turq-soft); }
.bcard .bph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bcard:hover .bph img{ transform:scale(1.05); }
.bcard .bbody{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.bcard .tagpill{ align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--turq-ink-text); background:var(--turq-soft); padding:5px 11px; border-radius:100px; margin-bottom:14px; }
.bcard h3{ font-size:19px; line-height:1.2; margin-bottom:10px; }
.bcard p{ font-size:14.5px; color:var(--muted); }
.bcard .go{ margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--turq-ink-text); align-self:flex-start; }
.bcard:hover .go .arr{ transform:translateX(4px); }

/* ---- Artículo ---- */
.article-banner{ position:relative; margin-top:74px; height:clamp(280px,40vw,480px); overflow:hidden; background:var(--teal); }
.article-banner img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
/* Encuadre por imagen: centrar en la mascota / sujeto */
.article-banner img[src*="Asistencia"]{ object-position:center 42%; }   /* cachorro + vet */
.article-banner img[src*="serv-consulta"]{ object-position:center 72%; } /* gato (abajo) */
.article-banner img[src*="serv-urgencias"]{ object-position:center 62%; }/* perro (medio) */
.article-banner img[src*="serv-cirugias"]{ object-position:center 52%; } /* cirugía */
.article-banner img[src*="cambiar-foto-2"]{ object-position:center 60%; }/* cocker (primer plano) */
.article-banner img[src*="cambiar-foto-1"]{ object-position:center 38%; }/* equipo (rostros) */
.article-wrap{ padding-top:clamp(30px,4vw,50px); }
.article{ max-width:820px; margin:0 auto; padding-inline:clamp(20px,5vw,24px); }
.article > .crumbs{ font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.article > .crumbs a{ color:var(--turq-ink-text); }
.article > .crumbs a:hover{ text-decoration:underline; }
.article > h1{ font-size:clamp(27px,3.6vw,42px); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink); scroll-margin-top:110px; }
.article + .article{ margin-top:clamp(50px,7vw,90px); padding-top:clamp(50px,7vw,90px); border-top:1px solid var(--line); }
.article .tagpill{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--turq-ink-text); background:var(--turq-soft); padding:5px 12px; border-radius:100px; margin-bottom:18px; }
.article h2{ font-size:clamp(28px,3.8vw,44px); line-height:1.1; margin-bottom:20px; scroll-margin-top:110px; }
.article h3{ font-size:clamp(20px,2.4vw,27px); margin:34px 0 12px; color:var(--teal); }
.article p{ color:var(--ink); margin-bottom:16px; font-size:17.5px; line-height:1.7; max-width:68ch; text-align:left; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
.article .lead{ text-align:left; }
/* Justificar solo en pantallas cómodas (evita "ríos" en móvil angosto); el lead siempre a la izquierda */
@media (min-width:640px){ .article p, .faq-a-inner p{ text-align:justify; } }
.article ul{ margin:0 0 18px; padding-left:22px; color:var(--ink); max-width:68ch; }
.article ul li{ margin-bottom:8px; }
.article .lead{ font-size:clamp(16px,1.6vw,18.5px); color:var(--muted); font-weight:500; margin-bottom:22px; }
.wa-cta{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; background:var(--sand);
  border-radius:18px; padding:24px 26px; margin:30px 0 6px;
}
.wa-cta p{ margin:0; font-weight:600; font-size:16px; flex:1; min-width:220px; }
.article .backlink{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:700; color:var(--turq-ink-text); font-size:14px; }

/* ---- FAQ acordeón ---- */
.faq-wrap{ max-width:860px; margin:0 auto; padding-inline:clamp(20px,5vw,24px); }
.faq-cat{ margin-bottom:clamp(34px,5vw,54px); }
/* Categoría = etiqueta de sección (color + barra de acento + línea), no compite con las preguntas */
.faq-cat > h2{
  font-family:var(--display); font-weight:700; font-size:clamp(17px,1.9vw,21px);
  color:var(--turq-ink-text); letter-spacing:.01em; margin-bottom:16px;
  padding-bottom:12px; border-bottom:2px solid var(--turq-soft);
  display:flex; align-items:center; gap:12px;
}
.faq-cat > h2::before{ content:""; width:22px; height:4px; border-radius:4px; background:var(--accent-cta); flex:none; }
.faq-item{ border:1px solid var(--line); border-radius:14px; background:var(--paper); margin-bottom:10px; overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.faq-item.open{ border-color:color-mix(in srgb, var(--turq) 45%, var(--line)); box-shadow:0 14px 34px -20px rgba(10,44,53,.3); }
/* Pregunta = fuente de cuerpo (se lee como pregunta), la activa se resalta */
.faq-q{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:clamp(15px,1.4vw,16.5px); color:var(--ink);
  padding:17px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  transition:color .2s;
}
.faq-q:hover{ color:var(--turq-ink-text); }
.faq-item.open .faq-q{ color:var(--turq-ink-text); font-weight:700; }
.faq-q .ico{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--turq-soft); color:var(--turq-ink-text); display:grid; place-items:center; font-size:18px; transition:transform .35s var(--ease), background .3s, color .3s; }
.faq-item.open .faq-q .ico{ transform:rotate(45deg); background:var(--turq); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
/* Respuesta = separada por una línea y en tono suave */
.faq-a-inner{ padding:15px 20px 20px; color:var(--muted); font-size:15.5px; line-height:1.6; border-top:1px solid var(--line); }
.faq-a-inner p{ margin-bottom:12px; -webkit-hyphens:auto; hyphens:auto; }
.faq-a-inner p:last-child{ margin-bottom:0; }
.faq-a-inner ul{ margin:0 0 12px; padding-left:20px; }
.faq-a-inner li{ margin-bottom:6px; }
.faq-a-inner strong{ color:var(--ink); font-weight:700; }

@media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Accesibilidad y pulido (auditoría 2026)
   ============================================================ */
/* Foco de teclado visible y consistente con la marca */
:focus-visible{ outline:3px solid var(--turq); outline-offset:3px; border-radius:6px; }
.btn:focus-visible{ outline-offset:4px; }
.faq-q:focus-visible{ outline-offset:-3px; }
.site-header.on-light:not(.solid) :focus-visible,
.why :focus-visible, .contact :focus-visible, .footer :focus-visible,
.page-hero :focus-visible, .m-menu a:focus-visible{ outline-color:var(--turq-bright); }

/* Títulos pequeños: neutralizar el tracking negativo global */
.doc figcaption b, .faq-q{ letter-spacing:0; }

/* Degradado inferior sutil del banner de artículo (asienta la transición al texto) */
.article-banner::after{ content:""; position:absolute; inset:auto 0 0 0; height:32%;
  background:linear-gradient(180deg, transparent, rgba(10,44,53,.28)); pointer-events:none; }

/* Respeto por usuarios que reducen movimiento */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .whatsapp-float, .whatsapp-tooltip{ animation:none !important; }
  *, *::before, *::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ============================================================
   EXPERIENCIA MÓVIL (auditoría 2026 · ~90% del tráfico)
   ============================================================ */
/* Barra CTA fija inferior — solo móvil (Reservar + WhatsApp) */
.mobile-cta{ display:none; }
@media (max-width:980px){
  .mobile-cta{
    display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
    position:fixed; left:0; right:0; bottom:0; z-index:130;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:color-mix(in srgb, var(--cream) 92%, transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
    box-shadow:0 -1px 0 var(--line), 0 -12px 30px -22px rgba(10,44,53,.5);
  }
  .mobile-cta .btn{ width:100%; justify-content:center; padding-block:15px; }
  .mobile-cta .mc-wa{ width:52px; height:52px; border-radius:14px; background:#25D366; color:#fff;
    display:grid; place-items:center; font-size:26px; box-shadow:0 8px 20px -8px rgba(37,211,102,.6); }
  .mobile-cta .mc-wa:active{ transform:scale(.96); }
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); } /* que la barra no tape el footer */
  .whatsapp-container{ display:none; }        /* WhatsApp ya vive en la barra */
  .m-menu.open ~ .mobile-cta{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* Footer: colapsar columnas en móvil/tablet */
@media (max-width:760px){
  .footer .top{ grid-template-columns:1fr 1fr; gap:30px 24px; }
}
@media (max-width:460px){
  .footer .top{ grid-template-columns:1fr; gap:28px; }
}
/* Tap targets del footer y enlaces de contacto ≥ cómodos */
@media (max-width:600px){
  .footer ul{ gap:2px; }
  .footer ul a{ display:inline-block; padding:9px 0; }
  .footer .bottom{ gap:10px 18px; }
  .footer .bottom a{ display:inline-block; padding:6px 0; }
  .contact .row2 .v a{ display:inline-block; padding-block:4px; }
}

/* Densidad vertical y banners en móvil */
@media (max-width:600px){
  .section{ padding-block:clamp(48px,12vw,68px); }
  .contact .map{ min-height:300px; }
  .eyebrow{ letter-spacing:.14em; font-size:12px; }
  .insta-head h2{ overflow-wrap:anywhere; }
}
/* Métricas: teléfonos angostos */
@media (max-width:400px){
  .valstrip .cell{ padding:24px 16px; }
  .valstrip .cell .k{ font-size:28px; }
}
/* Pulido final móvil + rendimiento (auditoría 2026 · 2ª ronda) */
@media (max-width:600px){
  .page-banner{ height:clamp(190px,52vw,240px); }
  .page-banner .pb-txt h2{ font-size:clamp(24px,7vw,32px); }
  .footer .social a{ width:44px; height:44px; }
  .article .backlink{ padding:11px 0; }
  .contact .row2 .v{ overflow-wrap:anywhere; }
  /* backdrop-filter es costoso en elementos fijos durante el scroll en móvil → fondo sólido */
  .site-header.solid{ -webkit-backdrop-filter:none; backdrop-filter:none; background:color-mix(in srgb, var(--cream) 96%, transparent); }
  .mobile-cta{ -webkit-backdrop-filter:none; backdrop-filter:none; background:color-mix(in srgb, var(--cream) 97%, transparent); }
}

/* ============================================================
   Modal "reservas online en camino" + barra de progreso de scroll
   ============================================================ */
.rz-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:22px;
  background:rgba(10,44,53,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s linear .3s; }
.rz-modal.open{ opacity:1; visibility:visible; transition:opacity .3s var(--ease); }
.rz-card{ position:relative; background:var(--paper); border-radius:22px; max-width:440px; width:100%;
  padding:36px 30px 30px; text-align:center; box-shadow:0 40px 90px -30px rgba(10,44,53,.55);
  transform:translateY(18px) scale(.97); transition:transform .38s var(--ease); }
.rz-modal.open .rz-card{ transform:none; }
.rz-card .rz-ico{ width:66px; height:66px; border-radius:50%; background:var(--turq-soft); color:var(--turq-ink-text);
  display:grid; place-items:center; margin:0 auto 18px; }
.rz-card .rz-ico svg{ width:32px; height:32px; }
.rz-card h3{ font-size:23px; margin-bottom:12px; }
.rz-card p{ color:var(--muted); font-size:16px; line-height:1.55; margin-bottom:24px; }
.rz-card .rz-actions{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.rz-card .rz-actions .btn{ justify-content:center; }
.rz-card .btn.wa2{ background:#25D366; box-shadow:0 10px 24px -10px rgba(37,211,102,.6); }
.rz-card .btn.wa2 svg{ width:1.2em; height:1.2em; }
.rz-card .rz-ig{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; color:var(--turq-ink-text); font-size:14px; padding:10px; }
.rz-card .rz-ig svg{ width:18px; height:18px; }
.rz-card .rz-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:0;
  background:var(--sand); color:var(--ink); font-size:18px; cursor:pointer; line-height:1; transition:.2s; }
.rz-card .rz-close:hover{ background:var(--line); }

/* Barra de progreso de lectura */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:210;
  background:linear-gradient(90deg, var(--turq), var(--accent-cta)); transition:width .1s linear; }