/* ============================================================ DANANN ART — HOJA DE ESTILOS PRINCIPAL ============================================================ TODO lo que necesitas para cambiar el aspecto gráfico de la web está agrupado aquí arriba, en :root. No hace falta tocar el resto del archivo para cambiar colores o tipografías. ============================================================ */ :root { /* ---------- COLORES ---------- Extraídos del logotipo de Danann Art (verde oliva + dorado). Cambia estos códigos hexadecimales para recolorear TODA la web de golpe. */ --color-fondo: #FAF8F2; /* fondo general (blanco cálido, como el logo) */ --color-fondo-oscuro: #333A1C; /* verde oliva oscuro del logo (cabecera oscura, footer) */ --color-texto: #24261C; /* color de texto principal */ --color-texto-claro: #FAF8F2; /* texto sobre fondos oscuros */ --color-texto-suave: #6B6A5C; /* texto secundario / descripciones */ --color-acento: #D98F1F; /* dorado del logo — detalles, precios, botones */ --color-acento-suave: #E8B565; /* variante clara del dorado */ --color-plata: #B7B7AE; /* gris del motivo ondulado del logo */ --color-verde-patina: #5C6B34; /* verde intermedio del logo — etiquetas de colección */ --color-borde: #E2DED0; /* líneas divisorias suaves */ --color-blanco: #FFFFFF; /* ---------- TIPOGRAFÍA ---------- Cambia el nombre de la fuente aquí y se aplicará en toda la web. Recuerda actualizar también el enlace de Google Fonts en el de cada página HTML si usas otra fuente. */ --fuente-titulares: "Fraunces", "Georgia", serif; --fuente-cuerpo: "Work Sans", "Helvetica Neue", Arial, sans-serif; --fuente-utilidad: "Work Sans", Arial, sans-serif; /* etiquetas, precios, menú */ --tam-base: 17px; --interlineado-titular: 1.05; --interlineado-cuerpo: 1.65; --espaciado-mayusculas: 0.14em; /* ---------- ESTRUCTURA ---------- */ --ancho-maximo: 1240px; --radio-borde: 2px; /* casi sin redondeo: joyería = líneas limpias */ --transicion: 0.35s cubic-bezier(.4,0,.2,1); } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-cuerpo); font-size: var(--tam-base); line-height: var(--interlineado-cuerpo); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--fuente-titulares); font-weight: 500; line-height: var(--interlineado-titular); margin: 0 0 0.5em 0; color: var(--color-texto); } h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 400; } h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); } h3 { font-size: 1.3rem; } p { margin: 0 0 1em 0; color: var(--color-texto-suave); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .contenedor { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 32px; } .etiqueta { font-family: var(--fuente-utilidad); text-transform: uppercase; letter-spacing: var(--espaciado-mayusculas); font-size: 0.72rem; color: var(--color-acento); font-weight: 600; } .seccion { padding: 96px 0; } .seccion--compacta { padding: 56px 0; } .seccion--oscura { background: var(--color-fondo-oscuro); color: var(--color-texto-claro); } .seccion--oscura p { color: #B9B5AA; } .seccion--oscura h2, .seccion--oscura h3 { color: var(--color-texto-claro); } /* Divisor "grabado" — motivo de línea inspirado en los geoglifos de Nazca y el trazo continuo de los nudos celtas. Elemento distintivo de la marca, se anima al entrar en pantalla. */ .divisor-grabado { width: 100%; height: 40px; margin: 0 auto; display: block; } .divisor-grabado path { fill: none; stroke: var(--color-plata); stroke-width: 1; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s ease; } .divisor-grabado.visible path { stroke-dashoffset: 0; } /* ============================================================ CABECERA — presente en todas las páginas ============================================================ */ .cabecera { position: sticky; top: 0; z-index: 100; background: rgba(244,241,234,0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-borde); } .cabecera__interior { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; max-width: var(--ancho-maximo); margin: 0 auto; } .cabecera__logo { display: flex; align-items: center; gap: 12px; } .cabecera__logo img { height: clamp(30px, 5.2vw, 46px); /* alto del logotipo — ajusta aquí */ width: auto; max-width: 46vw; object-fit: contain; } .cabecera__logo-texto { display: none; /* sólo se muestra por JS si el logotipo no llega a cargar */ font-family: var(--fuente-titulares); font-size: 1.35rem; letter-spacing: 0.02em; } .cabecera__logo-texto span { color: var(--color-acento); } .cabecera__nav { display: flex; align-items: center; gap: 34px; } .cabecera__nav a { font-family: var(--fuente-utilidad); font-size: 0.85rem; text-transform: uppercase; letter-spacing: var(--espaciado-mayusculas); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color var(--transicion), color var(--transicion); } .cabecera__nav a:hover, .cabecera__nav a.activo { border-color: var(--color-acento); color: var(--color-acento); } .cabecera__acciones { display: flex; align-items: center; gap: 18px; } .selector-moneda { font-family: var(--fuente-utilidad); font-size: 0.85rem; border: 1px solid var(--color-borde); background: var(--color-blanco); padding: 6px 10px; border-radius: var(--radio-borde); cursor: pointer; } .cabecera__carrito { position: relative; font-family: var(--fuente-utilidad); font-size: 0.85rem; display: flex; align-items: center; gap: 6px; } .cabecera__carrito-contador { background: var(--color-acento); color: var(--color-texto-claro); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; } .menu-movil-btn { display: none; background: none; border: none; cursor: pointer; } @media (max-width: 860px) { .cabecera__nav { display: none; } .menu-movil-btn { display: block; } } /* ============================================================ HERO ============================================================ */ .hero { min-height: 86vh; display: flex; align-items: center; position: relative; overflow: hidden; background: var(--color-fondo-oscuro); color: var(--color-texto-claro); } .hero__patron { position: absolute; inset: 0; opacity: 0.16; background-repeat: repeat; background-size: 260px; pointer-events: none; } .hero__contenido { position: relative; z-index: 2; max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 32px; width: 100%; } .hero__eyebrow { font-family: var(--fuente-utilidad); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.75rem; color: var(--color-acento-suave); display: block; margin-bottom: 22px; } .hero h1 { color: var(--color-texto-claro); max-width: 780px; } .hero__subtitulo { color: #C9C5B9; max-width: 520px; font-size: 1.08rem; margin-top: 18px; } .hero__acciones { margin-top: 40px; display: flex; gap: 18px; flex-wrap: wrap; } /* ============================================================ BOTONES ============================================================ */ .boton { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fuente-utilidad); text-transform: uppercase; letter-spacing: var(--espaciado-mayusculas); font-size: 0.82rem; padding: 15px 30px; border-radius: var(--radio-borde); border: 1px solid transparent; cursor: pointer; transition: all var(--transicion); } .boton--primario { background: var(--color-acento); color: var(--color-texto-claro); } .boton--primario:hover { background: #964313; } .boton--fantasma { border-color: var(--color-plata); color: var(--color-texto-claro); } .boton--fantasma:hover { border-color: var(--color-texto-claro); } .boton--oscuro { border-color: var(--color-fondo-oscuro); color: var(--color-fondo-oscuro); } .boton--oscuro:hover { background: var(--color-fondo-oscuro); color: var(--color-texto-claro); } /* ============================================================ COLECCIONES (las 4 culturas) ============================================================ */ .colecciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-borde); border: 1px solid var(--color-borde); } .coleccion-card { background: var(--color-fondo); padding: 44px 30px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; transition: background var(--transicion); } .coleccion-card:hover { background: var(--color-blanco); } .coleccion-card__num { font-family: var(--fuente-titulares); font-size: 0.85rem; color: var(--color-verde-patina); } .coleccion-card h3 { margin-top: 20px; } .coleccion-card__link { margin-top: 26px; font-family: var(--fuente-utilidad); font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--espaciado-mayusculas); color: var(--color-acento); } @media (max-width: 900px) { .colecciones { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .colecciones { grid-template-columns: 1fr; } } /* ============================================================ CATÁLOGO / PRODUCTOS ============================================================ */ .filtros-catalogo { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; } .filtro-btn { font-family: var(--fuente-utilidad); font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--espaciado-mayusculas); padding: 10px 18px; border: 1px solid var(--color-borde); background: transparent; border-radius: 999px; cursor: pointer; transition: all var(--transicion); } .filtro-btn.activo, .filtro-btn:hover { background: var(--color-fondo-oscuro); color: var(--color-texto-claro); border-color: var(--color-fondo-oscuro); } .grid-productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; } @media (max-width: 900px) { .grid-productos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-productos { grid-template-columns: 1fr; } } .tarjeta-producto { display: flex; flex-direction: column; } .tarjeta-producto__imagen { aspect-ratio: 1 / 1.1; background: var(--color-blanco); border: 1px solid var(--color-borde); overflow: hidden; position: relative; } .tarjeta-producto__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .tarjeta-producto:hover .tarjeta-producto__imagen img { transform: scale(1.06); } .tarjeta-producto__coleccion { position: absolute; top: 14px; left: 14px; font-family: var(--fuente-utilidad); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; background: var(--color-fondo-oscuro); color: var(--color-texto-claro); padding: 5px 10px; border-radius: 999px; } .tarjeta-producto__info { padding-top: 16px; display: flex; flex-direction: column; gap: 4px; } .tarjeta-producto__info h3 { font-size: 1.08rem; } .tarjeta-producto__desc { font-size: 0.88rem; margin-bottom: 6px; } .tarjeta-producto__precio { font-family: var(--fuente-utilidad); font-size: 1rem; color: var(--color-acento); font-weight: 600; } .tarjeta-producto__precio .precio-tachado { color: var(--color-texto-suave); text-decoration: line-through; font-weight: 400; margin-right: 6px; } .tarjeta-producto__anadir { margin-top: 12px; align-self: flex-start; font-family: var(--fuente-utilidad); font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--espaciado-mayusculas); border: 1px solid var(--color-texto); background: transparent; padding: 10px 18px; cursor: pointer; transition: all var(--transicion); } .tarjeta-producto__anadir:hover { background: var(--color-texto); color: var(--color-texto-claro); } /* ============================================================ PÁGINA DE PRODUCTO / MODAL ============================================================ */ .detalle-producto { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } @media (max-width: 800px) { .detalle-producto { grid-template-columns: 1fr; } } /* ============================================================ CARRITO ============================================================ */ .tabla-carrito { width: 100%; border-collapse: collapse; margin-bottom: 40px; } .tabla-carrito th { text-align: left; font-family: var(--fuente-utilidad); text-transform: uppercase; font-size: 0.72rem; letter-spacing: var(--espaciado-mayusculas); color: var(--color-texto-suave); border-bottom: 1px solid var(--color-borde); padding-bottom: 12px; } .tabla-carrito td { padding: 18px 8px; border-bottom: 1px solid var(--color-borde); vertical-align: middle; } .tabla-carrito__producto { display: flex; align-items: center; gap: 16px; } .tabla-carrito__producto img { width: 66px; height: 66px; object-fit: cover; border: 1px solid var(--color-borde); } .tabla-carrito__eliminar { color: var(--color-acento); font-size: 0.8rem; cursor: pointer; background: none; border: none; font-family: var(--fuente-utilidad); } .tabla-carrito input[type="number"] { width: 56px; padding: 6px; border: 1px solid var(--color-borde); font-family: var(--fuente-utilidad); } .resumen-carrito { max-width: 380px; margin-left: auto; border: 1px solid var(--color-borde); padding: 30px; background: var(--color-blanco); } .resumen-carrito__linea { display: flex; justify-content: space-between; margin-bottom: 12px; font-family: var(--fuente-utilidad); font-size: 0.92rem; } .resumen-carrito__total { font-size: 1.2rem; font-weight: 600; border-top: 1px solid var(--color-borde); padding-top: 14px; margin-top: 6px; } #contenedor-boton-paypal { margin-top: 24px; } .carrito-vacio { text-align: center; padding: 80px 0; } /* ============================================================ SOBRE NOSOTROS / PROCESO ============================================================ */ .dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } @media (max-width: 800px) { .dos-columnas { grid-template-columns: 1fr; gap: 40px; } } .imagen-marco { border: 1px solid var(--color-borde); padding: 14px; background: var(--color-blanco); } .lista-valores { list-style: none; margin: 0; padding: 0; } .lista-valores li { padding: 22px 0; border-bottom: 1px solid var(--color-borde); } .lista-valores h4 { font-family: var(--fuente-titulares); font-size: 1.1rem; margin-bottom: 6px; } /* ============================================================ CONTACTO / FORMULARIO ============================================================ */ .formulario-contacto { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .campo { display: flex; flex-direction: column; gap: 8px; } .campo label { font-family: var(--fuente-utilidad); text-transform: uppercase; font-size: 0.72rem; letter-spacing: var(--espaciado-mayusculas); color: var(--color-texto-suave); } .campo input, .campo textarea { font-family: var(--fuente-cuerpo); font-size: 1rem; padding: 13px 14px; border: 1px solid var(--color-borde); background: var(--color-blanco); border-radius: var(--radio-borde); } .campo textarea { min-height: 140px; resize: vertical; } /* ============================================================ PIE DE PÁGINA — presente en todas las páginas ============================================================ */ .pie { background: var(--color-fondo-oscuro); color: #B9B5AA; padding: 70px 0 30px; } .pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; } @media (max-width: 800px) { .pie__grid { grid-template-columns: 1fr 1fr; } } .pie__marca { font-family: var(--fuente-titulares); font-size: 1.4rem; color: var(--color-texto-claro); margin-bottom: 14px; } .pie h5 { font-family: var(--fuente-utilidad); text-transform: uppercase; letter-spacing: var(--espaciado-mayusculas); font-size: 0.75rem; color: var(--color-texto-claro); margin-bottom: 16px; } .pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pie a:hover { color: var(--color-texto-claro); } .pie__inferior { border-top: 1px solid #3A3A3E; padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; } /* ============================================================ AVISO / TOAST (confirmación añadir al carrito) ============================================================ */ .aviso-toast { position: fixed; bottom: 30px; right: 30px; background: var(--color-fondo-oscuro); color: var(--color-texto-claro); padding: 16px 24px; border-radius: var(--radio-borde); font-family: var(--fuente-utilidad); font-size: 0.88rem; transform: translateY(140%); transition: transform var(--transicion); z-index: 999; } .aviso-toast.mostrar { transform: translateY(0); } /* Utilidad: revelado al hacer scroll */ .al-entrar { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .al-entrar.visible { opacity: 1; transform: translateY(0); }