/* =====================================================================
   BASE — estilos generales que usan todas las secciones
   ---------------------------------------------------------------------
   1. Reset básico
   2. Tipografía general
   3. Contenedor (.contenedor)
   4. Piezas reutilizables: .etiqueta, .titulo, .linea, botones
   5. Botones redondeados (.pildora)
   6. Aparición al hacer scroll (.aparecer)
   ===================================================================== */


/* ---------- 1. Reset básico ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

/* Al saltar a una sección (#id), deja espacio para el header fijo */
section[id] { scroll-margin-top: var(--alto-header, 90px); }   /* el alto del header cambia en escritorio, tablet y celular */


/* ---------- 2. Tipografía general ---------- */
.titulo {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(40px, 6vw, 88px);
}
.titulo--mediano { font-size: clamp(36px, 4.6vw, 64px); }

.texto-suave { color: var(--texto-suave); }
.punto-cobre { color: var(--cobre); }  /* el punto final de color cobre en los títulos */


/* ---------- 3. Contenedor ---------- */
/* Centra el contenido y le da márgenes laterales */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-max) + var(--margen) * 2);
  margin: 0 auto;
  padding-left: var(--margen);
  padding-right: var(--margen);
}

/* Espacio vertical estándar de una sección */
.seccion { padding-top: var(--espacio-seccion); padding-bottom: var(--espacio-seccion); }
.seccion--negra  { background: var(--negro); }
.seccion--carbon { background: var(--carbon); }


/* ---------- 4. Piezas reutilizables ---------- */

/* Título chico en mayúsculas color cobre (ej: "NOSOTROS") */
.etiqueta {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cobre-instagram);   /* PRUEBA: antes era var(--cobre) */
}

/* Línea cobre corta debajo de los títulos */
.linea { width: 90px; height: 2px; background: var(--cobre-instagram); border: 0; margin: 0; }   /* PRUEBA: antes era var(--cobre) */

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 32px;
  font-family: var(--fuente);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion);
}
.boton:hover { transform: translateY(-2px); }

/* Botón relleno cobre */
.boton--cobre { background: var(--cobre); color: var(--negro); }
.boton--cobre:hover { box-shadow: 0 12px 28px rgba(185, 128, 104, .35); }

/* Botón con borde (fondo transparente) */
.boton--borde { background: transparent; border-color: var(--texto); color: var(--texto); font-weight: 400; }
.boton--borde:hover { background: var(--texto); color: var(--negro); }

/* Botón negro (se usa sobre fondos cobre) */
.boton--negro { background: var(--negro); color: var(--texto); }

/* Foto con zoom suave al pasar el mouse */
.zoom { overflow: hidden; }
.zoom img { transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s; }
.zoom:hover img { transform: scale(1.07); filter: brightness(1.1); }

/* Precio con brillo cobre animado */
.precio-brillo {
  background: linear-gradient(100deg, var(--cobre) 0%, var(--cobre) 40%, var(--cobre-claro) 50%, var(--cobre) 60%, var(--cobre) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brillo 4.5s ease-in-out infinite;
}


/* ---------- 5. Botones redondeados (tipo píldora, forma de la versión 3) ---------- */
.pildora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--fuente);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion);
}
.pildora:hover { transform: translateY(-2px); }
.pildora--cobre { background: var(--cobre); color: var(--negro); }
.pildora--cobre:hover { box-shadow: 0 12px 28px rgba(185, 128, 104, .35); }
.pildora--borde { background: transparent; border-color: var(--texto); color: var(--texto); }
.pildora--borde:hover { background: var(--texto); color: var(--negro); }


/* ---------- 6. Aparición al hacer scroll ---------- */
/* Todo elemento con class="aparecer" entra suavemente cuando se ve en pantalla.
   La clase .visible la agrega js/aparecer.js */
.aparecer { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.aparecer.visible { opacity: 1; transform: none; }

/* Si la persona prefiere menos movimiento, se desactivan las animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aparecer { opacity: 1; transform: none; }
}