/* ============================================ BONJOUR PARIS - ESTILOS PRINCIPALES Academia de Idiomas ============================================ */ /* La tipografía YA NO se pide desde aquí con @import: eso obligaba al navegador a bajar primero styles.css, descubrir el @import y salir a por la fuente después —dos viajes en fila, con la página en blanco mientras tanto—. Ahora cada página la pide en su , en paralelo con este archivo, y con preconnect a fonts.gstatic.com, que es de donde salen los .woff2. */ :root { /* Alto real de la cabecera: 0.75rem·2 de padding + 52px de logo. Estaba copiado a mano en dos sitios y con el valor equivocado. */ --header-h: 76px; /* Marca en triplete RGB: hace falta para componer rgba() desde variables. Son los MISMOS colores de siempre (#0a1f44 y #c9a84c), solo descompuestos. */ --navy-rgb: 10, 31, 68; --gold-rgb: 201, 168, 76; /* Cristal de la cabecera */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-solid: rgba(255, 255, 255, 0.97); --glass-line: rgba(var(--gold-rgb), 0.22); --glass-shadow: 0 4px 24px rgba(var(--navy-rgb), 0.10); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 0.18s var(--ease-out); --navy: #0a1f44; --navy-light: #1a3a6e; --gold: #c9a84c; --gold-light: #edc76e; /* tono 87° (ámbar). Antes 91°, ya en el oliva */ /* El dorado de --gold (L* 70) se queda para las secciones claras, donde apenas llega a 2.3:1 sobre blanco y no puede subir más. Sobre el azul del héroe pasa lo contrario: ahí se puede —y se debe— usar uno con luz. #E9C36C da 7.5:1 sobre el azul, tono 87°. */ --gold-claro-oscuro: #e9c36c; --cream: #f9f5ef; --red: #c0392b; --white: #ffffff; --gray-light: #f0f0f0; --gray-mid: #888; --text-dark: #1a1a2e; --shadow: 0 8px 32px rgba(10, 31, 68, 0.12); --shadow-lg: 0 16px 56px rgba(10, 31, 68, 0.18); --radius: 12px; --radius-lg: 20px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Añade esto a tu styles.css para optimizar imágenes */ img { max-width: 100%; height: auto; } /* Aquí había un `content-visibility: auto` sobre los logotipos. En una imagen sin `contain-intrinsic-size` eso es contraproducente: mientras está fuera de la pantalla el navegador la maqueta como si midiera cero, y al entrar salta a su tamaño real desplazando lo que tiene al lado. Era lo que dejaba el escudo de «Acerca de nosotros» descolocado a la izquierda. Además no ahorraba nada: son cuatro imágenes pequeñas, y dos de ellas (.header-logo, .header-logo-jva) están visibles desde el primer píxel. */ /* Añade a styles.css */ :focus { outline: 3px solid var(--gold); outline-offset: 2px; } .skip-link { position: absolute; top: -40px; left: 0; background: var(--navy); color: white; padding: 8px; z-index: 10000; } .skip-link:focus { top: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Sin esto, cada clic en #cursos o #contacto deja el título de la sección escondido debajo de la cabecera pegajosa. */ scroll-padding-top: calc(var(--header-h) + 8px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* evita el reescalado automático de texto en móvil */ text-size-adjust: 100%; } body { font-family: 'Nunito', sans-serif; background-color: var(--white); color: var(--text-dark); line-height: 1.7; /* SIN `overflow-x: hidden`. Estuvo aquí y no arreglaba nada: escondía la barra y dejaba el contenido cortado por la derecha, que es exactamente el fallo que no se ve en el portátil y sí en un móvil estrecho. Si algo se sale, ahora se nota y se arregla donde se sale. Se comprobó que nada lo necesitaba: ni un `100vw` ni un margen negativo de página en todo el CSS. */ width: 100%; max-width: 100%; } /* Ningún medio o tabla debe desbordar el ancho del dispositivo (rompía el layout al hacer zoom) */ img, video, iframe, canvas, svg, table { max-width: 100%; } *, *::before, *::after { min-width: 0; } /* ============================================ WELCOME SCREEN ============================================ */ #welcome-screen { position: fixed; inset: 0; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 50%, #0d2d5e 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; /* 0,55 s de desvanecido. Sumados a los 1,45 s que la deja js/main.js, la bienvenida dura DOS segundos de punta a punta. Los dos números van juntos: cambiar uno sin el otro alarga o acorta la presentación. */ transition: opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s; overflow: hidden; } #welcome-screen::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .welcome-flag-stripe { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; display: flex; } .welcome-flag-stripe span { flex: 1; } .welcome-flag-stripe span:nth-child(1) { background: #002395; } .welcome-flag-stripe span:nth-child(2) { background: var(--white); } .welcome-flag-stripe span:nth-child(3) { background: #ED2939; } .welcome-escudo { width: clamp(96px, 18vw, 150px); height: auto; margin-bottom: 1.1rem; animation: fadeInDown .55s cubic-bezier(.2,.7,.3,1) both; filter: drop-shadow(0 6px 28px rgba(201,168,76,.35)); } /* El nombre es el protagonista: la pantalla dura poco y tiene que decir quién eres antes de desaparecer. */ .welcome-nombre { font-family: 'Playfair Display', Georgia, serif; color: var(--white); font-size: clamp(2.1rem, 7vw, 4.2rem); font-weight: 700; line-height: 1.05; letter-spacing: .01em; margin: 0; text-align: center; animation: fadeInUp .55s .1s cubic-bezier(.2,.7,.3,1) both; } .welcome-sub { margin-top: .7rem; font-size: clamp(.72rem, 1.8vw, .9rem); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); animation: fadeInUp .55s .2s cubic-bezier(.2,.7,.3,1) both; } /* Dura poco: quien llega con el movimiento reducido activado no debería ver nada moverse, y tampoco esperar. */ @media (prefers-reduced-motion: reduce) { .welcome-escudo, .welcome-nombre, .welcome-sub { animation: none; } #welcome-screen { transition: none; } } .welcome-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ============================================ HEADER / NAV ============================================ */ header { /* Respaldo opaco primero: sin @supports, un navegador sin backdrop-filter mostraria la cabecera translucida SIN desenfoque y el menu quedaria ilegible sobre el hero. */ background: var(--glass-bg-solid); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); padding: 0.5rem 0; transition: box-shadow var(--t-fast), background var(--t-fast); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header { background: var(--glass-bg); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } } /* Al separarse del borde superior, la cabecera se eleva. */ header.is-scrolled { box-shadow: 0 6px 32px rgba(var(--navy-rgb), 0.16); --glass-bg: rgba(255, 255, 255, 0.84); } .header-inner { max-width: none; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .header-logo { height: 46px; width: auto; } nav { display: flex; align-items: center; gap: 0.25rem; } nav a { font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--navy); text-decoration: none; padding: 0.5rem 1rem; border-radius: 8px; letter-spacing: 0.03em; transition: var(--transition); position: relative; } nav a::after { content: ''; position: absolute; bottom: 4px; /* Se anima con transform, no con width: width fuerza un recalculo de maquetacion en cada fotograma; transform va solo en el compositor. */ left: 1rem; right: 1rem; height: 2px; background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 0.28s var(--ease-out); } nav a:hover, nav a:focus-visible { color: var(--gold); background: rgba(var(--gold-rgb), 0.08); } /* :focus-visible incluido a proposito: antes solo :hover pintaba el subrayado, asi que quien navega con teclado no veia nada. */ nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); } nav a[aria-current="page"]::after { transform: scaleX(1); opacity: 0.55; } /* Una sola acción principal. Tres botones de tres colores dicen que hay tres cosas igual de importantes, y entonces la vista no sabe dónde ir. */ .nav-cta { background: var(--navy); color: var(--white); border-radius: 999px; padding: 0.5rem 1.25rem; box-shadow: 0 2px 10px rgba(var(--navy-rgb), 0.22); } .nav-cta:hover, .nav-cta:focus-visible { background: var(--gold); color: var(--navy); box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.34); transform: translateY(-1px); } .nav-cta::after { display: none; } /* Verificar un certificado es una utilidad, no una venta: se marca con un contorno para que se encuentre, sin competir con la acción principal. */ .nav-util { border: 1.5px solid rgba(var(--navy-rgb), 0.28); border-radius: 999px; padding: 0.45rem 1.1rem; } .nav-util:hover, .nav-util:focus-visible { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); } .nav-util::after { display: none; } .nav-util[aria-current="page"] { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.12); } /* Hamburger */ .hamburger { display: none; flex-direction: column; /* El gap de 5px NO se toca: las transformadas de .active asumen 5+2. */ gap: 5px; cursor: pointer; background: none; border: none; /* 44px es el minimo tactil comodo; antes medía unos 36. */ min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0; border-radius: 10px; transition: background var(--t-fast); } .hamburger:hover, .hamburger:focus-visible { background: rgba(var(--navy-rgb), 0.06); } .hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--transition); } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================ HERO SECTION ============================================ */ #inicio { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%); } .hero-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=1600&q=80') center/cover; opacity: 0.15; } .hero-content { position: relative; max-width: none; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem); display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--white); line-height: 1.2; margin-bottom: 1.25rem; } .hero-text h2 em { color: var(--gold); font-style: italic; } .hero-text p { font-size: 1.1rem; color: rgba(255,255,255,0.78); margin-bottom: 2rem; font-weight: 300; } .hero-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .badge { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--white); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 500; backdrop-filter: blur(4px); } .hero-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gold); color: var(--navy); font-weight: 700; font-size: 1rem; padding: 0.9rem 2rem; border-radius: 50px; text-decoration: none; transition: var(--transition); box-shadow: 0 4px 20px rgba(201,168,76,0.4); } /* Los dos botones del hero: inscribirse y ver la tarifa. En el móvil se apilan a ancho completo en vez de partirse por la mitad. */ .hero-acciones { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; } .hero-cta-2 { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); cursor: pointer; font-family: inherit; } .hero-cta-2:hover { background: rgba(255,255,255,0.12); border-color: var(--gold); color: var(--gold-light); box-shadow: none; } .hero-cta-2 .ico { width: 18px; height: 18px; } @media (max-width: 520px) { /* El nowrap no sobra: una columna que envuelve mide la línea por su contenido, y los dos botones salían más estrechos que su caja. */ .hero-acciones { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .hero-acciones .hero-cta { justify-content: center; width: 100%; } } .hero-cta:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,168,76,0.5); } .hero-image-wrap { display: flex; justify-content: center; } .hero-card { position: relative; /* La luz cae desde arriba: un cristal liso de un solo tono se lee como un rectángulo pegado a la foto, no como una superficie. */ background: linear-gradient(157deg, rgba(255,255,255,0.115) 0%, rgba(255,255,255,0.042) 58%); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 2.15rem 2rem 1.8rem; backdrop-filter: blur(14px) saturate(118%); box-shadow: 0 20px 54px -22px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.2); color: white; max-width: 360px; width: 100%; overflow: hidden; } /* Un filo dorado en el canto de arriba, desvanecido a los lados: pone la marca sin cargar la tarjeta de color. */ .hero-card::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-claro-oscuro), transparent); } .hero-card-icon { /* El sprite ignora font-size: el tamaño se fija aquí, o el icono queda a 17px en un hueco de 3rem. Y va dentro de un medallón: un icono suelto en la esquina parece pegado; enmarcado se lee como parte del diseño. */ width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 34%, rgba(233,195,108,0.2), rgba(233,195,108,0.05)); border: 1px solid rgba(233,195,108,0.32); color: var(--gold-claro-oscuro); margin-bottom: 1.15rem; line-height: 1; } .hero-card-icon .ico { width: 38px; height: 38px; stroke-width: 1.4; } .hero-card h3 { font-family: 'Playfair Display', serif; font-size: 1.45rem; line-height: 1.25; margin-bottom: 0.6rem; color: var(--gold-claro-oscuro); } .hero-card p { font-size: 0.92rem; color: rgba(255,255,255,0.74); line-height: 1.62; } /* REJILLA, no flex. En flex cada cifra ocupaba lo que le pedía su texto y no cabían las tres: «NIVELES DISPONIBLES» e «IDIOMAS ENSEÑADOS» se montaban una encima de otra y se leía «DISPONIBLESENSEÑADOS». Con tres columnas iguales y min-width:0 cada una se queda en su sitio y el texto parte donde tiene que partir. */ .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.45rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.13); } .hero-stats .stat { min-width: 0; } .stat span { display: block; font-size: 1.7rem; line-height: 1; font-weight: 700; color: var(--gold-claro-oscuro); font-family: 'Playfair Display', serif; font-variant-numeric: lining-nums tabular-nums; } .stat small { display: block; margin-top: 0.34rem; font-size: 0.67rem; line-height: 1.35; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.055em; overflow-wrap: anywhere; } /* ============================================ SECTIONS COMMON ============================================ */ .section-container { max-width: none; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); } .section-tag { display: inline-block; background: rgba(201,168,76,0.1); color: var(--gold); border: 1px solid rgba(201,168,76,0.3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.9rem; border-radius: 50px; margin-bottom: 0.75rem; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--navy); line-height: 1.25; margin-bottom: 1rem; } .section-subtitle { color: var(--gray-mid); font-size: 1.05rem; font-weight: 400; max-width: 560px; line-height: 1.7; } /* ============================================ NOSOTROS ============================================ */ #nosotros { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; background: var(--cream); } .nosotros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .nosotros-text .section-subtitle { margin-bottom: 1.5rem; } .nosotros-features { list-style: none; margin-bottom: 2rem; } .nosotros-features li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; font-size: 0.95rem; color: #444; } .nosotros-features li .check { color: var(--gold); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 2px solid var(--navy); color: var(--navy); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem; padding: 0.75rem 1.75rem; border-radius: 8px; cursor: pointer; text-decoration: none; transition: var(--transition); } .btn-secondary:hover { background: var(--navy); color: var(--white); } .nosotros-visual { position: relative; } .nosotros-img-main { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4/3; } .nosotros-badge-card { position: absolute; bottom: -20px; left: -20px; background: var(--navy); color: var(--white); padding: 1.25rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .nosotros-badge-card .num { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--gold); display: block; font-weight: 700; } .nosotros-badge-card small { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); } /* ============================================ CURSOS ============================================ */ #cursos { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; background: var(--white); } .cursos-header { text-align: center; margin-bottom: 3.5rem; } .cursos-header .section-subtitle { margin: 0 auto; } .cursos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .curso-card { background: var(--white); border: 1px solid #e8e8e8; border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); transition: var(--transition); position: relative; overflow: hidden; } .curso-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--navy); transition: height var(--transition); } .curso-card.frances::before { background: var(--red); } .curso-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .curso-card:hover::before { height: 6px; } /* La bandera, como franja a lo ancho de la cabecera y no como icono suelto. Con 2,5rem quedaba un sello diminuto sobre mucho blanco; así identifica la tarjeta desde lejos y da el color del idioma sin recurrir a un logotipo. */ .curso-flag { margin: -2rem -2rem 1.25rem; height: 76px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; position: relative; display: block; } .curso-flag .bandera { width: 100%; height: 100%; display: block; object-fit: cover; } /* Un velo oscuro por abajo: sin él, el borde de la bandera choca con el blanco de la tarjeta y se ve como un recorte. */ .curso-flag::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(10, 31, 68, 0.28), transparent); pointer-events: none; } /* La línea de color superior de la tarjeta sobra cuando hay franja: la bandera ya dice de qué idioma es. */ .curso-card:has(.curso-flag)::before { display: none; } .curso-card h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--navy); margin-bottom: 0.75rem; } .curso-card.frances h3 { color: var(--red); } .curso-card p { color: #555; font-size: 0.95rem; margin-bottom: 1.5rem; line-height: 1.7; } .niveles-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-mid); font-weight: 700; margin-bottom: 0.6rem; } .niveles { display: flex; gap: 0.5rem; flex-wrap: wrap; } .nivel { padding: 0.3rem 0.8rem; border-radius: 6px; font-weight: 700; font-size: 0.82rem; color: white; } .A1 { background: #2980b9; } .A2 { background: #27ae60; } .B1 { background: #8e44ad; } .B2 { background: var(--red); } /* ============================================ PAGOS ============================================ */ /* La seccion suelta de pagos ya no existe: vive dentro del pie. Su regla de fondo crema seguia aqui y, por ser un id, ganaba a .pie — el pie salia en crema con el texto blanco encima, ilegible. */ .bancos-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; } .banco-item { background: var(--white); border: 1px solid #e0e0e0; border-radius: var(--radius); padding: 1.25rem 1.75rem; min-width: 200px; cursor: pointer; transition: var(--transition); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .banco-item:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--gold); } .banco-header { display: flex; align-items: center; gap: 0.75rem; } .banco-header img { height: 32px; object-fit: contain; } .banco-name { font-weight: 700; font-size: 0.88rem; } .banco-details { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #e0e0e0; font-size: 0.88rem; color: #444; line-height: 1.8; } .banco-details.open { display: block; } .banco-details strong { color: var(--navy); } /* ============================================ CONTACTO ============================================ */ #contacto { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; background: var(--white); } .contacto-grid { display: grid; /* El formulario pesa más que la columna de texto. Repartir a mitades dejaba media pantalla vacía debajo del texto. */ grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 3.25rem); align-items: start; } .contacto-info { padding-top: 0; } /* Botones de contacto. Antes eran tres líneas de texto: un número escrito hay que seleccionarlo, copiarlo y pegarlo en otra aplicación, y en móvil eso es suficiente fricción para no escribir. Esto abre la conversación de una pulsación. */ .contacto-acciones { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.5rem; } .cbtn { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; border-radius: 14px; border: 1.5px solid rgba(var(--navy-rgb), 0.12); background: var(--white); text-decoration: none; color: var(--navy); transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s; } .cbtn:hover, .cbtn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 31, 68, 0.12); } .cbtn-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--white); } .cbtn-ico .ico { width: 22px; height: 22px; } /* El icono de WhatsApp trae ya su verde de marca —es como se reconoce—, así que la casilla va en claro. Cuando la casilla era verde, el globo verde del icono desaparecía dentro y solo quedaba el auricular blanco. */ .cbtn-wa .cbtn-ico { background: #E6F9EE; border: 1px solid #B9E8CE; } .cbtn-wa:hover { border-color: #25D366; } .cbtn-mail .cbtn-ico { background: var(--navy); } .cbtn-mail:hover { border-color: var(--gold); } .cbtn-txt { display: flex; flex-direction: column; min-width: 0; } /* El número de WhatsApp NO se escribe en pantalla, en ningún tamaño: el botón abre el chat con ese mismo número, y escrito solo alarga la tarjeta y deja el teléfono a la vista de los rastreadores de spam. Vale para la portada y para Capacítate, que comparten esta hoja. */ .cbtn-wa .cbtn-txt small { display: none; } .cbtn-txt b { font-size: 0.98rem; font-weight: 800; letter-spacing: 0.01em; } .cbtn-txt small { font-size: 0.82rem; color: #6a7587; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contacto-nota { margin-top: 1rem; font-size: 0.82rem; color: #6a7587; } .contacto-form { background: var(--cream); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow); } .contacto-form h3 { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 1.5rem; margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.88rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; } .form-group input, .form-group textarea { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid #ddd; border-radius: 8px; font-family: 'Nunito', sans-serif; /* max(16px, …) evita el zoom automático de Safari iOS al enfocar. */ font-size: max(16px, 0.95rem); color: var(--text-dark); background: var(--white); transition: border-color var(--transition); outline: none; } .form-group input:focus, .form-group textarea:focus { border-color: var(--navy); } .form-group textarea { resize: vertical; min-height: 120px; } /* ============================================ MENSAJE DE ÉXITO DEL FORMULARIO ============================================ */ #success-message { animation: fadeInUp 0.6s ease forwards; } #success-message h3 { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 1.8rem; margin-bottom: 1rem; line-height: 1.3; } #success-message p { color: #555; font-size: 1rem; line-height: 1.8; margin-bottom: 2rem; max-width: 400px; margin-left: auto; margin-right: auto; } #success-message .btn-secondary { display: inline-block; padding: 0.9rem 2rem; background: var(--navy); color: white; border: none; border-radius: 8px; font-weight: 700; text-decoration: none; transition: var(--transition); box-shadow: 0 4px 12px rgba(10, 31, 68, 0.2); } #success-message .btn-secondary:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201, 168, 76, 0.3); } /* Animación adicional */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #success-message div:first-child { animation: pulse 2s infinite ease-in-out; } .btn-primary { width: 100%; padding: 0.9rem; background: var(--navy); color: var(--white); border: none; border-radius: 8px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: var(--transition); letter-spacing: 0.05em; } .btn-primary:hover { background: var(--gold); color: var(--navy); } /* ============================================ FOOTER ============================================ */ /* ============================================ PIE — pagos y cierre en una sola banda Antes eran dos franjas seguidas: la de pagos, con tres tarjetas blancas sueltas sobre crema, y debajo un pie de una línea. Las dos se veían incompletas por separado y juntas ocupaban más que esto. ============================================ */ /* El pie base. Lo comparten las páginas que no llevan la banda completa de la portada —cursos, nosotros, capacítate— y que se quedaron sin estilo al convertir el selector footer en .pie: el