/* ============================================================ FÁTIMA DIGITAL 2035 - HOJA DE ESTILOS CON GUÍA DE ESTUDIO ============================================================ SINTAXIS CSS: selector { propiedad: valor; } ¿CÓMO SE APLICA? Por CASCADA: si hay reglas en conflicto gana la más ESPECÍFICA; si empatan, gana la ÚLTIMA que se escribió. ESPECIFICIDAD (de menor a mayor): etiqueta (p) < clase (.card) < id (#noticias) < inline (style="") ============================================================ */ /* ---------- VARIABLES CSS (custom properties) ---------- */ :root{ /* :root apunta al elemento . Aquí "guardamos" colores como variables para usarlos en TODO el documento. PREGUNTA: "¿Ventaja?" R: Para cambiar el color principal de la página solo se edita UNA línea, no cien. */ --navy:#0b2a5c; /* azul oscuro institucional */ --navy-2:#123a7d; --blue:#1e5ac8; /* azul principal (botones, acentos) */ --sky:#dbe7ff; --gold:#f0b429; /* dorado (detalles) */ --text:#2b3445; /* color de los párrafos */ --muted:#6b7686; /* color de textos secundarios */ --bg:#f4f7fb; /* fondo gris muy claro de la página */ --card:#ffffff; --radius:14px; --shadow:0 4px 14px rgba(11,42,92,.08); /* sombra suave: desplaz-x y blur color */ } /* ---------- RESET (reinicio de estilos del navegador) ---------- */ *{margin:0;padding:0;box-sizing:border-box} /* * = selector UNIVERSAL: aplica a TODOS los elementos. margin/padding 0 -> quita los espacios por defecto que cada navegador pone distinto (por eso las páginas se ven distintas sin reset). box-sizing:border-box -> el PADDING y el BORDE se incluyen DENTRO del ancho declarado. CLAVE para no volverse loco con las medidas. PREGUNTA FRECUENTE: "¿Qué es box-sizing?" R: Sin border-box, una caja de width:100px + padding:20px mide 140px; con border-box mide 100px. */ body{font-family:'Segoe UI',Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.5} /* Todo lo que esté dentro de hereda estas propiedades (fuente, color de texto, fondo e interlineado). */ .container{max-width:1200px;margin:0 auto;padding:0 24px} /* La clase "container" centra el contenido: max-width: no crece más de 1200px margin:0 auto -> márgenes automáticos = centrado horizontal padding:0 24px -> aire a los costados en pantallas pequeñas */ img{max-width:100%;display:block} /* max-width:100% -> las imágenes nunca se salen de su caja (responsive) display:block -> quita el espacio fantasma que dejan las img en línea */ a{text-decoration:none;color:inherit} /* quita el subrayado de los enlaces y hereda el color del padre */ /* ---------- BOTONES ---------- */ /* Un botón tiene DOS clases: .btn (estructura base) y .btn-xxx (variación). Es el patrón "base + modificador": se escribe class="btn btn-outline" */ .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:999px; font-size:.92rem;font-weight:600;cursor:pointer;border:2px solid transparent;transition:.25s} /* display:inline-flex -> alinea icono y texto en fila (FLEXBOX) gap -> espacio entre elementos flex border-radius:999px -> esquinas totalmente redondeadas (píldora) transition:.25s -> anima suavemente cualquier cambio de propiedad (por eso el hover no es brusco) */ .btn:hover{ /* :hover = PSEUDOCLASE: estilo cuando el mouse pasa encima */ filter:brightness(1.1)} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:var(--navy-2)} .btn-outline{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.08)} .btn-outline:hover{background:rgba(255,255,255,.2)} .btn-light{background:#fff;border:1px solid #d7deea;color:var(--navy)} .btn-light:hover{border-color:var(--blue);color:var(--blue)} .btn-sm{padding:8px 16px;font-size:.82rem} /* ---------- NAVBAR (barra de navegación) ---------- */ .navbar{position:sticky;top:0;z-index:100;background:#fff;box-shadow:var(--shadow)} /* position:sticky -> se "pega" arriba al hacer scroll (sigue visible) top:0 -> se pega en el borde superior z-index:100 -> se dibuja ENCIMA de lo demás (eje de profundidad) */ .nav-container{display:flex;align-items:center;gap:28px;height:74px} /* display:flex -> FLEXBOX: alinea los hijos en fila y los centra verticalmente */ .brand{display:flex;align-items:center;gap:12px} .brand-logo{width:46px} .brand-text{display:flex;flex-direction:column;line-height:1.15} /* flex-direction:column -> apila los textos uno debajo del otro */ .brand-text strong{color:var(--navy);font-size:1.02rem;letter-spacing:.4px} .brand-text small{color:var(--muted);font-size:.72rem} .nav-links{display:flex;gap:26px;margin-left:auto} /* margin-left:auto -> empuja el menú a la derecha (truco de flexbox) */ .nav-links a{font-size:.92rem;color:var(--text);padding:6px 2px;border-bottom:3px solid transparent} .nav-links a:hover{color:var(--blue)} .nav-links a.active{color:var(--navy);font-weight:700;border-bottom-color:var(--blue)} /* la página actual se marca con la clase .active (línea azul abajo) */ .hamburger{display:none;background:none;border:none;font-size:1.5rem;color:var(--navy)} /* oculto en escritorio; aparece solo en móvil (media query de abajo) */ /* ---------- HERO (sección principal) ---------- */ .hero{position:relative;min-height:520px;display:flex;align-items:center;color:#fff; background:linear-gradient(90deg,rgba(8,30,70,.94) 0%,rgba(12,45,105,.75) 45%,rgba(12,45,105,.15) 100%), url('../images/hero.png') center/cover no-repeat} /* Dos fondos superpuestos en UN solo background: 1) un DEGRADADO azul oscuro->transparente (izquierda->derecha) para que el texto blanco se lea bien encima de la foto; 2) la imagen hero.png (../ porque el CSS está dentro de css/) center/cover -> centrada y cubriendo todo sin deformarse */ .hero-content{padding:70px 24px;max-width:1200px} .hero-tag{font-size:.8rem;letter-spacing:3px;color:#bcd2ff;font-weight:600} .hero h1{font-size:2.5rem;line-height:1.2;margin:14px 0 16px;font-weight:800} /* selector "padre hijo": .hero h1 estiliza solo los h1 DENTRO de .hero */ .hero p{max-width:560px;color:#dbe6ff;font-size:1rem} .hero-buttons{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap} /* flex-wrap:wrap -> si no caben, los botones bajan a la siguiente fila */ /* ---------- SECCIONES ---------- */ .section{padding:56px 0} /* 56px arriba y abajo, 0 a los lados */ .section-alt{background:#eef3fa} /* variante con fondo distinto */ .section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;flex-wrap:wrap} /* justify-content:space-between -> empuja título a la izquierda y botón a la derecha */ .section-header h2{color:var(--navy);font-size:1.55rem;font-weight:800} .underline{display:block;width:64px;height:4px;background:var(--blue);border-radius:2px;margin-top:8px} .section-sub{color:var(--muted);font-size:.95rem} /* ---------- TARJETAS DEL ECOSISTEMA (GRID) ---------- */ .cards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} /* display:grid -> CUADRÍCULA CSS: repeat(5,1fr) = 5 columnas de igual ancho (1fr = una fracción) */ .eco-card{background:var(--card);border:1px solid #e4eaf4;border-radius:var(--radius); padding:26px 20px;box-shadow:var(--shadow);transition:.25s} .eco-card:hover{transform:translateY(-5px);border-color:var(--blue)} /* transform:translateY(-5px) -> se eleva 5px al pasar el mouse (efeto "flotante" típico de las tarjetas modernas) */ .eco-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:1.5rem;margin-bottom:16px} /* border-radius:50% -> círculo perfecto (en un cuadrado) */ .eco-card h3{font-size:1rem;color:var(--navy);margin-bottom:8px} .eco-card p{font-size:.82rem;color:var(--muted)} /* ---------- NOTICIAS ---------- */ .news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .news-card{background:var(--card);border:1px solid #e4eaf4;border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column} /* flex-direction:column -> apila imagen arriba y texto abajo overflow:hidden -> recorta la imagen a las esquinas redondeadas */ .news-card:hover{transform:translateY(-5px)} .news-card img{height:170px;width:100%;object-fit:cover} /* object-fit:cover -> recorta la foto para llenar el espacio sin deformarla (como background-size:cover pero para ) */ .news-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1} .news-body h3{font-size:.95rem;color:var(--navy);line-height:1.35} .news-body p{font-size:.8rem;color:var(--muted);flex:1} /* flex:1 dentro de una columna flex -> el párrafo "empuja" hacia abajo el enlace, y todos los "Leer más" quedan alineados */ .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.68rem;font-weight:700;width:fit-content} /* width:fit-content -> la pastilla solo ocupa lo que mide su texto */ .badge-blue{background:var(--sky);color:var(--navy)} .badge-teal{background:#d8f5e5;color:#0b6b4f} .badge-green{background:#d8f5e5;color:#1c7a3d} /* clases de color reutilizables: el HTML elige cuál usar */ .read-more{font-size:.82rem;font-weight:700;color:var(--blue)} .read-more:hover{color:var(--navy)} /* ---------- ACTIVIDADES ---------- */ .acts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .act-card{background:var(--card);border:1px solid #e4eaf4;border-radius:var(--radius); padding:20px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow);transition:.25s} .act-card:hover{border-color:var(--blue)} .act-date{background:var(--navy);color:#fff;border-radius:12px;min-width:66px;height:66px; display:flex;flex-direction:column;align-items:center;justify-content:center} .act-date strong{font-size:1.35rem;line-height:1} .act-date span{font-size:.68rem;letter-spacing:1px;color:var(--gold)} .act-info h3{font-size:.98rem;color:var(--navy);margin-bottom:4px} .act-info p{font-size:.8rem;color:var(--muted)} .act-arrow{margin-left:auto;font-size:1.6rem;color:#b8c4d8} /* margin-left:auto -> empuja la flecha al extremo derecho de la tarjeta */ /* ---------- FOOTER ---------- */ .footer{background:var(--navy);color:#cfdaf0;padding:34px 0} .footer-container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .footer-brand{display:flex;align-items:center;gap:14px} .footer-brand img{width:44px} .footer-brand strong{font-size:.92rem;color:#fff} .footer-brand p{font-size:.74rem;color:#9fb2d8} .footer-slogan{font-style:italic;font-size:.95rem;color:#e8eefc} .footer-values{display:flex;gap:22px;font-size:.8rem;flex-wrap:wrap} /* ============================================================ MEDIA QUERIES -> DISEÑO RESPONSIVE (mobile-first inverso) @media(max-width:XXXXpx){...} aplica esas reglas SOLO cuando la pantalla mide ese ancho o menos. PREGUNTA CLÁSICA: "¿Cómo adaptas la web al móvil?" R: Con la meta viewport + media queries que cambian el grid a una sola columna. ============================================================ */ @media(max-width:1024px){ /* tablets: 5 tarjetas quedan muy apretadas -> pasan a 3, noticias a 2 */ .cards-grid{grid-template-columns:repeat(3,1fr)} .news-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ /* celulares: TODO a una columna y menú tipo hamburguesa */ .nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:#fff; flex-direction:column;padding:16px 24px;gap:14px;box-shadow:var(--shadow)} /* el menú está OCULTO por defecto... */ .nav-links.open{display:flex} /* ...y la clase .open (que agrega el botón ☰ con JS) lo muestra */ .hamburger{display:block;margin-left:auto} /* aparece el botón ☰ */ .btn-login{display:none} .hero h1{font-size:1.7rem} .cards-grid,.news-grid,.acts-grid{grid-template-columns:1fr} }