/* ================================================= */
/* FUENTES */
/* ================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Cinzel:wght@400;700&family=Cormorant+Garamond:wght@300;400;600&display=swap');


/* ================================================= */
/* PALETA COMPLETA — edita aquí para cambiar todo    */
/* ================================================= */

:root{

  /* --- Dorados --- */
  --gold:               #c9a84c;   /* dorado base: bordes, botones y títulos de sección */
  --gold-light:         #e8c97a;   /* dorado más claro: textos sobre fondo oscuro, precios, logo */
  --gold-dark:          #8a6a1f;   /* dorado más oscuro: íconos pequeños en el menú y pie de página */

  /* --- Fondos generales --- */
  --dark:               #000;      /* negro puro: color de fondo de toda la página */
  --dark2:              #0a0a0a;   /* negro casi puro: fondo de la sección de promociones */
  --dark3:              #111;      /* gris muy oscuro: fondo de tarjetas de promo y menú lateral */
  --dark4:              #222;      /* gris oscuro: reservado por si se necesita */
  --navy:               #0d1b3e;   /* azul marino oscuro: fondo del panel "Nosotros" */

  /* --- Texto claro --- */
  --cream:              #f5efe0;   /* color crema: textos que van sobre fondos muy oscuros */

  /* --- Barra de navegación superior (el menú fijo arriba de la página) --- */
  --header-overlay-top:    rgba(0,0,0,0.55);    /* capa oscura encima de la foto del header, parte de arriba */
  --header-overlay-bottom: rgba(0,0,0,0.75);    /* capa oscura encima de la foto del header, parte de abajo */
  --header-border:         rgba(201,168,76,0.25); /* línea dorada que separa el header del resto de la página */

  /* --- Menú lateral (el cajón que se abre desde la derecha al tocar el ícono de tres líneas) --- */
  --menu-bg:               #0c0c0c;             /* color de fondo del cajón del menú */
  --menu-border:           rgba(201,168,76,0.25); /* línea dorada del lado izquierdo del cajón */
  --menu-header-border:    rgba(201,168,76,0.2);  /* línea que separa el encabezado del cajón de los links */
  --menu-link-color:       rgba(245,239,224,0.8); /* color del texto de cada opción del menú */
  --menu-link-border:      rgba(255,255,255,0.05);/* línea muy sutil que separa cada opción del menú */
  --menu-link-hover-bg:    rgba(201,168,76,0.07); /* color de fondo de una opción cuando le pasas el cursor encima */
  --menu-cerrar-color:     rgba(255,255,255,0.5); /* color del botón de cerrar (la X) en reposo */

  /* --- Capa oscura que aparece detrás del menú al abrirlo (el fondo que oscurece la página) --- */
  --overlay-bg:            rgba(0,0,0,0.55);

  /* --- Imagen grande de bienvenida (la foto principal que ocupa todo el ancho al entrar) --- */
  --hero-overlay-top:      rgba(0,0,0,0.15);    /* capa oscura sobre la foto, parte de arriba */
  --hero-overlay-mid:      rgba(0,0,0,0.45);    /* capa oscura sobre la foto, parte media */
  --hero-overlay-bottom:   rgba(0,0,0,0.85);    /* capa oscura sobre la foto, parte de abajo donde está el texto */
  --hero-subtitle-color:   rgba(245,239,224,0.7); /* color del texto pequeño debajo del título principal */

  /* --- Pantalla de verificación de edad (la pantalla que aparece antes de entrar al sitio) --- */
  --ag-bg-base:            #06090f;             /* color de fondo de toda esa pantalla */
  --ag-gold-glow-1:        rgba(201,168,76,0.12); /* brillo dorado sutil del lado izquierdo */
  --ag-gold-glow-2:        rgba(201,168,76,0.08); /* brillo dorado sutil del lado derecho */
  --ag-stripe:             rgba(201,168,76,0.04); /* líneas diagonales muy tenues del fondo */
  --ag-card-bg:            rgba(10,15,28,0.85);  /* color de fondo de la tarjeta central */
  --ag-card-border:        rgba(201,168,76,0.25); /* borde de la tarjeta central */
  --ag-marca-color:        var(--gold);           /* color del nombre de la marca arriba */
  --ag-divider-color:      var(--gold);           /* color de la línea decorativa bajo el nombre */
  --ag-sub-color:          rgba(255,255,255,0.4); /* color del texto "debes ser mayor de edad..." */
  --ag-input-placeholder:  rgba(201,168,76,0.25); /* color del texto de ejemplo dentro de los campos (DD, MM, AAAA) */
  --ag-label-color:        rgba(255,255,255,0.35);/* color de las etiquetas DÍA, MES, AÑO */
  --ag-separator-color:    rgba(201,168,76,0.3);  /* color de la línea vertical entre los campos */
  --ag-error-color:        #e05555;               /* color rojo del mensaje de error cuando la fecha no es válida */
  --ag-aviso-color:        rgba(255,255,255,0.2); /* color del texto legal pequeño al pie de la tarjeta */

  /* --- Sección "Destacados" (la franja oscura con el carrusel de productos) --- */
  --dest-bg-center:        #1a1200;              /* color del centro del fondo (más cálido, como un resplandor) */
  --dest-border:           #3a2800;              /* color de las líneas que separan esta sección de las demás */
  --dest-titulo-shadow:    rgba(240,192,64,0.4); /* resplandor dorado detrás del título "Destacados" */

  /* --- Tarjetas del carrusel de productos (las cajitas blancas con la foto del producto) --- */
  --prod-bg-from:          #ffffff;              /* color superior de la tarjeta (blanco) */
  --prod-bg-to:            #e8e8e8;              /* color inferior de la tarjeta (gris claro) */
  --prod-shadow-dark:      rgba(0,0,0,0.8);      /* sombra oscura debajo de la tarjeta */
  --prod-shadow-gold:      rgba(240,192,64,0.15);/* brillo dorado alrededor de la tarjeta */
  --prod-shadow-hover:     rgba(0,0,0,0.9);      /* sombra más intensa cuando le pasas el cursor encima */
  --prod-shadow-gold-hover:rgba(240,192,64,0.3); /* brillo dorado más fuerte cuando le pasas el cursor encima */
  --prod-nombre-color:     #222;                 /* color del nombre del producto dentro de la tarjeta */

  /* --- Sección "Promociones" (la franja con las tarjetas de ofertas) --- */
  --promo-bg:              #0a0a0a;              /* color de fondo de toda la sección */
  --promo-border-top:      rgba(201,168,76,0.15);/* línea dorada que separa esta sección de la anterior */
  --promo-card-bg:         #111;                 /* color de fondo de cada tarjeta de promoción */
  --promo-card-border:     rgba(201,168,76,0.2); /* borde de cada tarjeta de promoción */
  --promo-card-hover-bg:   #161616;              /* color de fondo de la tarjeta cuando le pasas el cursor encima */
  --promo-card-hover-border: var(--gold);        /* borde de la tarjeta cuando le pasas el cursor encima */
  --promo-card-line:       var(--gold);          /* línea dorada que aparece arriba de la tarjeta al pasar el cursor */
  --promo-desc-color:      rgba(245,239,224,0.6);/* color del texto descriptivo dentro de la tarjeta */

  /* --- Sección "Nosotros" (la parte con la foto de fondo y el panel de texto al lado) --- */
  --nos-panel-bg:          rgba(13,27,62,0.97);  /* color de fondo del panel de texto (azul oscuro) */
  --nos-panel-border:      rgba(201,168,76,0.2); /* línea dorada que separa la foto del panel de texto */
  --nos-panel-line:        var(--gold);           /* línea dorada decorativa en la parte superior del panel */
  --nos-overlay:           rgba(0,0,0,0.1);       /* capa oscura muy sutil sobre la foto, lado izquierdo */
  --nos-overlay-right:     rgba(13,27,62,0.55);   /* capa azul oscura sobre la foto, lado derecho (para la transición) */
  --nos-eyebrow-color:     var(--gold);           /* color del texto pequeño encima del título (ej. "NUESTRA HISTORIA") */
  --nos-h2-color:          var(--cream);          /* color del título principal en el panel */
  --nos-h2-strong-color:   var(--gold-light);     /* color de la palabra resaltada dentro del título */
  --nos-p-color:           rgba(245,239,224,0.7); /* color del párrafo descriptivo */
  --nos-btn-border:        var(--gold);           /* borde del botón "Ver más" o similar */
  --nos-btn-color:         var(--gold-light);     /* color del texto del botón */
  --nos-btn-hover-bg:      var(--gold);           /* color de fondo del botón cuando le pasas el cursor encima */
  --nos-btn-hover-color:   var(--navy);           /* color del texto del botón cuando le pasas el cursor encima */

  /* --- Pie de página (la parte de abajo del sitio con los datos de contacto y redes) --- */
  --footer-bg:             #050505;              /* color de fondo del pie de página */
  --footer-border-top:     rgba(201,168,76,0.25);/* línea dorada que separa el pie del resto de la página */
  --footer-nombre-color:   var(--gold-light);    /* color del nombre de la marca en el pie */
  --footer-slogan-color:   rgba(245,239,224,0.4);/* color del eslogan debajo del nombre */
  --footer-h5-color:       var(--gold);          /* color de los títulos de cada columna (ej. "CONTACTO") */
  --footer-h5-border:      rgba(201,168,76,0.2); /* línea bajo cada título de columna */
  --footer-link-color:     rgba(245,239,224,0.55);/* color de los textos y links de las listas */
  --footer-icon-color:     var(--gold-dark);     /* color de los íconos pequeños junto a los datos */
  --footer-social-color:   rgba(255,255,255,0.4);/* color de los íconos de redes sociales en reposo */
  --footer-social-border:  rgba(255,255,255,0.08);/* borde del círculo alrededor de los íconos de redes */
  --footer-social-hover:   var(--gold);          /* color del ícono de red social cuando le pasas el cursor */
  --footer-social-border-hover: var(--gold-dark);/* borde del círculo cuando le pasas el cursor */
  --footer-bottom-border:  rgba(255,255,255,0.06);/* línea muy sutil que separa el copyright del resto del pie */
  --footer-copy-color:     rgba(245,239,224,0.25);/* color del texto de copyright (el más tenue de todos) */

  /* --- Imagen grande del catálogo (la foto de bienvenida en la página del catálogo) --- */
  --cat-hero-bg-center:    #1a2e5a;              /* color del centro del fondo (azul más cálido) */
  --cat-hero-bg-edge:      #0a1020;              /* color de los bordes del fondo (azul más oscuro) */
  --cat-hero-bg-base:      #060e22;              /* color base del fondo del catálogo */
  --cat-hero-border:       rgba(201,168,76,0.2); /* línea dorada que separa esta imagen del contenido de abajo */
  --cat-hero-stripe:       rgba(201,168,76,0.03);/* líneas diagonales muy tenues decorativas del fondo */
  --cat-hero-h1-shadow:    rgba(201,168,76,0.3); /* resplandor dorado detrás del título del catálogo */
  --cat-hero-sub-color:    rgba(245,239,224,0.45);/* color del texto pequeño debajo del título del catálogo */

  /* --- Barra de filtros del catálogo (los botones para filtrar por tipo de producto) --- */
  --cat-filtros-bg:        #070b14;              /* color de fondo de la barra de filtros */
  --cat-filtros-border:    rgba(201,168,76,0.12);/* línea dorada debajo de la barra de filtros */
  --cat-filtro-border:     rgba(201,168,76,0.25);/* borde de cada botón de filtro cuando no está seleccionado */
  --cat-filtro-color:      rgba(245,239,224,0.55);/* color del texto de cada botón cuando no está seleccionado */
  --cat-filtro-hover-border: var(--gold);        /* borde del botón cuando le pasas el cursor encima */
  --cat-filtro-hover-color:  var(--gold-light);  /* color del texto del botón cuando le pasas el cursor encima */
  --cat-filtro-activo-bg:    var(--gold);        /* color de fondo del botón que está seleccionado actualmente */
  --cat-filtro-activo-color: var(--navy);        /* color del texto del botón que está seleccionado actualmente */

  /* --- Área principal del catálogo (el fondo donde se muestran todos los productos) --- */
  --cat-main-bg:           #06090f;

  /* --- Tarjetas de producto del catálogo (cada cajita con la foto, nombre y precio) --- */
  --cat-card-bg-from:      #101828;              /* color superior de la tarjeta */
  --cat-card-bg-to:        #0a1020;              /* color inferior de la tarjeta */
  --cat-card-border:       rgba(201,168,76,0.15);/* borde de la tarjeta en reposo */
  --cat-card-line:         var(--gold);          /* línea dorada que aparece arriba al pasar el cursor */
  --cat-card-hover-shadow: rgba(0,0,0,0.6);      /* sombra oscura debajo de la tarjeta al pasar el cursor */
  --cat-card-hover-glow:   rgba(201,168,76,0.1); /* brillo dorado alrededor de la tarjeta al pasar el cursor */
  --cat-card-hover-border: rgba(201,168,76,0.4); /* borde más visible al pasar el cursor encima */
  --cat-img-bg:            #fff;                 /* fondo blanco del recuadro donde va la foto del producto */
  --cat-nombre-color:      var(--cream);         /* color del nombre del producto */
  --cat-tag-color:         var(--gold-dark);     /* color de la etiqueta de categoría (ej. "WHISKY") */
  --cat-tag-border:        rgba(201,168,76,0.3); /* borde de la etiqueta de categoría */
  --cat-tag-cuartito-color: #7a9fbf;             /* color especial de la etiqueta "CUARTITO" */
  --cat-tag-cuartito-border: rgba(122,159,191,0.4);/* borde de la etiqueta "CUARTITO" */
  --cat-volumen-color:     rgba(245,239,224,0.38);/* color del texto de volumen (ej. "750ml") */
  --cat-precio-color:      var(--gold-light);    /* color del precio del producto */

  /* --- Títulos de cada categoría dentro del catálogo (ej. "WHISKIES", "VINOS") --- */
  --cat-sec-border:        rgba(201,168,76,0.2); /* línea dorada debajo del título de categoría */
  --cat-sec-icon-color:    var(--gold);          /* color del ícono junto al título */
  --cat-sec-titulo-color:  var(--gold-light);    /* color del texto del título de categoría */
  --cat-sec-line:          rgba(201,168,76,0.3); /* línea decorativa que se extiende a la derecha del título */

  /* --- Página de Términos y Condiciones --- */
  --ter-hero-bg-center:    #1a2e5a;              /* color del centro del fondo de la imagen superior */
  --ter-hero-bg-edge:      #0a1020;              /* color de los bordes del fondo */
  --ter-hero-bg-base:      #060e22;              /* color base del fondo */
  --ter-hero-border:       rgba(201,168,76,0.2); /* línea dorada debajo de la imagen superior */
  --ter-hero-stripe:       rgba(201,168,76,0.03);/* líneas diagonales decorativas del fondo */
  --ter-hero-h1-shadow:    rgba(201,168,76,0.3); /* resplandor dorado detrás del título */
  --ter-hero-sub-color:    rgba(245,239,224,0.45);/* color del texto pequeño debajo del título */
  --ter-main-bg:           #06090f;              /* color de fondo del área con el contenido de los términos */
  --ter-intro-color:       rgba(245,239,224,0.6);/* color del párrafo introductorio */
  --ter-badge-border:      var(--gold);          /* borde del círculo "+18" */
  --ter-badge-color:       var(--gold);          /* color del texto dentro del círculo "+18" */
  --ter-badge-shadow:      rgba(201,168,76,0.2); /* resplandor dorado alrededor del círculo "+18" */
  --ter-item-bg-from:      #101828;              /* color superior de cada bloque de término */
  --ter-item-bg-to:        #0a1020;              /* color inferior de cada bloque de término */
  --ter-item-border:       rgba(201,168,76,0.15);/* borde de cada bloque de término en reposo */
  --ter-item-line:         var(--gold);          /* línea dorada que aparece a la izquierda al pasar el cursor */
  --ter-item-hover-border: rgba(201,168,76,0.35);/* borde más visible al pasar el cursor encima */
  --ter-icono-border:      rgba(201,168,76,0.3); /* borde del círculo que contiene el ícono de cada término */
  --ter-icono-color:       var(--gold);          /* color del ícono de cada término */
  --ter-titulo-color:      var(--gold-light);    /* color del título de cada término */
  --ter-texto-color:       rgba(245,239,224,0.7);/* color del texto explicativo de cada término */
}


