:root {
  /* Paleta de colores */
  --bg          : #09111F;   /* Fondo principal (azul muy oscuro)          */
  --bg-2        : #0F1C35;   /* Fondo de tarjetas y secciones internas     */
  --bg-card     : #111E38;   /* Fondo alternativo para inputs y cards      */
  --orange      : #F5890A;   /* Color de acento principal (naranja)        */
  --pink        : #FF00EA;
  --orange-light: #FFB347;   /* Naranja más claro, para textos de acento   */
  --cream       : #FDF0D5;   /* Crema, usado en fondos suaves              */
  --cream-dim   : #C8B89A;   /* Crema atenuado, para textos secundarios    */
  --white       : #FFFFFF;   /* Blanco puro                                */
  --gray        : #8A96AB;   /* Gris azulado para textos de baja jerarquía */
  --fondo       : #22339C;
  --extra       : #E5E1E1; 
  --black	: #000000;
  --border      : rgba(255,255,255,0.07); /* Borde sutil sobre fondos oscuros */

  /* Tipografía */
  --font-display: 'Playfair Display', serif; /* Fuente para títulos        */
  --font-body   : 'DM Sans', sans-serif;     /* Fuente para cuerpo y UI    */

  /* Espaciado y forma */
  --radius      : 20px;   /* Radio de borde estándar para tarjetas         */
  --padding-x   : 7%;     /* Padding horizontal global de secciones        */

  /* Animación */
  --transition  : 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Curva de transición global */
}



*, *::before, *::after {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
}

html {
  scroll-behavior: smooth; /* Desplazamiento suave al usar anclas #id */
}

body {
  background-color: var(--extra);
  color           : var(--fondo);
  font-family     : var(--font-body);
  overflow-x      : hidden; /* Evita scroll horizontal por elementos desbordantes */
  cursor          : none;   /* Oculta el cursor nativo; se usa uno personalizado  */
}


.cursor {
  width          : 12px;
  height         : 12px;
  background     : var(--orange);
  border-radius  : 50%;
  position       : fixed;
  pointer-events : none;       /* No interfiere con clics del usuario */
  z-index        : 9999;       /* Siempre encima de todo              */
  transform      : translate(-50%, -50%); /* Centra el punto en la posición del mouse */
}

.cursor-ring {
  width          : 36px;
  height         : 36px;
  border         : 1.5px solid rgba(245,137,10,0.5);
  border-radius  : 50%;
  position       : fixed;
  pointer-events : none;
  z-index        : 9998;
  transform      : translate(-50%, -50%);
  /* Transición suave solo para tamaño y color (la posición la maneja JS) */
  transition     : width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}

/* El aro crece cuando el cursor está sobre un enlace o botón */
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring {
  width       : 54px;
  height      : 54px;
  border-color: var(--orange);
}



body::before {
  content        : '';
  position       : fixed;
  inset          : 0; /* Equivale a top:0; right:0; bottom:0; left:0 */
  pointer-events : none;
  z-index        : 0;
  background-image:
    /* Destello naranja en el sector derecho-central */
    radial-gradient(ellipse 80% 60% at 75% 50%, rgba(255,255,255,0.07) 0%, transparent 60%),
    /* Destello suave en la esquina superior derecha */
    radial-gradient(ellipse 40% 40% at 85% 20%, rgba(255,179,71,0.05) 0%, transparent 50%);
}




/* 1. Estilo para escritorio (Computadora) */
.menu-toggle {
  display: none; /* OCULTO POR DEFECTO EN ESCRITORIO */
  font-size: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--orange);
  padding: 5px;
  line-height: 1;
}

/* 2. Estilo para móviles (Aparece solo en pantallas menores a 768px) */
@media (max-width: 768px) {
  .menu-toggle {
    display: block; /* SOLO APARECE AQUÍ */
  }

  #navMenu {
    display: none; /* El menú se oculta detrás del botón */
    flex-direction: column;
    position: absolute;
    top: 100%; /* Aparece justo debajo del header */
    left: 0;
    width: 100%;
    background: rgba(9, 17, 31, 0.95);
    padding: 20px;
    border-bottom: 1px solid var(--border);
  }

  #navMenu.active {
    display: flex; /* Se muestra al hacer clic en el botón */
  }
}

  .navMenu a {
    margin: 10px 0;
  }
}

