/* ========================================================================== Notaría Pública No. 63 — sistema de diseño v2 Paleta tomada del logotipo real (guinda / blanco / grises). Mobile-first, sin dependencias externas, WCAG 2.2 AA. ========================================================================== */ :root{ /* Paleta — muestreada del logotipo oficial */ --guinda-950: #2c0710; --guinda-900: #3d0b16; --guinda: #5a1220; /* color de marca principal */ --guinda-700: #6f1a2a; --guinda-500: #8b2942; --guinda-300: #c07a8c; --guinda-100: #f3e4e7; --oro: #a9822f; /* acento cálido secundario, ya presente en piezas del sitio original */ --oro-oscuro: #7e611f; --gris-950: #1c1a1b; --gris-800: #3a3536; --gris-600: #6b6465; --gris-400: #9b9495; --gris-300: #c9c3c4; --gris-200: #e2dedd; --gris-100: #f2efee; --color-primario: var(--guinda); --color-primario-oscuro: var(--guinda-900); --color-acento: var(--oro); --color-acento-oscuro: var(--oro-oscuro); --color-texto: var(--gris-950); --color-texto-suave: var(--gris-600); --color-fondo: #ffffff; --color-fondo-alterno: var(--gris-100); --color-borde: var(--gris-200); --color-enfoque: #1a6fb0; --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --espacio-1: 0.5rem; --espacio-2: 1rem; --espacio-3: 1.5rem; --espacio-4: 2rem; --espacio-5: 3.5rem; --espacio-6: 5.5rem; --radio: 14px; --radio-chico: 8px; --sombra: 0 10px 30px -8px rgba(44, 7, 16, 0.28); --sombra-suave: 0 4px 18px rgba(44, 7, 16, 0.08); --ancho-maximo: 1180px; --duracion: 0.5s; } /* El sitio usa deliberadamente un único tema (claro); los colores quedan definidos explícitamente arriba y no varían con prefers-color-scheme. */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .revelar{ opacity: 1 !important; transform: none !important; } } body{ margin: 0; font-family: var(--fuente-base); color: var(--color-texto); background: var(--color-fondo); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; height: auto; display: block; } h1, h2, h3, h4{ font-family: var(--fuente-base); color: var(--guinda-950); line-height: 1.18; margin: 0 0 var(--espacio-2); font-weight: 800; letter-spacing: -0.01em; } h1{ font-size: clamp(2.1rem, 4.6vw, 3.4rem); } h2{ font-size: clamp(1.55rem, 2.8vw, 2.15rem); } h3{ font-size: 1.22rem; } .ojo{ display: inline-block; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--guinda); margin-bottom: 0.6rem; } .ojo::before{ content: "— "; color: var(--oro); } p{ margin: 0 0 var(--espacio-2); color: var(--color-texto); } .texto-suave{ color: var(--color-texto-suave); } a{ color: var(--guinda); text-decoration-thickness: 2px; text-underline-offset: 2px; } a:hover{ color: var(--oro-oscuro); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 3px solid var(--color-enfoque); outline-offset: 2px; } /* Saltar al contenido */ .saltar-enlace{ position: absolute; left: -999px; top: 0; background: var(--guinda); color: #fff; padding: 0.75rem 1.25rem; z-index: 1000; border-radius: 0 0 8px 0; } .saltar-enlace:focus{ left: 0; } .contenedor{ width: 100%; max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 var(--espacio-3); } .contenedor--angosto{ max-width: 800px; } /* ---------- Revelado al hacer scroll ---------- Sin JavaScript, .revelar es contenido normal y permanece visible (accesible y legible sin JS). Solo si lleva la clase "js" (añadida por un script mínimo en el ) se oculta de entrada para animarse al entrar en pantalla. */ .js .revelar{ opacity: 0; transform: translateY(22px); transition: opacity var(--duracion) cubic-bezier(.2,.7,.2,1), transform var(--duracion) cubic-bezier(.2,.7,.2,1); } .js .revelar.visible{ opacity: 1; transform: none; } .revelar-retraso-1{ transition-delay: .08s; } .revelar-retraso-2{ transition-delay: .16s; } .revelar-retraso-3{ transition-delay: .24s; } .revelar-retraso-4{ transition-delay: .32s; } /* ---------- Encabezado ---------- */ .encabezado{ border-bottom: 1px solid var(--color-borde); background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(8px); position: sticky; top: 0; z-index: 100; } .encabezado__barra{ display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; gap: var(--espacio-2); } .encabezado__marca{ display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .encabezado__marca img{ height: 62px; width: auto; } .nav-principal{ display: none; } .nav-principal > ul{ display: flex; gap: var(--espacio-3); list-style: none; margin: 0; padding: 0; align-items: center; } .nav-principal a{ color: var(--color-texto); text-decoration: none; font-weight: 700; font-size: 0.94rem; padding: 0.5rem 0.1rem; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .nav-principal a:hover, .nav-principal a[aria-current="page"]{ color: var(--guinda); border-bottom-color: var(--oro); } .nav-principal li{ position: relative; } .submenu{ display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); box-shadow: var(--sombra); padding: 0.5rem; margin: 0.4rem 0 0; list-style: none; } .nav-principal li:hover .submenu, .nav-principal li:focus-within .submenu{ display: block; } .submenu a{ display: block; padding: 0.6rem 0.7rem; border-bottom: none; border-radius: 6px; font-size: 0.9rem; } .submenu a:hover{ background: var(--guinda-100); } .boton-menu{ display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid var(--color-borde); border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 0.95rem; font-weight: 700; color: var(--guinda); cursor: pointer; } a.boton-cta-header{ display: none; } .nav-movil{ display: none; flex-direction: column; padding: var(--espacio-2) 0 var(--espacio-3); border-top: 1px solid var(--color-borde); } .nav-movil.abierto{ display: flex; } .nav-movil ul{ list-style: none; margin: 0; padding: 0; } .nav-movil li + li{ border-top: 1px solid var(--color-borde); } .nav-movil a{ display: block; padding: 0.85rem 0.25rem; color: var(--color-texto); text-decoration: none; font-weight: 700; } .nav-movil ul ul{ padding-left: var(--espacio-2); } .nav-movil ul ul a{ font-weight: 500; font-size: 0.95rem; color: var(--color-texto-suave); } @media (min-width: 860px){ .nav-principal{ display: block; } .boton-menu{ display: none; } .nav-movil{ display: none !important; } a.boton-cta-header{ display: inline-flex; } } /* ---------- Héroe ---------- */ .heroe{ position: relative; color: #fff; padding: var(--espacio-6) 0 var(--espacio-6); overflow: hidden; isolation: isolate; min-height: 78vh; display: flex; align-items: center; } .heroe__carrusel{ position: absolute; inset: 0; z-index: -2; } .heroe__fondo{ position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 1.1s ease; } .heroe__fondo.activa{ opacity: 1; } /* Sin JS, la imagen con la clase "activa" (fijada en el HTML) queda visible; el resto permanece oculto. */ .heroe__velo{ position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(44,7,16,.94) 0%, rgba(44,7,16,.82) 38%, rgba(90,18,32,.55) 70%, rgba(90,18,32,.35) 100%); } .heroe__contenido{ max-width: 700px; } .heroe h1{ color: #fff; margin-bottom: var(--espacio-2); } .heroe .ojo{ color: #f0c98e; } .heroe .ojo::before{ color: #f0c98e; } .heroe__lema{ font-size: 1.18rem; color: #f1e2e5; max-width: 620px; margin-bottom: var(--espacio-3); } .heroe__acciones{ display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-3); } .heroe__stats{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espacio-2) var(--espacio-3); margin-top: var(--espacio-4); max-width: 480px; } @media (min-width: 860px){ .heroe__stats{ grid-template-columns: repeat(4, 1fr); max-width: 620px; } } .heroe__stat{ border-left: 2px solid rgba(240,201,142,.55); padding-left: 0.75rem; } .heroe__stat b{ display: block; font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.1; } .heroe__stat span{ font-size: 0.78rem; color: #e2c6cc; } .boton{ display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 1rem; border: 2px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s; } .boton--primario{ background: var(--oro); color: #241a05; } .boton--primario:hover{ background: #c79a48; color: #241a05; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(169,130,47,.55); } .boton--secundario{ background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .boton--secundario:hover{ background: rgba(255,255,255,.14); color: #fff; transform: translateY(-2px); } .boton--oscuro{ background: var(--guinda); color: #fff; } .boton--oscuro:hover{ background: var(--guinda-900); transform: translateY(-2px); box-shadow: var(--sombra); } .boton--fantasma{ background: transparent; color: var(--guinda); border-color: var(--color-borde); } .boton--fantasma:hover{ background: var(--guinda-100); border-color: var(--guinda-300); } /* ---------- Secciones genéricas ---------- */ .seccion{ padding: var(--espacio-6) 0; } .seccion--alterna{ background: var(--color-fondo-alterno); } .seccion--guinda{ background: var(--guinda-950); color: #f1e2e5; } .seccion--guinda h2{ color: #fff; } .seccion__intro{ max-width: 720px; margin-bottom: var(--espacio-4); } .seccion__cabecera{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espacio-3); flex-wrap: wrap; margin-bottom: var(--espacio-4); } .rejilla{ display: grid; gap: var(--espacio-3); grid-template-columns: 1fr; } @media (min-width: 640px){ .rejilla--2{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px){ .rejilla--3{ grid-template-columns: repeat(3, 1fr); } .rejilla--4{ grid-template-columns: repeat(4, 1fr); } } .rejilla--asimetrica{ display: grid; gap: var(--espacio-4); grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px){ .rejilla--asimetrica{ grid-template-columns: 1.1fr 0.9fr; } } .rejilla--asimetrica-inversa{ display: grid; gap: var(--espacio-4); grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px){ .rejilla--asimetrica-inversa{ grid-template-columns: 0.9fr 1.1fr; } } /* ---------- Tarjetas de servicio con imagen ---------- */ .tarjeta-servicio{ position: relative; border-radius: var(--radio); overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; color: #fff; text-decoration: none; box-shadow: var(--sombra-suave); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; } .tarjeta-servicio:hover, .tarjeta-servicio:focus-visible{ transform: translateY(-6px); box-shadow: var(--sombra); } .tarjeta-servicio__fondo{ position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .tarjeta-servicio:hover .tarjeta-servicio__fondo{ transform: scale(1.08); } .tarjeta-servicio__velo{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44,7,16,0) 15%, rgba(44,7,16,.92) 100%); } .tarjeta-servicio__texto{ position: relative; padding: var(--espacio-3); } .tarjeta-servicio__texto h3{ color: #fff; margin-bottom: 0.35rem; } .tarjeta-servicio__texto p{ color: #ecdadf; font-size: 0.92rem; margin-bottom: 0.5rem; } .tarjeta-servicio__enlace{ color: #f0c98e; font-weight: 800; font-size: 0.9rem; } /* ---------- Tarjeta simple ---------- */ .tarjeta{ background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: var(--espacio-3); box-shadow: var(--sombra-suave); transition: transform .3s, box-shadow .3s; } .tarjeta:hover{ transform: translateY(-4px); box-shadow: var(--sombra); } .tarjeta h3{ margin-top: 0; } .tarjeta__enlace{ font-weight: 700; text-decoration: none; } .tarjeta__enlace::after{ content: " →"; } .lista-servicios{ margin: 0; padding-left: 1.2rem; } .lista-servicios li{ margin-bottom: 0.5rem; } .lista-check{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .lista-check li{ padding-left: 1.7rem; position: relative; } .lista-check li::before{ content: ""; position: absolute; left: 0; top: 0.35em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--guinda-100); box-shadow: inset 0 0 0 2px var(--guinda); } .lista-check li::after{ content: ""; position: absolute; left: 0.3rem; top: 0.55em; width: 0.45rem; height: 0.25rem; border-left: 2px solid var(--guinda); border-bottom: 2px solid var(--guinda); transform: rotate(-45deg); } /* ---------- Franja de contacto ---------- */ .franja-contacto{ background: linear-gradient(120deg, var(--guinda) 0%, var(--guinda-900) 100%); color: #fff; padding: var(--espacio-5) 0; text-align: center; } .franja-contacto h2{ color: #fff; } .franja-contacto p{ color: #f1dde1; } /* ---------- Migas de pan ---------- */ .migas{ font-size: 0.9rem; margin-bottom: var(--espacio-3); color: var(--color-texto-suave); } .migas a{ color: var(--color-texto-suave); } .migas ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; } .migas li:not(:last-child)::after{ content: "/"; margin-left: 0.35rem; color: var(--color-borde); } /* ---------- Directorio / tabla ---------- */ .tabla-directorio{ width: 100%; border-collapse: collapse; margin-bottom: var(--espacio-3); } .tabla-directorio caption{ text-align: left; font-weight: 800; color: var(--guinda); margin-bottom: 0.5rem; } .tabla-directorio th, .tabla-directorio td{ text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--color-borde); } .tabla-directorio th{ color: var(--guinda); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ---------- Galería con desplazamiento ---------- */ .galeria-scroll{ display: flex; gap: var(--espacio-2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0.25rem 1.25rem; margin: 0 -0.25rem; -webkit-overflow-scrolling: touch; scrollbar-color: var(--guinda-300) transparent; scrollbar-width: thin; } .galeria-scroll img{ flex: 0 0 auto; width: min(78vw, 380px); height: 280px; object-fit: cover; border-radius: var(--radio); scroll-snap-align: start; box-shadow: var(--sombra-suave); } /* Galería de avance continuo (sin interacción del usuario), en bucle. */ .galeria-marquee{ overflow: hidden; margin: 0.5rem -0.25rem 1.25rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .galeria-marquee__pista{ display: flex; gap: var(--espacio-2); width: max-content; animation: girar-galeria 48s linear infinite; } .galeria-marquee:hover .galeria-marquee__pista, .galeria-marquee:focus-within .galeria-marquee__pista{ animation-play-state: paused; } .galeria-marquee__pista img{ flex: 0 0 auto; width: min(78vw, 380px); height: 280px; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra-suave); } @keyframes girar-galeria{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } .galeria{ display: grid; gap: var(--espacio-2); grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px){ .galeria{ grid-template-columns: repeat(3, 1fr); } } .galeria img{ border-radius: var(--radio-chico); aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .4s; } .galeria a{ display: block; overflow: hidden; border-radius: var(--radio-chico); } .galeria a:hover img{ transform: scale(1.06); } /* ---------- Cita destacada ---------- */ .cita{ font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 700; color: var(--guinda-950); border-left: 4px solid var(--oro); padding-left: var(--espacio-3); margin: var(--espacio-4) 0; font-style: italic; } /* ---------- Pie de página ---------- */ .pie{ background: var(--guinda-950); color: #d9c3c8; padding: var(--espacio-5) 0 var(--espacio-3); font-size: 0.92rem; } .pie a{ color: #fff; } .pie a:hover{ color: #f0c98e; } .pie__rejilla{ display: grid; gap: var(--espacio-3); grid-template-columns: 1fr; margin-bottom: var(--espacio-3); } @media (min-width: 720px){ .pie__rejilla{ grid-template-columns: repeat(3, 1fr); } } .pie h3{ color: #fff; font-size: 1rem; } .pie ul{ list-style: none; margin: 0; padding: 0; } .pie li{ margin-bottom: 0.4rem; } .pie__legal{ border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--espacio-2); text-align: center; color: #a98d92; } /* ---------- Utilidades ---------- */ .solo-lectura-pantalla{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .centro-texto{ text-align: center; } .mt-0{ margin-top: 0; } .img-redonda{ border-radius: var(--radio); box-shadow: var(--sombra-suave); } .foto-panoramica{ width: 100%; aspect-ratio: 21/8; object-fit: cover; object-position: center 38%; border-radius: var(--radio); box-shadow: var(--sombra-suave); margin-bottom: var(--espacio-3); } @media (max-width: 640px){ .foto-panoramica{ aspect-ratio: 4/3; object-position: center 30%; } }