/* ================================================= */
/* VERIFICACIÓN DE EDAD */
/* ================================================= */

#age-gate{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ag-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, var(--ag-gold-glow-1) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, var(--ag-gold-glow-2) 0%, transparent 55%),
    var(--ag-bg-base);
}

.ag-bg::before{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 80px,
    var(--ag-stripe) 80px,
    var(--ag-stripe) 81px
  );
}

.ag-card{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 480px;
  width: 100%;
  padding: 52px 44px;
  background: var(--ag-card-bg);
  border: 1px solid var(--ag-card-border);
  backdrop-filter: blur(12px);
  animation: agEntrada .5s ease both;
}

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

.ag-logo {
  border-radius: 50%;        /* hace el logo perfectamente circular */
  object-fit: cover;         /* recorta la imagen sin deformarla */
  width: 90px;               /* ajusta el tamaño si lo necesitas */
  height: 90px;              /* debe ser igual al width para que sea círculo */
}
    

.ag-marca{
  font-family: 'Cinzel', serif;
  font-size: .75rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ag-marca-color);
  margin: 0 0 24px;
}

.ag-divider{
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ag-divider-color), transparent);
  margin: 0 auto 28px;
}

.ag-titulo{
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  margin: 0 0 12px;
}

.ag-sub{
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ag-sub-color);
  margin: 0 0 36px;
  line-height: 1.6;
}

