/* ═══════════════════════════════════════════
   ANIMAL CARE
   Sección de la línea veterinaria. Usa los mismos tokens que el resto
   (tokens.css) — no define ni un color propio.
   No lleva imagen de fondo a propósito: no existe una foto veterinaria
   en assets/images/ y una imagen de biotecnología humana leería mal acá.
   El patrón sin foto ya existe en #catalogo.
═══════════════════════════════════════════ */
#animal-care{background:var(--s1);position:relative;overflow:hidden;}
.ac-glow{
  position:absolute;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle,var(--cyan) 0%,transparent 62%);
  opacity:.07;top:-420px;right:-320px;pointer-events:none;
}
.ac-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;}

.ac-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:44px;}

/* ── tarjetas de péptido ────────────────────────────────────────────
   Seis columnas: las tres primeras ocupan dos cada una, las dos últimas
   tres cada una. Cinco tarjetas en una grilla de tres dejaban un hueco
   suelto en la segunda fila. */
.ac-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:rgba(0,240,255,.06);}
.ac-card{background:var(--s0);padding:28px 24px;position:relative;overflow:hidden;
  transition:background var(--tr);grid-column:span 2;display:flex;flex-direction:column;}
.ac-card:nth-child(4),.ac-card:nth-child(5){grid-column:span 3;}
.ac-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:transparent;transition:background var(--tr);}
.ac-card:hover{background:rgba(14,37,72,.8);}
.ac-card:hover::before{background:var(--cyan);}

.ac-fn{font-family:var(--f-d);font-weight:400;font-size:17px;color:var(--w-pri);
  letter-spacing:-.01em;line-height:1.25;margin-bottom:5px;}
/* Sin text-transform:uppercase. Corrompe dos de los cinco nombres:
   «Timosina α1» pasa a alfa griega MAYUSCULA, que se lee como A latina, y
   «GHK-Cu» pasa a «GHK-CU» — el cobre es Cu, no CU. El nombre de una molecula
   no es texto decorativo. */
.ac-mol{font-family:var(--f-m);font-size:10px;letter-spacing:.16em;color:var(--cyan);
  margin-bottom:14px;}
.ac-desc{font-size:13px;color:var(--w-ter);line-height:1.55;margin-bottom:16px;flex:1;}
.ac-sp{display:flex;gap:6px;flex-wrap:wrap;}
.ac-sp span{padding:3px 9px;border:1px solid rgba(0,240,255,.18);font-family:var(--f-m);
  font-size:8.5px;letter-spacing:.12em;color:rgba(0,240,255,.6);text-transform:uppercase;}

/* ── franja inferior: diferenciales + formulario ────────────────── */
.ac-bottom{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-top:64px;
  align-items:start;}
.ac-note{margin-top:22px;padding:16px 20px;border-left:2px solid rgba(0,240,255,.35);
  background:rgba(0,240,255,.03);}
.ac-note p{font-size:12.5px;color:var(--w-ter);line-height:1.6;}
.ac-note b{color:var(--w-sec);font-weight:500;}

@media (max-width:900px){
  .ac-grid{grid-template-columns:1fr;}
  .ac-card,.ac-card:nth-child(4),.ac-card:nth-child(5){grid-column:span 1;}
  .ac-bottom{grid-template-columns:1fr;gap:44px;}
}

/* Iconos de la franja de diferenciales. Reemplazan a los emoji: el resto de
   la landing es geometrica y monoespaciada, y el emoji rompia ese sistema.
   Mismo trazo de 1.2px que la flecha de `.cta-link`. */
.ac-icon{flex-shrink:0;margin-top:1px;color:rgba(0,240,255,.55);
  display:inline-flex;transition:color var(--tr);}
.ac-icon svg{width:19px;height:19px;display:block;}
.feat-row:hover .ac-icon{color:var(--cyan);}

/* ── tarjetas clickeables ───────────────────────────────────────────
   Eran <article> con brillo al pasar el cursor y sin accion: una promesa
   falsa. Ahora son <button>, con foco visible para teclado. */
button.ac-card{width:100%;text-align:left;font:inherit;color:inherit;border:0;
  border-left:2.5px solid var(--cyan);cursor:pointer;}
