/* ==========================================================================
   EncuentraVet Chile — hoja de marca del sitio público
   Refleja packages/ui/src/styles/theme.css. Ningún color fuera de aquí.
   ========================================================================== */

:root{
  /* colores del manual, sin alterar */
  --lima:#A8D63A; --rosado:#FF4D8D; --negro:#222222; --blanco:#FFFFFF;
  --azul-verificado:#1E9BE0;   /* USO EXCLUSIVO: insignia */

  /* derivaciones del verde */
  --lima-50:#F6FBEA; --lima-100:#ECF7D4; --lima-200:#D9EFA9; --lima-300:#C5E77D;
  --lima-400:#B6DF58; --lima-600:#93BD2F; --lima-700:#7BA024; --lima-800:#648022;
  --lima-900:#4D6119;

  /* derivaciones del rosado */
  --rosado-50:#FFF0F6; --rosado-100:#FFE0EC; --rosado-200:#FFC2D9;
  --rosado-400:#FF75A6; --rosado-600:#E6407C; --rosado-700:#CC3D70;

  /* azul: solo insignia */
  --azul-50:#E8F4FC; --azul-700:#187CB3;

  /* neutros */
  --ink-50:#FAFAFA; --ink-100:#F2F2F2; --ink-200:#E6E6E6; --ink-300:#D4D4D4;
  --ink-400:#A3A3A3; --ink-500:#6B6B6B; --ink-600:#525252; --ink-700:#3D3D3D;

  /* RADIOS POR TIPO DE COMPONENTE.
     No todo lleva el mismo borde a propósito: el ojo distingue un botón de
     una tarjeta antes de leer nada, y eso solo pasa si sus formas difieren. */
  --r-boton:18px;
  --r-campo:20px;
  --r-tarjeta:24px;
  --r-panel:28px;

  /* SOMBRAS CON PAPEL, NO CON GUSTO.
     Nivel 1 — lo que solo necesita despegarse del fondo.
     Nivel 2 — lo que quiere que lo mires: tarjetas destacadas, paneles.
     Nivel 3 — la acción principal de la pantalla. Nunca dos en la misma vista. */
  --sombra-1:0 1px 2px rgba(34,34,34,.04), 0 2px 8px rgba(34,34,34,.05);
  --sombra-2:0 2px 4px rgba(34,34,34,.04), 0 10px 28px rgba(34,34,34,.09);
  --sombra-3:0 4px 10px rgba(255,77,141,.18), 0 14px 34px rgba(255,77,141,.24);
  --sombra-foco:0 0 0 4px rgba(255,77,141,.22);

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --pill:999px;
  --sh-suave:0 2px 8px rgba(34,34,34,.05);
  --sh-media:0 8px 24px rgba(34,34,34,.08);
  --sh-alta:0 18px 44px rgba(34,34,34,.12);

  --f-titulo:"Nunito",ui-sans-serif,system-ui,sans-serif;
  --f-texto:"Poppins",ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-texto);color:var(--negro);background:var(--blanco);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rosado);outline-offset:2px;border-radius:var(--r-sm)}