.ag-campos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
}

.ag-separador{
  width: 1px;
  height: 52px;
  background: var(--ag-separator-color);
  margin: 0 8px;
}

.ag-campo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ag-campo input{
  background: none;
  border: none;
  outline: none;
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-light);
  width: 90px;
  text-align: center;
  caret-color: var(--gold);
  appearance: textfield;
  -moz-appearance: textfield;
}

.ag-campo input::-webkit-outer-spin-button,
.ag-campo input::-webkit-inner-spin-button{
  -webkit-appearance: none;
}

.ag-campo input::placeholder{
  color: var(--ag-input-placeholder);
}

.ag-campo label{
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .3em;
  color: var(--ag-label-color);
  text-transform: uppercase;
}

.ag-error{
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem;
  color: var(--ag-error-color);
  min-height: 22px;
  margin: 8px 0 16px;
  letter-spacing: .05em;
}

.ag-btn{
  display: block;
  width: 100%;
  padding: 15px;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-size: .8rem;
  letter-spacing: .25em;
  cursor: pointer;
  transition: background .25s, color .25s;
  margin-bottom: 28px;
}

.ag-btn:hover{
  background: var(--gold);
  color: var(--navy);
}

.ag-aviso{
  font-family: 'Cormorant Garamond', serif;
  font-size: .8rem;
  font-weight: 300;
  color: var(--ag-aviso-color);
  line-height: 1.6;
  margin: 0;
}