.menu-toggle {
  color: var(--orange);
}

header {
  display                 : flex;
  align-items             : center;
  justify-content         : space-between;
  padding                 : 10px var(--padding-x);
  position                : fixed;
  top                     : 0;
  left                    : 0;
  right                   : 0;
  z-index                 : 500;
  /* Efecto vidrio: blur sobre el contenido de abajo */
  backdrop-filter         : blur(24px);
  -webkit-backdrop-filter : blur(24px); /* Prefijo para Safari */
  background              : rgba(9,17,31,0.80); /* Fondo semi-transparente */
  border-bottom           : 1px solid var(--border);
  transition              : padding var(--transition);
}

/* Versión compacta del header al hacer scroll */
header.scrolled {
  padding: 14spx var(--padding-x);
}



.logo {
  display        : flex;
  align-items    : center;
  gap            : 13px;
  text-decoration: none;
}

.logo-paleta {
  position: relative;
  top: 0px;
  left: 0px;
}

.logo-mark {
  width      : 40px;
  height     : 40px;
  flex-shrink: 0; /* No se comprime en layouts flex */
}

.logo-mark svg { width: 100%; height: 100%; }

.logo-text { line-height: 1; }

/* Palabra "Dulcería" — pequeña y en mayúsculas */
.logo-text span {
  display       : block;
  font-size     : 15px;
  font-weight   : 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color         : var(--orange);
}

/* Palabra "Charles" — grande y en negrita */
.logo-text strong {
  font-family: var(--font-display);
  font-size  : 35px;
  font-weight: 900;
  color      : var(--white);
}



nav {
  display    : flex;
  align-items: center;
  gap        : 34px;
}

nav a {
  text-decoration: none;
  color          : var(--gray);
  font-size      : 18px;
  font-weight    : 400;
  letter-spacing : 0.02em;
  position       : relative; /* Necesario para el pseudo-elemento ::after */
  transition     : color var(--transition);
}

/* Línea decorativa que aparece debajo al hover */
nav a::after {
  content   : '';
  position  : absolute;
  bottom    : -4px;
  left      : 0;
  width     : 0;      /* Empieza invisible */
  height    : 1px;
  background: var(--orange);
  transition: width var(--transition);
}

/* Al hacer hover, la línea se extiende al 100% del ancho del enlace */
nav a:hover        { color: var(--white); }
nav a:hover::after { width: 100%; }

/* Enlace activo (pestaña actual) */
nav a.active        { color: var(--orange-light); }
nav a.active::after { width: 100%; }



/* --- Botón primario (naranja sólido) --- */
.btn-primary {
  display        : inline-flex;
  align-items    : center;
  gap            : 10px;
  background     : var(--orange);
  color          : var(--bg);
  text-decoration: none;
  font-weight    : 600;
  font-size      : 15px;
  padding        : 15px 32px;
  border-radius  : 100px; /* Píldora redondeada */
  border         : none;
  cursor         : pointer;
  transition     : all var(--transition);
  position       : relative;
  overflow       : hidden; /* El ::before con gradiente no se derrama */
}

/* Capa de gradiente que aparece al hover */
.btn-primary::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, var(--orange-light), var(--orange));
  opacity   : 0;
  transition: opacity var(--transition);
}

.btn-primary:hover::before { opacity: 1; }

.btn-primary:hover {
  transform : translateY(-3px);
  box-shadow: 0 20px 45px rgba(245,137,10,0.30);
}

/* Posición relativa para que el contenido quede sobre el ::before */
.btn-primary span,
.btn-primary .arrow { position: relative; }

/* Flecha → que se desplaza al hover */
.btn-primary .arrow {
  display   : inline-block;
  transition: transform var(--transition);
}
.btn-primary:hover .arrow { transform: translateX(4px); }

/* --- Botón outline (borde sutil) --- */
.btn-outline {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  color          : var(--cream-dim);
  text-decoration: none;
  font-weight    : 500;
  font-size      : 15px;
  padding        : 15px 28px;
  border-radius  : 100px;
  border         : 1px solid rgba(200,184,154,0.20);
  transition     : all var(--transition);
  cursor         : pointer;
  background     : transparent;
  font-family    : var(--font-body);
}

