/* === EGARTE BRAND GUIDELINE HOOKS ===================================== Edit these variables only if el Brand Guideline cambia. Colores confirmados por el cliente: - Negro LOGO: #000000 - Galería (verde): var(--brand-residencia) - Residencia (naranja): var(--brand-galeria) - Blanco crudo (fondo): #F5F3EF Tipografías: - Principal: "Cabinet Grotesk" (Fontshare / ITF) - Itálicas puntuales: "Montserrat" (Google Fonts) ===================================================================== */ :root{--header-h:248px;--header-h-mobile:168px; --bg:#F5F3EF; --text:#000000; --brand-galeria:#FFA400; --brand-residencia:#C4D600; --brand-black:#000000; --muted:#222222; --border:#e6e1d9; } /* Vinculación tipográfica (ver en los HTML para los CDN) */ body{ background:var(--bg); color:var(--text); font-family:"Cabinet Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.55; } /* Títulos con peso claro; ajustar según necesidad */ h1,h2,h3,h4{ font-weight:700; letter-spacing:-0.02em; margin-top:0.8em; margin-bottom:0.4em; } /* Botones y enlaces */ a{ color:var(--text); text-decoration-thickness: .08em; text-underline-offset: .18em; } a:hover{ opacity:.85; } .button, button, .btn{ background:var(--text); color:#fff; border:1px solid var(--text); padding:.75rem 1rem; border-radius:6px; transition:transform .08s ease, opacity .2s ease; } .button:hover, button:hover, .btn:hover{ transform:translateY(-1px); } .button:focus-visible, button:focus-visible, .btn:focus-visible{ outline:3px solid #000; outline-offset:2px; } /* Estados de color por sección (aplicar en ) */ .sec-residencia .btn-primary{ background:var(--brand-residencia); border-color:var(--brand-residencia); } .sec-galeria .btn-primary{ background:var(--brand-galeria); border-color:var(--brand-galeria); } .sec-general .btn-primary{ background:var(--text); border-color:var(--text); } /* Separadores y tarjetas */ .card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem; } /* Nav activo/hover */ .nav a{ padding:.5rem .75rem; border-radius:8px; } .nav a.active{ background:rgba(0,0,0,.06); } .nav a:hover{ background:rgba(0,0,0,.04); } /* Micro-grafismos: puntos de color como acento (sutiles) */ .badge-galeria{ display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:var(--brand-galeria); vertical-align:middle; margin-right:8px; } .badge-residencia{ display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:var(--brand-residencia); vertical-align:middle; margin-right:8px; } /* Fin bloques EGARTE */ :root{--header-h:248px;--header-h-mobile:168px;--bg:#fff;--text:#111;--muted:#555;--line:#e6e6e6;--radius:16px;--container:1180px} *{box-sizing:border-box}html{scroll-behavior:smooth} body{margin:0;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;text-rendering:optimizeLegibility} a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:2px solid #000;outline-offset:2px} .container{max-width:var(--container);margin:0 auto;padding:0 28px} .section{padding:84px 0}.hr{border:0;border-top:1px solid var(--line);margin:36px 0} .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff;z-index:1000} .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid var(--line)} .nav{align-items:center;display:flex;align-items:center;justify-content:space-between;height: var(--header-h);align-items:center;gap:12px;text-decoration:none;color:inherit} .brand img{height:calc(var(--header-h) - 22px);width:auto;object-fit:contain;margin-bottom:-6px;}.brand b{display:none;} .nav-menu{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0} .nav-menu a{text-decoration:none;color:var(--text);padding:10px 2px;position:relative} .nav-menu a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:#000;transform:scaleX(0);transform-origin:left;transition:transform .18s ease} .nav-menu a:hover::after{transform:scaleX(1)} .nav-menu a.is-active{position:relative} .nav-menu a.is-active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:40%;height:6px;background: currentColor;border-radius:0 0 999px 999px} .hero{padding:112px 0 72px} h1{font-size:clamp(34px,4.2vw,56px);line-height:1.08;margin:0 0 16px} h2{font-size:clamp(24px,2.4vw,32px);margin:0 0 8px}h3{font-size:18px;margin:0 0 6px} .lead{font-size:18px;color:var(--muted);max-width:860px}.hero .lead{font-size:19px} .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} .btn{display:inline-block;padding:12px 18px;border:1px solid #000;border-radius:999px;background:transparent;color:#000;text-decoration:none;transition:transform .06s ease,background .12s ease} .btn:hover{transform:translateY(-1px);text-decoration:underline}.btn--ghost{border-color:#aaa;color:#111} .grid{display:grid;gap:26px}.grid-3{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}@media (max-width:600px){.grid-3{grid-template-columns:1fr}} .card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column} .card .media{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)} .card .media img{width:100%;height:100%;object-fit:cover}.card .content{padding:18px} .columns{display:grid;grid-template-columns:1.1fr .9fr;gap:38px}@media (max-width:900px){.columns{grid-template-columns:1fr}} .site-footer{border-top:1px solid var(--line);margin-top:84px;padding:44px 0 26px;color:#333;background:#fafafa} .site-footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px} .site-footer a{color:inherit}.site-footer a:hover{text-decoration:underline} .site-footer .copyright{margin-top:16px;color:#666;font-size:14px} .muted{color:var(--muted)} /* === Ajustes v2 Artistas === */ .section--tight{padding:48px 0} .artist-portrait .media{aspect-ratio:3/4; overflow:hidden; border-bottom:1px solid var(--line)} .artist-portrait .media img{width:100%; height:100%; object-fit:cover; object-position:top center} .artist-portrait--contain .media img{object-fit:contain; object-position:center center; background:#f6f6f6} /* === Override: nav-menu active color by section === */ .nav-menu a.is-active{ color: var(--brand-black); } .sec-residencia .nav-menu a.is-active{ color: var(--brand-residencia); } .sec-galeria .nav-menu a.is-active{ color: var(--brand-galeria); } /* === Footer always black text/line === */ footer{background:var(--bg);padding:2rem 1rem;border-top:3px solid var(--brand-black);text-align:center;} footer p, footer a{color:var(--brand-black) !important;text-decoration:none;} footer img.footer-logo{height:200px !important;max-height:200px !important;margin:12px auto;display:block;} /* === Strong nav active color rules === */ .nav a.active, .nav-menu a.is-active{ color: var(--brand-black); } .sec-residencia .nav a.active, .sec-residencia .nav-menu a.is-active{ color: var(--brand-residencia) !important; } .sec-galeria .nav a.active, .sec-galeria .nav-menu a.is-active{ color: var(--brand-galeria) !important; } /* underline pill uses currentColor */ .nav-menu a.is-active::after{ background: currentColor !important; } /* Full width hero text for Residencia */ .hero-full{grid-column:1/-1} /* colaboradores grid */ .logos-collab .card{background:transparent} .logos-collab img{width:100%;height:80px;object-fit:contain} /* Footer collaborators strip */ .collab-footer{display:flex;gap:24px;align-items:center;justify-content:center;padding:12px 0;border-top:1px solid rgba(0,0,0,.06);margin-top:12px} .collab-footer img{max-height:40px;height:40px;width:auto;object-fit:contain} \1 justify-content: center; flex-wrap: wrap;}.collab-footer img{max-height:32px;height:32px}} /* Label for collaborators strip */ .collab-title{font-size:.9rem;font-weight:600;margin:0 0 6px 0;text-align:center} /* === Carousel (Residencias) ==================================== */ .carousel{position:relative;margin:0 auto} .carousel-track{display:grid;grid-auto-flow:column;gap:26px;overflow:hidden; padding:4px 0 12px; -webkit-overflow-scrolling: touch} .carousel-track > .card{scroll-snap-align:start;width:100%} /* 3 columns desktop, 2 tablet, 1 mobile — matching original grid */ @media (min-width:901px){.carousel-track{grid-auto-columns:calc((100% - 52px)/3)}} @media (max-width:900px) and (min-width:601px){.carousel-track{grid-auto-columns:calc((100% - 26px)/2)}} @media (max-width:600px){.carousel-track{grid-auto-columns:100%}} .carousel-btn{position:absolute;top:50%;transform:translateY(-50%);border:1px solid var(--line);background:#fff; width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06);} .carousel-btn:hover{filter:brightness(0.96)} .carousel-btn:focus{outline:2px solid #000} .carousel-btn.prev{left:-4px} .carousel-btn.next{right:-4px} /* hide buttons on very small screens to avoid overlap; swipe works */ @media (max-width:520px){.carousel-btn{display:none}} /* =============================================================== */ /* ============================================ MOBILE ONLY (<= 768px) — layout simplificado Logo arriba, enlaces debajo, texto legible. NO afecta a escritorio. ============================================ */ @media (max-width: 768px){ /* Seguridad y tipografía base */ html, body { overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } body { font-size: 16px; line-height: 1.65; -webkit-text-size-adjust: 100%; } :root{ --m-space-1: .5rem; --m-space-2: .75rem; --m-space-3: 1rem; --m-space-4: 1.25rem; --m-radius: 14px; } /* Header limpio con logo centrado */ header .container.nav, .site-header .container.nav { display: block; padding: var(--m-space-2) var(--m-space-3); } header .brand, .site-header .brand { display:block; text-align:center; } header .brand img, .site-header .brand img { max-height: 42px; width:auto; display:inline-block; } /* Navegación: visible y apilada (sin hamburguesa) */ header nav[aria-label="Principal"], .site-header nav[aria-label="Principal"]{ display:block !important; margin-top: var(--m-space-2); } header nav[aria-label="Principal"] ul, .site-header nav[aria-label="Principal"] ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction: column; gap: var(--m-space-2); align-items: stretch; } header nav[aria-label="Principal"] a, .site-header nav[aria-label="Principal"] a{ display:block; text-align:center; padding: .8rem 1rem; border: 1px solid #eee; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; } header nav[aria-label="Principal"] a:focus-visible{ outline:2px solid #000; outline-offset:2px; } /* Contenido: respiración lateral y tipografías legibles */ main, .container, .wrap, .content { padding-left: var(--m-space-3); padding-right: var(--m-space-3); } h1 { font-size: clamp(1.6rem, 2.6vw + 1.2rem, 2.1rem); line-height:1.22; margin: .6rem 0 .4rem; } h2 { font-size: clamp(1.25rem, 2vw + .9rem, 1.5rem); line-height:1.28; margin: .6rem 0 .4rem; } p { font-size: 1rem; margin: 0 0 .9rem; } /* Grids y listados a 1 columna */ .grid, .grid.grid-3, .cards, .columns, .listing, .gallery-grid, .residencias-grid { display:block !important; } .grid > *, .grid.grid-3 > *, .cards > *, .columns > *, .listing > *, .gallery-grid > *, .residencias-grid > * { width: 100% !important; margin-bottom: var(--m-space-4); } /* Tarjetas con bordes y sin reflow en imágenes */ .card, article.card, .tile, .item { border: 1px solid #eee; border-radius: var(--m-radius); overflow:hidden; background:#fff; } .card img, article.card img, .tile img, .item img, .media img { width: 100%; height: auto; display:block; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; } /* Footer colaboradores apilados en dos columnas */ .collab-footer { flex-wrap: wrap; justify-content: center; gap: var(--m-space-2); } .collab-footer img { height: 30px; max-width: 140px; width:auto; } } @media (max-width: 768px){ .mobile-menu-toggle, #mobile-drawer, .eg-burger, #egMobileNav { display: none !important; } } /* === Mobile footer fix: ensure full visibility & safe-area === */ @media (max-width: 768px){ footer, .footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); overflow: visible; } footer .container, .footer .container { overflow: visible; } .collab-footer { flex-wrap: wrap; row-gap: 12px; column-gap: 16px; align-items: center; justify-content: center; } .collab-footer img { height: auto !important; max-height: 30px !important; width: auto; object-fit: contain; } } /* ======================================================= EGARTE — MOBILE-ONLY FOOTER OVERRIDE (<= 640px) - Oculta logo del footer solo en móvil - Fuerza una única columna centrada - Mantiene logos de colaboradores a 30px de alto - Añade padding para safe-area en iPhone ======================================================= */ @media (max-width: 640px) { /* Espaciado seguro y centrado */ footer, .site-footer { padding-left: 16px; padding-right: 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; } /* Fuerza una sola columna, sin importar el layout original */ footer .footer-inner, footer .container, footer .wrapper, footer .row, footer .columns, footer .grid, footer [class*="grid"], footer [class*="row"], footer [class*="columns"] { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; align-items: center; justify-items: center; width: 100%; } /* Quita el logotipo de marca SOLO en el footer */ footer .footer-brand, footer .footer-logo, footer .brand, footer .logo, footer a[aria-label*="EGARTE" i], footer img[alt*="EGARTE" i] { display: none !important; } /* Texto centrado y legible */ footer, footer p, footer a, footer li, footer address { text-align: center !important; line-height: 1.45; } /* Bloque legal */ footer .legal, footer .footer-legal, footer nav[aria-label="legal"] { margin-top: 6px; margin-bottom: 6px; font-size: 15px; } /* Colaboradores / partners */ footer .collaborators-title, footer .colaboradores-title { font-weight: 600; margin-top: 4px; margin-bottom: 6px; font-size: 16px; } footer .collaborators, footer .colaboradores, footer .partners, footer .logos, footer .logos-row, footer .footer-partners, footer .collab-footer { display: flex !important; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; width: 100%; } /* Tamaño exacto de logos de colaboradores */ footer .collaborators img, footer .colaboradores img, footer .partners img, footer .logos img, footer .logos-row img, footer .footer-partners img, footer .collab-footer img { height: 30px !important; /* tamaño que acordamos */ width: auto !important; object-fit: contain; } } /* Dots pagination */ .carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:12px} .carousel-dots button{width:8px;height:8px;border-radius:999px;border:1px solid var(--line);background:#ddd;cursor:pointer} .carousel-dots button[aria-current="true"]{background:var(--brand-residencia); border-color:var(--brand-residencia)} /* ensure arrows sit over the container edges */ .carousel{padding:0 36px} .carousel-btn.prev{left:0} .carousel-btn.next{right:0} @media (max-width:520px){.carousel{padding:0}} /* Force show all collaborator logos on small screens */ @media (max-width:640px){ .collab-footer{display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:12px !important} .collab-footer img{display:inline-block !important; visibility:visible !important; opacity:1 !important; max-height:30px !important; height:30px !important; width:auto !important} } /* MOBILE: texto desplegable Rafa Blanco */ @media (max-width: 768px) { #texto-expo .prosa { transition: max-height 0.25s ease; } /* Collapsed state using line clamp with fade */ #texto-expo .prosa.rb-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; /* 3–5 líneas; ajusta aquí si prefieres 3 o 5 */ overflow: hidden; position: relative; } #texto-expo .prosa.rb-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5rem; /* sutil degradado sobre el final del texto, usa el fondo actual */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,1) 100%); pointer-events: none; } /* Botón accesible */ #texto-expo .rb-toggle { display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem; font: inherit; background: none; border: 1px solid currentColor; border-radius: 999px; padding: .4rem .75rem; cursor: pointer; } #texto-expo .rb-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } } /* END MOBILE: texto desplegable Rafa Blanco */ /* === EGARTE: Home hero con imagen =================================== */ .home-hero{ padding-top:112px; padding-bottom:72px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:32px; align-items:center; } .home-hero-media{ position:relative; } .home-hero-figure{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); } .home-hero-figure img{ display:block; width:100%; height:100%; max-height:520px; object-fit:cover; } .home-hero-content{ max-width:580px; } .eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; margin:0 0 .35rem; color:var(--muted); } /* === Residencia: hero con imagen vertical =========================== */ .hero-resid{ padding-top:112px; padding-bottom:56px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.9fr); gap:32px; align-items:center; } .hero-resid-text{ max-width:620px; } .hero-resid-text .lead{ margin-bottom:.75rem; } .hero-resid-details{ margin-top:.5rem; font-size:.95rem; color:var(--muted); } .hero-resid-details summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.35rem; font-weight:500; } .hero-resid-details summary::-webkit-details-marker{ display:none; } .hero-resid-details summary::after{ content:"＋"; font-size:.9em; } .hero-resid-details[open] summary::after{ content:"－"; } .hero-resid-details__body p{ margin:.25rem 0; } .hero-resid-media{ position:relative; } .hero-resid-figure{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); max-width:420px; margin-left:auto; } .hero-resid-figure img{ display:block; width:100%; height:100%; object-fit:cover; } /* === Residencia: modal teaser vídeo ================================= */ .resi-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.65); z-index:999; } .resi-modal.is-open{ display:flex; } .resi-modal-dialog{ position:relative; background:#fff; width:90%; max-width:960px; border-radius:12px; padding:1rem 1.25rem 1.25rem; box-shadow:0 18px 45px rgba(0,0,0,.35); } .resi-modal-title{ margin-top:0; margin-bottom:.75rem; font-size:1.1rem; } .resi-modal-video{ width:100%; max-height:70vh; display:block; background:#000; } .resi-modal-close{ position:absolute; top:.35rem; right:.6rem; border:0; background:transparent; font-size:1.6rem; cursor:pointer; line-height:1; } .resi-modal-backdrop{ position:absolute; inset:0; } .resi-cover--has-teaser{ cursor:pointer; } .resi-cover--has-teaser::after{ content:"Ver teaser"; position:absolute; right:.5rem; bottom:.5rem; padding:.2rem .6rem; font-size:.75rem; border-radius:999px; background:rgba(0,0,0,.75); color:#fff; } /* Responsive ajustes hero + modal */ @media (max-width: 900px){ .home-hero{ grid-template-columns:minmax(0,1fr); padding-top:90px; } .hero-resid{ grid-template-columns:minmax(0,1fr); padding-top:90px; } .hero-resid-figure{ margin:0 auto; max-width:none; } .resi-modal-dialog{ width:94%; padding:0.75rem 0.85rem 0.95rem; } } /* Enlace ficha completa en tarjetas de residencia */ .resi-more{ display:inline-flex; margin-top:.45rem; font-size:.85rem; text-decoration:underline; }