body.bloqueado > *:not(#age-gate){
  display: none;
}


/* ================================================= */
/* ESTILOS GENERALES */
/* ================================================= */

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: var(--dark);
}


/* ================================================= */
/* BARRA SUPERIOR (fija arriba, con el logo y el menú) */
/* ================================================= */

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 14px 28px;
  border-bottom: 1px solid var(--header-border);
  position: sticky;
  top: 0;
  z-index: 900;
  background:
    linear-gradient(to bottom, var(--header-overlay-top), var(--header-overlay-bottom)),
    url('media/logos/banner.jpg') center/cover no-repeat;
}


/* ================================================= */
/* LOGO */
/* ================================================= */

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

.logo img{
  width: 46px;
}

.logo h1{
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold-light);
  margin: 0;
}


/* ================================================= */
/* ÍCONO DE TRES LÍNEAS (el botón que abre el menú) */
/* ================================================= */

.menu-icono{
  cursor: pointer;
  padding: 6px;
}

.hamburguesa{
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}

.hamburguesa span{
  display: block;
  height: 2px;
  background: var(--gold-light);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}

/* cuando el menú está abierto, las tres líneas se convierten en una X */
.hamburguesa.abierto span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburguesa.abierto span:nth-child(2){ opacity: 0; }
.hamburguesa.abierto span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


/* ================================================= */
/* FONDO OSCURO (aparece detrás del menú al abrirlo) */
/* ================================================= */

.overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.overlay.visible{
  display: block;
}


/* ================================================= */
/* MENÚ LATERAL (el cajón que sale desde la derecha) */
/* ================================================= */

nav#menu{
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100%;
  background: var(--menu-bg);
  border-left: 1px solid var(--menu-border);
  z-index: 1100;
  transition: right .35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

nav#menu.abierto{
  right: 0;
}

.menu-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--menu-header-border);
}

.menu-header span{
  font-family: 'Cinzel', serif;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.menu-cerrar{
  background: none;
  border: none;
  color: var(--menu-cerrar-color);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .2s;
}
.menu-cerrar:hover{ color: var(--gold); }

nav#menu a{
  color: var(--menu-link-color);
  text-decoration: none;
  padding: 16px 24px;
  border-bottom: 1px solid var(--menu-link-border);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background .2s, color .2s, padding-left .2s;
}

nav#menu a i{
  color: var(--gold-dark);
  width: 18px;
  text-align: center;
  transition: color .2s;
}

/* cuando le pasas el cursor encima de un link del menú */
nav#menu a:hover{
  background: var(--menu-link-hover-bg);
  color: var(--gold-light);
  padding-left: 30px;
}

nav#menu a:hover i{
  color: var(--gold-light);
}


/* ================================================= */
/* IMAGEN GRANDE DE BIENVENIDA (la foto principal al entrar) */
/* ================================================= */

.hero{
  width: 100%;
  overflow: hidden;
  position: relative;
}

.hero img{
  width: 100%;
  height: auto;
  display: block;
}

/* capa oscura que va encima de la foto para que el texto se lea bien */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--hero-overlay-top)    0%,
    var(--hero-overlay-mid)   60%,
    var(--hero-overlay-bottom) 100%
  );
}

/* el texto que aparece sobre la foto */
.hero-contenido{
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 20px;
}

.hero-contenido h2{
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 4.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold-light);
  text-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 0 40px rgba(201,168,76,0.3);
  margin: 0 0 12px;
  line-height: 1.2;
}

.hero-contenido p{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 300;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--hero-subtitle-color);
  margin: 0;
}


/* ================================================= */
/* SECCIÓN DESTACADOS */
/* ================================================= */

.destacados{
  padding: 60px 20px;
  text-align: center;
  color: white;
  background: radial-gradient(ellipse at center, var(--dest-bg-center) 0%, var(--dark) 70%);
  border-top: 1px solid var(--dest-border);
  border-bottom: 1px solid var(--dest-border);
}

.destacados h2{
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: 40px;
  color: var(--gold);
  text-shadow: 0 0 20px var(--dest-titulo-shadow);
}


/* ================================================= */
/* CARRUSEL (el deslizador de productos) */
/* ================================================= */

.carrusel{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* los botones de flecha para pasar productos */
.prev,
.next{
  color: white;
  border: none;
  font-size: 30px;
  cursor: pointer;
  padding: 10px 16px;
  z-index: 10;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  transition: background 0.2s;
  flex-shrink: 0;
}

.prev:hover,
.next:hover{
  background: rgba(255,255,255,0.2);
}

.contenedor-carrusel{
  overflow: hidden;
  width: calc(5 * 250px);
}

#carrusel{
  display: flex;
}

