:root {
  /* Paleta de colores */
  --color-terracota: #C05A2B;
  --color-terracota-oscuro: #9E3D18;
  --color-crema: #F5EFE0;
  --color-blanco-roto: #FAFAF7;
  --color-negro: #1A1A1A;
  --color-arena: #D4A96A;
  --color-gris-calido: #888580;
  --color-rojo-vino: #6B1E0E;

  /* Tipografía */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}

/* Globales */
body {
  font-family: var(--font-body);
  background-color: var(--color-crema);
  color: var(--color-negro);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.tracking-wider { letter-spacing: 0.1em; }

h1, h2, h3, .logo-text {
  font-family: var(--font-display);
  line-height: 1;
}

.logo-text {
  text-transform: uppercase;
  font-size: clamp(4rem, 15vw, 10rem);
}

.registered {
  font-size: 0.3em;
  vertical-align: super;
  margin-left: 0.1em;
}

/* 1. Hero Portada */
.hero-portada {
  background-color: var(--color-crema);
  position: relative;
}

/* Patrón de cubiertos (Simulado con SVG inline o imagen repetida) */
.hero-portada::before, .hero-portada::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M20 10 L25 40 L30 10 M50 10 Q60 30 50 60 M80 10 L80 60' stroke='%23C05A2B' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    opacity: 0.2;
}

.hero-portada::before { top: 0; }
.hero-portada::after { bottom: 0; transform: scaleY(-1); }

.main-logo { color: var(--color-negro); }
.tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--color-gris-calido);
  margin-top: -0.5rem;
}

/* 2. Banner Categoría */
.banner-categoria {
  background-color: var(--color-terracota);
}

/* 3. Lifestyle Fullwidth */
.lifestyle-fullwidth img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  display: block;
}

/* 4. Banner de Marca (Rojo Vino) */
.banner-marca {
  background-color: var(--color-rojo-vino);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L20 40 M40 10 L40 60 M70 10 L60 40' stroke='white' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
  position: relative;
}

.caja-marca {
  background-color: var(--color-terracota) !important;
  border: 4px dotted var(--color-crema);
  display: inline-block;
  padding: 3rem !important;
  border-radius: 0;
}

.logo-blanco { color: white; }

.subtexto-hero {
  letter-spacing: 0.2rem;
}

/* 5. Columnas mitades */
.imagen-mitad img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.bg-gris-claro {
    background-color: #f0f0f0;
}

/* 6. Identidad */
.franja-logo {
  background-color: var(--color-terracota);
}

.tile-negro {
  background-color: var(--color-negro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L30 50' stroke='white' stroke-width='1' fill='none' opacity='0.1'/%3E%3C/svg%3E");
}

.tile-terracota {
  background-color: var(--color-terracota);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L30 50' stroke='white' stroke-width='1' fill='none' opacity='0.1'/%3E%3C/svg%3E");
}

.overlay-container {
  position: relative;
}

.overlay-terracota-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(192, 90, 43, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .logo-text { font-size: 4rem; }
  .imagen-mitad img { height: 300px; }
  .caja-marca { padding: 1.5rem !important; }
}