/* ===================================================================== SBELTIA — Página de contacto Hoja específica de esta página. Se carga DESPUÉS de sbeltia-theme.css y solo en contact.php, así que no engorda el resto del sitio. POR QUÉ NO SE REUTILIZA .page-contact-us DE custom.css Esa maqueta es la de la plantilla comprada: tres tarjetas planas y un formulario partido a la mitad con el mapa. Aquí se construye desde cero con el sistema de la linktree — superficies de cristal, filetes dorados, sombras en dos capas y Cormorant en tamaños editoriales. TODO EL COLOR SALE DE LOS TOKENS --sb-* DEL TEMA. Ni un solo valor hexadecimal suelto: si la marca cambia, esta página cambia con ella. PREFIJO Todo cuelga de .ct-* y del contenedor .ct. Ninguna regla puede escaparse a otra página aunque este archivo se cargara por error. ===================================================================== */ /* ===================================================================== 1. CIMIENTOS ===================================================================== */ .ct { --ct-wrap: 1320px; --ct-gutter: 24px; position: relative; } /* Contenedor propio en vez de .container de Bootstrap: se quiere control exacto del ancho editorial y de los márgenes en móvil. */ .ct-wrap { width: min(100% - (var(--ct-gutter) * 2), var(--ct-wrap)); margin-inline: auto; } .ct a { text-decoration: none; } /* Revelado al hacer scroll. La clase .ct-js la pone un script en línea en el , antes de pintar. Si el JavaScript falla o está desactivado, esa clase nunca llega y NADA se oculta: el contenido es visible siempre. Es lo contrario de lo que hacen WOW.js y SplitText, que ocultan primero y confían en que el JS llegue. En una página de contacto eso no es aceptable. */ .ct-js .ct [data-r] { opacity: 0; transform: translateY(22px); } .ct-js .ct [data-r].is-in { opacity: 1; transform: none; transition: opacity .85s var(--sb-e-out), transform .85s var(--sb-e-out); transition-delay: var(--d, 0ms); } /* ----------------------------------------------------------------- Piezas tipográficas compartidas ----------------------------------------------------------------- */ /* Antetítulo: versalitas muy espaciadas con la flor dorada de la marca. Es el mismo recurso que .section-title h3, reconstruido sin depender de custom.css para poder ajustar el tamaño y el interletraje. */ .ct-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--default-font); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sb-gold-deep); margin: 0 0 18px; } .ct-eyebrow::before { content: ''; flex: none; width: 22px; height: 22px; background: url('../images/icon-sub-heading.png') no-repeat center / contain; } /* Titular editorial. clamp() para que escale de forma continua en vez de dar saltos en los puntos de ruptura. */ .ct-display { font-family: var(--accent-font); font-weight: 400; font-size: clamp(40px, 5.1vw, 68px); line-height: 1.05; letter-spacing: -.008em; color: var(--sb-ink); margin: 0; text-transform: none; } /* La cursiva dorada es el único acento del titular. Cormorant tiene una itálica de verdad, no una oblicua sintética: por eso luce. */ .ct-display em { font-style: italic; color: var(--sb-gold-deep); } .ct-h2 { font-family: var(--accent-font); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; color: var(--sb-ink); margin: 0; text-transform: none; } .ct-lead { font-size: 17px; line-height: 1.75; color: var(--sb-ink-soft); margin: 22px 0 0; max-width: 54ch; } /* ----------------------------------------------------------------- Botones ----------------------------------------------------------------- */ .ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--default-font); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .01em; padding: 19px 32px; border: 1px solid transparent; border-radius: 100px; cursor: pointer; white-space: nowrap; transition: transform .38s var(--sb-e-out), box-shadow .38s var(--sb-e-out), background-color .3s var(--sb-e-soft), border-color .3s var(--sb-e-soft); } .ct-btn i { font-size: 17px; } /* Acción principal: el degradado de la linktree. Blanco encima rinde entre 4.84:1 y 7.88:1 según el punto del degradado — AA en todo su recorrido. */ .ct-btn--gold { background-image: linear-gradient(145deg, var(--sb-cta-a), var(--sb-cta-b)); background-color: var(--sb-cta-b); color: #FFFFFF; box-shadow: var(--sb-sh-gold); } .ct-btn--gold:hover, .ct-btn--gold:focus-visible { color: #FFFFFF; transform: translateY(-2px); box-shadow: var(--sb-sh-lg), var(--sb-sh-gold); } /* Acción secundaria: la superficie de cristal, nunca un botón gris. */ .ct-btn--ghost { background-color: var(--sb-surface); color: var(--sb-ink); border-color: var(--sb-surface-brd); box-shadow: var(--sb-sh-xs); } .ct-btn--ghost:hover, .ct-btn--ghost:focus-visible { color: var(--sb-ink); background-color: var(--sb-surface-hover); border-color: var(--sb-surface-brd-h); transform: translateY(-2px); box-shadow: var(--sb-sh-sm); } .ct-btn--sm { padding: 14px 24px; font-size: 14px; } .ct-btn--block { width: 100%; } /* ===================================================================== 2. PORTADA ===================================================================== */ .ct-hero { position: relative; padding: 64px 0 104px; overflow: clip; } /* Ornamento dorado de la marca, muy rebajado: aporta textura sin convertirse en un elemento que compita con el titular. */ .ct-hero::before { content: ''; position: absolute; inset: 0; background: url('../images/hero-bg-shape-gold.svg') no-repeat center top / 100% auto; opacity: .42; pointer-events: none; } .ct-hero > * { position: relative; } .ct-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; } /* ----------------------------------------------------------------- Miga de pan ----------------------------------------------------------------- */ .ct-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0 0 28px; padding: 0; font-size: 13px; color: var(--sb-ink-soft); } .ct-crumb a { color: var(--sb-ink-soft); transition: color .25s var(--sb-e-soft); } .ct-crumb a:hover { color: var(--sb-gold-deep); } .ct-crumb li + li::before { content: '/'; margin-right: 10px; color: var(--sb-gold); } .ct-crumb [aria-current] { color: var(--sb-ink); } /* ----------------------------------------------------------------- Acciones y garantías de la portada ----------------------------------------------------------------- */ .ct-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .ct-trust { display: flex; flex-wrap: wrap; gap: 12px 30px; list-style: none; margin: 38px 0 0; padding: 28px 0 0; border-top: 1px solid var(--sb-surface-brd); } .ct-trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--sb-ink-soft); } /* El check va en SVG embebido y no como icono de Font Awesome para que el disco dorado y la marca sean una sola pieza, sin desalineados. */ .ct-trust li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(181, 138, 74, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6432' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 10px; } /* ----------------------------------------------------------------- Imagen de portada ----------------------------------------------------------------- */ .ct-hero__media { position: relative; } /* La estrella dorada del sitio, detrás y desbordada: da profundidad a un bloque que si no sería una foto pegada sobre crema. */ .ct-hero__media::before { content: ''; position: absolute; top: -34px; right: -34px; width: 168px; height: 168px; background: url('../images/hero-image-bg-star-gold.svg') no-repeat center / contain; opacity: .55; pointer-events: none; } .ct-hero__fig { position: relative; margin: 0; /* Óvalo arriba y esquinas suaves abajo: la misma forma orgánica que usa la portada del sitio, para que la página no parezca de otro proyecto. */ border-radius: 260px 260px 26px 26px; overflow: hidden; box-shadow: var(--sb-sh-lg); } .ct-hero__fig img { display: block; width: 100%; /* height:auto es obligatorio: el atributo height del HTML actúa como altura calculada y, sin esto, gana a aspect-ratio. Los atributos se mantienen porque reservan el hueco y evitan el salto al cargar. */ height: auto; aspect-ratio: 1 / 1.06; object-fit: cover; object-position: center 26%; } /* Filete dorado siguiendo el contorno, por dentro: enmarca sin engordar la silueta. */ .ct-hero__fig::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--sb-surface-brd-h); border-radius: inherit; pointer-events: none; } /* Tarjeta flotante con la dirección: es el dato que más se busca en una página de contacto, así que va encima de la imagen, no en una lista. */ .ct-hero__card { position: absolute; left: 18px; bottom: 22px; display: flex; align-items: flex-start; gap: 14px; max-width: 300px; padding: 18px 22px; border-radius: 20px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--sb-surface-brd); box-shadow: var(--sb-sh-md); } .ct-hero__card i { flex: none; margin-top: 2px; font-size: 16px; color: var(--sb-gold-deep); } .ct-hero__card strong { display: block; font-family: var(--default-font); font-size: 14px; font-weight: 600; color: var(--sb-ink); margin-bottom: 3px; } .ct-hero__card span { display: block; font-size: 13px; line-height: 1.55; color: var(--sb-ink-soft); } /* ===================================================================== 3. CANALES DIRECTOS ===================================================================== */ .ct-channels { padding: 0 0 96px; } .ct-channels__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ct-ch { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 30px 28px; border-radius: 24px; overflow: hidden; background-color: var(--sb-surface); border: 1px solid var(--sb-surface-brd); box-shadow: var(--sb-sh-sm); color: var(--sb-ink); transition: transform .42s var(--sb-e-out), box-shadow .42s var(--sb-e-out), border-color .3s var(--sb-e-soft); } .ct-ch:hover { color: var(--sb-ink); transform: translateY(-6px); box-shadow: var(--sb-sh-md); border-color: var(--sb-surface-brd-h); } /* WhatsApp es la acción que de verdad convierte en Perú, así que su tarjeta pesa más: fondo con degradado, filete más marcado y sombra elevada desde el reposo. */ .ct-ch--wa { background-image: linear-gradient(160deg, #FFFFFF, var(--sb-cream)); border-color: var(--sb-surface-brd-h); box-shadow: var(--sb-sh-md); } .ct-ch--wa:hover { box-shadow: var(--sb-sh-lg); } /* Filete dorado superior. Es la única tarjeta que lo lleva, y basta para que el ojo la elija antes que a las otras tres sin necesidad de gritar con un color distinto. */ .ct-ch--wa::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-image: linear-gradient(90deg, var(--sb-gold), var(--sb-cta-b)); } .ct-ch__badge { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 100px; font-size: 9.5px; letter-spacing: .12em; color: var(--sb-cta-b); background-color: rgba(181, 138, 74, .16); vertical-align: 1px; } .ct-ch__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background-image: linear-gradient(145deg, var(--sb-cta-a), var(--sb-cta-b)); color: #FFFFFF; font-size: 19px; box-shadow: var(--sb-sh-xs); } .ct-ch__k { display: block; font-family: var(--default-font); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sb-gold-deep); margin-bottom: 7px; } .ct-ch__v { display: block; font-family: var(--accent-font); font-size: 23px; line-height: 1.25; color: var(--sb-ink); } .ct-ch__note { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--sb-ink-soft); } /* Flecha que aparece al pasar por encima. Se anima solo la opacidad y el desplazamiento — nunca propiedades que fuercen relayout. */ .ct-ch__go { position: absolute; top: 30px; right: 26px; font-size: 14px; color: var(--sb-gold-deep); opacity: 0; transform: translate(-6px, 6px); transition: opacity .35s var(--sb-e-out), transform .35s var(--sb-e-out); } .ct-ch:hover .ct-ch__go { opacity: 1; transform: none; } /* ===================================================================== 4. FORMULARIO Y MAPA ===================================================================== */ .ct-main { padding: 0 0 100px; } .ct-main__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: start; } /* ----------------------------------------------------------------- Tarjeta del formulario ----------------------------------------------------------------- */ .ct-form { padding: 46px; border-radius: 30px; background-image: linear-gradient(160deg, rgba(255, 255, 255, .9), var(--sb-cream)); background-color: var(--sb-cream); border: 1px solid var(--sb-surface-brd); box-shadow: var(--sb-sh-md); } .ct-form__head { margin-bottom: 34px; } .ct-form__head p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--sb-ink-soft); } .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ct-grid .ct-col2 { grid-column: span 2; } /* ----------------------------------------------------------------- Campos con etiqueta flotante El placeholder es un espacio en blanco a propósito: eso permite que :not(:placeholder-shown) detecte si el campo tiene contenido y la etiqueta suba sola, sin JavaScript. El JS solo añade .is-filled para los