/* cada tarjeta individual dentro del carrusel */
.producto{
  min-width: 230px;
  flex-shrink: 0;
  margin: 10px;
  background: linear-gradient(145deg, var(--prod-bg-from), var(--prod-bg-to));
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 10px 30px var(--prod-shadow-dark),
    0 0 15px var(--prod-shadow-gold);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* efecto al pasar el cursor encima de una tarjeta del carrusel */
.producto:hover{
  transform: translateY(-12px) rotateX(4deg) scale(1.03);
  box-shadow:
    0 25px 50px var(--prod-shadow-hover),
    0 0 30px var(--prod-shadow-gold-hover);
}

.producto img{
  width: 100%;
  height: 180px;
  object-fit: contain;
  padding: 10px;
  background: white;
}

.producto p{
  padding: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: center;
  color: var(--prod-nombre-color);
}


/* ================================================= */
/* SECCIÓN PROMOCIONES */
/* ================================================= */

.promociones{
  background: var(--promo-bg);
  color: white;
  text-align: center;
  padding: 70px 20px;
  border-top: 1px solid var(--promo-border-top);
}

.promociones h2{
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: 48px;
  color: var(--gold);
}

.contenedor-promos{
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.promo{
  background: var(--promo-card-bg);
  border: 1px solid var(--promo-card-border);
  padding: 36px 28px;
  border-radius: 4px;
  width: 220px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}

/* línea dorada que aparece arriba de la tarjeta al pasar el cursor */
.promo::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--promo-card-line), transparent);
  opacity: 0;
  transition: opacity .3s;
}

/* efecto al pasar el cursor encima de una tarjeta de promo */
.promo:hover{
  transform: translateY(-6px);
  border-color: var(--promo-card-hover-border);
  background: var(--promo-card-hover-bg);
}

.promo:hover::before{ opacity: 1; }

.promo h3{
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  letter-spacing: .15em;
  color: var(--gold-light);
  margin-bottom: 12px;
}

.promo p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--promo-desc-color);
  line-height: 1.6;
}


/* ================================================= */
/* SECCIÓN NOSOTROS */
/* ================================================= */

.nosotros{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}

.nosotros-imagen{
  position: relative;
  overflow: hidden;
}

.nosotros-imagen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 8s ease;
}

/* la foto se agranda muy lentamente al pasar el cursor sobre la sección */
.nosotros:hover .nosotros-imagen img{
  transform: scale(1.09);
}

/* capa de color encima de la foto para suavizar la transición hacia el panel de texto */
.nosotros-imagen-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--nos-overlay), var(--nos-overlay-right));
}

.nosotros-panel{
  background: var(--nos-panel-bg);
  border-left: 1px solid var(--nos-panel-border);
  padding: 64px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  position: relative;
}

/* línea dorada decorativa en la parte superior del panel */
.nosotros-panel::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--nos-panel-line), transparent);
}

.nosotros-eyebrow{
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--nos-eyebrow-color);
}

.nosotros-panel h2{
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  font-style: italic;
  color: var(--nos-h2-color);
  line-height: 1.25;
  margin: 0;
}

.nosotros-panel h2 strong{
  font-style: normal;
  font-weight: 700;
  color: var(--nos-h2-strong-color);
}

.nosotros-panel p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--nos-p-color);
  line-height: 1.8;
  margin: 0;
}

.nosotros-btn{
  display: inline-block;
  margin-top: 8px;
  padding: 13px 32px;
  border: 1px solid var(--nos-btn-border);
  color: var(--nos-btn-color);
  font-family: 'Cinzel', serif;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: background .25s, color .25s;
}

/* efecto del botón al pasar el cursor encima */
.nosotros-btn:hover{
  background: var(--nos-btn-hover-bg);
  color: var(--nos-btn-hover-color);
}

/* en celular, la foto y el panel se apilan uno encima del otro */
@media (max-width: 768px){
  .nosotros{
    grid-template-columns: 1fr;
  }
  .nosotros-imagen{
    height: 260px;
  }
  .nosotros-panel{
    padding: 44px 28px;
    border-left: none;
    border-top: 1px solid var(--nos-panel-border);
  }
}


/* ================================================= */
/* PIE DE PÁGINA */
/* ================================================= */

footer{
  background: var(--footer-bg);
  color: white;
  border-top: 1px solid var(--footer-border-top);
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding: 60px 5vw 48px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.footer-col--marca{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logo{
  width: 52px;
  margin-bottom: 4px;
}

.footer-nombre{
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: .15em;
  color: var(--footer-nombre-color);
  margin: 0;
}

.footer-slogan{
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem;
  font-weight: 300;
  color: var(--footer-slogan-color);
  letter-spacing: .1em;
  margin: 0 0 10px;
}

.footer-col h5{
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--footer-h5-color);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--footer-h5-border);
}

