/* Hallmark · macrostructure: custom (Four Panes) · tone: coastal-dusk trust · anchor hue: ola 200° Hallmark · theme: custom (brief-pinned, DECISIONES §2) · paper #FBF3EA · accent #085D81 · Marcellus + Figtree Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 ═══════════════════════════════════════════════════════════════════════ BONITA SPRINGS GARAGE DOOR PROS · Estilos del sitio 369 Creative Agency · septiembre 2026 Mundo visual (sale del logo, no de una plantilla; DECISIONES §2-§4): - CONCHA pálida como campo de página: el cielo de Bonita antes del atardecer. El hero se entibia hacia ámbar abajo a la derecha, y el cierre vuelve a entibiarse antes de la noche (el pie, marino hondo). - MARINO como tinta (títulos, texto fuerte, la puerta). - OLA (#085D81, el azul de la ola del logo) para TODA acción: botones, enlaces, foco. Ningún sitio de la cartera lo usa. - ATARDECER (los 4 tonos de las ventanas de la puerta del logo) SOLO como decoración: dentro de las ventanas de la firma, en la apertura y en el ornamento de los cuatro paneles. Nunca fondo de botón con texto. - Las JUNTAS finas de la puerta (marino al 15 %) separan filas y bloques. Letras: Marcellus (H1, H2, teléfono grande) sobre Figtree a 20 px. Esquinas: 4 px en todo. Nunca Inter, nunca degradado violeta, nunca glassmorphism, nunca texto oscuro sobre naranja. Secciones: 0 Variables 9 Firma "Four Panes" 18 Formularios 1 Base 10 Reglas por escrito 19 Plano, legal y 404 2 Tipografía 11 Reseñas 20 Apertura "Golden Hour" 3 Estructura 12 Bonita (permiso, agua, zona) 21 Entradas por scroll 4 Botones 13 Verificador de ZIP 22 Responsive 5 Motivos 14 FAQ acordeón 23 Sin JavaScript 6 Cabecera y menú 15 Cierre 24 Menos movimiento 7 Hero 16 Pie y barra móvil 25 Impresión 8 Índice de servicios 17 Artículo (servicios, permisos, zona) ═══════════════════════════════════════════════════════════════════════ */ /* ═══ 0 · VARIABLES ═══ Contrastes MEDIDOS (WCAG 2.2, luminancia relativa; script en el scratchpad de la sesión): - --texto sobre --concha ............ 12.26:1 sobre --concha-2 11.10:1 sobre --papel 13.48:1 - --marino sobre --concha ........... 14.27:1 sobre --concha-2 12.91:1 sobre --papel 15.68:1 - --gris-texto sobre --concha ....... 5.47:1 sobre --concha-2 4.95:1 sobre --papel 6.01:1 - blanco sobre --ola ................ 7.26:1 (botón principal, todos los estados) - blanco sobre --ola-honda .......... 9.62:1 (hover / active) - --ola sobre --concha .............. 6.61:1 sobre --concha-2 5.98:1 sobre --papel 7.26:1 (enlaces, foco ≥ 3:1) - blanco sobre --marino ............. 15.68:1 --niebla sobre --marino 10.60:1 - blanco sobre --marino-hondo ....... 17.88:1 --niebla sobre --marino-hondo 12.09:1 (pie) - --brasa sobre --concha ............ 6.03:1 sobre --papel 6.62:1 (estrellas; acento de texto, poco uso) - borde de campo #6E7781 ............ 4.55:1 sobre blanco, 4.14 sobre concha, 3.74 sobre concha-2 (≥ 3:1 para controles) - --error #9B2C1F ................... 7.57:1 sobre blanco, 6.89 sobre concha - Hero "Atardecer": --marino sobre la mezcla concha→atardecer-3 al 50 % 11.37:1; al 100 % 9.10:1. --gris-texto NO baja del 25 % de la mezcla (4.89:1); el texto del hero vive sobre concha sólida. - blanco sobre --atardecer-1..4 ..... 2.83 / 2.15 / 1.72 / 1.45:1 → por eso el atardecer NUNCA es fondo de texto ni de botón (DECISIONES §2). Ningún hex de DECISIONES tuvo que ajustarse. */ :root { --concha: #FBF3EA; --concha-2: #F4E7DA; --papel: #FFFFFF; --marino: #0A2440; --texto: #22303D; --gris-texto: #5A6470; --ola: #085D81; --ola-honda: #064A67; --marino-hondo: #06182C; --atardecer-1: #FE6C3F; --atardecer-2: #FE9754; --atardecer-3: #FEB767; --atardecer-4: #FED07D; --brasa: #A5380A; --niebla: #C9D6E2; --borde-campo: #6E7781; --error: #9B2C1F; --puerta: #0A2440; /* la hoja de la puerta del logo (#082342 / #06213E) */ --linea: rgba(10, 36, 64, .15); /* junta fina: marino al 15 % */ --linea-fuerte: rgba(10, 36, 64, .32); --linea-clara: rgba(255, 255, 255, .18); --sol: linear-gradient(90deg, var(--atardecer-1) 0%, var(--atardecer-2) 36%, var(--atardecer-3) 70%, var(--atardecer-4) 100%); --foco: var(--ola); --letra-titulo: "Marcellus", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --letra-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --radio: 4px; --ancho: 1240px; --margen: clamp(16px, 4vw, 40px); --banda: clamp(72px, 9vw, 128px); --cabecera: 88px; --izquierda: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen))); /* Escala de espacios de 4 pt */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.55, 0, .75, .1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); } /* ═══ 1 · BASE ═══ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--cabecera) + 16px); } body { margin: 0; overflow-x: clip; font-family: var(--letra-texto); font-size: 1.25rem; line-height: 1.55; font-weight: 400; color: var(--texto); background: var(--concha); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } a { color: var(--ola); text-decoration-thickness: 1px; text-underline-offset: 4px; } a:hover { color: var(--ola-honda); text-decoration-thickness: 2px; } /* Foco: anillo de 3 px en --ola con 2 px de separación (DECISIONES §2). Sobre oscuro, blanco. */ :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; } .reglas, .pie, .caja--marino, .golden { --foco: #FFFFFF; } ::selection { background: var(--ola); color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .saltar { position: absolute; left: 12px; top: -80px; z-index: 2000; background: var(--ola); color: #fff; padding: 12px 18px; font-weight: 700; border-radius: var(--radio); } .saltar:focus { top: 12px; color: #fff; } .ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } symbol.relleno path, .relleno { fill: currentColor; stroke: none; } .sin-quiebre, a[href^="tel:"] { white-space: nowrap; } [hidden] { display: none !important; } @view-transition { navigation: auto; } /* ═══ 2 · TIPOGRAFÍA ═══ Marcellus (serif de mayúsculas acampanadas, hermana del "BONITA SPRINGS" del logo) para H1, H2 y el teléfono grande; Figtree para leer, a 20 px (19 en móvil). El público es mayor: letra grande, medida corta. */ h1, h2, h3, h4 { color: var(--marino); margin: 0 0 .5em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; } h1, h2 { font-family: var(--letra-titulo); font-weight: 400; } h1 { font-size: clamp(2.5rem, 4.4vw + 1rem, 4.4rem); line-height: 1.05; letter-spacing: -.012em; } h2 { font-size: clamp(2rem, 1.35rem + 2.1vw, 3.05rem); line-height: 1.1; letter-spacing: -.008em; } h3, h4, .h3 { font-family: var(--letra-texto); font-weight: 700; letter-spacing: -.005em; } h3, .h3 { font-size: 1.3rem; line-height: 1.3; } h4 { font-size: 1.12rem; line-height: 1.3; } p { margin: 0 0 1em; } .lead { font-size: clamp(1.25rem, 1.12rem + .4vw, 1.45rem); line-height: 1.5; max-width: 56ch; text-wrap: pretty; color: var(--texto); } strong { font-weight: 700; } /* Rótulo corto: mayúsculas espaciadas en Figtree 600 (DECISIONES §2). Nunca sobre un H2. */ .rotulo, .pane__datos dt, .indice__h { font: 600 .8rem/1.2 var(--letra-texto); letter-spacing: .14em; text-transform: uppercase; } /* ═══ 3 · ESTRUCTURA ═══ */ .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); } .angosto { max-width: 920px; } .banda { padding-block: var(--banda); position: relative; } .dos-col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .enlaces { display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 600; margin: 0; } .foto { margin: 0; position: relative; overflow: hidden; border-radius: var(--radio); background: var(--concha-2); } .foto img { width: 100%; height: 100%; object-fit: cover; } /* ═══ 4 · BOTONES ═══ Llamar siempre primero. Principal: --ola con texto blanco en TODOS los estados (7.26:1; hover --ola-honda, 9.62:1). Secundario: borde --ola. Sobre fondo oscuro: blanco con letra marina y secundario con borde blanco. */ .botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: 1.6em; } .botones--columna { flex-direction: column; } .botones--columna .boton { width: 100%; } .boton { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 56px; padding: .8em 1.35em; font: 700 1.1rem/1.1 var(--letra-texto); letter-spacing: .005em; text-decoration: none; border: 2px solid transparent; border-radius: var(--radio); cursor: pointer; white-space: nowrap; transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out), transform .1s; touch-action: manipulation; } .boton:active { transform: translateY(1px); } .boton .ico { width: 1.25em; height: 1.25em; stroke-width: 2; } .boton--ola, .boton--ola:visited { background: var(--ola); color: #fff; } .boton--ola:hover, .boton--ola:active { background: var(--ola-honda); color: #fff; } .boton--linea, .boton--linea:visited { background: transparent; color: var(--ola); border-color: var(--ola); } .boton--linea:hover { background: rgba(8, 93, 129, .08); color: var(--ola-honda); border-color: var(--ola-honda); } .boton--blanco, .boton--blanco:visited { background: #fff; color: var(--marino); } .boton--blanco:hover { background: var(--concha); color: var(--marino); } .boton--linea-clara, .boton--linea-clara:visited { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); } .boton--linea-clara:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; } .boton--chico { min-height: 48px; padding: .55em 1.05em; font-size: 1.02rem; } .boton[disabled] { opacity: .65; cursor: progress; } .sms-aviso { font-size: 1rem; margin: .6em 0 0; flex-basis: 100%; color: var(--texto); } .caja--marino .sms-aviso, .reglas .sms-aviso { color: var(--niebla); } /* ═══ 5 · MOTIVOS: los cuatro paneles y las gaviotas ═══ Los cuatro paneles son las 4 ventanas de la puerta del logo: cuatro rectángulos horizontales casi pegados que comparten UN degradado de atardecer (el fondo se estira al 400 % y cada panel muestra su cuarto). */ .cuatro { display: inline-flex; gap: 3px; vertical-align: middle; } .cuatro i { display: block; width: 26px; height: 9px; border-radius: 1px; background: var(--sol); background-size: 400% 100%; } .cuatro i:nth-child(1) { background-position: 0 0; } .cuatro i:nth-child(2) { background-position: 33.333% 0; } .cuatro i:nth-child(3) { background-position: 66.666% 0; } .cuatro i:nth-child(4) { background-position: 100% 0; } .gaviotas { width: 64px; height: 26px; fill: none; stroke: var(--marino); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; } /* ═══ 6 · CABECERA Y MENÚ ═══ Clara (papel), con el SELLO real del cliente (logo nuevo del 30/09/2026) y a su lado el nombre en HTML: a 64 px el texto interno del sello no se lee. Menú a 19 px en 600. Botón Call fijo a la derecha. */ .cabecera { position: sticky; top: 0; z-index: 900; background: var(--papel); border-bottom: 1px solid var(--linea); } .cabecera__fila { display: flex; align-items: center; gap: 20px; min-height: var(--cabecera); position: relative; } .marca { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: var(--marino); } .cabecera .contenedor { max-width: 1440px; } /* Sello 1155×1107 (recursos.py): 64 px de alto en escritorio, 46 px en móvil. El nombre repite la tipografía del sello: serif para "Bonita Springs" y versalitas espaciadas para "Garage Door Pros" (brasa sobre papel ≥ 4.5:1). */ .marca__img { height: 64px; width: auto; } .marca__texto { display: flex; flex-direction: column; gap: 5px; line-height: 1; } .marca__nombre { font: 400 1.62rem/1 var(--letra-titulo); color: var(--marino); white-space: nowrap; } .marca__sub { font: 700 .74rem/1 var(--letra-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--brasa); white-space: nowrap; } .logo-texto { font: 400 1.35rem/1.1 var(--letra-titulo); color: var(--marino); max-width: 14em; } .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav > a, .nav__grupo > button { display: inline-flex; align-items: center; gap: .3em; padding: 10px 12px; min-height: 48px; white-space: nowrap; font: 600 1.1875rem/1.1 var(--letra-texto); color: var(--marino); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: var(--radio); } .nav > a:hover, .nav__grupo > button:hover { color: var(--ola); box-shadow: inset 0 -2px 0 var(--ola); } .nav > a[aria-current="page"], .nav__grupo > button.actual { color: var(--ola); box-shadow: inset 0 -3px 0 var(--ola); } .nav__grupo > button .ico { width: 1em; height: 1em; stroke-width: 2.2; transition: transform .2s var(--ease-out); } .nav__grupo > button[aria-expanded="true"] .ico { transform: rotate(180deg); } .desplegable { position: absolute; top: calc(100% + 1px); left: var(--margen); right: var(--margen); z-index: 910; background: var(--papel); color: var(--texto); padding: 32px 36px 24px; border: 1px solid var(--linea); border-top: 0; border-radius: 0 0 var(--radio) var(--radio); box-shadow: 0 30px 50px -26px rgba(6, 24, 44, .45); } .desplegable__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } .desplegable__h { font: 600 .8rem/1.2 var(--letra-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-texto); margin: 0 0 .8em; padding-bottom: .7em; border-bottom: 1px solid var(--linea); } .desplegable ul { list-style: none; margin: 0; padding: 0; } .desplegable li a { display: block; padding: 8px 0; color: var(--marino); text-decoration: none; font-weight: 700; font-size: 1.05rem; line-height: 1.25; } .desplegable li a small { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--gris-texto); font-size: .92rem; margin-top: 3px; } .desplegable li a small .ico { width: 1em; height: 1em; color: var(--ola); } .desplegable li a:hover span { color: var(--ola); text-decoration: underline; text-underline-offset: 4px; } .desplegable__pie { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 1.02rem; font-weight: 600; } .cabecera__llamar { flex: none; } .hamburguesa { display: none; width: 52px; height: 52px; align-items: center; justify-content: center; background: none; border: 2px solid var(--linea-fuerte); color: var(--marino); border-radius: var(--radio); cursor: pointer; } .hamburguesa .ico { width: 28px; height: 28px; stroke-width: 2; } .menu-movil { position: fixed; inset: var(--cabecera) 0 0 0; z-index: 890; background: var(--papel); color: var(--texto); overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--margen) 120px; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s linear .3s; } .menu-movil[data-abierto="true"] { transform: none; visibility: visible; transition: transform .3s var(--ease-out); } .menu-movil ul { list-style: none; margin: 0 0 20px; padding: 0; } .menu-movil a { color: var(--marino); text-decoration: none; } .menu-movil__principal a { display: block; padding: 14px 0; font: 400 1.5rem/1.2 var(--letra-titulo); border-bottom: 1px solid var(--linea); } .menu-movil__h { font: 600 .8rem/1.2 var(--letra-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-texto); margin: 26px 0 4px; } .menu-movil ul:not(.menu-movil__principal) a { display: block; padding: 10px 0; font-weight: 600; font-size: 1.15rem; } /* ═══ 7 · HERO ═══ "Atardecer" (sin fotos, DECISIONES §7): el cielo en concha que se entibia hacia ámbar abajo a la derecha, sin sol dibujado; a la derecha el isotipo real, grande; el texto a la izquierda sobre concha sólida (contraste AA medido arriba). Con foto: a todo el ancho, con un velo CLARO del lado del texto (los colores del texto no cambian entre las dos versiones). */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--concha); color: var(--texto); } .hero__cielo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 58% 78% at 80% 104%, rgba(254, 183, 103, .92) 0%, rgba(254, 208, 125, .7) 34%, rgba(254, 208, 125, .22) 62%, rgba(251, 243, 234, 0) 82%), linear-gradient(180deg, var(--concha) 0%, var(--concha) 58%, #FCEEDD 100%); } .hero h1 { color: var(--marino); } .hero__contenido { position: relative; } .migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; font-size: 1rem; color: var(--gris-texto); } .migas li + li::before { content: "/"; margin-right: 6px; color: var(--gris-texto); } .migas a { color: var(--gris-texto); } .migas a:hover { color: var(--ola); } .hero__licencia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 22px 0 0; font-size: 1.02rem; color: var(--gris-texto); } .hero__licencia .ico { color: var(--marino); } .hero__licencia span:first-of-type { display: inline-flex; } .hero__licencia span + span { position: relative; padding-left: 22px; } .hero__licencia span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: var(--linea-fuerte); } /* Home "Atardecer" */ .hero--home.hero--atardecer { min-height: min(calc(100svh - var(--cabecera)), 860px); display: grid; align-items: center; } .hero__rejilla { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(48px, 7vh, 88px) clamp(56px, 8vh, 96px); } .hero--home h1 { max-width: 15ch; } .hero--home .lead { max-width: 44ch; } .hero__marca { position: relative; align-self: end; justify-self: end; width: 100%; max-width: 600px; margin-bottom: clamp(-40px, -3vh, -16px); } .hero__isotipo { width: 100%; height: auto; } /* Home con foto: a todo el ancho, velo claro del lado del texto; en móvil, vertical con velo desde abajo */ .hero--foto .hero__fondo { position: absolute; inset: 0; z-index: -2; } .hero--foto .hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 60% 40%); } .hero--home.hero--foto { min-height: min(calc(100svh - var(--cabecera)), 860px); display: grid; align-items: center; } .hero--home.hero--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(251, 243, 234, .96) 0%, rgba(251, 243, 234, .92) 34%, rgba(251, 243, 234, .6) 50%, rgba(251, 243, 234, 0) 66%); } .hero--home.hero--foto .hero__contenido { padding-block: 72px 88px; max-width: calc(var(--ancho) * .56); margin-left: 0; } .hero--home.hero--foto .contenedor { margin-left: var(--izquierda); padding-left: 0; } /* Internas "Atardecer": más bajo, con el panel de las cuatro ventanas a la derecha */ .hero--interno { min-height: clamp(400px, 52vh, 560px); display: grid; align-items: center; } .hero--interno .hero__contenido { padding-block: clamp(40px, 6vh, 72px) clamp(56px, 8vh, 96px); } .hero--interno h1 { font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.6rem); max-width: 19ch; } .hero--interno .lead { max-width: 50ch; } .hero--interno.hero--atardecer .hero__cielo { background: radial-gradient(ellipse 46% 90% at 88% 112%, rgba(254, 183, 103, .9) 0%, rgba(254, 208, 125, .6) 36%, rgba(254, 208, 125, .16) 64%, rgba(251, 243, 234, 0) 84%), linear-gradient(180deg, var(--concha) 0%, var(--concha) 60%, #FCEEDD 100%); } .hero--interno.hero--atardecer .hero__contenido { max-width: calc(var(--ancho) * .66); margin-left: var(--izquierda); padding-left: 0; padding-right: var(--margen); } .hero__ventanal { position: absolute; right: 0; bottom: 0; width: min(34vw, 480px); pointer-events: none; z-index: -1; } .ventanal { width: 100%; height: auto; } .ficha { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 6px 0 0; padding: 0; font-size: 1.05rem; color: var(--texto); } .ficha li { display: inline-flex; align-items: center; gap: 9px; } .ficha .ico, .ficha-zips .ico { color: var(--ola); } .ficha strong { color: var(--marino); } .ficha-zips { display: inline-flex; align-items: center; gap: 9px; font-size: 1.05rem; margin: 0; color: var(--texto); } /* Internas con foto: foto a todo el ancho con velo claro a la izquierda (escritorio) */ .hero--interno.hero--foto .hero__foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; } /* Velo firme en toda la columna del texto (hasta el 50 %) y fundido corto: ninguna cara queda a la vista detrás del H1. Las fotos con la persona al centro traen --zoom en datos.FOTOS, que las acerca desde el borde izquierdo y corre a la persona a la derecha. */ .hero--interno.hero--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(251, 243, 234, .97) 0%, rgba(251, 243, 234, .95) 50%, rgba(251, 243, 234, .6) 60%, rgba(251, 243, 234, 0) 72%); } @media (min-width: 761px) { .hero--interno.hero--foto .hero__fondo img { transform: scale(var(--zoom, 1)); transform-origin: var(--origen, 0% 40%); } } .hero--interno.hero--foto .hero__contenido { max-width: calc(var(--ancho) * .6); margin-left: var(--izquierda); padding-left: 0; } .hero--plano { min-height: 0; } .hero--plano .hero__contenido { padding-block: 64px 56px; } .hero__cuatro { display: flex; margin: 0 0 22px; } .hero--plano .enlaces { margin-top: 28px; } /* ═══ 8 · ÍNDICE DE SERVICIOS ═══ Todo a la vista (nunca pestañas cerradas). Cada grupo es una banda con su nombre a la izquierda y sus filas a la derecha, en dos columnas, separadas por juntas finas como las de la puerta: nombre, síntoma y tiempo en sitio. */ .servicios { background: var(--concha); padding-top: calc(var(--banda) * .8); } .servicios__cabeza { max-width: 60ch; margin-bottom: var(--e7); } .indice__grupos { border-top: 2px solid var(--marino); } .indice__grupo { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 56px); padding: 26px 0 30px; border-bottom: 1px solid var(--linea); } .indice__h { color: var(--marino); margin: 18px 0 0; } .indice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 44px); } .indice li { border-bottom: 1px solid var(--linea); } .indice li:nth-last-child(-n + 2):nth-child(odd), .indice li:last-child { border-bottom: 0; } /* Cada fila apila nombre, síntoma y tiempo en sitio: los tiempos del contenido son frases ("About an hour for cables; 1 to 2 hours to rehang a door") y en una columna aparte pisaban el nombre. */ .indice a { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "nombre" "que" "tiempo"; gap: 4px 0; padding: 18px 12px 18px 0; color: var(--texto); text-decoration: none; } .indice__nombre { grid-area: nombre; font-weight: 700; font-size: 1.2rem; color: var(--marino); } .indice__que { grid-area: que; color: var(--gris-texto); font-size: 1.02rem; } .indice__tiempo { grid-area: tiempo; display: flex; align-items: flex-start; gap: 7px; margin-top: 4px; color: var(--ola); font-size: 1rem; font-weight: 600; line-height: 1.4; } .indice__tiempo .ico { width: 1.05em; height: 1.05em; margin-top: .18em; } .indice a:hover .indice__nombre { color: var(--ola); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .servicios__pie { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 34px 0 0; font-weight: 600; } /* ═══ 9 · FIRMA "FOUR PANES" ═══ "Nothing goes quiet": dos puertas a la vista a la vez, sin pestañas, en papel sobre concha-2 (DECISIONES §2: --papel para las tarjetas de la firma). Cada ventana de la puerta es un paso. Con JS (.panes-listo) la cubierta marina tapa las ventanas hasta que la puerta entra en pantalla (.en-vista): ahí se retira en UN barrido de izquierda a derecha (se encoge hacia la derecha) y los pasos pasan a "hecho" con un leve desfase. Sin JS o con movimiento reducido, las ventanas están llenas y los pasos hechos. */ .four-panes { background: var(--concha-2); } .four-panes__cabeza { max-width: 60ch; margin-bottom: var(--e7); } .four-panes__casos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); align-items: start; } .caso { margin: 0; background: var(--papel); border-radius: var(--radio); padding: clamp(22px, 2.6vw, 38px); box-shadow: 0 1px 0 rgba(10, 36, 64, .06), 0 26px 44px -34px rgba(10, 36, 64, .5); } .caso__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .caso__h { font: 400 clamp(1.6rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--letra-titulo); color: var(--marino); margin: 0 0 .6em; } .caso__puerta { margin: 4px 0 28px; } .puerta { width: 100%; height: auto; } .puerta__muro { fill: var(--puerta); } .puerta__filo { fill: var(--concha-2); } .puerta__hoja { fill: var(--puerta); } .puerta .junta { stroke: var(--niebla); stroke-opacity: .5; stroke-width: 2; fill: none; } .puerta .marco { fill: none; stroke: var(--niebla); stroke-opacity: .75; stroke-width: 1.5; transition: stroke-width .2s var(--ease-out), stroke-opacity .2s; } .puerta .cubierta { fill: var(--puerta); transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); } .panes-listo .puerta .cubierta { transform: scaleX(1); } .panes-listo.en-vista .puerta .cubierta { transform: scaleX(0); transition: transform 1.25s var(--ease-in-out) .15s; } /* Pasar por un paso resalta su ventana (trazo más grueso). Solo CSS. */ .caso:has(.pane[data-i="0"]:is(:hover, :focus-within)) .marco[data-i="0"], .caso:has(.pane[data-i="1"]:is(:hover, :focus-within)) .marco[data-i="1"], .caso:has(.pane[data-i="2"]:is(:hover, :focus-within)) .marco[data-i="2"], .caso:has(.pane[data-i="3"]:is(:hover, :focus-within)) .marco[data-i="3"] { stroke-width: 5; stroke-opacity: 1; stroke: #fff; } .panes { list-style: none; margin: 0; padding: 0; counter-reset: none; } .pane { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 18px; padding: 18px 0 18px; border-top: 1px solid var(--linea); transition: background-color .2s; } .pane:hover { background: linear-gradient(90deg, rgba(244, 231, 218, .7), rgba(244, 231, 218, 0)); } .pane:nth-child(1) { --c: var(--atardecer-1); } .pane:nth-child(2) { --c: var(--atardecer-2); } .pane:nth-child(3) { --c: var(--atardecer-3); } .pane:nth-child(4) { --c: var(--atardecer-4); } .pane__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 2px; } .pane__num { font: 400 1.9rem/1 var(--letra-titulo); color: var(--marino); } .pane__vidrio { display: block; width: 44px; height: 14px; border-radius: 1px; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--puerta); } .panes-listo .pane__vidrio { background: transparent; } .panes-listo.en-vista .pane__vidrio { background: var(--c); transition: background-color .45s var(--ease-out); transition-delay: calc(.4s + var(--i) * .26s); } .pane__titulo { font-size: 1.2rem; margin: 2px 0 8px; color: var(--marino); } .pane__datos { display: grid; gap: 6px; margin: 0; font-size: 1.05rem; line-height: 1.45; } .pane__datos div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0 12px; align-items: baseline; } .pane__datos dt { color: var(--gris-texto); font-size: .76rem; } .pane__datos dd { margin: 0; color: var(--texto); } .pane__datos div + div dd { color: var(--marino); font-weight: 600; } .pane__detalle { font-size: 1.02rem; color: var(--gris-texto); margin: 10px 0 0; max-width: 60ch; } .four-panes__pie { max-width: 72ch; margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--linea-fuerte); } .four-panes__pie p:last-child { margin-bottom: 0; } /* Versión ampliada (/new-garage-doors/): la puerta a la izquierda, fija, y los pasos con su detalle */ /* Filas "auto 1fr": la de arriba mide lo que el título; si no, la lista alta la estira y la puerta flota a media altura */ .caso--ampliado { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; gap: 0 clamp(28px, 4vw, 64px); align-items: start; } .caso--ampliado .caso__cabeza { grid-column: 1; grid-row: 1; } .caso--ampliado .caso__puerta { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--cabecera) + 28px); } .caso--ampliado .panes { grid-column: 2; grid-row: 1 / span 2; } .caso--ampliado .pane:first-child { border-top: 0; padding-top: 4px; } /* ═══ 10 · REGLAS POR ESCRITO ═══ El único campo marino entero del cuerpo: lo que se puede exigir por escrito. Sin tarjetas: cuatro reglas en dos columnas, separadas por juntas claras. */ .reglas { background: var(--marino); color: var(--niebla); } .reglas h2 { color: #fff; } .reglas .lead { color: var(--niebla); } .reglas a:not(.boton) { color: #fff; } .reglas__rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .reglas__firma { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 1.05rem; color: #fff; } .reglas__firma .ico { color: var(--niebla); } .reglas__firma + .reglas__firma { margin-top: 8px; } .reglas__cabeza .reglas__firma:first-of-type { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linea-clara); } .reglas__enlace { margin: 26px 0 0; font-weight: 600; } .reglas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin: 0; } .reglas__lista > div { padding: 22px 0 24px; border-top: 1px solid var(--linea-clara); } .reglas__lista dt { font: 700 1.25rem/1.25 var(--letra-texto); color: #fff; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .reglas__lista dt::before { content: ""; flex: none; width: 22px; height: 8px; border-radius: 1px; background: var(--sol); background-size: 400% 100%; } .reglas__lista > div:nth-child(2) dt::before { background-position: 33.333% 0; } .reglas__lista > div:nth-child(3) dt::before { background-position: 66.666% 0; } .reglas__lista > div:nth-child(4) dt::before { background-position: 100% 0; } .reglas__lista dd { margin: 0; font-size: 1.08rem; } .reglas__lista dd p:last-child { margin-bottom: 0; } /* ═══ 11 · RESEÑAS ═══ De ejemplo, fuera del schema. Sin tarjetas: la primera grande en Marcellus y las otras cinco en columnas, cada una bajo una junta fina. */ .resenas-banda { background: var(--concha); } .resenas { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 36px clamp(28px, 4vw, 56px); margin-top: var(--e6); align-items: start; } .resena { margin: 0; padding-top: 20px; border-top: 1px solid var(--linea-fuerte); } .resena--grande { grid-row: span 2; border-top: 2px solid var(--marino); } .resena blockquote { margin: 0 0 14px; } .resena blockquote p { margin: 0; font-size: 1.08rem; line-height: 1.55; } .resena--grande blockquote p { font: 400 clamp(1.45rem, 1.1rem + 1vw, 1.9rem)/1.35 var(--letra-titulo); color: var(--marino); } .resena figcaption { font-size: 1rem; color: var(--gris-texto); display: flex; flex-wrap: wrap; gap: 2px 14px; } .resena figcaption strong { color: var(--marino); flex-basis: 100%; } .estrellas { display: flex; gap: 3px; color: var(--brasa); margin-bottom: 12px; } .estrella { width: 18px; height: 18px; fill: currentColor; } .estrella--vacia { color: var(--gris-texto); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } /* ═══ 12 · BONITA: permiso, agua, zona ═══ */ .bonita { background: var(--concha-2); } .bonita__cabeza { max-width: 60ch; margin-bottom: var(--e7); } .bonita__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); } .bonita__permiso, .bonita__agua { padding-top: 24px; border-top: 2px solid var(--marino); } .bonita__permiso h3, .bonita__agua h3 { font-size: 1.45rem; } .agua__datos { display: grid; gap: 0; margin: 22px 0 24px; } .agua__datos div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--linea); } .agua__datos dt { font-weight: 700; color: var(--marino); } .agua__datos dd { margin: 0; font-size: 1.05rem; } .bonita__zona { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(48px, 6vw, 80px); align-items: start; } .bonita__comunidades h3 { font-size: 1.45rem; } /* ═══ 13 · VERIFICADOR DE ZIP ═══ */ .zip-caja { background: var(--papel); border-radius: var(--radio); padding: clamp(22px, 2.6vw, 32px); box-shadow: 0 22px 40px -32px rgba(10, 36, 64, .5); } .zip label { display: block; font: 700 1.2rem/1.2 var(--letra-texto); color: var(--marino); margin: 0 0 12px; } .zip__ayuda { font-size: 1rem; color: var(--gris-texto); margin: -4px 0 12px; } .fila-zip { display: flex; flex-wrap: wrap; gap: 10px; } .fila-zip input { width: 8.2ch; min-height: 56px; padding: 0 .55em; font: 600 1.4rem/1 var(--letra-texto); letter-spacing: .08em; color: var(--marino); background: #fff; border: 2px solid var(--borde-campo); border-radius: var(--radio); } .fila-zip input:focus { border-color: var(--ola); outline: 3px solid var(--ola); outline-offset: 2px; } .zip__respuesta { margin: 14px 0 0; font-size: 1.05rem; } .zip__respuesta:empty { margin: 0; } .zip__respuesta.visible { padding: 14px 16px; background: var(--concha); border-radius: var(--radio); box-shadow: inset 0 3px 0 var(--ola); } .zip__respuesta.fuera { box-shadow: inset 0 3px 0 var(--brasa); } /* ═══ 14 · FAQ ACORDEÓN ═══ Abre con la primera respuesta a la vista; sin JS, todas abiertas. La fila se abre animando grid-template-rows (sin medir alturas). */ .faq-banda { background: var(--concha); } .faq { border-top: 1px solid var(--linea-fuerte); margin-bottom: 1.2em; } .faq__item { border-bottom: 1px solid var(--linea); } .faq__item h3 { margin: 0; font-size: inherit; } .faq__boton { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; text-align: left; font: 700 1.2rem/1.4 var(--letra-texto); color: var(--marino); background: none; border: 0; cursor: pointer; } .faq__boton:hover { color: var(--ola); } .faq__signo { position: relative; flex: none; width: 20px; height: 20px; margin-top: .25em; color: var(--ola); } .faq__signo::before, .faq__signo::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .3s var(--ease-out); } .faq__signo::after { transform: rotate(90deg); } .faq__boton[aria-expanded="true"] .faq__signo::after { transform: rotate(0); } .faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-out); } .faq__panel > div { overflow: hidden; visibility: visible; max-width: 66ch; } .faq__panel > div > :last-child { margin-bottom: 1.3em; } .js .faq__panel[data-abierto="false"] { grid-template-rows: 0fr; } .js .faq__panel[data-abierto="false"] > div { visibility: hidden; transition: visibility 0s linear .3s; } .faq__mas { margin: 24px 0 0; font-weight: 600; } /* ═══ 15 · CIERRE ═══ El día vuelve a entibiarse antes de la noche del pie: concha que termina en ámbar suave. Los cuatro paneles arriba, las gaviotas junto al teléfono. */ .cierre { background: linear-gradient(180deg, var(--concha) 0%, var(--concha) 44%, #FCEBD6 76%, #FDDDB2 100%); overflow: hidden; } .cierre__rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px clamp(32px, 5vw, 80px); align-items: end; } .cierre__cuatro { display: flex; margin-bottom: 26px; } .cierre__tel { justify-self: end; text-align: right; } .cierre__tel a { display: block; font: 400 clamp(2.4rem, 1.5rem + 2.9vw, 4rem)/1 var(--letra-titulo); color: var(--marino); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; } .cierre__tel a:hover { color: var(--ola); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } .cierre__tel p { margin: 12px 0 0 auto; max-width: 30ch; color: var(--texto); font-size: 1.05rem; text-wrap: balance; } .cierre__gaviotas { margin: 0 0 18px auto; } /* ═══ 16 · PIE Y BARRA MÓVIL ═══ La noche: marino hondo, logo claro (solo el wordmark en blanco; el isotipo con sus colores). Nombre completo + "Bonita Springs, FL", teléfono, licencia. */ .pie { background: var(--marino-hondo); color: var(--niebla); padding: 80px 0 32px; font-size: 1.05rem; } .pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px 36px; } .pie__logo { width: 250px; height: auto; margin-bottom: 20px; } .pie .logo-texto { color: #fff; display: block; margin-bottom: 20px; } .pie__nombre { display: flex; flex-direction: column; margin: 0 0 14px; } .pie__nombre strong { color: #fff; font-weight: 700; } .pie__tel { font: 400 2rem/1 var(--letra-titulo); color: #fff; text-decoration: none; white-space: nowrap; } .pie__tel:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; } .pie__atencion { color: #fff; margin: 0 0 6px; } .pie__obra, .pie__lic { color: var(--niebla); margin: 0 0 6px; font-size: 1rem; } .pie__lic { display: flex; align-items: center; gap: 8px; } .pie__cuatro { display: flex; margin-top: 22px; } .pie h2 { font: 700 1rem/1.3 var(--letra-texto); color: #fff; margin: 4px 0 .9em; letter-spacing: .01em; } .pie ul { list-style: none; margin: 0; padding: 0; } .pie li a { display: inline-block; padding: 6px 0; color: var(--niebla); text-decoration: none; font-size: 1rem; line-height: 1.35; } .pie a:hover { color: #fff; text-decoration: underline; } .pie__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linea-clara); font-size: .98rem; color: var(--niebla); } .pie__legal p { margin: 0; } .pie__legal a { color: var(--niebla); } .pie__credito { margin-left: auto !important; } .barra-movil { display: none; } /* ═══ 17 · ARTÍCULO (servicios, permisos, zona) ═══ */ .articulo-banda { background: var(--concha); padding-top: calc(var(--banda) * .7); padding-bottom: calc(var(--banda) * .6); } .articulo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 80px); align-items: start; } .prosa { max-width: 68ch; } .prosa h2 { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.35rem); margin-top: 1.7em; } .prosa > h2:first-child, .prosa > :first-child h2:first-child { margin-top: 0; } .prosa h3 { margin-top: 1.4em; } /* Rótulos de caja con h2.h3 (On this page, What happens next): tamaño de h3 aunque sean h2 */ .prosa h2.h3 { font-size: 1.3rem; margin-top: 1.4em; } .prosa > h2.h3:first-child, .en-esta-pagina h2.h3 { margin-top: 0; } .prosa ul:not([class]) { padding-left: 1.2em; } .prosa li { margin-bottom: .45em; } .lista-check { list-style: none; padding: 0; margin: 0 0 1.6em; display: grid; gap: 12px; } .lista-check li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin: 0; } .lista-check .ico { color: var(--ola); margin-top: .2em; stroke-width: 2.4; } .nota-honesta, .respuesta-corta { position: relative; background: var(--papel); padding: 28px 30px 24px; margin: 2.2em 0; border-radius: var(--radio); box-shadow: inset 0 3px 0 var(--marino); } .nota-honesta h3 { margin-top: 0; } .nota-honesta > :last-child, .respuesta-corta > :last-child { margin-bottom: 0; } .respuesta-corta { margin-top: 0; font-size: 1.12rem; } .respuesta-corta h2 { margin-top: 0 !important; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); } .permiso { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; margin: 2.2em 0; padding: 22px 0; border-top: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte); } .permiso > .ico { width: 28px; height: 28px; color: var(--ola); margin-top: 2px; } .permiso h2 { margin: 0 0 .35em !important; font-size: 1.3rem; } .permiso p:last-child { margin-bottom: 0; } .lateral { display: grid; gap: 24px; position: sticky; top: calc(var(--cabecera) + 24px); } .caja { background: var(--papel); padding: 26px 26px 24px; border-radius: var(--radio); } .caja h2 { margin: 0 0 .5em; } .caja--marino { background: var(--marino); color: var(--niebla); } .caja--marino h2 { color: #fff; } .caja--marino p { color: var(--niebla); font-size: 1.05rem; } .caja--marino a:not(.boton) { color: #fff; } .caja--papel { background: var(--papel); } .caja__estimado { margin: 16px 0 0; font-weight: 600; } .relacionados { list-style: none; margin: 0; padding: 0; } .relacionados a { display: block; padding: 11px 0; border-bottom: 1px solid var(--linea); font-weight: 600; text-decoration: none; } .relacionados li:last-child a { border-bottom: 0; } .relacionados a:hover { text-decoration: underline; } .fuentes { font-size: 1rem; padding-left: 1.1em; } .fuentes li { margin-bottom: .4em; overflow-wrap: anywhere; } .revisado { font-size: 1rem; color: var(--gris-texto); margin-top: 2em; } .en-esta-pagina { margin: 0 0 40px; } .en-esta-pagina ul { list-style: none; margin: 0; padding: 0; columns: 2 240px; column-gap: 40px; border-top: 1px solid var(--linea); } .en-esta-pagina li { break-inside: avoid; border-bottom: 1px solid var(--linea); } .en-esta-pagina a { display: block; padding: 11px 0; font-weight: 600; text-decoration: none; } .en-esta-pagina a:hover { text-decoration: underline; } .seccion { scroll-margin-top: calc(var(--cabecera) + 20px); } .populares { list-style: none; margin: 0 0 1.4em; padding: 0; border-top: 1px solid var(--linea-fuerte); } .populares a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--texto); } .populares strong { color: var(--marino); font-size: 1.15rem; } .populares span { color: var(--gris-texto); font-size: 1rem; } .populares a:hover strong { color: var(--ola); text-decoration: underline; } .comunidades { margin-bottom: 1em; } .zips { list-style: none; margin: 0 0 20px; padding: 0; } .zips li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linea); } .zips strong { color: var(--marino); font-size: 1.15rem; letter-spacing: .04em; } .zips span { font-size: .98rem; color: var(--gris-texto); } .caja .zip-caja { padding: 0; box-shadow: none; } .zips__fuera { font-size: 1rem; color: var(--gris-texto); margin: 16px 0 0; } .agua-banda { background: var(--concha-2); } .agua__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } /* ═══ 18 · FORMULARIOS ═══ */ .caja-form { background: var(--papel); padding: clamp(22px, 3vw, 40px); border-radius: var(--radio); box-shadow: 0 26px 44px -36px rgba(10, 36, 64, .5); } .campo { margin-bottom: 20px; } .campo label { display: block; font: 700 1.08rem/1.25 var(--letra-texto); color: var(--marino); margin-bottom: 8px; } .campo input, .campo select, .campo textarea { width: 100%; font: inherit; font-size: 1.1rem; padding: .7em .8em; min-height: 56px; border: 2px solid var(--borde-campo); border-radius: var(--radio); background: #fff; color: var(--texto); } .campo select { background-color: #fff; color: var(--texto); } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ola); outline: 3px solid var(--ola); outline-offset: 2px; } .campo--error input, .campo--error textarea { border-color: var(--error); } .campo__error { color: var(--error); font-weight: 700; font-size: 1rem; margin: 6px 0 0; } .campo__ayuda { font-size: 1rem; color: var(--gris-texto); margin: -2px 0 8px; } .campo--casilla { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; margin: 4px 0 22px; } .campo--casilla input { width: 24px; height: 24px; min-height: 0; margin: 3px 0 0; accent-color: var(--ola); } .campo--casilla label { font: 400 1rem/1.45 var(--letra-texto); color: var(--gris-texto); margin: 0; } .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formulario__aviso { background: var(--concha); padding: 14px 16px; border-radius: var(--radio); box-shadow: inset 0 3px 0 var(--brasa); font-size: 1.05rem; } .formulario__legal { font-size: 1rem; color: var(--gris-texto); margin: 16px 0 0; } .formulario__exito { background: var(--concha); padding: 26px; border-radius: var(--radio); box-shadow: inset 0 3px 0 var(--ola); } .formulario__sinjs { font-weight: 700; } .pasos { list-style: none; counter-reset: paso; margin: 0 0 1.4em; padding: 0; display: grid; gap: 16px; } .pasos li { counter-increment: paso; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; } .pasos li::before { content: counter(paso); grid-row: span 2; font: 400 1.7rem/1.1 var(--letra-titulo); color: var(--marino); } .pasos h3 { font-size: 1.15rem; margin: 0 0 .2em; } .pasos p { margin: 0; color: var(--gris-texto); } .contacto__tel a { font: 400 clamp(2.2rem, 1.5rem + 2vw, 3rem)/1.1 var(--letra-titulo); color: var(--marino); text-decoration: none; } .contacto__tel a:hover { color: var(--ola); } .contacto__atencion { font-weight: 600; color: var(--marino); } .contacto__h { margin-top: 1.6em; } .datos { display: grid; gap: 0; margin: 16px 0 24px; } .datos div { padding: 12px 0; border-top: 1px solid var(--linea); } .datos dt { font-weight: 700; color: var(--marino); } .datos dd { margin: 2px 0 0; } /* ═══ 19 · PLANO, LEGAL Y 404 ═══ */ .hero--plano .botones { margin-top: 1.4em; } /* ═══ 20 · APERTURA "GOLDEN HOUR" ═══ Velo marino hondo con el isotipo real en capas (piezas de recursos.py). 0-0,8 s: el sol (con las gaviotas) baja y se esconde detrás del techo: su capa va DEBAJO de la casa y recortada en la línea del alero. 0,5-1,1 s: las cuatro ventanas se tiñen en UN barrido de izquierda a derecha (la máscara marina se encoge hacia la derecha). 1,1-1,8 s: el velo se desvanece. Solo opacity, transform y clip-path. Se salta con clic, toque o tecla. La puerta no sube, ninguna luz se enciende, no hay telón. Sin JS o con movimiento reducido, no existe. */ .con-golden body::before { content: ""; position: fixed; inset: 0; z-index: 2999; background: var(--marino-hondo); } .golden { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--marino-hondo); cursor: pointer; } .golden__escena { position: relative; width: min(560px, 80vw); aspect-ratio: var(--proporcion, 3 / 2); } /* Sello nuevo: el sol va ENCIMA del sello y el recorte del cielo lo corta en el horizonte del agua. */ .golden__cielo { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 0 calc(100% - var(--alero, 46%)) 0); } .golden__sol, .golden__casa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } .golden__casa { z-index: 1; } .golden__mascara { position: absolute; z-index: 2; background: #092949; transform-origin: 100% 50%; } .golden.corre .golden__sol { animation: golden-sol .8s var(--ease-in-out) both; } .golden.corre .golden__mascara { animation: golden-mascara .6s cubic-bezier(.45, 0, .3, 1) .5s both; } .golden.corre { animation: golden-fuera .7s var(--ease-in) 1.1s both; } .golden.corre.salta, .golden.salta { animation: golden-fuera .2s linear 0s both; } @keyframes golden-sol { from { transform: translateY(0); } to { transform: translateY(var(--baja, 44%)); } } @keyframes golden-mascara { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes golden-fuera { from { opacity: 1; } to { opacity: 0; } } .golden__saltar { position: absolute; right: 24px; bottom: 22px; color: var(--niebla); font: 600 .9rem/1 var(--letra-texto); letter-spacing: .12em; text-transform: uppercase; } /* ═══ 21 · ENTRADAS POR SCROLL ═══ Solo lo marcado (fotos, cuando lleguen), una vez. .por-entrar la pone el JS: sin JS o sin IntersectionObserver, todo queda visible. */ .js [data-reveal].por-entrar { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); } .js [data-reveal].por-entrar.en-vista { opacity: 1; transform: none; } /* ═══ 22 · RESPONSIVE ═══ Hamburguesa hasta 1180 px; barra móvil fija hasta 760 px (DECISIONES §5). */ @media (max-width: 1400px) { /* El número sigue en el aria-label, en el hero, en el cierre, en el pie y en la barra móvil */ .cabecera__llamar .llamar__numero { display: none; } } @media (max-width: 1240px) { .nav > a, .nav__grupo > button { padding-inline: 9px; } .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pie__marca { grid-column: 1 / -1; } } @media (max-width: 1180px) { .nav { display: none; } .hamburguesa { display: inline-flex; } .cabecera__llamar { margin-left: auto; } .hero__ventanal { width: min(34vw, 420px); } } @media (max-width: 1000px) { .hero__rejilla, .dos-col, .articulo, .reglas__rejilla, .bonita__rejilla, .bonita__zona, .cierre__rejilla, .agua__rejilla { grid-template-columns: minmax(0, 1fr); } .hero__marca { max-width: 440px; justify-self: end; margin-top: -8px; } .lateral { position: static; } .four-panes__casos { grid-template-columns: minmax(0, 1fr); max-width: 680px; } .caso--ampliado { grid-template-columns: minmax(0, 1fr); } .caso--ampliado .caso__puerta { position: static; grid-row: 2; } .caso--ampliado .panes { grid-column: 1; grid-row: 3; } .caso--ampliado .pane:first-child { border-top: 1px solid var(--linea); padding-top: 18px; } .resenas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .resena--grande { grid-column: 1 / -1; grid-row: auto; } .cierre__tel { justify-self: start; text-align: left; } .cierre__gaviotas { margin-left: 0; } .cierre__tel p { margin-left: 0; } .hero--interno.hero--atardecer .hero__contenido { max-width: none; margin-left: 0; padding-inline: var(--margen); padding-bottom: 150px; } .hero__ventanal { width: min(64vw, 440px); } .indice__grupo { grid-template-columns: minmax(0, 1fr); } .indice__h { margin: 0 0 6px; } } @media (max-width: 760px) { :root { --cabecera: 68px; } body { font-size: 1.1875rem; } /* 390 px: logo (40 px de alto = 286 px de ancho) + hamburguesa. El botón Call de la cabecera se retira: en móvil lo lleva la barra fija de abajo (y el hero, mientras está a la vista). */ .marca__img { height: 46px; } .marca { gap: 10px; } .marca__nombre { font-size: 1.28rem; } .marca__sub { font-size: .7rem; letter-spacing: .16em; } .cabecera__fila { gap: 10px; justify-content: space-between; } .cabecera__llamar { display: none; } .hamburguesa { width: 48px; height: 48px; margin-left: auto; } .hero--home.hero--atardecer { min-height: 0; } .hero__rejilla { padding-block: 36px 0; gap: 12px; } .hero--home h1 { font-size: clamp(2.35rem, 1.2rem + 5.4vw, 2.9rem); } .hero__marca { max-width: 86%; margin: 8px 0 -10px auto; } .hero__cielo { background: radial-gradient(ellipse 110% 46% at 70% 100%, rgba(254, 183, 103, .92) 0%, rgba(254, 208, 125, .68) 38%, rgba(254, 208, 125, .18) 70%, rgba(251, 243, 234, 0) 90%), linear-gradient(180deg, var(--concha) 0%, var(--concha) 60%, #FCEEDD 100%); } .botones .boton { flex: 1 1 100%; } .hero--home.hero--foto { min-height: calc(100svh - var(--cabecera)); align-items: end; } .hero--home.hero--foto .hero__fondo img { object-position: var(--encuadre, 50% 20%); } /* El velo cubre entero el tramo del texto (desde abajo hasta el 60 %): el H1 nunca queda sobre la cara ni sobre la foto sin velo */ .hero--home.hero--foto::before { background: linear-gradient(0deg, rgba(251, 243, 234, .98) 0%, rgba(251, 243, 234, .96) 58%, rgba(251, 243, 234, .55) 68%, rgba(251, 243, 234, 0) 80%); } .hero--home.hero--foto .contenedor { margin-left: 0; padding-inline: var(--margen); } .hero--home.hero--foto .hero__contenido { padding-block: 42vh 28px; max-width: none; } .hero--interno { min-height: 0; } .hero--interno h1 { font-size: clamp(2.1rem, 1.2rem + 4.4vw, 2.6rem); } /* 132 px: el panel de las cuatro ventanas (88 % del ancho, ~106 px de alto) no toca el segundo botón */ .hero--interno.hero--atardecer .hero__contenido { padding-block: 26px 132px; } .hero__ventanal { width: 88%; } .hero--interno.hero--foto { display: flex; flex-direction: column; } .hero--interno.hero--foto::before { display: none; } /* align-self + width: el hero interno es flex centrado y sin esto la banda de foto medía 0 px */ .hero--interno.hero--foto .hero__foto { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; align-self: stretch; width: 100%; } .hero--interno.hero--foto .hero__foto .hero__fondo, .hero--interno.hero--foto .hero__foto img { width: 100%; height: 100%; object-fit: cover; } .hero--interno.hero--foto .hero__contenido { margin-left: 0; max-width: none; padding: 20px var(--margen) 40px; } .indice { grid-template-columns: minmax(0, 1fr); } .indice li:nth-last-child(-n + 2):nth-child(odd) { border-bottom: 1px solid var(--linea); } .indice li:last-child { border-bottom: 0; } .indice a { padding-right: 0; } .caso { padding: 20px 18px 8px; } .pane { grid-template-columns: 46px minmax(0, 1fr); gap: 0 14px; } .pane__vidrio { width: 36px; } .pane__datos div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .reglas__lista { grid-template-columns: minmax(0, 1fr); } .resenas { grid-template-columns: minmax(0, 1fr); } .agua__datos div { grid-template-columns: minmax(0, 1fr); } .populares a { grid-template-columns: minmax(0, 1fr); } .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .pie__legal { flex-direction: column; align-items: flex-start; } .pie__credito { margin-left: 0 !important; } .desplegable__rejilla { grid-template-columns: minmax(0, 1fr); } .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--linea); box-shadow: 0 -10px 26px rgba(10, 36, 64, .14); transition: transform .25s var(--ease-out); } .barra-movil .boton { min-height: 54px; padding-inline: .6em; font-size: 1.05rem; } .hero-a-la-vista .barra-movil { transform: translateY(110%); } body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } } @media (max-width: 420px) { .boton { white-space: normal; text-align: center; } .pie__rejilla { grid-template-columns: minmax(0, 1fr); } .barra-movil .boton { white-space: nowrap; font-size: 1rem; } .barra-movil .boton .ico { display: none; } } /* ═══ 23 · SIN JAVASCRIPT ═══ Sin JS la hamburguesa no abre: en pantallas chicas el menú queda como una fila de enlaces bajo el logo (Services se cae: los servicios están en el pie). */ @media (max-width: 1180px) { html:not(.js) .hamburguesa { display: none; } html:not(.js) .cabecera__fila { flex-wrap: wrap; padding-block: 10px; } html:not(.js) .nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; margin-left: 0; } html:not(.js) .nav__grupo { display: none; } } /* ═══ 24 · MENOS MOVIMIENTO ═══ Sin apertura, sin barrido (ventanas llenas, pasos hechos), sin entradas y con cambios de página secos. No se pierde ningún contenido. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .golden, .con-golden body::before { display: none !important; } .puerta .cubierta { transform: scaleX(0) !important; } .pane__vidrio { background: var(--c) !important; } .js [data-reveal].por-entrar { opacity: 1; transform: none; } @view-transition { navigation: none; } } /* ═══ 25 · IMPRESIÓN ═══ Con Ctrl+P sale la página sin menú, sin botones, sin barra y sin apertura; la firma se imprime con las ventanas llenas. */ @media print { html, body { background: #fff !important; color: #000; } body { font-size: 11pt; padding: 0 !important; } .cabecera, .menu-movil, .barra-movil, .golden, .botones, .saltar, .hamburguesa, .hero__ventanal, .hero__marca, .zip-caja, .lateral .caja--marino, .gaviotas { display: none !important; } .hero, .four-panes, .reglas, .bonita, .cierre, .pie, .caja, .caso { background: #fff !important; color: #000 !important; box-shadow: none !important; } .hero__cielo { display: none !important; } h1, h2, h3, h4, .reglas h2, .reglas__lista dt, .pie h2, .pie__nombre strong { color: #000 !important; } .banda { padding-block: 18pt; } .puerta .cubierta { transform: scaleX(0) !important; } .pane__vidrio { background: var(--c) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .pane, .faq__item, .resena { break-inside: avoid; } .js .faq__panel[data-abierto="false"] { grid-template-rows: 1fr; } .js .faq__panel[data-abierto="false"] > div { visibility: visible; } a { color: inherit; } .four-panes__casos, .reglas__rejilla, .articulo { display: block; } }