/* Theme Name: Apartamentos Pirineum Theme URI: https://omniaestudio.es/ Description: Tema hijo de GeneratePress para Apartamentos Pirineum (Sallent de Gállego). Desarrollado a medida por Agencia Omnia (desarrollo web, SEO y paid media). Sistema de reservas, establecimientos y apartamentos con ACF + PHP, paleta y tipografía (Poppins) según la Guía de Marca oficial, y componentes estacionales verano/invierno. Author: Agencia Omnia Author URI: https://omniaestudio.es/ Template: generatepress Version: 1.2.7 Text Domain: pirineum */ /* ========================================================================== TOKENS DE DISEÑO Valores extraídos del archivo Figma "Apartamentos Sallent". Paleta: verde salvia / oliva + cremas cálidas + casi-negro cálido. ========================================================================== */ :root { /* --- Marca / verdes (HEX OFICIALES de la Guía de Marca) --- */ --pir-green: #4c563e; /* verde oliva PRINCIPAL — botones, enlaces (RAL 6003) */ --pir-green-600: #414a35; /* hover (oliva ligeramente más oscuro) */ --pir-green-700: #31392a; /* forest oscuro — footer, secciones dark (RAL 6020) */ --pir-green-800: #232a1e; /* casi negro cálido (derivado del forest) */ --pir-green-soft: #788267; /* verde medio — texto secundario (RAL 7033) */ --pir-green-muted: #969581; /* verde salvia claro — bordes, captions (RAL 7034) */ /* --- Cremas / neutros claros --- */ --pir-cream: #dadfd9; /* crema/gris claro OFICIAL — fondo (RAL 9002) */ --pir-cream-200: #eceee9; /* crema aclarada para tarjetas / fondo alterno */ --pir-sand: #cfd3cb; /* neutro cálido apagado (derivado) */ --pir-paper: #f6f7f4; /* blanco roto para bloques de contenido */ /* --- Fondos ESTACIONALES (cambian con el toggle Verano/Invierno) ----- Valores por defecto = VERANO. La clase .pir-season-invierno en los reemplaza por los de invierno (ver más abajo). */ --pir-page-bg: #e7e1d1; /* fondo de página — verano */ --pir-header-bg: #f3ebe3; /* barra del header — verano */ --pir-map-overlay: #dbb590; /* capa del mapa (30%) — verano */ --pir-mapsec-bg: #f3ebe3; /* fondo de la sección del mapa — verano */ /* --- Paleta EXTENDIDA (de los diseños de componentes reales) -------- Estos valores NO están en la Guía de Marca base pero aparecen en los diseños definitivos de botones/tarjetas/reseñas. Se mantienen exactos. */ --pir-teal: #0d4f48; /* teal oscuro — HOVER de botones */ --pir-black: #000000; /* negro — estado por defecto de botones */ --pir-cream-card: #f3ebe3; /* crema cálido — fondo de tarjetas y reseñas */ --pir-text-warm: #524639; /* marrón cálido oscuro — texto de descripción (AAA 7.01:1) */ --pir-text-eyebrow: #474540; /* gris oscuro — eyebrows / metadatos (AAA 7.34:1) */ /* --- Texto --- */ --pir-ink: #31392a; /* titulares / texto principal (forest oficial) */ --pir-ink-soft: #4c563e; /* texto cuerpo (oliva principal) */ --pir-white: #ffffff; /* --- Semánticos --- */ --pir-bg: var(--pir-cream); --pir-surface: var(--pir-paper); --pir-text: var(--pir-ink); --pir-text-muted: var(--pir-green-soft); --pir-accent: var(--pir-green); --pir-border: rgba(49, 57, 42, 0.14); /* --- Colores de texto accesibles (contraste AAA ≥ 7:1) --- Los verdes/marrones claros de marca (green-soft, green-muted, text-warm) son decorativos y NO alcanzan contraste suficiente como texto sobre los fondos claros del sitio. Para texto usamos estas variantes oscurecidas, que mantienen el tono de marca y cumplen AAA sobre paper, cream-card y el fondo del cuerpo. Los originales se siguen usando sobre fondos oscuros (footer, panel de reservas…), donde sí contrastan. */ --pir-green-text: #3f4834; /* sustituye a green-soft en texto (7.35:1) */ --pir-warm-text: #524639; /* sustituye a text-warm en texto (7.01:1) */ --pir-eyebrow-text: #474540; /* sustituye a text-eyebrow (7.34:1) */ /* --- Tipografía (Guía de Marca: Poppins para todos los textos) --- */ --pir-font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --pir-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Escala tipográfica (fluida) */ --pir-h1: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); --pir-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --pir-h3: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); --pir-h4: clamp(1.15rem, 1rem + 0.6vw, 1.35rem); --pir-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --pir-small: 0.875rem; --pir-eyebrow: 0.75rem; /* Ritmo / layout */ --pir-maxw: 1340px; --pir-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); --pir-section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --pir-radius: 14px; --pir-radius-lg: 24px; --pir-radius-pill: 999px; /* Sombras (muy sutiles, tono verde-forest en vez de negro puro) */ --pir-shadow-sm: 0 1px 2px rgba(49,57,42,0.06), 0 2px 8px rgba(49,57,42,0.05); --pir-shadow-md: 0 10px 34px rgba(49,57,42,0.12); --pir-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== TEMPORADA — INVIERNO Cuando lleva .pir-season-invierno, se reemplazan los fondos estacionales por la paleta de invierno. ========================================================================== */ body.pir-season-invierno { --pir-page-bg: #e0ecde; /* fondo de página — invierno */ --pir-header-bg: #e3f3e7; /* barra del header — invierno */ --pir-map-overlay: #90db9d; /* capa del mapa (30%) — invierno */ --pir-mapsec-bg: #e3f3e7; /* fondo de la sección del mapa — invierno */ } /* Transición suave del fondo al cambiar de estación. */ body { transition: background-color 400ms ease; } /* ========================================================================== BASE ========================================================================== */ body { font-family: var(--pir-font-body); font-size: var(--pir-body); line-height: 1.65; color: var(--pir-text); background-color: var(--pir-page-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .h-display { font-family: var(--pir-font-display); color: var(--pir-ink); font-weight: 600; /* Poppins: los titulares piden peso alto */ line-height: 1.12; letter-spacing: -0.02em; /* leve tracking negativo para compactar la geométrica */ } h1 { font-size: var(--pir-h1); font-weight: 700; } h2 { font-size: var(--pir-h2); font-weight: 600; } h3 { font-size: var(--pir-h3); font-weight: 600; letter-spacing: -0.01em; } h4 { font-size: var(--pir-h4); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 1.25rem; } p:last-child { margin-bottom: 0; } a { color: var(--pir-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--pir-transition); } a:hover { color: var(--pir-green-600); } img { max-width: 100%; height: auto; } /* Eyebrow / kicker de sección */ .pir-eyebrow { display: inline-block; font-family: var(--pir-font-body); font-size: var(--pir-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pir-text-muted); margin-bottom: 1rem; } /* ========================================================================== LAYOUT / CONTENEDORES ========================================================================== */ .pir-container { width: 100%; max-width: var(--pir-maxw); margin-inline: auto; padding-inline: var(--pir-gutter); box-sizing: border-box; /* el padding no se suma al 100% (evita overflow móvil) */ } .pir-section { padding-block: var(--pir-section-y); } .pir-section--cream { background: var(--pir-cream); } .pir-section--paper { background: var(--pir-surface); } .pir-section--sand { background: var(--pir-sand); } .pir-section--forest { background: var(--pir-green-700); color: var(--pir-cream); } .pir-section--forest h1, .pir-section--forest h2, .pir-section--forest h3, .pir-section--forest h4 { color: var(--pir-cream); } .pir-section--forest .pir-eyebrow { color: var(--pir-green-muted); } /* ========================================================================== BOTONES (exactos según diseño Boto_n.png) Default: fondo negro, texto blanco, flecha diagonal ↗ Hover: fondo teal #0d4f48, texto blanco, flecha horizontal → La flecha usa una máscara SVG para poder cambiar de ↗ a → en el hover. ========================================================================== */ .pir-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; font-family: var(--pir-font-body); font-size: 0.95rem; font-weight: 500; line-height: 1; padding: 1rem 1.4rem; border-radius: 14px; /* esquinas suaves, no pill (según diseño) */ border: none; cursor: pointer; text-decoration: none; transition: background var(--pir-transition), color var(--pir-transition), transform var(--pir-transition); } .pir-btn:hover { transform: translateY(-1px); } .pir-btn:active { transform: translateY(0); } /* Icono de flecha: cuadrado con máscara. La dirección la controla cada estado. */ .pir-btn__icon { flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--pir-arrow-diag) center / contain no-repeat; mask: var(--pir-arrow-diag) center / contain no-repeat; transition: transform var(--pir-transition); } /* Al hover, el icono se desliza ligeramente en la dirección de la flecha. */ .pir-btn:hover .pir-btn__icon { transform: translateX(3px); } :root { /* Flecha diagonal ↗ (estado por defecto) */ --pir-arrow-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E"); /* Flecha horizontal → (estado hover) */ --pir-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E"); } /* --- Botón principal: negro → teal --- */ .pir-btn--primary { background: var(--pir-black); color: var(--pir-white); } .pir-btn--primary:hover, .pir-btn--primary:focus-visible { background: var(--pir-teal); /* #0d4f48 */ color: var(--pir-white); } .pir-btn--primary:hover .pir-btn__icon, .pir-btn--primary:focus-visible .pir-btn__icon { -webkit-mask: var(--pir-arrow-right) center / contain no-repeat; mask: var(--pir-arrow-right) center / contain no-repeat; } /* --- Variantes auxiliares (mismos raíles, para secciones claras/oscuras) --- */ .pir-btn--ghost { background: transparent; color: var(--pir-ink); border: 1px solid var(--pir-border); } .pir-btn--ghost:hover { background: var(--pir-teal); border-color: var(--pir-teal); color: var(--pir-white); } .pir-btn--ghost:hover .pir-btn__icon { -webkit-mask: var(--pir-arrow-right) center / contain no-repeat; mask: var(--pir-arrow-right) center / contain no-repeat; } .pir-btn--light { background: var(--pir-cream-card); color: var(--pir-black); } .pir-btn--light:hover { background: var(--pir-teal); color: var(--pir-white); } .pir-btn--light:hover .pir-btn__icon { -webkit-mask: var(--pir-arrow-right) center / contain no-repeat; mask: var(--pir-arrow-right) center / contain no-repeat; } /* ========================================================================== ACCESIBILIDAD / MOTION ========================================================================== */ :focus-visible { outline: 3px solid var(--pir-green); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }