/* ========================================================================== page.css — Páginas estáticas y contacto (lenguaje refinado Lightship). ========================================================================== */ /* --- Página genérica --------------------------------------------------- OJO: WordPress añade la clase `page` al , así que NO usar `.page` suelto (pisaría el body). Acotado a article.page. */ article.page { padding-top: var(--spacing-40); padding-bottom: var(--section-gap-mobile); } @media (min-width: 768px) { article.page { padding-bottom: var(--section-gap); } } .page__title { letter-spacing: var(--tracking-heading-lg); margin-bottom: var(--spacing-40); max-width: 20ch; } .page__prose { max-width: 70ch; color: var(--color-text-muted); line-height: 1.6; } .page__prose h2 { color: var(--color-pure-black); font-size: var(--text-heading-sm); margin: var(--spacing-40) 0 var(--spacing-12); letter-spacing: var(--tracking-heading-sm); } .page__prose h3 { color: var(--color-pure-black); font-size: var(--text-subheading); margin: var(--spacing-28) 0 var(--spacing-8); } .page__prose p { margin-bottom: var(--spacing-16); } .page__prose ul { list-style: disc; padding-left: var(--spacing-20); margin-bottom: var(--spacing-16); } .page__prose li { margin-bottom: var(--spacing-8); } .page__prose a { color: var(--color-pure-black); text-decoration: underline; text-underline-offset: 3px; } .page__prose strong { color: var(--color-pure-black); } /* --- Contacto ---------------------------------------------------------- */ .contact { padding-top: var(--spacing-40); padding-bottom: var(--section-gap-mobile); } @media (min-width: 768px) { .contact { padding-bottom: var(--section-gap); } } .contact__kicker { font-size: var(--text-body-sm); letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--spacing-12); } .contact__title { letter-spacing: var(--tracking-display); margin-bottom: var(--spacing-16); max-width: 16ch; } .contact__lead { max-width: 46ch; margin-bottom: var(--spacing-64); } .contact__layout { display: grid; grid-template-columns: 1fr; gap: var(--spacing-40); } @media (min-width: 900px) { .contact__layout { grid-template-columns: 0.8fr 1.2fr; gap: var(--spacing-64); align-items: center; } } .contact__list { border-top: 1px solid var(--color-outline-gray); } .contact__list li { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-16) 0; border-bottom: 1px solid var(--color-outline-gray); } .contact__k { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .12em; color: var(--color-text-muted); } .contact__v { font-size: var(--text-subheading); } a.contact__v:hover { text-decoration: underline; text-underline-offset: 3px; } .contact__lead-muted { color: var(--color-text-muted); } .contact__form-title { letter-spacing: var(--tracking-heading-sm); margin-bottom: var(--spacing-24); } .contact__map { margin-top: var(--section-gap-mobile); border-radius: var(--radius-images); overflow: hidden; background: var(--color-paper-white); } @media (min-width: 768px) { .contact__map { margin-top: var(--section-gap); } } .contact__map iframe { display: block; width: 100%; height: clamp(320px, 46vh, 540px); border: 0; filter: grayscale(1) contrast(1.04); } /* --- Formulario CF7 ---------------------------------------------------- */ /* El formulario llena su columna (antes max 640px dejaba un hueco a la derecha). */ .contact__form .wpcf7 { max-width: 100%; } .contact__form p { margin-bottom: var(--spacing-16); } .contact__form label { display: block; font-size: var(--text-body-sm); color: var(--color-text-muted); } .cf-row--2 { display: grid; gap: var(--spacing-16); } @media (min-width: 560px) { .cf-row--2 { grid-template-columns: 1fr 1fr; } } .contact__form input[type="text"], .contact__form input[type="email"], .contact__form input[type="tel"] { width: 100%; margin-top: var(--spacing-4); font: inherit; color: var(--color-pure-black); background: transparent; border: 1px solid var(--color-pure-black); border-radius: var(--radius-full); padding: var(--spacing-12) var(--spacing-24); } .contact__form textarea { width: 100%; margin-top: var(--spacing-4); font: inherit; color: var(--color-pure-black); background: transparent; border: 1px solid var(--color-pure-black); border-radius: var(--radius-2xl); padding: var(--spacing-16) var(--spacing-24); resize: vertical; min-height: 132px; } .contact__form input:focus-visible, .contact__form textarea:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 2px; } .cf-accept { font-size: var(--text-body-sm); color: var(--color-text-muted); } .cf-accept a { color: var(--color-pure-black); text-decoration: underline; text-underline-offset: 3px; } .contact__form input[type="submit"] { font: inherit; font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700; background: var(--color-pure-black); color: var(--color-bg); border: 1px solid var(--color-pure-black); border-radius: var(--radius-full); padding: var(--spacing-12) var(--spacing-28); cursor: pointer; } .contact__form input[type="submit"]:hover { background: #1f1f1f; } .contact__form .wpcf7-response-output { border-radius: var(--radius-2xl); border-width: 1px; margin: var(--spacing-16) 0 0; padding: var(--spacing-12) var(--spacing-24); font-size: var(--text-body-sm); } .contact__form .wpcf7-not-valid-tip { color: #b32d2e; font-size: var(--text-caption); } .contact__form .wpcf7-spinner { margin-left: var(--spacing-12); } /* --- Quiénes somos (editorial) ----------------------------------------- */ .about { padding-top: var(--spacing-40); padding-bottom: var(--section-gap-mobile); } @media (min-width: 768px) { .about { padding-bottom: var(--section-gap); } } .about__kicker { font-size: var(--text-body-sm); letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--spacing-16); } .about__title { letter-spacing: var(--tracking-heading-lg); margin-bottom: var(--spacing-24); } /* Texto (kicker + título + lead) en una columna, centrado vertical respecto a la foto. */ .about__intro { display: grid; grid-template-columns: 1fr; gap: var(--spacing-40); align-items: center; } @media (min-width: 900px) { .about__intro { grid-template-columns: 1fr 1fr; gap: var(--spacing-64); } } .about__lead { margin-top: var(--spacing-24); } .about__lead p + p { margin-top: var(--spacing-16); } .about__lead-muted { color: var(--color-text-muted); line-height: 1.5; } .about__media { margin: 0; border-radius: var(--radius-images); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-paper-white); } .about__img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; display: block; } .about__values { margin-top: var(--section-gap-mobile); } @media (min-width: 768px) { .about__values { margin-top: var(--section-gap); } } .about__values-title { letter-spacing: var(--tracking-heading-sm); margin-bottom: var(--spacing-40); } /* Hairlines con bordes reales por celda (evita que el gap de 1px desaparezca por redondeo sub-píxel). */ .feature-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--color-outline-gray); border-left: 1px solid var(--color-outline-gray); } @media (min-width: 560px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } } .feature { border-right: 1px solid var(--color-outline-gray); border-bottom: 1px solid var(--color-outline-gray); padding: var(--spacing-28); } .feature__num { display: block; font-size: var(--text-caption); letter-spacing: .12em; color: var(--color-text-muted); margin-bottom: var(--spacing-24); } .feature__title { margin-bottom: var(--spacing-8); } .feature__text { color: var(--color-text-muted); line-height: 1.45; } .about__cta { margin-top: var(--section-gap-mobile); } @media (min-width: 768px) { .about__cta { margin-top: var(--section-gap); } }