.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col ul li,
.footer-col ul li a{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--footer-link-color);
  text-decoration: none;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color .2s;
}

.footer-col ul li i{
  color: var(--footer-icon-color);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* color del link al pasar el cursor encima */
.footer-col ul li a:hover{
  color: var(--gold-light);
}

.redes{
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

/* íconos de redes sociales (Facebook, Instagram, etc.) */
.redes a{
  color: var(--footer-social-color);
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--footer-social-border);
  border-radius: 50%;
  transition: color .25s, border-color .25s, transform .25s;
}

/* efecto de los íconos de redes al pasar el cursor encima */
.redes a:hover{
  color: var(--footer-social-hover);
  border-color: var(--footer-social-border-hover);
  transform: translateY(-3px);
}

.footer-bottom{
  border-top: 1px solid var(--footer-bottom-border);
  padding: 20px 5vw;
  text-align: center;
}

.footer-bottom p{
  font-family: 'Cormorant Garamond', serif;
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--footer-copy-color);
  text-transform: uppercase;
  margin: 0;
}

/* en pantallas medianas, el pie pasa a dos columnas */
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

/* en celular, el pie pasa a una sola columna */
@media (max-width: 520px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ================================================= */
/* AJUSTES PARA CELULAR */
/* ================================================= */

@media (max-width: 768px){

  .hero-texto h2{
    font-size: clamp(1.3rem, 6vw, 2rem);
  }

  .contenedor-carrusel{
    width: 95%;
  }

  .producto{
    min-width: 180px;
  }

  .producto img{
    height: 140px;
  }

}


/* ================================================= */
/* IMAGEN GRANDE DEL CATÁLOGO (la foto de bienvenida en la página del catálogo) */
/* ================================================= */

.cat-hero{
  background:
    radial-gradient(ellipse at 50% 60%, var(--cat-hero-bg-center) 0%, var(--cat-hero-bg-edge) 70%),
    var(--cat-hero-bg-base);
  padding: 80px 5vw 60px;
  text-align: center;
  border-bottom: 1px solid var(--cat-hero-border);
  position: relative;
  overflow: hidden;
}

.cat-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 100px,
    var(--cat-hero-stripe) 100px,
    var(--cat-hero-stripe) 101px
  );
}

.cat-hero-content{
  position: relative;
  z-index: 1;
}

.cat-eyebrow{
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}

.cat-hero h1{
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cream);
  margin: 0 0 14px;
  text-shadow: 0 2px 24px var(--cat-hero-h1-shadow);
}

.cat-hero p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--cat-hero-sub-color);
  margin: 0;
}


/* ================================================= */
/* BARRA DE FILTROS DEL CATÁLOGO */
/* ================================================= */

.cat-filtros{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 36px 5vw;
  background: var(--cat-filtros-bg);
  border-bottom: 1px solid var(--cat-filtros-border);
  position: sticky;
  top: 64px;
  z-index: 100;
}

.filtro{
  background: none;
  border: 1px solid var(--cat-filtro-border);
  color: var(--cat-filtro-color);
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* efecto de un botón de filtro al pasar el cursor encima */
.filtro:hover{
  border-color: var(--cat-filtro-hover-border);
  color: var(--cat-filtro-hover-color);
}

/* estilo del botón de filtro que está seleccionado actualmente */
.filtro.activo{
  background: var(--cat-filtro-activo-bg);
  border-color: var(--cat-filtro-activo-bg);
  color: var(--cat-filtro-activo-color);
}


/* ================================================= */
/* ÁREA PRINCIPAL DEL CATÁLOGO */
/* ================================================= */

.cat-main{
  background: var(--cat-main-bg);
  padding: 60px 5vw 80px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}


/* ================================================= */
/* CADA CATEGORÍA DENTRO DEL CATÁLOGO (ej. "WHISKIES") */
/* ================================================= */

.cat-seccion{
  transition: opacity .3s;
}

/* categoría oculta cuando se filtra por otra */
.cat-seccion.oculto{
  display: none;
}

.cat-seccion-titulo{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cat-sec-border);
}

.cat-seccion-titulo i{
  color: var(--cat-sec-icon-color);
  font-size: 1.1rem;
}

.cat-seccion-titulo h2{
  font-family: 'Cinzel', serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--cat-sec-titulo-color);
  margin: 0;
  flex: 1;
}

/* línea decorativa que se extiende a la derecha del título */
.cat-seccion-titulo::after{
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--cat-sec-line), transparent);
}


/* ================================================= */
/* CUADRÍCULA DE PRODUCTOS */
/* ================================================= */

.cat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 24px;
}


/* ================================================= */
/* TARJETA INDIVIDUAL DE PRODUCTO */
/* ================================================= */

.cat-card{
  background: linear-gradient(160deg, var(--cat-card-bg-from) 0%, var(--cat-card-bg-to) 100%);
  border: 1px solid var(--cat-card-border);
  border-radius: 2px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative;
}