button.ac-card:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.ac-card::after{content:'→';position:absolute;bottom:20px;right:22px;font-size:15px;
  color:rgba(0,240,255,.25);transition:color var(--tr),transform var(--tr);}
.ac-card:hover::after{color:var(--cyan);transform:translateX(4px);}
.ac-desc{padding-right:26px;}

/* ── detalle ────────────────────────────────────────────────────────── */
.ac-modal{width:min(680px,calc(100vw - 32px));max-height:min(86vh,860px);padding:0;
  border:1px solid rgba(0,240,255,.22);border-radius:var(--r);background:var(--s1);
  color:var(--w-sec);overflow:auto;}
.ac-modal::backdrop{background:rgba(0,8,26,.82);}
.ac-modal-body{padding:38px 40px 32px;}
.ac-modal-x{position:sticky;top:0;float:right;margin:14px 14px 0 0;z-index:3;
  width:34px;height:34px;display:grid;place-items:center;font-size:22px;line-height:1;
  background:rgba(0,240,255,.06);border:1px solid rgba(0,240,255,.18);border-radius:var(--r);
  color:var(--cyan);cursor:pointer;transition:background var(--tr);}
.ac-modal-x:hover{background:rgba(0,240,255,.16);}
.ac-modal-x:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

.ac-d-mol{font-family:var(--f-m);font-size:10px;letter-spacing:.16em;color:var(--cyan);
  margin-bottom:8px;}
.ac-d-fn{font-family:var(--f-d);font-weight:300;font-size:26px;color:var(--w-pri);
  letter-spacing:-.015em;line-height:1.18;margin-bottom:26px;}
.ac-d-block{margin-bottom:22px;}
.ac-d-lbl{font-family:var(--f-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--w-ter);margin-bottom:8px;}
.ac-d-block p{font-size:14px;line-height:1.62;color:var(--w-sec);}

/* La evidencia va destacada: es el dato que separa esta linea del resto del
   nicho, incluso cuando lo que dice es que no hay evidencia. */
.ac-d-ev{border-left:2px solid rgba(0,240,255,.35);background:rgba(0,240,255,.03);
  padding:14px 18px;}
.ac-d-ev .ac-d-lbl{color:var(--cyan);}

.ac-d-refs{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;}
.ac-d-refs li{font-size:12px;line-height:1.5;color:var(--w-ter);}
.ac-d-refs li::marker{color:rgba(0,240,255,.5);font-family:var(--f-m);font-size:10px;}
.ac-d-refs i{font-style:italic;color:var(--w-sec);}

.ac-d-gate{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);}
.ac-d-gate p{font-size:12.5px;line-height:1.6;color:var(--w-ter);margin-bottom:16px;}
.ac-d-cta{width:auto;padding-left:26px;padding-right:26px;}

@media (max-width:640px){
  .ac-modal-body{padding:28px 22px 26px;}
  .ac-d-fn{font-size:22px;}
}

/* ── imagen de la sección ───────────────────────────────────────────
   Encabezado a dos columnas con la foto a 16/11 — mismo patrón que #nosotros.
   Se probó también una variante de foto a sangre bajo degradado (como #medicos)
   y se descartó: a la opacidad que exige la legibilidad del texto, la imagen
   queda casi invisible detrás de las tarjetas. */
.ac-header{align-items:center;}
.ac-foto{display:none;border-radius:var(--r);overflow:hidden;position:relative;
  aspect-ratio:16/11;}
.ac-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.ac-foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,8,26,.45) 0%,transparent 55%);}
/* 1,2fr para el texto: a 1fr el titulo entra a 42px como maximo y «molecular,»
   quedaba huerfano en una linea propia. A 46px el fragmento cian entra completo.
   El sitio ya reduce .section-h2 a 34px en movil, asi que variar el cuerpo en un
   encabezado a dos columnas no rompe la escala: la sigue. */
#animal-care.con-foto .ac-header{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;}
#animal-care.con-foto .section-h2{font-size:46px;}
#animal-care.con-foto .ac-foto{display:block;}

@media (max-width:900px){
  #animal-care.con-foto .ac-header{grid-template-columns:1fr;gap:28px;}
}