.btn-outline:hover {
  color       : var(--white);
  border-color: rgba(255,255,255,0.28);
  background  : rgba(255,255,255,0.04);
}


[data-page] {
  display: none; /* Oculto por defecto */
}

[data-page].active {
  display  : block;
  animation: pageIn 0.45s ease forwards; /* Entrada suave al activarse */
}

/* Animación de entrada para las pestañas */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}



@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Aparición simple sin movimiento */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pulso de escala (indicador de estado activo) */
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(1.35); }
}

/* Rotación continua (anillos decorativos del hero) */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Flotación vertical suave (frascos de dulces del hero) */
@keyframes floatY {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-12px); }
}

/* Flotación con rotación leve (píldoras de color del hero) */
@keyframes floatPill {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  33%       { transform: translateY(-9px)  rotate(5deg);  }
  66%       { transform: translateY(5px)   rotate(-3deg); }
}

/* Flotación para las tarjetas de información del hero */
@keyframes floatCard {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px); }
}


.hero {
  min-height: 100vh;
  display   : flex;
  align-items: center;
  padding   : 130px var(--padding-x) 80px;
  position  : relative;
  z-index   : 1;
  gap       : 5%;
}

/* Columna izquierda: texto, CTAs y estadísticas */
.hero-content {
  flex     : 1;
  max-width: 52%;
}

/* Badge "Envío gratis…" arriba del título */
.hero-badge {
  display      : inline-flex;
  align-items  : center;
  gap          : 8px;
  background   : rgba(245,137,10,0.10);
  border       : 1px solid rgba(245,137,10,0.20);
  border-radius: 100px;
  padding      : 6px 16px 6px 8px;
  margin-bottom: 32px;
  /* Animación de entrada con delay para efecto escalonado */
  opacity      : 0;
  animation    : fadeUp 0.8s ease 0.1s forwards;
}

/* Punto pulsante de color naranja dentro del badge */
.hero-badge-dot {
  width        : 6px;
  height       : 6px;
  background   : var(--orange);
  border-radius: 50%;
  animation    : pulse 2s infinite;
}

