/* ========================================================= Placas Solares Galicia — hoja de estilos Paleta inspirada en Balear Solar: teal petróleo profundo + acento solar cálido, sobre base cálida clara. Tarjetas, movimiento suave, más fotografía. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); :root{ --stone:#FAF7F1; --stone-2:#F1ECE1; --ink:#0F2226; --ink-soft:#4A5B5C; --teal-900:#0A3F47; --teal-800:#0E4B54; --teal-700:#166470; --sun:#E7A23B; --sun-dark:#C6822A; --coral:#E2694B; --panel:#0A3F47; --line:#E3DCCB; --line-dark:#1E4F57; --white:#FFFFFF; --max:1200px; --radius:16px; --radius-sm:10px; --shadow-sm:0 2px 10px rgba(10,63,71,.06); --shadow-md:0 14px 34px rgba(10,63,71,.14); --shadow-lg:0 26px 60px rgba(10,63,71,.20); --ease:cubic-bezier(.22,.8,.32,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} } body{ margin:0; background:var(--stone); color:var(--ink); font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;} :focus-visible{outline:2px solid var(--sun); outline-offset:2px;} h1,h2,h3,h4{ font-family:'Fraunces', Georgia, serif; font-optical-sizing:auto; font-weight:600; line-height:1.12; margin:0 0 .5em; color:var(--ink); letter-spacing:-.01em; } h1{font-size:clamp(2.3rem,4.8vw,3.5rem); font-weight:700;} h2{font-size:clamp(1.6rem,2.8vw,2.15rem);} h3{font-size:1.18rem; font-weight:600;} p{margin:0 0 1.1em; color:var(--ink-soft); max-width:66ch;} ul{padding-left:1.2em; color:var(--ink-soft);} li{margin-bottom:.4em;} .container{max-width:var(--max); margin:0 auto; padding:0 28px;} .section{padding:100px 0;} .section--tight{padding:64px 0;} .section--alt{background:var(--white);} .section-head{max-width:60ch; margin-bottom:48px;} .section-head--center{margin-left:auto; margin-right:auto; text-align:center;} .eyebrow{ font-family:'IBM Plex Sans',sans-serif; font-size:.82rem; font-weight:600; color:var(--sun-dark); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.7em; display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{content:''; width:22px; height:2px; background:var(--sun); display:inline-block; border-radius:2px;} hr.rule{border:0; border-top:1px solid var(--line); margin:0;} .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);} /* Scroll reveal — solo activo si hay JS (clase .js en ); sin JS todo es visible desde el inicio */ .js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .js .reveal.is-visible{opacity:1; transform:translateY(0);} .js .reveal-stagger > *{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease);} .js .reveal-stagger.is-visible > *{opacity:1; transform:translateY(0);} .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s;} .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s;} .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s;} .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.23s;} .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.30s;} .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.37s;} .reveal-stagger.is-visible > *:nth-child(7){transition-delay:.44s;} /* Buttons */ .btn{ display:inline-flex; align-items:center; gap:.55em; padding:14px 28px; border-radius:100px; font-weight:600; font-size:.97rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .btn--primary{background:var(--sun); color:var(--teal-900); box-shadow:0 10px 24px rgba(231,162,59,.35);} .btn--primary:hover{background:var(--sun-dark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(231,162,59,.4);} .btn--ghost{border-color:var(--teal-900); color:var(--teal-900); background:transparent;} .btn--ghost:hover{background:var(--teal-900); color:#fff; transform:translateY(-2px);} .btn--light{border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.06);} .btn--light:hover{background:#fff; color:var(--teal-900); transform:translateY(-2px);} .btn--sm{padding:10px 20px; font-size:.88rem;} .btn__arrow{transition:transform .2s var(--ease);} .btn:hover .btn__arrow{transform:translateX(3px);} /* Header */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(250,247,241,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--max); margin:0 auto; } .logo{ display:inline-flex; align-items:center; gap:9px; font-family:'Fraunces',serif; font-weight:700; font-size:1.28rem; text-decoration:none; color:var(--ink); letter-spacing:-.01em; } .logo__mark{ width:32px; height:32px; border-radius:9px; flex:none; background:linear-gradient(135deg, var(--sun), var(--coral)); display:inline-block; } .logo span{color:var(--teal-700);} .main-nav{display:flex; align-items:center; gap:30px;} .main-nav__list{ display:flex; list-style:none; margin:0; padding:0; gap:8px; font-size:.95rem; font-weight:500; } .main-nav__list a{text-decoration:none; padding:9px 14px; border-radius:100px; display:inline-block; transition:background .15s ease, color .15s ease;} .main-nav__list a:hover{background:var(--stone-2); color:var(--teal-800);} .has-dropdown{position:relative;} .dropdown{ position:absolute; top:100%; left:0; margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); min-width:240px; padding:8px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0);} .dropdown a{display:block; padding:10px 14px; text-decoration:none; font-size:.93rem; border-radius:8px;} .dropdown a:hover{background:var(--stone); color:var(--teal-800);} .nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:6px; z-index:110;} .nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .25s var(--ease), opacity .2s ease;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Hero */ .hero{background:linear-gradient(180deg, var(--teal-900), var(--teal-800) 65%, var(--teal-700)); color:#fff; overflow:hidden; position:relative;} .hero::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(600px 400px at 85% -10%, rgba(231,162,59,.28), transparent 60%); } .hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:600px; position:relative; } .hero__content{ padding:70px 56px 70px 28px; display:flex; flex-direction:column; justify-content:center; max-width:640px; position:relative; z-index:2; } .hero .eyebrow{color:#F4D8A8;} .hero .eyebrow::before{background:var(--sun);} .hero__content h1{color:#fff; margin-bottom:.4em;} .hero__content p{color:#CFE0DD; font-size:1.1rem;} .hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; margin-bottom:34px;} .hero__stats{display:flex; gap:34px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.16);} .hero__stat-num{ font-family:'Fraunces',serif; font-size:2rem; font-weight:700; color:var(--sun); display:block; line-height:1; } .hero__stat-label{font-size:.85rem; color:#B9CFCB; margin-top:6px; display:block;} .hero__figure{position:relative; height:100%; min-height:340px;} .hero__figure-inner{position:absolute; inset:28px 28px 28px 0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);} .hero__figure img{width:100%; height:100%; object-fit:cover;} .hero__figure-caption{ position:absolute; left:20px; bottom:20px; right:20px; background:rgba(10,63,71,.72); backdrop-filter:blur(6px); color:#fff; font-size:.85rem; padding:10px 14px; border-radius:10px; } .breadcrumbs{ font-size:.85rem; color:#9FB6B1; padding:16px 0 0 28px; margin:0; list-style:none; display:flex; gap:6px; flex-wrap:wrap; position:relative; z-index:2; } .breadcrumbs li:not(:last-child)::after{content:'/'; margin-left:6px; color:#4E6D68;} .breadcrumbs a{color:#B9CFCB; text-decoration:none;} .breadcrumbs a:hover{color:#fff;} .breadcrumbs li:last-child{color:#fff;} /* Page hero (city pages, simpler) */ .page-hero{background:linear-gradient(180deg, var(--teal-900), var(--teal-700)); color:#fff; position:relative; overflow:hidden;} .page-hero::before{content:''; position:absolute; inset:0; background:radial-gradient(500px 320px at 90% 0%, rgba(231,162,59,.25), transparent 60%); pointer-events:none;} .page-hero__inner{max-width:var(--max); margin:0 auto; padding:0 28px 74px; position:relative; z-index:2;} .page-hero p{color:#CFE0DD; font-size:1.05rem;} .page-hero h1{color:#fff; max-width:22ch;} /* Two-col split blocks */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .split__media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-md);} .split--reverse .split__media{order:2;} .split--reverse .split__text{order:1;} /* Service cards */ .service-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .service-item{ background:#fff; border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .service-item:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);} .service-item__icon{ width:46px; height:46px; border-radius:12px; margin-bottom:18px; background:linear-gradient(135deg, var(--sun), var(--coral)); display:flex; align-items:center; justify-content:center; } .service-item__icon svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8;} .service-item h3{margin-bottom:.4em; font-size:1.08rem;} .service-item p{margin-bottom:0; font-size:.96rem;} /* Process steps */ .process{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .process__step{ background:#fff; border-radius:var(--radius); padding:28px 24px; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .process__step:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);} .process__num{ font-family:'Fraunces',serif; font-size:1.9rem; color:var(--sun-dark); font-weight:700; display:block; margin-bottom:.35em; } /* Zones grid */ .zones-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .zone-card{ position:relative; overflow:hidden; border-radius:var(--radius); text-decoration:none; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; min-height:190px; padding:24px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .zone-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s var(--ease);} .zone-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,63,71,.15), rgba(10,63,71,.88)); z-index:1;} .zone-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);} .zone-card:hover img{transform:scale(1.06);} .zone-card__name{position:relative; z-index:2; font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600;} .zone-card__arrow{position:relative; z-index:2; font-size:.86rem; color:var(--sun); margin-top:10px; display:inline-flex; align-items:center; gap:5px;} /* Vivienda/empresa dual block */ .dual{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .dual__col{ padding:36px; background:#fff; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); } .dual__col img{width:100%; margin-bottom:22px; border-radius:var(--radius-sm);} /* Savings section */ .savings{ background:linear-gradient(135deg, var(--teal-900), var(--teal-700)); color:#fff; border-radius:24px; overflow:hidden; position:relative; } .savings::before{content:''; position:absolute; inset:0; background:radial-gradient(420px 300px at 100% 0%, rgba(231,162,59,.3), transparent 60%);} .savings__inner{padding:56px; position:relative; z-index:1;} .savings h2{color:#fff;} .savings .eyebrow{color:#F4D8A8;} .savings p{color:#CFE0DD;} .savings ul{columns:2; column-gap:40px; color:#DCEAE6;} .savings li{break-inside:avoid; color:#DCEAE6;} /* FAQ */ .faq{display:flex; flex-direction:column; gap:12px;} .faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px 24px; transition:box-shadow .2s ease;} .faq details[open]{box-shadow:var(--shadow-sm);} .faq summary{ cursor:pointer; font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:'+'; font-size:1.4rem; color:var(--sun-dark); font-family:'IBM Plex Sans',sans-serif; flex:none; transition:transform .2s ease;} .faq details[open] summary::after{content:'–';} .faq p{margin-top:14px; margin-bottom:0;} /* CTA band */ .cta-band{ background:linear-gradient(120deg, var(--teal-900), var(--teal-700)); color:#fff; position:relative; overflow:hidden; } .cta-band::before{content:''; position:absolute; inset:0; background:radial-gradient(480px 320px at 15% 100%, rgba(231,162,59,.25), transparent 60%);} .cta-band__inner{ padding:64px 0; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; z-index:1; } .cta-band h2{color:#fff; margin-bottom:.25em;} .cta-band p{color:#CFE0DD; margin-bottom:0;} /* Why us */ .why-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .why-item{ display:flex; gap:16px; align-items:flex-start; padding:26px; background:#fff; border-radius:var(--radius-sm); border:1px solid var(--line); } .why-item__mark{ width:34px; height:34px; border-radius:10px; flex:none; margin-top:2px; background:var(--stone-2); color:var(--teal-800); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; } .why-item h3{margin:0 0 .25em; font-size:1.02rem;} .why-item p{margin:0; font-size:.95rem;} /* Contact form */ .contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px;} .contact-card{background:#fff; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:40px;} .field{margin-bottom:20px;} .field label{display:block; font-size:.88rem; font-weight:600; margin-bottom:6px;} .field input, .field select, .field textarea{ width:100%; padding:13px 15px; border:1px solid var(--line); background:var(--stone); font-family:inherit; font-size:.97rem; color:var(--ink); border-radius:var(--radius-sm); transition:border-color .15s ease, background .15s ease; } .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--teal-700); background:#fff; outline:none;} .field textarea{min-height:110px; resize:vertical;} .field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .quick-contact{border-radius:var(--radius); background:var(--teal-900); color:#fff; padding:36px; position:relative; overflow:hidden;} .quick-contact::before{content:''; position:absolute; inset:0; background:radial-gradient(320px 220px at 100% 0%, rgba(231,162,59,.3), transparent 60%);} .quick-contact > *{position:relative; z-index:1;} .quick-contact h3{color:#fff; margin-bottom:.6em;} .quick-contact p{color:#CFE0DD;} .quick-contact .btn{width:100%; justify-content:center; margin-bottom:12px;} .form-note{font-size:.86rem; color:var(--ink-soft); margin-top:10px;} .quick-contact .form-note{color:#B9CFCB;} #form-status{margin-top:16px; font-weight:600;} #form-status.ok{color:var(--teal-700);} /* Footer */ .site-footer{background:var(--teal-900); color:#CFE0DD; padding:70px 0 28px;} .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; } .footer-grid h4{color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.85rem; letter-spacing:.03em; margin-bottom:16px;} .footer-grid ul{list-style:none; padding:0; margin:0;} .footer-grid a{color:#A9C4BE; text-decoration:none; font-size:.94rem; line-height:2;} .footer-grid a:hover{color:#fff;} .footer-brand .logo{color:#fff;} .footer-brand .logo span{color:#F4D8A8;} .footer-brand p{color:#93B1AA; max-width:34ch; margin-top:14px;} .footer-bottom{ border-top:1px solid rgba(255,255,255,.14); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; color:#7FA098; } .footer-bottom a{color:#7FA098; text-decoration:none;} .footer-bottom a:hover{color:#fff;} /* Sticky mobile contact bar */ .mobile-bar{display:none;} /* Cookie banner */ .cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:560px; margin:0 auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); border:1px solid var(--line); padding:20px 22px; display:flex; flex-direction:column; gap:12px; transform:translateY(140%); transition:transform .4s var(--ease); } .cookie-banner.is-visible{transform:translateY(0);} .cookie-banner p{margin:0; font-size:.88rem; color:var(--ink-soft);} .cookie-banner__actions{display:flex; gap:10px; flex-wrap:wrap;} /* Responsive */ @media (max-width:980px){ .hero__grid{grid-template-columns:1fr; min-height:auto;} .hero__content{padding:60px 28px 20px;} .hero__figure{min-height:280px;} .hero__figure-inner{inset:0 28px 40px;} .split, .savings ul, .contact-grid, .footer-grid{grid-template-columns:1fr; column-count:1;} .split__media{order:1 !important;} .split__text{order:2 !important;} .service-list{grid-template-columns:1fr 1fr;} .process{grid-template-columns:1fr 1fr;} .zones-grid{grid-template-columns:1fr 1fr;} .dual{grid-template-columns:1fr;} .why-list{grid-template-columns:1fr;} } @media (max-width:720px){ .field-row{grid-template-columns:1fr;} .main-nav__list, .main-nav .btn--ghost{display:none;} .nav-toggle{display:block;} .nav-overlay{ display:none; position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; background:rgba(8,26,29,.55); z-index:105; } .main-nav.is-open .nav-overlay{display:block; animation:fadeIn .25s var(--ease);} @keyframes fadeIn{from{opacity:0;} to{opacity:1;}} .main-nav.is-open .main-nav__list{ display:flex; flex-direction:column; position:fixed; inset:0 0 0 auto; width:82%; max-width:340px; height:100vh; height:100dvh; background:#fff; padding:90px 26px 26px; gap:6px; box-shadow:var(--shadow-lg); animation:slideIn .3s var(--ease); z-index:106; overflow-y:auto; } @keyframes slideIn{from{transform:translateX(100%);} to{transform:translateX(0);}} .main-nav.is-open .main-nav__list a{padding:12px 14px; font-size:1.02rem;} .main-nav.is-open .has-dropdown .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding-left:10px; margin-top:2px; } .service-list{grid-template-columns:1fr;} .process{grid-template-columns:1fr;} .zones-grid{grid-template-columns:1fr;} .section{padding:60px 0;} .savings__inner{padding:34px 26px;} .contact-card, .quick-contact{padding:26px;} .mobile-bar{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90; background:var(--teal-900); border-top:1px solid rgba(255,255,255,.1); } .mobile-bar a{ flex:1; text-align:center; padding:14px 8px; color:#fff; text-decoration:none; font-size:.9rem; font-weight:600; border-right:1px solid rgba(255,255,255,.12); } .mobile-bar a:last-child{border-right:0; background:var(--sun); color:var(--teal-900);} body{padding-bottom:56px;} .cookie-banner{left:12px; right:12px; bottom:68px;} }