/* ============================================================ CONTACTO - contacto.html unicamente Se carga DESPUES de base-v2.css. Aqui solo va lo propio de esta pagina, que es la unica funcional del sitio: no lleva hero editorial a pantalla completa, porque lo que el visitante viene a buscar son el correo, el WhatsApp y el formulario, y eso tiene que verse sin bajar. Todo esta bajo .contacto, la segunda clase del : ESTE ARCHIVO NO TOCA LA LOGICA DEL FORMULARIO. El action, el method, los name de los campos y el script que los envia estan igual que siempre. Aqui solo se cambia como se ven. ============================================================ */ /* ============================================================ CABECERA - datos y formulario en la primera pantalla El padding de arriba deja libre la franja del header fijo (102px). Los valores estan ajustados para que TODO quepa en la primera pantalla de un portatil normal: datos, formulario y boton de enviar. Por eso el titular va a --text-h2 y no a --text-h1 como en las paginas editoriales: aqui manda la funcion. ============================================================ */ .contacto .cabecera{background:var(--color-bg-dark);color:var(--color-text-on-dark);padding:calc(var(--space-7) + var(--space-4)) 0 var(--space-6)} .contacto .cabecera .label{color:var(--color-text-on-dark-muted);margin-bottom:var(--space-2)} /* El titular de la pagina es un H1 desde este arreglo: la pagina no tenia ninguno, que era un error de SEO anterior al rediseño. No se inventa texto: es el mismo titular que ya estaba, solo cambia la etiqueta. "Contacto" sigue en el y en el menu. La cursiva hereda el color, igual que hacen los H2 y H3 en base-v2.css: el dorado en cursiva vive solo en el H1 del home. */ .contacto .cabecera h1{font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-dark);margin:0 0 var(--space-3);max-width:14ch} .contacto .cabecera h1 em{color:inherit;font-weight:inherit} .contacto .cabecera .intro{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text-on-dark-muted);max-width:44ch;margin:0 0 var(--space-5)} .contacto .con-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start} /* --- Datos de contacto: cada dato sobre su linea dorada fina --- */ .contacto .con-line{border-top:1px solid var(--color-accent-gold);padding-top:var(--space-2);margin-bottom:var(--space-3)} .contacto .con-line b{display:block;font-family:var(--font-sans);font-weight:400;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-on-dark-muted);margin-bottom:var(--space-1)} .contacto .con-line span{font-family:var(--font-sans);font-size:var(--text-body);color:var(--color-text-on-dark)} .contacto .con-line a{color:var(--color-text-on-dark)} .contacto .con-line a:hover{color:var(--color-accent-gold)} .contacto .con-info .wa{margin-top:var(--space-2)} .contacto .con-info .social{margin-top:var(--space-5);gap:var(--space-1)} .contacto .con-info .social a{width:34px;height:34px;font-size:14px;border-color:var(--color-border-dark);color:var(--color-text-on-dark-muted)} .contacto .con-info .social a:hover{border-color:var(--color-accent-gold);color:var(--color-accent-gold);transform:none} /* ============================================================ FORMULARIO Campos sin esquinas redondeadas, fondo apenas mas claro que el fondo de la seccion, y la etiqueta SIEMPRE visible encima del campo: el placeholder no sustituye a un <label>, porque desaparece en cuanto el visitante empieza a escribir. ============================================================ */ .contacto form div{margin-bottom:var(--space-2)} .contacto form label{display:block;font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-on-dark-muted);margin-bottom:var(--space-1)} .contacto form input,.contacto form textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--color-border-dark);border-radius:var(--radius);color:var(--color-text-on-dark);font-family:var(--font-sans);font-size:var(--text-body);padding:var(--space-2);transition:border-color var(--transition-fast)} .contacto form textarea{min-height:7rem;resize:vertical} .contacto form input::placeholder,.contacto form textarea::placeholder{color:var(--color-text-on-dark-muted);opacity:.6} .contacto form input:hover,.contacto form textarea:hover{border-color:var(--color-text-on-dark-muted)} /* Foco: borde dorado Y contorno dorado. El contorno del navegador no se quita: se sustituye por uno que se ve mejor sobre fondo oscuro. Quitarlo sin reemplazo dejaria a quien navega con teclado sin saber donde esta. */ .contacto form input:focus,.contacto form textarea:focus{border:1px solid var(--color-accent-gold);outline:1px solid var(--color-accent-gold);outline-offset:2px} .contacto form button{border:1px solid var(--color-accent-gold);cursor:pointer;margin-top:var(--space-2)} .contacto form button:disabled{opacity:.6;cursor:default} /* Mensaje de gracias: mismo lenguaje, sin esquinas redondeadas */ .contacto .form-ok{border:1px solid var(--color-accent-gold);border-radius:var(--radius);padding:var(--space-5);text-align:center;margin-top:var(--space-1)} .contacto .form-ok__t{font-family:var(--font-serif);font-weight:300;font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-dark)} .contacto .form-ok p{color:var(--color-text-on-dark-muted);font-size:var(--text-body);margin-top:var(--space-2)} .contacto .form-alt{color:var(--color-text-on-dark-muted);font-size:var(--text-small);margin-top:var(--space-3);text-align:center} .contacto .form-alt a{color:var(--color-text-on-dark)} .contacto .form-alt a:hover{color:var(--color-accent-gold)} /* ============================================================ MAPA En escala de grises para que no meta color en una paleta que no lo tiene. Es un filtro CSS sobre el <iframe> que ya estaba: no se añade ninguna libreria ni se cambia el proveedor del mapa. ============================================================ */ .contacto .mapa{background:var(--color-bg-light);color:var(--color-text-on-light);padding:var(--space-7) 0} .contacto .mapa .label{color:var(--color-text-on-light-muted);margin-bottom:var(--space-2)} .contacto .mapa h2{font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-light);margin:0 0 var(--space-5)} .contacto .map-embed{border:1px solid var(--color-border-light);border-radius:var(--radius);overflow:hidden;filter:grayscale(1) contrast(1.05)} .contacto .map-embed iframe{display:block} .contacto .mapa .btn{margin-top:var(--space-4)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:880px){ .contacto .cabecera{padding:calc(var(--space-7) + var(--space-4)) 0 var(--space-6)} .contacto .con-grid{grid-template-columns:1fr;gap:var(--space-6)} .contacto .mapa{padding:var(--space-6) 0} } @media(prefers-reduced-motion:reduce){ .contacto form input,.contacto form textarea{transition:none} }