.hero-badge span {
  font-size     : 12px;
  color         : var(--orange-light);
  font-weight   : 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Título principal del hero */
.hero-title {
  font-family   : var(--font-display);
  font-size     : clamp(42px, 5vw, 70px); /* Fluido entre 42px y 70px */
  font-weight   : 700;
  line-height   : 1.1;
  letter-spacing: -0.02em;
  margin-bottom : 26px;
  opacity       : 0;
  animation     : fadeUp 0.9s ease 0.25s forwards;
}

/* Palabra en cursiva naranja con línea decorativa */
.hero-title em {
  font-style: italic;
  color     : var(--orange);
  position  : relative;
}

.hero-title em::after {
  content      : '';
  position     : absolute;
  bottom       : 4px;
  left         : 0;
  right        : 0;
  height       : 3px;
  background   : linear-gradient(90deg, var(--orange), transparent);
  border-radius: 2px;
}

/* Párrafo descriptivo debajo del título */
.hero-desc {
  font-size    : 17px;
  color        : var(--gray);
  line-height  : 1.75;
  max-width    : 420px;
  margin-bottom: 48px;
  font-weight  : 300;
  opacity      : 0;
  animation    : fadeUp 0.9s ease 0.40s forwards;
}

/* Contenedor de los dos botones CTA */
.hero-actions {
  display    : flex;
  align-items: center;
  gap        : 18px;
  opacity    : 0;
  animation  : fadeUp 0.9s ease 0.55s forwards;
}

/* Fila de estadísticas (500+, 12k, 8 años) */
.hero-stats {
  display     : flex;
  gap         : 40px;
  margin-top  : 60px;
  padding-top : 36px;
  border-top  : 1px solid var(--border);
  opacity     : 0;
  animation   : fadeUp 0.9s ease 0.70s forwards;
}

/* Número grande de cada estadística */
.stat-num {
  font-family: var(--font-display);
  font-size  : 30px;
  font-weight: 700;
  color      : var(--orange);
  line-height: 1;
}

/* Etiqueta debajo del número */
.stat-label {
  font-size     : 11px;
  color         : var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top    : 4px;
}



.blog-grid .hero-visual {
  grid-column: 2 / -1; /* ocupa las 3 columnas */
  display: flex;
  justify-content: center; /* centra horizontalmente */
}
/* Columna derecha: ilustración animada */
.hero-visual {
  flex           : 1;
  max-width      : 46%;
  position       : relative;
  display        : flex;
  align-items    : center;
  justify-content: center;
  opacity        : 0;
  animation      : fadeIn 1.2s ease 0.30s forwards;
}

/* Anillos orbitales que giran alrededor de los frascos */
.ring {
  position     : absolute;
  border-radius: 50%;
  border       : 1px solid;
}

.ring-1 {
  width       : 370px;
  height      : 370px;
  border-color: rgba(245,137,10,0.12);
  animation   : rotate 30s linear infinite;
}

/* Puntos de luz en los extremos del anillo interior */
.ring-1::before,
.ring-1::after {
  content      : '';
  position     : absolute;
  width        : 10px;
  height       : 10px;
  background   : var(--orange);
  border-radius: 50%;
  top          : 50%;
  left         : 0;
  transform    : translateY(-50%);
  box-shadow   : 0 0 12px var(--orange);
}
.ring-1::after { left: auto; right: 0; }

.ring-2 {
  width       : 470px;
  height      : 470px;
  border-color: rgba(245,137,10,0.05);
  animation   : rotate 45s linear infinite reverse; /* Gira al revés */
  border-style: dashed;
}

/* Área central donde se posicionan los frascos */
.candy-stage {
  position       : relative;
  z-index        : 2;
  width          : 330px;
  height         : 330px;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

/* Halo de luz central debajo de los frascos */
.glow-center {
  position     : absolute;
  width        : 200px;
  height       : 200px;
  background   : radial-gradient(circle, rgba(245,137,10,0.22) 0%, transparent 70%);
  border-radius: 50%;
}

/* Estilos base de cada frasco SVG */
.jar {
  position : absolute;
  filter   : drop-shadow(0 10px 28px rgba(0,0,0,0.60));
  animation: floatY 4s ease-in-out infinite;
}
/* Delays escalonados para que no floten al mismo tiempo */
.jar:nth-child(2) { animation-delay: -1.3s; }
.jar:nth-child(3) { animation-delay: -2.6s; }

/* Posición de cada frasco dentro del candy-stage */
.jar-main  { top: 50%; left: 50%; transform: translate(-50%, -55%); width: 138px; }
.jar-left  { top: 55%; left:  2%; width: 88px; }
.jar-right { top: 50%; right: 0%; width: 93px; }

/* Píldoras de colores que flotan alrededor */
.candy-pill {
  position     : absolute;
  border-radius: 100px;
  animation    : floatPill 5s ease-in-out infinite;
}
/* Posición y color de cada píldora */
.cp1 { width:44px; height:20px; background:linear-gradient(135deg,#FF6B9D,#FF3366); top:8%;    right:18%; animation-delay:  0s; }
.cp2 { width:32px; height:15px; background:linear-gradient(135deg,#A8FF78,#78FFB6); top:22%;   left: 5%; animation-delay: -2s; }
.cp3 { width:38px; height:18px; background:linear-gradient(135deg,#667EEA,#764BA2); bottom:25%;left: 8%; animation-delay: -1s; }
.cp4 { width:28px; height:13px; background:linear-gradient(135deg,#F093FB,#F5576C); bottom:15%;right:22%;animation-delay: -3s; }

/* Tarjetas de información flotantes sobre la ilustración */
.float-card {
  position       : absolute;
  background     : rgba(15,28,53,0.92);
  backdrop-filter: blur(12px);
  border         : 1px solid var(--border);
  border-radius  : 16px;
  padding        : 13px 17px;
  z-index        : 5;
  animation      : floatCard 6s ease-in-out infinite;
}
.float-card.card-top    { top:0;      right:-20px; animation-delay:-2s; }
.float-card.card-bottom { bottom:10px; left:-28px; animation-delay:-4s; }

.card-inner { display:flex; align-items:center; gap:10px; }
.card-icon  { font-size:21px; }

.card-label {
  font-size     : 10px;
  color         : var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card-value {
  font-size  : 14px;
  font-weight: 600;
  color      : var(--white);
}


.section-products {
  padding : 90px var(--padding-x);
  position: relative;
  z-index : 1;
}

/* Cabecera de sección: título a la izquierda, link a la derecha */
.section-header {
  display        : flex;
  align-items    : flex-end;
  justify-content: space-between;
  margin-bottom  : 52px;
}

/* Etiqueta pequeña en naranja encima del título */
.section-label {
  font-size     : 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color         : var(--orange);
  margin-bottom : 10px;
  font-weight   : 500;
}

/* Título grande de sección (h2) */
.section-title {
  font-family   : var(--font-display);
  font-size     : clamp(30px, 3.5vw, 50px);
  font-weight   : 700;
  line-height   : 1.15;
  letter-spacing: -0.02em;
}

/* Enlace "Ver todos" alineado abajo a la derecha */
.section-link {
  color          : var(--gray);
  text-decoration: none;
  font-size      : 13px;
  border-bottom  : 1px solid currentColor;
  padding-bottom : 2px;
  transition     : color var(--transition);
  white-space    : nowrap;
  margin-bottom  : 6px;
}
.section-link:hover { color: var(--orange); }

/* Grid de 4 columnas para la vista de Inicio */
.products-grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 18px;
}


.product-card {
  background   : var(--white);
  border       : 1px solid var(--bg);
  border-radius: var(--radius);
  overflow     : hidden;
  transition   : transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor       : pointer;
  position     : relative;
}

.product-card:hover {
  transform   : translateY(-8px);
  box-shadow  : 0 28px 55px rgba(0,0,0,0.40);
  border-color: rgba(245,137,10,0.22);
}

/* La imagen también crece sutilmente al hacer hover en la tarjeta */
.product-card:hover .product-img-bg { transform: scale(1.08); }

/* Contenedor de la imagen/emoji del producto */
.product-img-wrap {
  height  : 195px;
  overflow: hidden;
  position: relative;
}

/* Fondo de imagen con emoji centrado */
.product-img-bg {
  width          : 100%;
  height         : 100%;
  transition     : transform 0.6s ease;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 62px;
}

/* Colores de fondo únicos por producto — cambiar a gusto */
.p1 .product-img-bg { background: linear-gradient(135deg,#69de52,#a577e6); }
.p2 .product-img-bg { background: linear-gradient(135deg,#686edd,#1ece5c); }
.p3 .product-img-bg { background: linear-gradient(135deg,#6f96df,#e1802b); }
.p4 .product-img-bg { background: linear-gradient(135deg,#2ffa39,#9825b5); }

/* Etiqueta de estado (Más vendido / Nuevo / Oferta) */
.product-tag {
  position      : absolute;
  top           : 13px;
  left          : 13px;
  background    : rgba(245,137,10,0.14);
  border        : 1px solid rgba(245,137,10,0.28);
  color         : var(--orange-light);
  font-size     : 10px;
  font-weight   : 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding       : 4px 10px;
  border-radius : 100px;
}

/* Área de texto debajo de la imagen */
.product-info { padding: 18px; }

.product-name {
  font-family  : var(--font-display);
  color        : var(--orange)  ;
  font-size    : 16px;
  font-weight  : 700;
  margin-bottom: 4px;
}

.product-desc {
  font-size    : 12px;
  color        : var(--gray);
  margin-bottom: 14px;
  line-height  : 1.5;
}

/* Fila inferior: precio a la izquierda, estrellas a la derecha */
.product-footer {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.product-price {
  font-size  : 19px;
  font-weight: 600;
  color      : var(--orange);
}

.product-price small {
  font-size  : 11px;
  color      : var(--gray);
  font-weight: 300;
}

.product-rating { display:flex; align-items:center; gap:4px; }
.stars          { color:var(--orange); font-size:11px; }
.rating-count   { font-size:11px; color:var(--gray); }


.banner {
  margin        : 0 var(--padding-x) 90px;
  background    : linear-gradient(135deg,#09111F,#09111F 50%,#713600);
  border        : 1px solid rgba(245,137,10,0.14);
  border-radius : 26px;
  padding       : 65px 8%;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 40px;
  position      : relative;
  overflow      : hidden; /* Recorta el ::before circular */
  z-index       : 1;
}

/* Halo decorativo en la esquina superior derecha del banner */
.banner::before {
  content      : '';
  position     : absolute;
  right        : -60px;
  top          : -60px;
  width        : 300px;
  height       : 300px;
  background   : radial-gradient(circle, rgba(245,137,10,0.16) 0%, transparent 70%);
  border-radius: 50%;
}

/* Bloque de texto del banner */
.banner-text {
  position: relative;
  z-index : 1;
}

.banner-title {
  font-family  : var(--font-display);
  color        : var(--white);
  font-size    : clamp(26px, 2.8vw, 42px);
  font-weight  : 700;
  line-height  : 1.2;
  margin-bottom: 14px;
}

.banner-desc {
  font-size  : 15px;
  color      : var(--gray);
  max-width  : 380px;
  line-height: 1.7;
}

/* Botón del banner, siempre visible (no se encoge) */
.banner-action {
  flex-shrink: 0;
  position   : relative;
  z-index    : 1;
}


/* Cabecera de página reutilizable para interiores */
.page-header {
  padding : 130px var(--padding-x) 50px;
  position: relative;
  z-index : 1;
}

/* Fila superior: título + buscador */
.page-header-inner {
  display        : flex;
  align-items    : flex-end;
  justify-content: space-between;
  gap            : 24px;
  flex-wrap      : wrap;
}

/* Contenedor horizontal de pills de filtro */
.filter-bar {
  display   : flex;
  gap       : 10px;
  flex-wrap : wrap;
  margin-top: 28px;
}

/* Cada pill es un <button> con texto de categoría */
.filter-pill {
  padding      : 8px 20px;
  border-radius: 100px;
  border       : 1px solid var(--border);
  color        : var(--gray);
  font-size    : 13px;
  font-weight  : 500;
  cursor       : pointer;
  background   : transparent;
  font-family  : var(--font-body);
  transition   : all var(--transition);
}

.filter-pill:hover {
  border-color: rgba(245,137,10,0.40);
  color       : var(--white);
}

/* Pill activa (categoría seleccionada) */
.filter-pill.active {
  background  : var(--orange);
  color       : var(--bg);
  border-color: var(--orange);
  font-weight : 600;
}


.search-bar {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: 100px;
  padding      : 10px 20px;
  max-width    : 280px;
  width        : 100%;
  transition   : border-color var(--transition);
}

.search-bar:focus-within {
  border-color: rgba(245,137,10,0.40); /* Se ilumina cuando el input tiene foco */
}

.search-bar svg {
  width      : 16px;
  height     : 16px;
  fill       : var(--gray);
  flex-shrink: 0;
}

.search-bar input {
  background : transparent;
  border     : none;
  outline    : none;
  color      : var(--white);
  font-size  : 14px;
  font-family: var(--font-body);
  width      : 100%;
}

.search-bar input::placeholder { color: var(--gray); }

/* Grid de 3 columnas para la página completa de Productos */
.products-page-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 22px;
  padding              : 0 var(--padding-x) 90px;
}

/* Las tarjetas en esta página tienen imagen más alta */
.products-page-grid .product-img-wrap { height: 220px; }


.timeline {
  position: relative;
  padding : 0 var(--padding-x) 90px;
}

/* Línea vertical que une todos los hitos */
.timeline::before {
  content   : '';
  position  : absolute;
  left      : calc(var(--padding-x) + 18px); /* Alineada con el centro del .timeline-dot */
  top       : 0;
  bottom    : 0;
  width     : 1px;
  background: var(--border);
}

/* Cada hito de la línea de tiempo */
.timeline-item {
  display      : flex;
  gap          : 36px;
  margin-bottom: 52px;
  position     : relative;
}

/* Círculo numerado que se apoya sobre la línea vertical */
.timeline-dot {
  width          : 38px;
  height         : 38px;
  background     : var(--bg-2);
  border         : 2px solid var(--orange);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  font-size      : 14px;
  font-weight    : 700;
  color          : var(--orange);
}

/* Contenido textual del hito */
.timeline-content { padding-top: 6px; }

/* Año/período del hito */
.timeline-year {
  font-size     : 11px;
  color         : var(--orange);
  font-weight   : 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom : 6px;
}

/* Título del hito */
.timeline-title {
  font-family  : var(--font-display);
  font-size    : 20px;
  font-weight  : 700;
  margin-bottom: 8px;
}

/* Descripción del hito */
.timeline-desc {
  font-size  : 14px;
  color      : var(--gray);
  line-height: 1.7;
}


.values-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 20px;
  padding              : 0 var(--padding-x) 90px;
}

/* Tarjeta individual de valor */
.value-card {
  background   : var(--bg-2);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  padding      : 32px 28px;
  transition   : border-color var(--transition), transform var(--transition);
}

.value-card:hover {
  border-color: rgba(245,137,10,0.20);
  transform   : translateY(-5px);
}

.value-icon  { font-size:36px; margin-bottom:18px; }

.value-title {
  font-family  : var(--font-display);
  font-size    : 20px;
  font-weight  : 700;
  margin-bottom: 10px;
}

.value-desc {
  font-size  : 14px;
  color      : var(--gray);
  line-height: 1.7;
}



/* Grid de 3 columnas para los artículos */
.blog-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 22px;
  padding              : 0 var(--padding-x) 90px;
}

/* Tarjeta de artículo de blog */
.blog-card {
  background   : var(--bg-2);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  overflow     : hidden;
  transition   : transform var(--transition), border-color var(--transition);
  cursor       : pointer;
}

.blog-card:hover {
  transform   : translateY(-6px);
  border-color: rgba(245,137,10,0.20);
}

/* Área de imagen del artículo (reemplazar con <img> real) */
.blog-img {
  height         : 180px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 54px;
}

/* Colores de fondo por artículo */
.blog-b1 .blog-img { background: linear-gradient(135deg,#1a0d2e,#2d1155); }
.blog-b2 .blog-img { background: linear-gradient(135deg,#0d1a2e,#0f3d30); }
.blog-b3 .blog-img { background: linear-gradient(135deg,#2e1200,#5a2a00); }

/* Área de texto del artículo */
.blog-info { padding: 20px; }

/* Categoría del artículo */
.blog-cat {
  font-size     : 10px;
  color         : var(--orange);
  font-weight   : 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom : 8px;
}

.blog-title {
  font-family  : var(--font-display);
  font-size    : 17px;
  font-weight  : 700;
  line-height  : 1.35;
  margin-bottom: 10px;
}

.blog-excerpt {
  font-size    : 13px;
  color        : var(--gray);
  line-height  : 1.6;
  margin-bottom: 16px;
}

/* Fila de metadatos: autor y fecha */
.blog-meta {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.blog-author,
.blog-date { font-size:12px; color:var(--gray); }



/* Layout de dos columnas: formulario | info de contacto */
.contact-layout {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 50px;
  padding              : 0 var(--padding-x) 90px;
  align-items          : start; /* Ambas columnas arrancan desde arriba */
}

/* Tarjeta que contiene el formulario */
.contact-form-wrap {
  background   : var(--bg-2);
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  padding      : 40px;
}

.form-title {
  font-family  : var(--font-display);
  font-size    : 26px;
  font-weight  : 700;
  margin-bottom: 6px;
}

.form-subtitle {
  font-size    : 14px;
  color        : var(--gray);
  margin-bottom: 30px;
}

/* Grupo label + input/textarea */
.form-group { margin-bottom: 20px; }

.form-group label {
  display       : block;
  font-size     : 12px;
  color         : var(--gray);
  font-weight   : 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom : 8px;
}

.form-group input,
.form-group textarea {
  width        : 100%;
  background   : var(--bg);
  border       : 1px solid var(--border);
  border-radius: 12px;
  padding      : 13px 16px;
  color        : var(--white);
  font-size    : 14px;
  font-family  : var(--font-body);
  outline      : none;
  transition   : border-color var(--transition);
}

/* El borde se ilumina en naranja al enfocar el campo */
.form-group input:focus,
.form-group textarea:focus { border-color: var(--orange); }

.form-group textarea {
  resize    : vertical;
  min-height: 110px;
}

/* Dos campos en la misma fila (nombre + teléfono) */
.form-row {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 16px;
}


.contact-info-title {
  font-family  : var(--font-display);
  font-size    : 26px;
  font-weight  : 700;
  margin-bottom: 30px;
}

/* Fila de un dato de contacto: ícono + texto */
.contact-info-item {
  display      : flex;
  gap          : 16px;
  margin-bottom: 26px;
}

/* Cuadro con ícono emoji */
.contact-info-icon {
  width          : 44px;
  height         : 44px;
  flex-shrink    : 0;
  background     : rgba(245,137,10,0.10);
  border         : 1px solid rgba(245,137,10,0.20);
  border-radius  : 12px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
}

/* Etiqueta pequeña del dato (Dirección, Teléfono, etc.) */
.contact-info-label {
  font-size     : 11px;
  color         : var(--orange);
  font-weight   : 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom : 4px;
}

/* Valor del dato (texto principal) */
.contact-info-value {
  font-size  : 15px;
  color      : var(--black);
  line-height: 1.5;
}

.map-placeholder span { font-size: 28px; }

*/
footer {
  border-top     : 1px solid var(--border);
  padding        : 44px var(--padding-x);
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  position       : relative;
  z-index        : 1;
}

footer p { font-size:13px; color:var(--gray); }

.footer-links { display:flex; gap:26px; }

.footer-links a {
  font-size      : 13px;
  color          : var(--gray);
  text-decoration: none;
  transition     : color var(--transition);
}
.footer-links a:hover { color: var(--white); }



/* Tablet landscape */
@media (max-width: 1100px) {
  .products-grid      { grid-template-columns: repeat(2, 1fr); }
  .products-page-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid        { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait / móvil grande */
@media (max-width: 900px) {
  header { padding: 14px 5%; }

    [data-page="inicio"] .hero {
    display: flex !important;
    flex-direction: column !important; 
    height: auto !important;           
    min-height: 100vh;
    padding: 120px 5% 40px !important;
    gap: 30px !important;
    justify-content: flex-start !important;
  }

  /* REDUCE EL TEXTO: Para que no ocupe toda la pantalla */
  [data-page="inicio"] .hero-content h1 {
    font-size: 2.5rem !important;
    margin-bottom: 15px;
  }

  /* QUITA EL MODO "FLOTANTE" DE LOS DULCES */
  [data-page="inicio"] .hero-visual {
    position: relative !important; /* Esto evita que se encima */
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex;
    justify-content: center;
    order: 2; /* Asegura que vaya después del texto */
  }

  /* AJUSTA EL TAMAÑO DEL CÍRCULO ROSA */
  [data-page="inicio"] .candy-stage {
    width: 220px !important;
    height: 220px !important;
  }
}

/* Móvil pequeño */
@media (max-width: 550px) {

[data-page="inicio"] .hero {
    display: flex !important;
    flex-direction: column !important; 
    height: auto !important;           
    min-height: 100vh;
    padding-top: 140px !important;     
    gap: 40px !important;
  }
/* Elimina espacios en blanco del hero en móvil */
  [data-page="inicio"] .hero {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }

  /* Elimina espacio debajo de las estadísticas */
  .hero-stats {
    margin-top: 20px !important;
    padding-top: 20px !important;
  }
  
  [data-page="inicio"] .hero-visual {
    position: relative !important;     
    top: 0 !important;
    right: 0 !important;
    transform: none !important;        
    margin: 150px auto 0 !important; /* Añadimos margen arriba para separar del texto */
    width: 100% !important;
    display: flex;
    justify-content: center;
  }
  
  /* Botones CTA apilados y de ancho completo */
  .hero-actions { flex-direction:column; width:100%; }
  .btn-primary,
  .btn-outline  { justify-content:center; width:100%; }

  /* Stats envuelven a múltiples líneas */
  .hero-stats { flex-wrap:wrap; gap:22px; }

  /* Productos en 2 columnas */
  .products-grid { grid-template-columns: 1fr 1fr; }

  /* Section-header apilado */
  .section-header { flex-direction:column; align-items:flex-start; gap:14px; }

  /* Campos del formulario apilados */
  .form-row { grid-template-columns: 1fr; }
}

/* Footer apilado en móvil */
  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 30px 5% !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 12px !important;
  }