/* Estilo: Portal editorial francés — tinta azul profundo, coquelicot y papel cálido; mosaicos claros con etiquetas explícitas. */
:root { --ink:#142f47; --paper:#f6f0e5; --line:#d9cab8; --red:#d94b3d; --blue:#45718a; --warm:#ebe0d0; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.shell { width:min(1180px,100%); margin:0 auto; padding:clamp(24px,5vw,70px) clamp(20px,4vw,58px) 30px; }
.masthead { min-height:300px; padding:clamp(30px,6vw,74px) 0 40px; border-bottom:4px solid var(--red); background:repeating-linear-gradient(0deg,transparent 0,transparent 34px,rgba(20,47,71,.045) 35px); }
.eyebrow { margin:0 0 13px; color:var(--red); font-size:.69rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }
h1,h2,strong { font-family:Georgia,"Times New Roman",serif; }
h1 { max-width:800px; margin:0; font-size:clamp(2.45rem,7vw,5.6rem); line-height:.95; letter-spacing:-.055em; }
h1 em { color:var(--red); font-weight:400; }
.intro { max-width:505px; margin:28px 0 0; color:#526b7d; font-size:1.03rem; line-height:1.65; }
.projects { padding:52px 0 46px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }.section-heading .eyebrow { margin:0; }.section-heading h2 { margin:0; font-size:clamp(1.8rem,4vw,2.7rem); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }.tile { display:flex; min-height:370px; flex-direction:column; border:1px solid var(--line); padding:25px; text-decoration:none; transition:transform .18s ease-out,box-shadow .18s ease-out; }.tile:hover { transform:translateY(-5px); box-shadow:0 15px 35px rgba(20,47,71,.14); }.oral { background:#fbf7ef; }.lab { background:var(--ink); color:#fff9ef; }.phonetics { background:#dbe8e6; }.vocabulary { background:#e9dfc8; }.tile-index { color:var(--red); font:700 .78rem/1 Arial,sans-serif; letter-spacing:.12em; }.tile-type { margin-top:34px; color:#5c7180; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.lab .tile-type { color:#bdcbd2; }.phonetics .tile-type { color:#35616a; }.vocabulary .tile-type { color:#765d35; }.tile strong { max-width:400px; margin-top:10px; font-size:clamp(2rem,4vw,3.2rem); line-height:.98; letter-spacing:-.04em; }.tile-copy { max-width:360px; margin-top:22px; color:#536b7b; font-size:.94rem; line-height:1.55; }.lab .tile-copy { color:#d7e2e7; }.phonetics .tile-copy { color:#3e6570; }.vocabulary .tile-copy { color:#705e42; }.tile-link { margin-top:auto; padding-top:30px; color:var(--red); font-size:.83rem; font-weight:800; }.tile-link b { margin-left:8px; font-size:1.15rem; } footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:18px; color:#667987; font-size:.76rem; }
@media (max-width:650px) { .masthead { min-height:0; }.tiles { grid-template-columns:1fr; }.tile { min-height:315px; }.section-heading { align-items:start; flex-direction:column; }.tile-type { margin-top:22px; } footer { flex-direction:column; gap:6px; } }