/* RESET GLOBAL */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── VARIABLES DE COLOR --maroon → Vino oscuro principal (header, bordes, iconos) --maroon-mid → Vino un poco más claro (hover de iconos) --maroon-light → Vino muy pálido (fondo de icono web y badges Tata) --olive → Verde oliva (línea decorativa, badges Cooking GT) --olive-light → Verde oliva muy pálido (fondo icono catálogo) --cream → Crema cálido (fondo general de la página) --dark → Casi negro (texto principal de las tarjetas) --mid → Gris-vino medio (subtítulos y footer) --light → Gris claro (flechas, etiquetas de sección) --white → Blanco puro (fondo de tarjetas) */ :root { --maroon: #6E2C2F; --maroon-mid: #8a3a3d; --maroon-light: #f5eaea; --olive: #8A8F3A; --olive-light: #f0f1e0; --cream: #FAF8F5; --dark: #2a1a1a; --mid: #6a5050; --light: #b8a8a8; --white: #FFFFFF; } /* ESTILOS BASE DEL DOCUMENTO html, body los dos contenedores raíz de toda la página. min-height: 100% la página ocupa al menos toda la pantalla background: cream color de fondo general (crema) font-family fuente base para todo el texto */ html, body { min-height: 100%; background: var(--cream); font-family: 'DM Sans', sans-serif; /* fuente importada desde Google Fonts en el */ } /* body funciona como contenedor flex vertical para centrar horizontalmente todo el contenido */ body { display: flex; flex-direction: column; /* apila elementos de arriba hacia abajo */ align-items: center; /* centra horizontalmente cada hijo */ padding: 0 0 48px; /* espacio al fondo de la página */ } /* BANNER FOTOGRÁFICO HTML:
en index.html Contiene: la foto de las instalaciones */ .photo-banner { width: 100%; /* ocupa todo el ancho de la pantalla */ height: 220px; /* altura fija del banner */ overflow: hidden; /* recorta la imagen si es más grande que el div */ position: relative; /* necesario para que el ::after (degradado) se posicione encima */ flex-shrink: 0; /* aqui evita el banner que se comprima en pantallas pequeñas */ } /* La imagen dentro del banner */ .photo-banner img { width: 100%; height: 100%; object-fit: cover; /* recorta la imagen para llenar el espacio sin deformarla */ object-position: center 60%; /* centra la imagen pero baja el punto focal al 60% */ display: block; /* elimina el espacio extra que los navegadores ponen bajo imágenes */ } .photo-banner::after { content: ''; /* necesario para que ::after aparezca */ position: absolute; /* se posiciona encima de la imagen */ bottom: 0; left: 0; right: 0; height: 90px; /* altura del degradado */ /* degradado de transparente (arriba) a vino oscuro (abajo), para que el banner se funda con el header */ background: linear-gradient(to bottom, transparent, #6E2C2F); } .header { width: 100%; background: var(--maroon); /* fondo vino oscuro */ padding: 20px 24px 32px; /* espacio interno: arriba lados abajo */ display: flex; flex-direction: column; /* apila los hijos verticalmente */ align-items: center; /* centra cada hijo horizontalmente */ gap: 10px; /* espacio entre cada elemento hijo */ position: relative; /* necesario para los círculos decorativos ::before y ::after */ overflow: hidden; /* recorta los círculos que salen del borde del header */ } /* Círculo decorativo superior derecho (efecto sutil de profundidad) */ .header::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; /* hace el div un círculo */ background: rgba(255,255,255,0.04); /* blanco casi invisible */ } /* Círculo decorativo inferior izquierdo (tono oliva suave) */ .header::after { content: ''; position: absolute; bottom: -30px; left: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(138,143,58,0.15); /* oliva translúcido */ } /* LOGO CIRCULAR HTML:
El div recorta la imagen en forma circular */ .logo-mark { width: 72px; height: 72px; border-radius: 50%; /* convierte el div en círculo */ background: transparent; border: none; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; /* aparece encima de los círculos decorativos ::before y ::after */ overflow: hidden; /* recorta la imagen al círculo */ } /* La imagen del logo dentro del círculo */ .logo-mark img { width: 100%; height: 100%; object-fit: cover; /* rellena el círculo sin deformar la imagen */ border-radius: 50%; } /* NOMBRE DE LA EMPRESA HTML:
HBSCS, S.A.
*/ .header-brand { font-family: 'Playfair Display', serif; /* fuente serif elegante para el nombre */ font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 0.5px; /* espaciado entre letras, da sensación de distinción */ position: relative; z-index: 1; } /* TAGLINE / DESCRIPCIÓN HTML:
Ser un aliado...
Texto descriptivo en cursiva debajo del nombre */ .header-tagline { font-family: 'Cormorant Garamond', serif; /* fuente serif de estilo clásico */ font-size: 15px; font-style: italic; /* texto en cursiva */ color: rgba(255,255,255,0.78); /* blanco con 78% de opacidad */ font-weight: 400; text-align: center; max-width: 300px; /* limita el ancho para mejor legibilidad */ line-height: 1.55; /* espaciado entre líneas del párrafo */ position: relative; z-index: 1; } /* SUBTÍTULO "Productos de Guatemala" HTML:
Productos de Guatemala
*/ .header-sub { font-size: 10px; color: rgba(255,255,255,0.45); /* blanco muy tenue */ font-weight: 300; letter-spacing: 2px; /* texto muy espaciado, estilo etiqueta */ text-transform: uppercase; position: relative; z-index: 1; margin-top: 2px; } /*LÍNEA DECORATIVA OLIVA HTML:
Se usa tanto en el header como en el footer */ .olive-line { width: 40px; height: 2px; background: var(--olive); /* verde oliva */ border-radius: 2px; position: relative; z-index: 1; } /* SECCIÓN: CONTENEDOR PRINCIPAL DE LINKS HTML:
en index.html Es el "wrapper" que contiene todas las tarjetas de links, las etiquetas de sección, los badges y los divisores. */ .container { width: 100%; max-width: 480px; /* máximo ancho en pantallas grandes (centrado) */ padding: 28px 20px 0; /* espacio interno: arriba | lados | sin espacio abajo */ display: flex; flex-direction: column; /* apila todos los elementos verticalmente */ gap: 10px; /* espacio entre cada elemento hijo */ } /* ETIQUETA DE SECCIÓN HTML:
General
Pequeños títulos en mayúsculas que agrupan los links */ .section-label { font-size: 10px; letter-spacing: 2px; /* espaciado amplio, estilo "label" */ text-transform: uppercase; color: var(--light); /* gris claro */ font-weight: 500; padding: 0 4px; margin-top: 8px; margin-bottom: -2px; /* acerca la etiqueta a la tarjeta que le sigue */ } /* TARJETA DE LINK (.link-card) HTML: en index.html Cada tarjeta contiene: - .card-icon → ícono de color - .card-text → título y subtítulo - .card-arrow → flecha "›" */ .link-card { display: flex; /* ícono | texto | flecha en fila horizontal */ align-items: center; /* alinea verticalmente al centro */ gap: 14px; /* espacio entre ícono, texto y flecha */ background: #fff; border: 1px solid rgba(110,44,47,0.10); /* borde vino muy suave */ border-radius: 14px; /* esquinas redondeadas */ padding: 14px 16px; text-decoration: none; /* quita el subrayado de los enlaces */ color: var(--dark); /* animación de entrada al cargar la página (definida en @keyframes fadeUp) */ animation: fadeUp 0.4s ease both; /* transición suave para el efecto hover */ transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } /* Efecto al pasar el mouse encima de la tarjeta */ .link-card:hover { transform: translateY(-2px); /* sube 2px */ box-shadow: 0 6px 20px rgba(110,44,47,0.10); /* sombra vino suave */ border-color: rgba(110,44,47,0.20); /* borde un poco más visible */ } /* Efecto al hacer clic en la tarjeta */ .link-card:active { transform: translateY(0); /* vuelve a su posición original */ box-shadow: none; } /* ── ÍCONO DE LA TARJETA HTML:
(o icon-ig, icon-fb, etc.) Cuadrado redondeado de color que contiene el SVG del ícono. El color de fondo varía según la clase adicional (ver abajo). */ .card-icon { width: 42px; height: 42px; border-radius: 10px; /* esquinas redondeadas del cuadrado */ flex-shrink: 0; /* evita que el ícono se comprima si el texto es largo */ display: flex; align-items: center; justify-content: center; font-size: 18px; } /* Tamaño del SVG dentro del ícono */ .card-icon svg { width: 20px; height: 20px; } /* TEXTO DE LA TARJETA HTML:
...
...
*/ /* Contenedor del texto ocupa todo el espacio disponible entre ícono y flecha */ .card-text { flex: 1; /* crece para llenar el espacio disponible */ } /* Título principal de la tarjeta */ .card-title { font-size: 14px; font-weight: 500; color: var(--dark); line-height: 1.3; } /* Subtítulo / descripción secundaria */ .card-sub { font-size: 12px; color: var(--mid); /* gris-vino medio */ font-weight: 300; margin-top: 1px; } /* FLECHA DE LA TARJETA */ .card-arrow { color: var(--light); /* gris claro */ font-size: 16px; flex-shrink: 0; /* no se comprime */ } /*COLORES DE ÍCONOS */ /* Ícono de sitio web — fondo vino pálido, ícono vino */ .icon-web { background: var(--maroon-light); color: var(--maroon); } /* Ícono de Instagram — fondo rosado (el color viene del SVG con degradado) */ .icon-ig { background: #fce4ec; } /* Ícono de Facebook — fondo azul muy pálido (el color viene del SVG) */ .icon-fb { background: #e3f2fd; } /* Ícono de WhatsApp — fondo verde muy pálido (el color viene del SVG) */ .icon-wa { background: #e8f5e9; } /* Ícono de catálogo — fondo oliva pálido, ícono oliva oscuro */ .icon-catalog { background: var(--olive-light); color: #4f541a; } /* BADGE DE MARCA (.brand-badge) HTML:
- Tata Mash
Pequeña etiqueta de color que identifica cada sub-marca. Se combina con .badge-tata o .badge-cooking según la marca. */ .brand-badge { display: inline-flex; /* se ajusta al contenido, no ocupa todo el ancho */ align-items: center; gap: 5px; font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 20px; /* muy redondeado (tipo "pill") */ margin-bottom: -4px; /* acerca el badge a la primera tarjeta de esa marca */ align-self: flex-start; /* no se estira al ancho del contenedor */ margin-left: 4px; } /* Badge de Tata Mash — fondo vino pálido, texto vino */ .badge-tata { background: var(--maroon-light); color: var(--maroon); border: 1px solid rgba(110,44,47,0.25); } /* Badge de Cooking GT fondo oliva pálido, texto oliva oscuro */ .badge-cooking { background: var(--olive-light); color: #4f541a; border: 1px solid rgba(138,143,58,0.30); } .divider { height: 1px; background: rgba(110,44,47,0.08); /* línea vino muy sutil */ margin: 6px 4px; } .footer { margin-top: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } /* Nombre de empresa en el footer */ .footer-logo { font-family: 'Playfair Display', serif; font-size: 13px; color: var(--mid); /* gris-vino medio */ font-weight: 500; } /* URL en el footer */ .footer-url { font-size: 11px; color: var(--light); /* gris claro */ font-weight: 300; } @keyframes fadeUp { from { opacity: 0; /* inicia invisible */ transform: translateY(12px); /* inicia 12px más abajo */ } to { opacity: 1; /* termina visible */ transform: translateY(0); /* termina en su posición normal */ } } .link-card:nth-child(1) { animation-delay: 0.05s; } .link-card:nth-child(2) { animation-delay: 0.10s; } .link-card:nth-child(3) { animation-delay: 0.15s; } .link-card:nth-child(4) { animation-delay: 0.20s; } .link-card:nth-child(5) { animation-delay: 0.25s; } .link-card:nth-child(6) { animation-delay: 0.30s; } .link-card:nth-child(7) { animation-delay: 0.35s; } @media (max-width: 380px) { .header-brand { font-size: 20px; } /* nombre empresa más pequeño */ .card-title { font-size: 13px; } /* títulos de tarjeta más pequeños */ .container { padding: 22px 14px 0; } /* menos padding lateral */ .photo-banner { height: 180px; } /* banner fotográfico menos alto */ }