/* ========================================================================== Diana Alonzo — Sitio web Rediseño editorial inspirado en la estética "Nino": crema + negro, alto contraste, Oswald (titulares) + Poppins (cuerpo), secciones que alternan claro/oscuro, tipografía gigante. Verde reservado SOLO para Activismo (clase .theme-green en el ). ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { --cream: #f2f0eb; --cream-2: #eae7de; --black: #070707; --black-2: #0f0f0f; --ink: #111111; /* texto sobre crema */ --muted: #6b675e; /* secundario sobre crema */ --white: #ffffff; --line: #dedbd2; /* bordes sobre crema */ --line-dark: #262626; /* bordes sobre negro */ --faint: #5f5a4b; /* títulos gigantes sobre crema (legibles, con contraste) */ --faint-dark:#c3bfb2; /* títulos gigantes sobre negro (legibles, con contraste) */ --on-dark: #e7e4dc; /* texto sobre negro */ --on-dark-mut:#8f8b82; /* secundario sobre negro */ --gold: #b98a2e; /* acento dorado (eyebrows, detalles) */ --green: #4f8f6a; /* SOLO activismo */ --green-d: #3d7454; --maxw: 1240px; --font-head: "Oswald", "Arial Narrow", sans-serif; --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--black); color: #fff; padding: .75rem 1.25rem; } .skip-link:focus { left: 0; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- 3. Tipografía ---------- */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.02; text-transform: uppercase; } p { max-width: 62ch; } /* Nombre / display gigante */ .display { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; font-size: clamp(3.2rem, 13vw, 13rem); color: var(--ink); } /* Título gigante tenue de sección (marca de agua) */ .ghost { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: clamp(2.6rem, 9vw, 6rem); line-height: .95; color: var(--faint); letter-spacing: .01em; margin-top: .35em; /* separa el título de la etiqueta superior (evita choque con acentos) */ } .section--dark .ghost { color: var(--faint-dark); } /* Etiqueta pequeña */ .label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; font-weight: 500; color: var(--muted); } .section--dark .label { color: var(--on-dark-mut); } /* Acento manuscrito */ .script { font-family: "Caveat", "Segoe Script", cursive; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--muted); transform: rotate(-6deg); display: inline-block; } .section--dark .script { color: var(--on-dark-mut); } /* ---------- 4. Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; } .section { padding-block: clamp(3.5rem, 9vw, 7rem); } .section--dark { background: var(--black); color: var(--on-dark); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--cream2 { background: var(--cream-2); } .section-head { margin-bottom: 3rem; } .lead { font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.6; color: var(--ink); max-width: 60ch; } .section--dark .lead { color: var(--on-dark); } .muted { color: var(--muted); } .section--dark .muted { color: var(--on-dark-mut); } /* ---------- 5. Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.9rem; font-family: var(--font-body); font-weight: 500; font-size: .95rem; border: 1.5px solid var(--black); background: var(--black); color: #fff; border-radius: 0; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .btn:hover { background: transparent; color: var(--black); transform: translateY(-2px); } .btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: translate(3px,-3px); } .btn-outline { background: transparent; color: var(--black); } .btn-outline:hover { background: var(--black); color: #fff; } /* En secciones oscuras: invertir */ .section--dark .btn, .btn-light { background: #fff; color: var(--black); border-color: #fff; } .section--dark .btn:hover, .btn-light:hover { background: transparent; color: #fff; } .section--dark .btn-outline { background: transparent; color: #fff; border-color: #fff; } .section--dark .btn-outline:hover { background: #fff; color: var(--black); } /* ---------- 6. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(242,240,235,.85); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; } .site-header.scrolled { border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; } .brand { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; letter-spacing: .02em; color: var(--ink); white-space: nowrap; } .brand sup { color: var(--green); font-size: .7em; } .nav { display: flex; align-items: center; gap: 2.5rem; } .nav-list { display: flex; gap: 1.9rem; align-items: center; } .nav-list a { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 500; color: var(--ink); position: relative; padding: .3rem 0; transition: opacity .2s; } .nav-list a:hover { opacity: .6; } .nav-list a[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--ink); } .header-actions { display: flex; align-items: center; gap: 1.25rem; } .social-row { display: flex; gap: .7rem; align-items: center; } .social-row a { color: var(--ink); display: inline-flex; transition: opacity .2s, transform .2s; } .social-row a:hover { opacity: .55; transform: translateY(-1px); } .social-row svg { width: 19px; height: 19px; } .header-cta { padding: .6rem 1.3rem; font-size: .85rem; } .nav-toggle { display: none; background: transparent; border: 0; padding: .4rem; color: var(--ink); } .nav-toggle svg { width: 30px; height: 30px; } /* ---------- 7. Hero ---------- */ .hero { position: relative; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; } .hero-name { text-align: center; position: relative; z-index: 1; } .hero-portrait { width: min(66vw, 300px); aspect-ratio: 4/5; margin: 1rem auto 0; border-radius: 24px; overflow: hidden; transform: rotate(3deg); box-shadow: 0 30px 70px rgba(0,0,0,.28); position: relative; z-index: 2; } .hero-portrait img { width: 100%; height: 100%; object-fit: cover; } .hero-cols { display: grid; gap: 1.75rem; position: relative; z-index: 3; } .hero-portrait { order: -1; } .hero-proof .avatars { display: flex; } .hero-proof .avatars span { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--cream); margin-left: -12px; background: var(--cream-2) center/cover; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; color: var(--muted); font-size: .8rem; } .hero-proof .avatars span:first-child { margin-left: 0; } .hero-proof .big { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; text-transform: uppercase; margin-top: .8rem; } .hero-proof .big small { color: var(--muted); font-weight: 400; font-size: .95rem; } .hero-intro p { margin-bottom: 1.5rem; } .hero-intro .lead em { font-style: italic; color: var(--muted); } @media (min-width: 1200px) { .hero-cols { grid-template-columns: 1fr 330px 1fr; align-items: end; column-gap: clamp(2.75rem, 6vw, 6rem); margin-top: 1rem; } .hero-portrait { order: 0; width: 330px; margin: 0 auto; align-self: start; } .hero-proof { justify-self: start; max-width: 18rem; padding-bottom: 1rem; } .hero-intro { justify-self: end; max-width: 18rem; padding-bottom: 1rem; } } /* ---------- 8. Franja de credenciales (dark) ---------- */ .marquee-strip { padding-block: 2.5rem; background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cred-title { text-align: center; letter-spacing: .3em; font-size: .8rem; margin-bottom: 2rem; color: var(--gold); } .cred-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; align-items: center; } @media (min-width: 720px) { .cred-row { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .cred-item { text-align: center; } @media (min-width: 720px) { .cred-item + .cred-item { border-left: 1px solid var(--line); } } .cred-item strong { display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: 1.3rem; color: var(--ink); letter-spacing: .01em; } .cred-item span { font-size: .82rem; color: var(--muted); } /* ---------- 9. Editorial (label izq + contenido der) ---------- */ .editorial { display: grid; gap: 1.5rem; } .editorial .e-label { align-self: start; } .editorial .e-body p { font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.5; font-weight: 300; } .section--dark .editorial .e-body p { color: var(--on-dark); } @media (min-width: 820px) { .editorial { grid-template-columns: 1fr 3fr; gap: 3rem; } } /* ---------- 10. Tarjetas de servicio ---------- */ .cards { display: grid; gap: 1.25rem; } .card { background: var(--white); border: 1px solid var(--line); padding: 2rem; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.10); } .card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; } .card-num { font-family: var(--font-head); font-weight: 600; font-size: .85rem; border: 1px solid var(--line); padding: .15rem .6rem; color: var(--muted); } .card .arrow-box { width: 20px; height: 20px; color: var(--ink); } .card h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin-bottom: .75rem; } .card p { color: var(--muted); font-size: .96rem; } .card ul { display: grid; gap: .4rem; margin-top: .75rem; } .card li { position: relative; padding-left: 1.3rem; color: var(--muted); font-size: .93rem; } .card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--ink); } @media (min-width: 720px) { .cards.two { grid-template-columns: 1fr 1fr; } } @media (min-width: 720px) { .cards.four { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .cards.four { grid-template-columns: repeat(4, 1fr); } } /* ---------- Grilla de servicios (estilo referencia) ---------- */ .svc-head { text-align: center; margin-bottom: 3.5rem; } .svc-head .eyebrow-accent { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .22em; font-size: .82rem; font-weight: 500; color: var(--gold); display: block; margin-bottom: .9rem; } .svc-head h2 { font-size: clamp(2.2rem, 6vw, 4rem); color: #fff; } .section:not(.section--dark) .svc-head h2 { color: var(--ink); } .svc-head .divider { width: 1px; height: 46px; background: var(--line-dark); margin: 1.75rem auto 0; } .section:not(.section--dark) .svc-head .divider { background: var(--line); } .svc-grid { display: grid; grid-template-columns: 1fr; } .svc-cell { padding: 2.75rem 1.75rem; text-align: center; border-top: 1px solid var(--line-dark); transition: background .3s var(--ease); } .section:not(.section--dark) .svc-cell { border-top-color: var(--line); } .svc-cell:hover { background: rgba(255,255,255,.03); } .section:not(.section--dark) .svc-cell:hover { background: rgba(0,0,0,.03); } .svc-num { font-family: var(--font-head); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--faint-dark); display: block; margin-bottom: 1rem; } .section:not(.section--dark) .svc-num { color: var(--faint); } .svc-cell h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); color: #fff; margin-bottom: .85rem; } .section:not(.section--dark) .svc-cell h3 { color: var(--ink); } .svc-cell p { color: var(--on-dark-mut); font-size: .96rem; margin: 0 auto; max-width: 30ch; } .section:not(.section--dark) .svc-cell p { color: var(--muted); } .svc-cell ul { display: inline-grid; gap: .3rem; margin-top: .35rem; text-align: left; } .svc-cell li { color: var(--on-dark-mut); font-size: .92rem; position: relative; padding-left: 1.1rem; } .section:not(.section--dark) .svc-cell li { color: var(--muted); } .svc-cell li::before { content: "·"; position: absolute; left: .2rem; color: var(--gold); } @media (min-width: 620px) { .svc-grid.cols-2 { grid-template-columns: 1fr 1fr; } .svc-grid.cols-3 { grid-template-columns: 1fr 1fr; } .svc-grid.cols-4 { grid-template-columns: 1fr 1fr; } .svc-cell { border-left: 1px solid var(--line-dark); } .section:not(.section--dark) .svc-cell { border-left-color: var(--line); } .svc-grid.cols-2 .svc-cell:nth-child(odd), .svc-grid.cols-4 .svc-cell:nth-child(odd) { border-left: 0; } } @media (min-width: 960px) { .svc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .svc-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .svc-grid.cols-3 .svc-cell:nth-child(odd) { border-left: 1px solid var(--line-dark); } .svc-grid.cols-3 .svc-cell:nth-child(3n+1) { border-left: 0; } .svc-grid.cols-4 .svc-cell:nth-child(odd) { border-left: 1px solid var(--line-dark); } .svc-grid.cols-4 .svc-cell:nth-child(4n+1) { border-left: 0; } .section:not(.section--dark) .svc-grid .svc-cell { border-left-color: var(--line); } } /* ---------- 11. Galería full-bleed con etiqueta ---------- */ .work-grid { display: grid; gap: 4px; } .work-item { position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--cream-2); } .work-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .work-item:hover img { transform: scale(1.05); } .work-tag { position: absolute; top: 1.1rem; right: 1.1rem; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; padding: .4rem .9rem; border-radius: 999px; } .theme-green .work-tag { background: rgba(79,143,106,.85); } @media (min-width: 720px) { .work-grid.two { grid-template-columns: 1fr 1fr; } } /* ---------- 12. Split (imagen + texto) ---------- */ .split { display: grid; gap: 2.5rem; align-items: center; } .split-figure { overflow: hidden; aspect-ratio: 4/5; background: var(--cream-2); } .split-figure img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } .split.reverse .split-figure { order: 2; } } /* ---------- 13. Timeline / listas ---------- */ .timeline { display: grid; gap: 0; } .timeline-item { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line-dark); } .timeline-item:last-child { border-bottom: 1px solid var(--line-dark); } .timeline-item .yr { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; color: #fff; font-size: 1rem; min-width: 6rem; } .timeline-item p { color: var(--on-dark-mut); } .check-list { display: grid; gap: 1rem; } .check-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; color: var(--muted); } .check-list li::before { content: ""; width: 1.3rem; height: 1.3rem; margin-top: .25rem; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .section--dark .check-list li { color: var(--on-dark); } .section--dark .check-list li::before { background: #fff; } .theme-green .check-list li::before { background: var(--green); } /* ---------- 14. Blog / Stories (dark) ---------- */ .story { display: grid; gap: 1.5rem; align-items: center; padding: 2rem 0; border-top: 1px solid var(--line-dark); } .story:first-of-type { border-top: 0; } .story-figure { overflow: hidden; aspect-ratio: 16/10; background: var(--black-2); position: relative; } .story-figure img { width: 100%; height: 100%; object-fit: cover; } .story-cat { position: absolute; top: 1rem; left: 1rem; background: #fff; color: var(--black); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; padding: .35rem .8rem; } .story-meta { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--on-dark-mut); margin-bottom: .75rem; } .story h3 { font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; margin-bottom: 1.25rem; } .story h3 a:hover { opacity: .7; } @media (min-width: 780px) { .story { grid-template-columns: 1fr 1.3fr; gap: 3rem; } } /* ---------- 15. Sala de prensa (listados sobre crema) ---------- */ .post-list { display: grid; gap: 0; } .post-item { padding: 1.75rem 0; border-top: 1px solid var(--line); display: grid; gap: .5rem; transition: padding-left .3s var(--ease); } .post-item:last-child { border-bottom: 1px solid var(--line); } .post-item:hover { padding-left: .75rem; } .post-meta { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: var(--muted); display: flex; gap: .8rem; align-items: center; } .post-meta .medium { color: var(--ink); } .post-item h3 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); } .post-item h3 a:hover { opacity: .6; } .post-item p { color: var(--muted); font-size: .96rem; } .post-link { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--ink); display: inline-flex; gap: .4rem; margin-top: .3rem; } .post-link:hover { gap: .8rem; } /* Kit de prensa */ .presskit { display: grid; gap: 0; } .presskit-item { display: flex; gap: 1.25rem; align-items: center; padding: 1.4rem 0; border-top: 1px solid var(--line); } .presskit-item:last-child { border-bottom: 1px solid var(--line); } .presskit-item .icon { width: 40px; height: 40px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); flex: 0 0 auto; } .presskit-item strong { font-family: var(--font-head); text-transform: uppercase; font-weight: 500; letter-spacing: .03em; } .press-photos { display: grid; gap: 4px; } .press-photo { overflow: hidden; aspect-ratio: 3/4; background: var(--cream-2); } .press-photo img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 620px) { .press-photos { grid-template-columns: repeat(3, 1fr); } } /* ---------- 16. Nota / aviso ---------- */ .note { border-left: 3px solid var(--green); background: rgba(79,143,106,.08); padding: 1.1rem 1.35rem; font-size: .92rem; color: var(--muted); } .section--dark .note { background: rgba(255,255,255,.05); color: var(--on-dark-mut); } .note strong { color: var(--ink); } .section--dark .note strong { color: #fff; } /* ---------- 17. Formulario ---------- */ .form-wrap { display: grid; gap: 3rem; } @media (min-width: 820px) { .form-wrap { grid-template-columns: 1.5fr 1fr; gap: 4rem; } } .form { display: grid; gap: 1.5rem; } .field { display: grid; gap: .5rem; } .field label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--ink); } .field .req { color: var(--green); } .field input, .field select, .field textarea { font: inherit; padding: .85rem 0; border: 0; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); border-radius: 0; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); } .field textarea { min-height: 130px; resize: vertical; } .form-hint { font-size: .82rem; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--font-body); } .form-status { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; } .form-status.ok { color: var(--green-d); } .form-status.err { color: #b23b2e; } .contact-aside { display: grid; gap: 2rem; align-content: start; } .contact-line { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .contact-line .icon { color: var(--ink); } .contact-line .k { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--muted); } .contact-line .v { font-size: 1.05rem; } /* ---------- 18. Franja de redes ---------- */ .social-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); } .social-card { background: var(--black); padding: 1.75rem 1rem; display: grid; gap: .35rem; justify-items: center; color: var(--on-dark); transition: background .25s; } .social-card:hover { background: var(--black-2); } .social-card svg { width: 26px; height: 26px; color: #fff; margin-bottom: .3rem; } .social-card .count { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: 1.2rem; color: #fff; } .social-card .l { font-size: .78rem; color: var(--on-dark-mut); } @media (min-width: 560px) { .social-cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .social-cards { grid-template-columns: repeat(6, 1fr); } } /* ---------- 19. CTA banda ---------- */ .cta-band { text-align: center; } .cta-band h2 { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: 1.5rem; } /* ---------- 20. Footer ---------- */ .site-footer { background: var(--black); color: var(--on-dark); padding-block: 4rem 2rem; } .footer-top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); } .footer-brand .brand { color: #fff; font-size: 1.6rem; } .footer-brand p { color: var(--on-dark-mut); margin-top: 1rem; max-width: 32ch; } .footer-col h4 { color: #fff; font-size: .85rem; letter-spacing: .15em; margin-bottom: 1.25rem; } .footer-col ul { display: grid; gap: .65rem; } .footer-col a, .footer-col li { color: var(--on-dark-mut); font-size: .92rem; } .footer-col a:hover { color: #fff; } .footer-social { display: grid; gap: .8rem; } .footer-social a { display: flex; align-items: center; gap: .75rem; color: var(--on-dark-mut); font-size: .9rem; } .footer-social a:hover { color: #fff; } .footer-social svg { width: 20px; height: 20px; color: #fff; } .footer-social .fc { margin-left: auto; font-size: .82rem; color: #cbc7be; font-family: var(--font-head); letter-spacing: .05em; } .footer-bottom { padding-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; color: var(--on-dark-mut); } @media (min-width: 560px) and (max-width: 819px) { .footer-top { grid-template-columns: 1fr 1fr; } } @media (min-width: 820px) { .footer-top { grid-template-columns: 2fr 1fr 1fr 1.4fr; } } /* ---------- 21. Activismo (tema verde) ---------- */ .theme-green .brand sup { color: var(--green); } .theme-green .btn { background: var(--green); border-color: var(--green); } .theme-green .btn:hover { background: transparent; color: var(--green); } .theme-green .section--dark .btn { background: var(--green); border-color: var(--green); color:#fff; } .theme-green .section--dark .btn:hover { background: transparent; color: var(--green); border-color: var(--green); } .theme-green .card li::before { background: var(--green); } .theme-green .card:hover { border-color: var(--green); } /* ---------- Artículo individual ---------- */ .article-body p { font-size: 1.1rem; line-height: 1.85; color: var(--ink); margin-bottom: 1.4rem; max-width: none; } .article-body p:last-child { margin-bottom: 0; } /* ---------- 22. Utilidades ---------- */ .text-center { text-align: center; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .stack { display: grid; gap: 1.25rem; } .flex-btns { display: flex; flex-wrap: wrap; gap: 1rem; } /* ---------- 23. Reveal on scroll ---------- */ /* Solo se oculta/anima cuando el JS está activo (evita contenido invisible sin JS). */ .reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); } .js-ready .reveal { opacity: 0; transform: translateY(26px); } .js-ready .reveal.in { opacity: 1; transform: none; } /* ---------- 24. Menú móvil ---------- */ @media (max-width: 1199px) { /* backdrop-filter en un ancestro rompe/recorta position:fixed en iOS Safari: lo desactivamos en móvil (donde el menú es fijo) y usamos fondo sólido. */ .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cream); } .nav-toggle { display: inline-flex; } .nav { position: fixed; inset: 74px 0 auto 0; z-index: 200; background: var(--cream); flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.5rem 2rem; border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .35s var(--ease); box-shadow: 0 30px 60px rgba(0,0,0,.15); } .nav.open { transform: translateY(0); } .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav-list a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; } .nav-list a[aria-current="page"]::after { display: none; } .header-actions { flex-direction: column; align-items: stretch; gap: 1.25rem; margin-top: 1.25rem; } .social-row { justify-content: center; gap: 1.5rem; } .social-row svg { width: 24px; height: 24px; } .header-cta { justify-content: center; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .js-ready .reveal, .reveal { opacity: 1; transform: none; } }