/* línea dorada que aparece arriba de la tarjeta al pasar el cursor */
.cat-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--cat-card-line), transparent);
  opacity: 0;
  transition: opacity .3s;
}

/* efecto al pasar el cursor encima de una tarjeta de producto */
.cat-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 50px var(--cat-card-hover-shadow), 0 0 20px var(--cat-card-hover-glow);
  border-color: var(--cat-card-hover-border);
}

.cat-card:hover::before{
  opacity: 1;
}

/* recuadro blanco donde se muestra la foto del producto */
.cat-img{
  background: var(--cat-img-bg);
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}

.cat-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s ease;
}

/* la foto se agranda un poco al pasar el cursor encima */
.cat-card:hover .cat-img img{
  transform: scale(1.07);
}

/* área de texto debajo de la foto (nombre, categoría, precio) */
.cat-info{
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-info h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cat-nombre-color);
  margin: 0;
  line-height: 1.3;
}

/* etiqueta pequeña de categoría (ej. "WHISKY", "VINO") */
.cat-tag{
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cat-tag-color);
  border: 1px solid var(--cat-tag-border);
  padding: 2px 8px;
  align-self: flex-start;
}

/* variante de la etiqueta para productos "cuartito" */
.cat-tag--cuartito{
  color: var(--cat-tag-cuartito-color);
  border-color: var(--cat-tag-cuartito-border);
}

.cat-volumen{
  font-family: 'Cormorant Garamond', serif;
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--cat-volumen-color);
}

.cat-precio{
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cat-precio-color);
  margin-top: 2px;
}


/* ================================================= */
/* AJUSTES DEL CATÁLOGO EN CELULAR */
/* ================================================= */

@media (max-width: 600px){
  .cat-grid{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }

  .cat-img{
    height: 140px;
  }

  .cat-filtros{
    top: 58px;
    gap: 8px;
  }

  .filtro{
    padding: 8px 14px;
    font-size: .65rem;
  }
}


/* ================================================= */
/* PÁGINA DE TÉRMINOS Y CONDICIONES */
/* ================================================= */

/* imagen grande superior de la página de términos */
.terminos-hero{
  background:
    radial-gradient(ellipse at 50% 60%, var(--ter-hero-bg-center) 0%, var(--ter-hero-bg-edge) 70%),
    var(--ter-hero-bg-base);
  padding: 80px 5vw 60px;
  text-align: center;
  border-bottom: 1px solid var(--ter-hero-border);
  position: relative;
  overflow: hidden;
}

.terminos-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 100px,
    var(--ter-hero-stripe) 100px,
    var(--ter-hero-stripe) 101px
  );
}

.terminos-hero-content{
  position: relative;
  z-index: 1;
}

.terminos-hero h1{
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cream);
  margin: 0 0 14px;
  text-shadow: 0 2px 24px var(--ter-hero-h1-shadow);
}

.terminos-hero p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ter-hero-sub-color);
  margin: 0;
}

/* área con el contenido de los términos */
.terminos-main{
  background: var(--ter-main-bg);
  padding: 70px 5vw 90px;
  max-width: 860px;
  margin: 0 auto;
}

.terminos-intro{
  text-align: center;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.terminos-intro p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--ter-intro-color);
  line-height: 1.8;
  max-width: 600px;
  margin: 0;
}

/* círculo con el símbolo "+18" */
.badge-18{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--ter-badge-border);
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ter-badge-color);
  box-shadow: 0 0 20px var(--ter-badge-shadow);
}

.terminos-lista{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* cada bloque individual de término */
.termino-item{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: linear-gradient(145deg, var(--ter-item-bg-from) 0%, var(--ter-item-bg-to) 100%);
  border: 1px solid var(--ter-item-border);
  padding: 28px 32px;
  position: relative;
  transition: border-color .3s, transform .3s;
}

/* línea dorada que aparece a la izquierda al pasar el cursor */
.termino-item::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ter-item-line), transparent);
  opacity: 0;
  transition: opacity .3s;
}

/* efecto al pasar el cursor encima de un término */
.termino-item:hover{
  border-color: var(--ter-item-hover-border);
  transform: translateX(4px);
}

.termino-item:hover::before{
  opacity: 1;
}

/* círculo con el ícono de cada término */
.termino-icono{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ter-icono-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ter-icono-color);
  font-size: 1rem;
}

.termino-texto h3{
  font-family: 'Cinzel', serif;
  font-size: .85rem;
  letter-spacing: .2em;
  color: var(--ter-titulo-color);
  margin: 0 0 10px;
  text-transform: uppercase;
}

.termino-texto p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ter-texto-color);
  line-height: 1.75;
  margin: 0;
}

/* en celular, el ícono y el texto se apilan uno encima del otro */
@media (max-width: 600px){
  .termino-item{
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }
}