/* ============================================================
   eticool — estilos base
   Fuente: Poppins · cuerpo mínimo 16px / interlineado 1.6
   ============================================================ */

:root{
  --morado:#5C2EBC;
  --morado-oscuro:#432290;
  --morado-suave:#EFE9FB;
  --mostaza:#D9A441;
  --mostaza-suave:#FBF0DC;
  --fondo:#FAF7F2;
  --tarjeta:#FFFFFF;
  --texto:#2B2430;
  --texto-sec:#5F5956;
  --borde:#E8E1D6;
  --verde:#5B8A6B;
  --terracota:#C97B5D;
  --terracota-suave:#F7E9E2;
}

*{ box-sizing:border-box; }

/* Salvaguarda global: ninguna imagen sin tamaño explícito puede desbordar
   su contenedor y forzar scroll horizontal, ni siquiera en un móvil muy
   estrecho (320px). Las imágenes que ya tienen su propio tamaño fijado no
   se ven afectadas. */
img{ max-width:100%; height:auto; }

body{
  margin:0;
  font-family:'Poppins', sans-serif;
  background:var(--fondo);
  color:var(--texto);
  font-size:17px;
  line-height:1.6;
  /* Espacio reservado para la barra inferior fija en móvil, para que el
     contenido final de CUALQUIER página (no solo las que ya lo tenían en
     cuenta a mano) nunca quede tapado debajo — en desktop, listings.css
     lo resetea a 0 porque ahí no hay barra inferior */
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.01em; }
h1{ font-size:28px; }
h2{ font-size:23px; }
h3{ font-size:19px; }
h4{ font-size:17px; }

@media(min-width:900px){
  h1{ font-size:40px; }
  h2{ font-size:32px; }
  h3{ font-size:24px; }
  h4{ font-size:20px; }
}

a{ color:inherit; text-decoration:none; }

/* Contenedor de página con margen seguro real — en pantallas estrechas
   (iPhone 11 Pro y similares) 16px a secas se nota justo; con esto nunca
   baja de 20px, y en dispositivos con zona segura lateral (notch en
   horizontal) respeta esa zona también */
.page-wrap{
  margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left) + 16px);
  padding-right:max(20px, env(safe-area-inset-right) + 16px);
}
button{ font-family:'Poppins', sans-serif; cursor:pointer; }

/* El nombre de marca SIEMPRE en minúsculas */
.brand-name{ text-transform:lowercase; }