/* ============================================================= CRAFTED ESTUDIO — plantilla «big-picture» Basada en Big Picture, de HTML5 UP (licencia CCA 3.0). Reescrita sobre el sistema de la fábrica: sin jQuery, sin dependencias y con la tipografía servida en local. La idea del diseño: manda la fotografía. El texto es poco, grande y siempre encima de una imagen a pantalla completa. ============================================================= */ :root{ /* Marca — el generador los sobrescribe en el de cada página a partir del color indicado en cliente.json */ --brand: #31327F; --brand-600: #292a6b; --brand-800: #1c1d4a; --brand-900: #12132f; --brand-tint: #eceef8; --brand-rgb: 49,50,127; /* Segundo tono. Se usa con cuentagotas: un subrayado, el filtro activo, el rótulo de sección. Sin él la web queda de un solo color y, en un negocio que vende imágenes, la interfaz acaba tiñendo las fotos. */ --acento: #8d5723; /* legible sobre blanco (5.97:1) */ --acento-vivo: #ce833b; /* solo decorativo, sobre foto u oscuro */ --acento-rgb: 141,87,35; /* Neutros */ --ink: #16172b; --body: #4a4d63; --muted: #70748f; /* 4.58:1 — el anterior (#7c8099) se quedaba en 3.89 */ --line: #e4e6f0; --bg: #ffffff; --bg-alt: #f6f7fb; /* Medidas */ --header-h: 68px; --radius: 14px; --radius-sm: 8px; --maxw: 1240px; --gutter: 28px; --shadow-sm: 0 2px 10px rgba(22,23,43,.06); --shadow: 0 14px 40px rgba(22,23,43,.10); --shadow-lg: 0 30px 70px rgba(22,23,43,.18); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; } body{ margin:0; font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; font-weight:400; font-size:17px; line-height:1.72; color:var(--body); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:var(--brand); text-decoration:none; transition:color .2s var(--ease); } a:hover{ color:var(--brand-600); } ul,ol{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; } h1,h2,h3,h4{ font-family:var(--fuente-titulos, inherit); font-weight:700; color:var(--ink); line-height:1.16; letter-spacing:-.02em; margin:0 0 .6em; } h1{ font-size:clamp(2.4rem,5.4vw,4rem); } h2{ font-size:clamp(1.85rem,3.4vw,2.7rem); } h3{ font-size:clamp(1.2rem,2vw,1.5rem); } h4{ font-size:1rem; letter-spacing:.06em; text-transform:uppercase; } p{ margin:0 0 1.1em; } strong{ font-weight:700; color:var(--ink); } .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .skip-link{ position:absolute; left:-9999px; top:0; z-index:2000; background:#fff; color:var(--brand); padding:12px 20px; font-weight:700; } .skip-link:focus{ left:12px; top:12px; } :focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; } /* ============================================================= BOTONES ============================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:13px 26px; font-weight:700; font-size:.95rem; letter-spacing:.01em; border:1.5px solid transparent; border-radius:999px; cursor:pointer; white-space:nowrap; transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .btn:hover{ transform:translateY(-2px); } .btn-lg{ padding:16px 34px; font-size:1rem; } .btn-sm{ padding:10px 20px; font-size:.85rem; } .btn-block{ width:100%; } .btn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 24px rgba(var(--brand-rgb),.28); } .btn-primary:hover{ background:var(--brand-600); color:#fff; box-shadow:0 14px 34px rgba(var(--brand-rgb),.36); } .btn-cta{ background:#fff; color:var(--brand); } .btn-cta:hover{ background:var(--brand-tint); color:var(--brand); } .btn-light{ background:#fff; color:var(--brand); } .btn-light:hover{ background:#f0f1fa; color:var(--brand); } .btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(6px); } .btn-ghost:hover{ background:#fff; color:var(--brand); border-color:#fff; } .btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); } .btn-outline-light:hover{ background:rgba(255,255,255,.14); color:#fff; } /* ============================================================= CABECERA ============================================================= */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:1000; /* Como en Big Picture: una barra blanca fina, no una franja de color. Deja que respire la fotografía, que es lo que manda en esta plantilla. */ background:rgba(255,255,255,.95); -webkit-backdrop-filter:saturate(120%) blur(8px); backdrop-filter:saturate(120%) blur(8px); box-shadow:0 0 .15em 0 rgba(0,0,0,.10); } .site-header.is-scrolled{ box-shadow:0 2px 14px rgba(0,0,0,.12); } .header-inner{ width:100%; max-width:var(--maxw); margin:0 auto; height:var(--header-h); padding:0 var(--gutter); display:flex; align-items:center; gap:26px; transition:height .3s var(--ease); } .brand{ flex:0 0 auto; display:block; } .brand img{ height:40px; width:auto; } .nav{ margin-left:auto; display:flex; align-items:center; gap:30px; } .nav > a{ position:relative; white-space:nowrap; color:var(--ink); font-size:.95rem; font-weight:600; letter-spacing:.01em; padding:4px 0; } .nav > a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--acento); transition:width .3s var(--ease); } .nav > a:hover, .nav > a.is-current{ color:var(--brand); } .nav > a:hover::after, .nav > a.is-current::after{ width:100%; } .nav-cta-mobile{ display:none; } .header-actions{ display:flex; align-items:center; gap:20px; } .social{ display:flex; align-items:center; gap:6px; } .social a{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:rgba(255,255,255,.85); transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .social a:hover{ background:rgba(255,255,255,.16); color:#fff; transform:translateY(-2px); } .social svg{ width:19px; height:19px; fill:currentColor; } /* Hamburguesa */ .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 10px; background:none; border:0; cursor:pointer; } .nav-toggle span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--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); } /* ============================================================= RÓTULOS Y TIPOGRAFÍA DEL DISEÑO ============================================================= */ .eyebrow{ font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.82); margin:0 0 1.1em; } .eyebrow-dark{ color:var(--brand); } .eyebrow-dark::before{ content:''; display:inline-block; width:26px; height:2px; background:var(--acento); vertical-align:middle; margin-right:12px; transform:translateY(-1px); } /* El contraste ligera/negra es la firma de este diseño: el titular va en Roboto 300 y solo la palabra marcada con salta a 900. */ .pantalla h1, .pantalla h2{ color:#fff; font-weight:300; letter-spacing:-.03em; line-height:1.04; text-shadow:0 2px 34px rgba(0,0,0,.4); } .pantalla h1 strong, .pantalla h2 strong{ font-weight:900; color:#fff; } .rotulo{ font-family:var(--fuente-titulos, inherit); display:flex; align-items:center; gap:14px; font-size:.76rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--acento-vivo); margin:0 0 1.4em; } .rotulo::before{ content:''; width:34px; height:2px; background:var(--acento-vivo); flex:0 0 auto; } /* ============================================================= PANTALLAS COMPLETAS ============================================================= */ .pantalla{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--brand-900); } .pantalla-foto{ position:absolute; inset:0; } .pantalla-foto img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 2.4s var(--ease); } .pantalla.is-visible .pantalla-foto img{ transform:scale(1); } /* ---------- Carrusel de portada ---------- */ .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.06); transition:opacity 1.4s var(--ease); } .hero-slide.is-active{ opacity:1; animation:kenburns 9s linear forwards; } @keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } } .hero-dots{ position:absolute; z-index:3; bottom:40px; right:var(--gutter); display:flex; gap:9px; } .hero-dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.75); background:transparent; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease); } .hero-dots button.is-active{ background:#fff; transform:scale(1.25); } /* El velo es NEUTRO: oscurece para que se lea el texto, pero no tiñe la fotografía. En un estudio de visualización el color del render es el producto, y teñirlo sería tapar lo que se vende. */ .pantalla-velo{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,8,10,.90) 0%, rgba(8,8,10,.66) 46%, rgba(8,8,10,.04) 88%), linear-gradient(180deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,0) 26%, rgba(8,8,10,.34) 100%); } .pantalla--derecha .pantalla-velo{ background: linear-gradient(270deg, rgba(8,8,10,.90) 0%, rgba(8,8,10,.66) 46%, rgba(8,8,10,.04) 88%), linear-gradient(180deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,0) 26%, rgba(8,8,10,.34) 100%); } .pantalla-panel{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:calc(var(--header-h) + 60px) var(--gutter) 96px; } .pantalla-caja{ max-width:600px; } .pantalla--derecha .pantalla-caja{ margin-left:auto; } /* Panel blanco macizo pegado al borde de la pantalla, con los servicios uno debajo de otro. La fotografía se ve casi limpia al lado: el bloque de texto es el que aporta el contraste, no un velo encima de la foto. */ .pantalla--servicios .pantalla-panel{ max-width:none; width:100%; padding:0; display:flex; justify-content:flex-start; } .pantalla--servicios.pantalla--derecha .pantalla-panel{ justify-content:flex-end; } .pantalla-caja--ancho{ width:min(42%, 640px); max-width:none; /* Translúcido, para que se vea la fotografía por detrás. Al 75% el texto azul mantiene 7,8:1 sobre el baño y 6,6:1 sobre la cocina, muy por encima del 4,5:1 que exige la norma. OJO: esto depende de la foto. Con imágenes claras aguanta; con una foto oscura detrás habría que subir la opacidad. El desenfoque impide que el detalle de la imagen se cuele entre las letras. */ background:rgba(255,255,255,.50); color:var(--brand); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); padding:clamp(30px,3.2vw,54px) clamp(28px,3vw,52px); border:0; border-radius:0; box-shadow:0 20px 60px rgba(0,0,0,.22); } .pantalla--servicios h2{ color:var(--brand); font-weight:900; text-transform:uppercase; font-size:clamp(1.6rem,2.6vw,2.3rem); letter-spacing:-.01em; margin-bottom:1.1em; text-shadow:none; } /* El velo casi no hace falta: el texto va sobre blanco */ .pantalla--servicios .pantalla-velo{ background:linear-gradient(180deg, rgba(8,8,10,.20) 0%, rgba(8,8,10,.06) 40%, rgba(8,8,10,.22) 100%); } /* ---------- Portada: centrada, como en el original ---------- */ .intro .pantalla-panel{ display:flex; justify-content:center; } .intro .pantalla-caja{ max-width:840px; margin:0 auto; text-align:center; } .intro .rotulo{ justify-content:center; } .intro h1{ font-size:clamp(2.5rem,6.6vw,5rem); margin-bottom:.45em; } .intro-lead{ color:rgba(255,255,255,.94); font-size:clamp(1.02rem,1.5vw,1.22rem); font-weight:400; max-width:64ch; margin:0 auto; text-shadow:0 1px 20px rgba(0,0,0,.45); } /* Con el texto centrado el velo no puede ser lateral: va parejo */ .intro .pantalla-velo{ background:linear-gradient(180deg, rgba(8,8,10,.58) 0%, rgba(8,8,10,.34) 38%, rgba(8,8,10,.40) 66%, rgba(8,8,10,.66) 100%); } /* ---------- Dos servicios por pantalla, en dos columnas ---------- */ .pantalla h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:.5em; } .duo{ display:grid; gap:clamp(24px,2.4vw,34px); } .duo-item{ min-width:0; } .duo-num{ display:none; } .duo-item h3{ position:relative; padding-left:20px; color:var(--brand); font-weight:700; text-transform:uppercase; font-size:clamp(.86rem,1.05vw,.98rem); letter-spacing:.02em; line-height:1.35; margin-bottom:.7em; } .duo-item h3::before{ content:''; position:absolute; left:0; top:.42em; width:9px; height:9px; background:var(--acento); } .duo-item p{ color:var(--brand); font-size:.8rem; font-weight:500; text-transform:uppercase; letter-spacing:.012em; line-height:1.62; margin:0; } /* ---------- Flecha de bajada, redonda como en el original ---------- */ .baja{ position:absolute; z-index:3; left:50%; bottom:46px; transform:translateX(-50%); width:58px; height:58px; border-radius:50%; border:2px solid rgba(255,255,255,.55); display:grid; place-items:center; color:#fff; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .baja:hover{ background:rgba(255,255,255,.16); border-color:#fff; color:#fff; } .baja svg{ width:24px; height:24px; animation:baja 2.1s var(--ease) infinite; } @keyframes baja{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(3px); } } /* ============================================================= SECCIONES ============================================================= */ .section{ padding:clamp(72px,9vw,124px) 0; } .section-alt{ background:var(--bg-alt); } .section-dark{ background:var(--brand-900); color:rgba(255,255,255,.78); } .section-dark h2,.section-dark h3,.section-dark strong{ color:#fff; } .section-head{ max-width:760px; margin:0 auto clamp(44px,5vw,70px); text-align:center; } .section-head .eyebrow-dark::before{ display:none; } .section-sub{ font-size:1.08rem; color:var(--muted); margin:0; } .section-head-light .section-sub{ color:rgba(255,255,255,.68); } .lead{ font-size:1.15rem; color:var(--ink); } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,80px); align-items:center; } /* ---------- Filtros + Galería ---------- */ .filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:clamp(30px,4vw,48px); } .filter{ padding:10px 22px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:.9rem; font-weight:500; color:var(--body); cursor:pointer; transition:all .25s var(--ease); } .filter:hover{ border-color:var(--brand); color:var(--brand); } .filter.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700; } .gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:16px; } .g-item{ position:relative; margin:0; overflow:hidden; border-radius:var(--radius); cursor:zoom-in; background:var(--bg-alt); animation:fadeUp .5s var(--ease) both; } .g-item.g-wide{ grid-column:span 2; } .g-item.g-tall{ grid-row:span 2; } .g-item.is-hidden{ display:none; } .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .g-item:hover img{ transform:scale(1.07); } .g-item figcaption{ position:absolute; inset:auto 0 0 0; padding:44px 20px 18px; background:linear-gradient(180deg,transparent,rgba(18,19,47,.88)); color:#fff; opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .g-item:hover figcaption, .g-item:focus-within figcaption{ opacity:1; transform:translateY(0); } .g-item figcaption strong{ display:block; color:#fff; font-size:1rem; line-height:1.3; } .g-item figcaption span{ font-size:.82rem; color:rgba(255,255,255,.72); } @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} } /* ---------- Visor panorámico 360 ---------- */ .pano{ position:relative; max-width:1100px; margin-inline:auto; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); } .pano-viewport{ position:relative; /* 16:9 en vez de 2:1. Un recuadro demasiado ancho obliga al visor a abrir mucho el ángulo horizontal y la escena se deforma. */ aspect-ratio:16/9; min-height:300px; background:#0d0e22; cursor:grab; touch-action:none; overflow:hidden; } .pano-viewport canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; } .pano-viewport.is-dragging{ cursor:grabbing; } .pano-viewport:focus-visible{ outline:3px solid #fff; outline-offset:-3px; } /* Si el navegador no admite WebGL se muestra la panorámica entera */ .pano-viewport.sin-webgl{ background-position:center; cursor:default; } .pano-aviso{ position:absolute; inset:auto 0 0 0; margin:0; padding:12px 18px 58px; font-size:.85rem; color:rgba(255,255,255,.75); text-align:center; } .pano-viewport.is-ready .pano-loader{ opacity:0; pointer-events:none; } .pano-loader{ position:absolute; inset:0; display:grid; place-items:center; background:#0d0e22; transition:opacity .5s var(--ease); } .pano-loader span{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; animation:spin .9s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg);} } .pano-ui{ position:absolute; inset:auto 0 0 0; z-index:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 22px; background:linear-gradient(180deg,transparent,rgba(13,14,34,.85)); } .pano-hint{ display:flex; align-items:center; gap:9px; font-size:.88rem; color:rgba(255,255,255,.85); } .pano-hint svg{ width:22px; height:22px; } .pano-tabs{ display:flex; gap:8px; } .pano-tab{ padding:8px 18px; border-radius:999px; cursor:pointer; border:1.5px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font-size:.85rem; font-weight:500; backdrop-filter:blur(6px); transition:all .25s var(--ease); } .pano-tab:hover{ background:rgba(255,255,255,.2); } .pano-tab.is-active{ background:#fff; color:var(--brand); font-weight:700; border-color:#fff; } .vr-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:clamp(38px,4vw,58px); } .vr-benefits li{ padding-top:20px; border-top:2px solid rgba(255,255,255,.22); font-size:.95rem; color:rgba(255,255,255,.7); } .vr-benefits strong{ display:block; margin-bottom:6px; font-size:1.02rem; } /* ---------- Contacto ---------- */ .contact-grid{ align-items:start; } .contact-list{ display:grid; gap:22px; margin:32px 0 30px; } /* El botón de cita vive aquí abajo, junto al formulario, no en la cabecera: la plantilla deja la barra de arriba limpia. */ .cta-contacto{ margin-bottom:34px; } .contact-list li{ display:flex; gap:16px; align-items:flex-start; } .contact-list svg{ flex:0 0 auto; width:24px; height:24px; margin-top:4px; color:var(--brand); } .contact-list strong{ display:block; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:2px; } .contact-list a{ color:var(--ink); font-weight:500; } .contact-list a:hover{ color:var(--brand); } .map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); } .map iframe{ width:100%; height:280px; border:0; display:block; filter:grayscale(.25); } .form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow); } .field{ margin-bottom:18px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field label{ display:block; margin-bottom:7px; font-size:.85rem; font-weight:700; color:var(--ink); letter-spacing:.01em; } .field input,.field select,.field textarea{ width:100%; padding:13px 15px; font-family:inherit; font-size:.98rem; color:var(--ink); background:var(--bg-alt); border:1.5px solid var(--line); border-radius:var(--radius-sm); transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } .field textarea{ resize:vertical; min-height:120px; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; background:#fff; border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12); } .field input.is-error,.field textarea.is-error{ border-color:#d64545; background:#fdf3f3; } .check{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 22px; font-size:.86rem; color:var(--muted); line-height:1.55; cursor:pointer; } .check input{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; accent-color:var(--brand); } .form-note{ margin:16px 0 0; font-size:.9rem; text-align:center; min-height:1.2em; } /* Campo trampa antibot: fuera de la vista pero no display:none, que algunos bots detectan y esquivan */ .trampa{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } /* Estados del envío */ .form.enviando{ opacity:.6; pointer-events:none; } .form-exito{ padding:26px 24px; text-align:center; background:#f0f9f4; border:1.5px solid #bfe3cd; border-radius:var(--radius-sm); color:#1c7c4a; } .form-exito strong{ display:block; color:#146138; font-size:1.1rem; margin-bottom:6px; } .form-note.ok{ color:#1c7c4a; font-weight:500; } .form-note.err{ color:#d64545; font-weight:500; } /* ============================================================= PIE DE PÁGINA ============================================================= */ .site-footer{ background:var(--brand-900); color:rgba(255,255,255,.62); } .footer-inner{ display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:clamp(34px,5vw,70px); padding-top:clamp(56px,7vw,84px); padding-bottom:clamp(44px,5vw,64px); } /* object-fit:contain es el seguro: si algún día la columna se estrecha más que el logo, la imagen se encoge entera en vez de aplastarse a lo ancho. */ .footer-brand img{ height:60px; width:auto; max-width:100%; object-fit:contain; margin-bottom:22px; } .footer-brand p{ max-width:38ch; font-size:.95rem; } .social-footer{ margin-top:22px; } .social-footer a{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); width:40px; height:40px; } .social-footer a:hover{ background:#fff; color:var(--brand); } .footer-col h4{ color:#fff; margin-bottom:1.3em; font-size:.82rem; letter-spacing:.14em; } .footer-col ul{ display:grid; gap:11px; } .footer-col a{ color:rgba(255,255,255,.62); font-size:.95rem; } .footer-col a:hover{ color:#fff; } .footer-contact{ font-style:normal; } .footer-contact p{ margin-bottom:.9em; font-size:.95rem; line-height:1.65; } .footer-contact .btn{ margin-top:8px; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:20px 0; } .footer-bottom .container{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; align-items:center; } .footer-bottom p{ margin:0; font-size:.85rem; color:rgba(255,255,255,.45); } .footer-bottom a{ color:rgba(255,255,255,.55); } .footer-bottom a:hover{ color:#fff; } .footer-bottom .is-current-page{ color:rgba(255,255,255,.9); font-weight:500; } /* ============================================================= PÁGINAS LEGALES ============================================================= */ .legal-hero{ background:linear-gradient(120deg,var(--brand) 0%,var(--brand-800) 100%); padding:calc(var(--header-h) + 60px) 0 60px; color:rgba(255,255,255,.8); } .legal-hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:.3em; } .legal-hero p{ margin:0; font-size:1.02rem; } .legal-hero .breadcrumb{ margin-bottom:1.4em; font-size:.88rem; color:rgba(255,255,255,.62); } .legal-hero .breadcrumb a{ color:rgba(255,255,255,.82); } .legal-hero .breadcrumb a:hover{ color:#fff; } .legal-body{ padding:clamp(52px,6vw,88px) 0 clamp(64px,7vw,104px); } .legal-wrap{ max-width:860px; margin:0 auto; } .legal-wrap h2{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin-top:2.2em; padding-top:1.4em; border-top:1px solid var(--line); color:var(--brand); } .legal-wrap h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; } .legal-wrap h3{ font-size:1.08rem; margin-top:1.8em; color:var(--ink); } .legal-wrap p{ font-size:1rem; } .legal-wrap ul{ margin:0 0 1.3em; display:grid; gap:11px; } .legal-wrap ul li{ position:relative; padding-left:24px; font-size:1rem; } .legal-wrap ul li::before{ content:''; position:absolute; left:2px; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--brand); opacity:.45; } .legal-wrap a{ text-decoration:underline; text-underline-offset:3px; } .legal-datos{ background:var(--bg-alt); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-sm); padding:24px 28px; margin:0 0 2em; } .legal-datos dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 20px; } .legal-datos dt{ font-weight:700; color:var(--ink); font-size:.92rem; } .legal-datos dd{ margin:0; font-size:.95rem; } .legal-nota{ margin-top:3em; padding-top:1.6em; border-top:1px solid var(--line); font-size:.88rem; color:var(--muted); } .legal-otras{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.4em; } @media (max-width:620px){ .legal-datos{ padding:20px; } .legal-datos dl{ grid-template-columns:1fr; gap:2px 0; } .legal-datos dd{ margin-bottom:10px; } } /* ============================================================= LIGHTBOX ============================================================= */ .lightbox{ position:fixed; inset:0; z-index:2000; display:none; place-items:center; padding:5vh 6vw; background:rgba(10,11,26,.94); backdrop-filter:blur(6px); } .lightbox.is-open{ display:grid; animation:fade .28s var(--ease); } @keyframes fade{ from{opacity:0} to{opacity:1} } .lb-figure{ margin:0; max-width:100%; max-height:100%; text-align:center; } .lb-figure img{ max-width:100%; max-height:82vh; width:auto; margin:0 auto; border-radius:var(--radius-sm); box-shadow:0 30px 90px rgba(0,0,0,.6); } .lb-figure figcaption{ margin-top:16px; color:rgba(255,255,255,.8); font-size:.95rem; } .lb-close,.lb-nav{ position:absolute; z-index:2; display:grid; place-items:center; background:rgba(255,255,255,.1); color:#fff; border:0; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease); } .lb-close{ top:22px; right:26px; width:46px; height:46px; border-radius:50%; font-size:30px; line-height:1; } .lb-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; font-size:34px; line-height:1; } .lb-prev{ left:20px; } .lb-next{ right:20px; } .lb-close:hover{ background:rgba(255,255,255,.24); } .lb-nav:hover{ background:rgba(255,255,255,.24); } /* Volver arriba */ .to-top{ position:fixed; right:22px; bottom:22px; z-index:900; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--brand); color:#fff; font-size:19px; box-shadow:0 10px 26px rgba(var(--brand-rgb),.4); opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s var(--ease); } .to-top.is-visible{ opacity:1; visibility:visible; transform:none; } .to-top:hover{ background:var(--brand-600); color:#fff; transform:translateY(-3px); } /* ============================================================= ANIMACIONES DE ENTRADA ============================================================= */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible{ opacity:1; transform:none; } /* ---------- Menú de móvil ---------- Sin esto los enlaces se salen de la pantalla: la cabecera de esta plantilla es blanca, así que el desplegable también va en blanco. */ @media (max-width:900px){ :root{ --header-h:60px; } .brand img{ height:32px; max-width:60vw; object-fit:contain; } .header-inner{ gap:14px; } .nav-toggle{ display:flex; margin-left:auto; } .nav{ position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:0 var(--gutter); background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 18px 38px rgba(0,0,0,.16); max-height:0; overflow:hidden; visibility:hidden; transition:max-height .45s var(--ease), padding .3s var(--ease), visibility 0s linear .45s; } .nav.is-open{ max-height:80vh; overflow-y:auto; visibility:visible; padding:8px var(--gutter) 24px; transition:max-height .45s var(--ease), padding .3s var(--ease), visibility 0s; } .nav > a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--ink); } .nav > a:last-child{ border-bottom:0; } .nav > a::after{ display:none; } } /* ============================================================= RESPONSIVE ============================================================= */ @media (max-width:980px){ .duo{ grid-template-columns:1fr; gap:30px; } /* El panel de servicios ocupa el 42% en escritorio; en un móvil eso deja el texto en una tira de una palabra por línea. Aquí pasa a ocupar el ancho completo, con un margen a los lados. Las reglas necesitan la misma especificidad que las de escritorio para poder ganarles. */ .pantalla-caja{ max-width:none; } .pantalla--servicios .pantalla-caja--ancho{ width:auto; max-width:none; margin:0 var(--gutter); } .pantalla--derecha .pantalla-caja{ margin-left:var(--gutter); } .pantalla--servicios .pantalla-panel, .pantalla--servicios.pantalla--derecha .pantalla-panel{ justify-content:center; padding:calc(var(--header-h) + 46px) 0 70px; } /* En móvil el velo va de arriba abajo: no hay «lado» donde poner el texto */ .pantalla-velo, .pantalla--derecha .pantalla-velo{ background:linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.5) 45%, rgba(8,8,10,.8) 100%); } .pantalla{ min-height:0; } .pantalla.intro{ min-height:100vh; min-height:100svh; } .pantalla-panel{ padding:calc(var(--header-h) + 54px) var(--gutter) 80px; } .baja{ display:none; } .grid-2{ grid-template-columns:1fr; gap:38px; } .stats{ grid-template-columns:repeat(3,1fr); } /* El pie pasa de tres columnas a dos, con la marca ocupando toda la fila */ .footer-inner{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } } @media (max-width:760px){ /* Y en móvil, una sola columna: en tres, la marca se queda en una tira tan estrecha que aplasta el logo y la última columna se sale de pantalla */ .footer-inner{ grid-template-columns:1fr; } .footer-bottom .container{ justify-content:flex-start; } /* Dos campos uno al lado del otro en un móvil dan 95 px cada uno: imposible escribir. En pantalla estrecha van apilados. */ .field-row{ grid-template-columns:1fr; } .gallery{ grid-template-columns:1fr; } .form-envio .btn{ width:100%; } .tarjeta-form{ padding:26px 20px; } } @media (max-width:640px){ .stats{ grid-template-columns:1fr; } .intro-acciones .btn{ width:100%; } } /* ============================================================= SECCIONES CLARAS — galería y contacto Replican el patrón «style3» de Big Picture: fondo plano, todo centrado y el contenido a lo ancho. ============================================================= */ .seccion-clara{ background:#f2f3f5; padding:clamp(64px,8vw,110px) 0; } .cabecera-seccion{ max-width:860px; margin:0 auto clamp(36px,4.5vw,60px); text-align:center; } .cabecera-seccion h2{ color:var(--brand); font-weight:900; text-transform:uppercase; font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-.01em; margin-bottom:.5em; } .cabecera-seccion p{ color:var(--body); font-size:clamp(1rem,1.3vw,1.12rem); margin:0 auto; max-width:66ch; } .aviso-contacto{ margin-top:.9em !important; color:var(--brand); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem !important; } /* ---------- Galería: dos columnas pegadas, sin huecos ---------- */ .gallery{ display:grid; grid-template-columns:1fr 1fr; gap:0; width:100%; max-width:1400px; margin:0 auto; } .g-item{ position:relative; margin:0; overflow:hidden; aspect-ratio:4/3; cursor:zoom-in; background:var(--brand-900); } .g-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); } .g-item:hover img{ transform:scale(1.05); } /* El pie solo al pasar por encima: en reposo manda la imagen */ .g-item figcaption{ position:absolute; inset:auto 0 0 0; padding:22px 20px 18px; background:linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.82) 100%); color:#fff; opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .g-item:hover figcaption, .g-item:focus-within figcaption{ opacity:1; transform:translateY(0); } .g-item figcaption strong{ display:block; color:#fff; font-weight:700; font-size:1rem; line-height:1.3; } .g-item figcaption span{ display:block; margin-top:3px; color:rgba(255,255,255,.78); font-size:.82rem; } /* ---------- Contacto: el formulario en tarjeta blanca ---------- */ .tarjeta-form{ background:#fff; max-width:1000px; margin:0 auto; padding:clamp(28px,3.6vw,58px); box-shadow:0 18px 50px rgba(22,23,43,.08); } .seccion-contacto .field label{ position:absolute; left:-9999px; /* la etiqueta sigue ahí para lectores de pantalla; a la vista basta el texto de dentro del campo */ } .seccion-contacto .field{ position:relative; } .seccion-contacto input, .seccion-contacto select, .seccion-contacto textarea{ border-radius:8px; border:1px solid #dcdee6; background:#fff; padding:15px 18px; font-size:1rem; } .seccion-contacto input::placeholder, .seccion-contacto textarea::placeholder{ color:#a8abbb; } .seccion-contacto input:focus, .seccion-contacto select:focus, .seccion-contacto textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12); } .form-envio{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; } .btn-outline-brand{ background:transparent; color:var(--brand); border-color:var(--brand); } .btn-outline-brand:hover{ background:var(--brand); color:#fff; } .seccion-contacto .form-note{ text-align:center; } @media (max-width:760px){ .gallery{ grid-template-columns:1fr; } .form-envio .btn{ width:100%; } } /* Crédito de la plantilla — exigido por la licencia CCA 3.0 de HTML5 UP. Discreto, pero presente y legible: el compromiso es dar crédito, no esconderlo. */ .credito-plantilla{ opacity:.72; font-size:.82rem; } .credito-plantilla a{ color:inherit; text-decoration:underline; text-underline-offset:2px; } .credito-plantilla a:hover{ color:#fff; } /* El pie pinta sus enlaces en blanco translúcido, y eso dejaba el botón «Agendar cita» en blanco sobre blanco: invisible. */ .site-footer .btn-light, .site-footer .btn-light:hover{ color:var(--brand); }