h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(2rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:1.15rem;font-weight:700}
p{color:var(--ink-600)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.centro{text-align:center}
.mut{color:var(--ink-500)}
.sm{font-size:.875rem}

/* --- logo ---------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{display:block;height:auto}
.logo--header img{width:190px}
.logo--footer img{width:200px}
@media (max-width:640px){ .logo--header img{width:145px} }

/* --- botones ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--r-boton);padding:14px 26px;font-family:var(--f-texto);
  font-size:1rem;font-weight:600;cursor:pointer;min-height:48px;
  transition:transform .14s cubic-bezier(.2,.8,.3,1), background .14s ease,
             box-shadow .14s ease, border-color .14s ease}
.btn:hover{transform:translateY(-2px)}
/* Al pulsar, el botón cede. Es lo que dice a un dedo que el toque se registró,
   sin esperar a que responda el servidor. */
.btn:active{transform:translateY(0) scale(.98);transition-duration:.06s}
.btn:focus-visible{outline:none;box-shadow:var(--sombra-foco)}

/* Principal: rosado exacto del manual con texto negro (4,83:1).
   Blanco sobre ese rosado daría 3,14:1 y no cumpliría. */
.btn-principal{color:var(--negro);box-shadow:var(--sombra-3);
  background:linear-gradient(135deg, var(--rosado) 0%, #FF6BA0 100%)}
.btn-principal:hover{background:linear-gradient(135deg, #FF5F98 0%, #FF7FAE 100%);
  box-shadow:0 6px 14px rgba(255,77,141,.24), 0 18px 42px rgba(255,77,141,.3)}
.btn-secundario{background:var(--lima);color:var(--negro);box-shadow:var(--sombra-1)}
.btn-secundario:hover{background:var(--lima-400)}
/* Acción secundaria: se ve, no compite. Sin sombra pesada. */
.btn-linea{background:var(--blanco);border:1.5px solid var(--ink-300);color:var(--negro)}
.btn-linea:hover{border-color:var(--ink-500);box-shadow:var(--sombra-1)}
.btn-texto{background:transparent;color:var(--negro);padding:12px 8px}
.btn-texto:hover{color:var(--rosado-700)}
.btn-lg{padding:17px 34px;font-size:1.05rem;min-height:56px}
.btn-sm{padding:10px 18px;font-size:.9rem;min-height:44px}
.btn-bloque{width:100%}
.btn-blanco{background:var(--blanco);color:var(--negro)}

/* Los campos llevan su propio radio, más suave que el de los botones: uno se
   pulsa y el otro se rellena, y la forma lo anticipa. */
.campo{border-radius:var(--r-campo)}
.campo:focus{outline:none;border-color:var(--rosado);box-shadow:var(--sombra-foco)}

/* Respeta a quien pidió menos animación en su sistema. No es un detalle:
   para algunas personas el movimiento produce mareo de verdad. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* --- secciones a ancho completo, alternando blanco y verde --------------- */
.seccion{padding:72px 0}
.seccion--suave{background:var(--lima-50)}
.seccion--marca{background:var(--lima);color:var(--negro)}
.seccion--marca p{color:var(--lima-900)}
.seccion--oscura{background:var(--negro);color:var(--blanco)}
.seccion--oscura p{color:#C9C9C9}

/* --- insignia de certificación (único uso del azul) ---------------------- */
.insignia{display:inline-flex;align-items:center;gap:6px;background:var(--azul-50);
  color:var(--azul-700);border-radius:var(--pill);padding:5px 12px;
  font-size:.8rem;font-weight:600;white-space:nowrap;border:1px solid #CFE9F8}
.insignia svg{width:15px;height:15px;color:var(--azul-verificado);flex:none}
.insignia--grande{font-size:.95rem;padding:9px 18px}
.insignia--grande svg{width:20px;height:20px}

/* --- tarjetas ------------------------------------------------------------ */
.tarjeta{background:var(--blanco);border:1px solid var(--ink-200);border-radius:var(--r-lg);
  box-shadow:var(--sh-suave);overflow:hidden;transition:box-shadow .15s,transform .15s}
.tarjeta:hover{box-shadow:var(--sh-media);transform:translateY(-2px)}
.tarjeta .cuerpo{padding:20px}

/* --- formularios --------------------------------------------------------- */
.campo{width:100%;background:var(--blanco);border:2px solid var(--ink-200);
  border-radius:var(--r-md);padding:14px 16px;font-size:1rem;min-height:52px}
.campo:hover{border-color:var(--ink-300)}
.campo:focus{border-color:var(--rosado);outline:none}
label{display:block;font-size:.875rem;font-weight:500;margin-bottom:6px;color:var(--ink-700)}

/* --- utilidades ---------------------------------------------------------- */
.destacado{color:var(--rosado)}
.titulo-marca{color:var(--lima-800)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);
  padding:6px 14px;font-size:.82rem;font-weight:500;background:var(--lima-100);color:var(--lima-900)}
.rejilla{display:grid;gap:20px}
.r-2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.r-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.r-6{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}

.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- zona de carga de imágenes ------------------------------------------- */
.drop{border:2px dashed var(--lima-300);background:var(--lima-50);border-radius:var(--r-lg);
  display:grid;place-items:center;text-align:center;padding:28px 20px;color:var(--lima-900);
  cursor:pointer;transition:background .15s,border-color .15s}
.drop:hover{background:var(--lima-100);border-color:var(--lima-600)}
.drop .ic{font-size:26px;line-height:1}
.drop b{display:block;font-weight:700;font-size:.95rem;margin-top:8px;font-family:var(--f-titulo)}
.drop span{font-size:.8rem;color:var(--lima-800)}
.drop.subiendo{border-color:var(--rosado);background:var(--rosado-50)}
.drop.lista{border-style:solid;border-color:var(--lima-600)}