:root{ --magenta:#FF1F8F; --azul:#1E1EFF; --amarillo:#FFE100; --naranja:#FF6A00; --tinta:#141210; --papel:#F3EFE3; --papel-osc:#E7E0CC; } *{box-sizing:border-box; margin:0; padding:0;} body{ background:var(--papel); color:var(--tinta); font-family:'Archivo Narrow', sans-serif; background-image: radial-gradient(circle, rgba(20,18,16,0.06) 1px, transparent 1px); background-size: 6px 6px; overflow-x:hidden; } .wrap{max-width:1180px; margin:0 auto; padding:0 18px;} /* Salto de palabra seguro SOLO para textos de contenido (evita que un título/URL muy largo desborde su caja), sin afectar el cálculo de ancho mínimo de las columnas del grid como pasaba con la regla global anterior en . */ h1, h2, h3, h4, p{ overflow-wrap:break-word; } /* ===== MASTHEAD ===== */ header.masthead{ background:var(--tinta); padding:14px 0 0; position:relative; border-bottom:6px solid var(--tinta); } .stripe-bar{ display:flex; height:10px; width:100%; } .stripe-bar span{flex:1;} .stripe-bar span:nth-child(1){background:var(--magenta);} .stripe-bar span:nth-child(2){background:var(--amarillo);} .stripe-bar span:nth-child(3){background:var(--azul);} .stripe-bar span:nth-child(4){background:var(--naranja);} .masthead-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0 22px; flex-wrap:wrap; gap:16px; } .logo{ flex-shrink:0; } .logo img{ display:block; height:clamp(55px, 8vw, 95px); width:auto; max-width:400px; filter:drop-shadow(4px 4px 0 rgba(0,0,0,.35)); } /* ---- espacio publicitario junto al logo (banner tipo leaderboard) ---- */ .ad-slot{ flex:1; min-width:260px; max-width:600px; height:90px; border:3px dashed var(--papel); background:repeating-linear-gradient(45deg, rgba(243,239,227,.05), rgba(243,239,227,.05) 10px, rgba(243,239,227,.12) 10px, rgba(243,239,227,.12) 20px); display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Anton', sans-serif; font-size:13px; letter-spacing:.5px; color:var(--papel); padding:8px; } .ad-slot small{display:block; font-family:'Archivo Narrow', sans-serif; font-size:11px; opacity:.6; margin-top:3px; text-transform:none; letter-spacing:0;} /* Oculta la barra/banner que agrega Google Translate por default */ .goog-te-banner-frame{display:none !important;} body{top:0px !important;} #google_translate_element{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden;} nav.mainnav{ background:var(--amarillo); border-top:3px solid var(--tinta); border-bottom:3px solid var(--tinta); position:relative; z-index:100; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:nowrap; } nav.mainnav ul{ list-style:none; display:flex; gap:0; flex-wrap:nowrap; overflow:visible; } nav.mainnav a{ display:flex; align-items:center; gap:6px; padding:11px 18px; font-family:'Anton', sans-serif; font-size:15px; letter-spacing:.5px; color:var(--tinta); text-decoration:none; border-right:2px solid var(--tinta); white-space:nowrap; } nav.mainnav a:hover{background:var(--magenta); color:var(--papel);} .nav-badge{ background:var(--tinta); color:var(--amarillo); font-size:10px; padding:2px 6px; transform:rotate(-4deg); } .nav-search{ display:flex; align-items:center; border:2px solid var(--tinta); background:var(--papel); margin:9px 0 9px auto; flex-shrink:0; } .nav-search input{ border:none; background:transparent; padding:7px 10px; font-family:'Archivo Narrow', sans-serif; font-size:14px; width:150px; outline:none; } .nav-search button{ border:none; border-left:2px solid var(--tinta); background:var(--tinta); color:var(--papel); padding:8px 12px; cursor:pointer; font-size:14px; } /* ---- submenús desplegables del menú (Multimedia / Diversión / Archivo) ---- */ .has-dropdown{position:relative;} .nav-drop-btn{ display:flex; align-items:center; gap:6px; padding:11px 18px; font-family:'Anton', sans-serif; font-size:15px; letter-spacing:.5px; color:var(--tinta); background:none; border:none; border-right:2px solid var(--tinta); cursor:pointer; white-space:nowrap; } .nav-drop-btn:hover{background:var(--magenta); color:var(--papel);} .nav-drop-btn .caret{font-size:9px; transition:transform .15s;} .has-dropdown.open .nav-drop-btn .caret{transform:rotate(180deg);} .nav-dropdown{ list-style:none; position:absolute; top:100%; left:0; background:var(--tinta); border:2px solid var(--tinta); min-width:180px; flex-direction:column; z-index:80; box-shadow:5px 5px 0 rgba(0,0,0,.25); } /* display:none con más especificidad que "nav.mainnav ul", que si no le ganaba y dejaba los desplegables siempre visibles sin importar si estaban abiertos o cerrados */ nav.mainnav .nav-dropdown{display:none;} .has-dropdown.open .nav-dropdown{display:flex;} nav.mainnav .nav-dropdown a{ color:var(--papel); padding:10px 16px; font-size:13px; border-right:none !important; border-bottom:1px solid rgba(243,239,227,.15); white-space:nowrap; } nav.mainnav .nav-dropdown a:hover{background:var(--magenta); color:var(--papel);} .nav-dropdown li:last-child a{border-bottom:none;} /* ---- botón hamburguesa (solo mobile) ---- */ .nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:38px; background:var(--tinta); border:2px solid var(--tinta); cursor:pointer; padding:0; flex-shrink:0; order:1; } .nav-toggle span{ display:block; width:22px; height:3px; background:var(--amarillo); } /* ---- ticker de últimas noticias ---- */ .news-ticker{ background:var(--tinta); border-bottom:3px solid var(--magenta); display:flex; align-items:stretch; overflow:hidden; } .news-ticker .nt-label{ background:var(--magenta); color:var(--papel); font-family:'Anton', sans-serif; font-size:12px; letter-spacing:.5px; padding:9px 14px; display:flex; align-items:center; flex-shrink:0; white-space:nowrap; } .news-ticker .nt-track-wrap{ flex:1; overflow:hidden; display:flex; align-items:center; } .news-ticker .nt-track{ display:flex; animation: ticker-scroll 24s linear infinite; } .news-ticker .nt-group{ display:flex; gap:44px; padding-right:44px; flex-shrink:0; white-space:nowrap; } .news-ticker .nt-group span{ color:var(--papel); font-family:'Archivo Narrow', sans-serif; font-size:13px; } .news-ticker .nt-group span a{ color:inherit; text-decoration:none; } .news-ticker .nt-group span a:hover{ text-decoration:underline; } .news-ticker .nt-group span::before{content:"● "; color:var(--amarillo);} @keyframes ticker-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } .hero{ display:grid; grid-template-columns: minmax(280px, 1.35fr) minmax(240px, 1fr) minmax(160px, .62fr); gap:22px; padding:34px 0 10px; align-items:stretch; } .hero-photo{ position:relative; background:linear-gradient(135deg, var(--azul), var(--magenta)); min-height:320px; border:4px solid var(--tinta); transform:rotate(-1.2deg); display:flex; align-items:flex-end; box-shadow: 10px 10px 0 rgba(20,18,16,0.15); } .hero-photo .caption{ background:var(--tinta); color:var(--papel); font-size:12px; padding:6px 10px; width:100%; font-style:italic; } /* ---- columna de videos de YouTube junto a la foto ---- */ .hero-videos{ display:flex; flex-direction:column; gap:16px; } .hero-videos .module-title{ font-family:'Anton', sans-serif; font-size:14px; background:var(--tinta); color:var(--amarillo); padding:5px 10px; width:fit-content; transform:rotate(-2deg); margin-bottom:2px; } .video-box{ position:relative; aspect-ratio:1/1; background:var(--tinta); border:4px solid var(--tinta); box-shadow: 7px 7px 0 rgba(20,18,16,0.15); overflow:hidden; } .video-box:nth-child(1){transform:rotate(2deg);} .video-box:nth-child(2){transform:rotate(-2deg);} .video-box iframe{ width:100%; height:100%; border:0; display:block; } .video-box .video-tag{ position:absolute; top:8px; left:8px; background:var(--amarillo); color:var(--tinta); font-family:'Anton', sans-serif; font-size:10px; padding:3px 7px; z-index:2; display:flex; align-items:center; gap:4px; } .video-box .video-tag svg{width:11px; height:11px;} .video-box .video-placeholder{ width:100%; height:100%; background:linear-gradient(135deg, var(--naranja), var(--magenta)); display:flex; align-items:center; justify-content:center; } .video-box .play-icon{ width:40px; height:40px; background:var(--papel); border:3px solid var(--tinta); border-radius:50%; display:flex; align-items:center; justify-content:center; } .video-box .play-icon::after{ content:""; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--tinta); margin-left:3px; } /* ---- cuadraditos de "más artículos" (reemplazan a los videoclips) ---- */ .video-box--articulo{background:var(--tinta);} .video-box-link{ display:block; position:relative; width:100%; height:100%; text-decoration:none; color:var(--papel); } .video-box-thumb{ width:100%; height:100%; background:linear-gradient(135deg, #3d3833, #57514a); overflow:hidden; } .video-box-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; } .video-box--articulo:hover .video-box-thumb img{transform:scale(1.06);} .video-box-title{ position:absolute; left:0; right:0; bottom:0; margin:0; background:rgba(20,18,16,.88); color:var(--papel); font-family:'Anton', sans-serif; font-size:12px; line-height:1.25; letter-spacing:.2px; padding:8px 10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:background .15s; } .video-box--articulo:hover .video-box-title{background:var(--magenta);} /* ---- canal de TV retro (2do cuadradito) ---- */ .retro-tv{ aspect-ratio:auto; display:flex; flex-direction:column; background:#2b2b2b; border-color:#111; margin-top:14px; } .tv-screen{ aspect-ratio:4/3; background:#000; position:relative; overflow:hidden; } .tv-screen iframe{width:100%; height:100%; border:0; display:block;} .tv-standby{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background-color:#000; background-size:cover; background-position:center; cursor:pointer; } .tv-standby::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0px, rgba(0,0,0,.55) 2px, rgba(0,0,0,.3) 2px, rgba(0,0,0,.3) 4px); } .tv-play-btn{ position:relative; z-index:1; width:46px; height:46px; border-radius:50%; background:rgba(243,239,227,.92); border:2px solid var(--tinta); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(0,0,0,.35); transition:transform .15s; } .tv-standby:hover .tv-play-btn{transform:scale(1.08);} .tv-play-btn svg{width:18px; height:18px; fill:var(--tinta); margin-left:2px;} .tv-standby-text{ position:relative; z-index:1; font-family:'Anton', sans-serif; font-size:11px; color:var(--papel); letter-spacing:.5px; text-align:center; padding:0 12px; text-shadow:0 1px 3px rgba(0,0,0,.8); } .tv-controls{ display:flex; align-items:center; justify-content:space-between; gap:5px; padding:5px 7px; background:#1a1a1a; } .tv-btn{ background:var(--amarillo); border:2px solid var(--tinta); width:22px; height:20px; font-size:10px; cursor:pointer; flex-shrink:0; } .tv-btn:active{background:var(--magenta);} .tv-channel-num{ font-family:'Anton', sans-serif; font-size:9px; color:var(--papel); letter-spacing:.3px; white-space:nowrap; } .sticker{ position:absolute; top:-14px; right:-14px; background:var(--amarillo); border-radius:50%; width:96px; height:96px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Anton', sans-serif; font-size:18px; transform:rotate(10deg); border:3px solid var(--tinta); box-shadow: 4px 4px 0 rgba(20,18,16,0.25); } .hero-text{display:flex; flex-direction:column; justify-content:flex-start; gap:14px;} .eyebrow-tag{ display:inline-block; background:var(--tinta); color:var(--amarillo); font-family:'Anton', sans-serif; font-size:13px; padding:4px 10px; width:fit-content; transform:skewX(-8deg); } .hero-title{ font-family:'Anton', sans-serif; font-size:clamp(30px, 4vw, 46px); line-height:.95; } .hero-title em{ font-style:normal; color:var(--magenta); -webkit-text-stroke: 1.5px var(--tinta); } .hero-dek{font-size:17px; line-height:1.4; max-width:46ch;} .articulo-hero-text .hero-dek{max-width:none;} .hero-dek--ampliado{font-size:19px; line-height:1.55; max-width:50ch;} .hero-cat-tag{ display:inline-block; font-family:'Anton', sans-serif; font-size:12px; background:var(--magenta); color:var(--papel); padding:4px 10px; width:fit-content; } .read-btn{ align-self:flex-start; font-family:'Anton', sans-serif; background:var(--azul); color:var(--papel); padding:10px 20px; text-decoration:none; border:3px solid var(--tinta); box-shadow:5px 5px 0 var(--tinta); transition:transform .15s; } .read-btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--tinta);} .read-btn--grande{font-size:16px; padding:14px 28px; margin-top:4px;} /* ---- meta info de la nota (autor, tags, compartir) ---- */ .hero-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:#5a544a; padding-top:8px; border-top:1px dashed rgba(20,18,16,.25); margin-top:6px; } .hero-meta strong{color:var(--tinta);} .hero-tags{ display:flex; gap:8px; flex-wrap:wrap; } .hero-tags a{ font-family:'Anton', sans-serif; font-size:11px; background:var(--tinta); color:var(--papel); padding:4px 9px; text-decoration:none; transform:rotate(-1deg); } .hero-tags a:hover{background:var(--magenta);} .hero-share{ display:flex; align-items:center; gap:10px; } .hero-share span{ font-family:'Anton', sans-serif; font-size:12px; color:var(--tinta); } .hero-share .mini-icons{display:flex; gap:8px;} .hero-share .mini-icons a{ width:30px; height:30px; background:var(--papel); border:2px solid var(--tinta); display:flex; align-items:center; justify-content:center; } .hero-share .mini-icons a svg{width:14px; height:14px; fill:var(--tinta);} .hero-share .mini-icons a:hover{background:var(--amarillo);} /* ---- reproductor estilo Winamp / MP3 player 90s ---- */ .winamp{ border:2px solid #1a1a1a; box-shadow:4px 4px 0 rgba(20,18,16,.2); max-width:360px; width:100%; margin:6px auto 0; align-self:center; font-family:'Archivo Narrow', sans-serif; } .wa-titlebar{ background:linear-gradient(90deg, var(--magenta), var(--azul)); color:#fff; font-family:'Anton', sans-serif; font-size:10px; letter-spacing:.5px; padding:5px 8px; display:flex; justify-content:space-between; align-items:center; } .wa-winbtns{display:flex; gap:3px;} .wa-winbtns span{width:8px; height:8px; background:#ddd; border:1px solid #000;} /* ===== Reproductor Spotify (reemplaza al Winamp decorativo) ===== */ .spotify-frame{ display:block; } .spotify-frame-placeholder{ background:linear-gradient(180deg, #dcdcdc, #a8a8a8); padding:20px 14px; font-family:'Archivo Narrow', sans-serif; font-size:12px; color:#333; text-align:center; } .spotify-frame-placeholder code{ background:rgba(0,0,0,.08); padding:1px 5px; border-radius:3px; } .wa-body{ background:linear-gradient(180deg, #dcdcdc, #a8a8a8); padding:14px 8px; } .wa-lcd{ background:#0d1f0d; border:2px inset #666; padding:6px 8px; margin-bottom:6px; } .wa-lcd-track{ color:#5eff5e; font-family:'Courier New', monospace; font-size:11px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 0 4px rgba(94,255,94,.6); } .wa-lcd-time{ color:#5eff5e; font-family:'Courier New', monospace; font-size:10px; margin-top:3px; opacity:.8; } .wa-seek{ height:6px; background:#666; border:1px inset #444; margin-bottom:8px; } .wa-seek-fill{height:100%; width:22%; background:linear-gradient(90deg, var(--amarillo), var(--naranja));} .wa-controls{ display:flex; align-items:center; gap:4px; margin-bottom:8px; } .wa-btn{ width:28px; height:24px; background:#c8c8c8; border:2px outset #eee; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .wa-btn:active{border-style:inset;} .wa-play{background:var(--magenta); color:#fff; border-color:#ff8fc9;} .wa-volume{ display:flex; align-items:center; gap:4px; margin-left:auto; } .wa-volume span{font-size:8px; font-family:'Anton', sans-serif; color:#333;} .wa-vol-bar{width:44px; height:6px; background:#666; border:1px inset #444;} .wa-vol-fill{height:100%; width:70%; background:var(--azul);} .wa-playlist{ list-style:none; background:#111; max-height:220px; overflow-y:auto; border:2px inset #666; } .wa-playlist li{ display:flex; gap:6px; padding:4px 8px; font-family:'Courier New', monospace; font-size:11px; color:#5eff5e; border-bottom:1px solid #222; cursor:pointer; } .wa-playlist li:hover, .wa-playlist li.active{background:#1a2f1a;} .wa-pl-num{opacity:.6; width:16px; flex-shrink:0;} .wa-pl-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .wa-pl-dur{margin-left:auto; opacity:.7; flex-shrink:0;} /* ---- reproductor de Spotify embebido ---- */ .spotify-embed{ max-width:360px; width:100%; margin:6px auto 0; align-self:center; } .spotify-label{ font-family:'Anton', sans-serif; font-size:12px; letter-spacing:.5px; background:var(--tinta); color:var(--papel); padding:6px 10px; display:inline-block; margin-bottom:6px; transform:rotate(-1deg); } /* ===== SECTION TITLE ===== */ .section-title{ display:flex; align-items:center; gap:12px; margin:44px 0 20px; } .section-title.tight{margin-top:20px;} .section-title h2{ font-family:'Anton', sans-serif; font-size:26px; background:var(--tinta); color:var(--papel); padding:6px 16px; transform:rotate(-1deg); } .section-title .rule{flex:1; height:4px; background:repeating-linear-gradient(90deg, var(--tinta) 0 10px, transparent 10px 16px);} /* ===== GRID DE NOTAS ===== */ .content-layout{ display:grid; grid-template-columns: 2.2fr 1fr; gap:30px; align-items:start; } .card-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; } .card-grid-full{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom:20px; } .content-ad-slot{ margin-top:24px; min-height:200px; aspect-ratio: 1916 / 821; border:3px dashed var(--magenta); background:repeating-linear-gradient(45deg, rgba(255,31,143,.05), rgba(255,31,143,.05) 10px, rgba(255,31,143,.1) 10px, rgba(255,31,143,.1) 20px); display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Anton', sans-serif; font-size:14px; letter-spacing:.5px; color:var(--tinta); padding:14px; } .content-ad-slot small{display:block; font-family:'Archivo Narrow', sans-serif; font-size:11px; opacity:.6; margin-top:4px; text-transform:none; letter-spacing:0;} .card{ background:var(--papel); border:3px solid var(--tinta); padding:0 0 14px; position:relative; overflow:hidden; } .card:nth-child(odd){transform:rotate(-.8deg);} .card:nth-child(even){transform:rotate(.8deg);} .card .thumb{ height:190px; background:linear-gradient(120deg, #3d3833, #57514a); border-bottom:3px solid var(--tinta); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; position:relative; } .card .thumb::after{ content:"IMAGEN PRÓXIMAMENTE"; font-family:'Anton', sans-serif; font-size:11px; letter-spacing:.5px; color:rgba(243,239,227,.55); padding:0 10px; } .card .cat{ display:inline-block; font-family:'Anton', sans-serif; font-size:11px; background:var(--magenta); color:var(--papel); padding:3px 8px; margin:12px 14px 6px; } .card h3{ font-family:'Anton', sans-serif; font-size:19px; padding:0 14px; line-height:1.15; min-height:44px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card p{ font-size:14px; padding:8px 14px 0; color:#3a352f; line-height:1.4; min-height:40px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ===== SIDEBAR ===== */ .sidebar{ background:var(--tinta); color:var(--papel); padding:20px; border:3px solid var(--tinta); } .sidebar h3{ font-family:'Anton', sans-serif; color:var(--amarillo); font-size:24px; margin-bottom:14px; border-bottom:3px dashed var(--magenta); padding-bottom:8px; } .top10-period{ font-size:16px; color:var(--papel); font-weight:bold; } .chart-item{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid rgba(243,239,227,.2); font-size:14px; } .chart-item .num{ font-family:'Anton', sans-serif; font-size:22px; color:var(--magenta); width:30px; } .sidebar-placeholder{ margin-top:22px; height:250px; border:3px dashed var(--magenta); background:repeating-linear-gradient(45deg, rgba(255,31,143,.06), rgba(255,31,143,.06) 10px, rgba(255,31,143,.12) 10px, rgba(255,31,143,.12) 20px); display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Anton', sans-serif; font-size:13px; letter-spacing:.5px; color:var(--papel); padding:10px; } .sidebar-placeholder small{display:block; font-family:'Archivo Narrow', sans-serif; font-size:11px; opacity:.6; margin-top:4px; text-transform:none; letter-spacing:0;} .newsletter{ margin-top:22px; background:var(--amarillo); color:var(--tinta); padding:16px; transform:rotate(-1deg); } .newsletter h4{font-family:'Anton', sans-serif; font-size:16px; margin-bottom:8px;} .newsletter input{ width:100%; padding:8px; border:2px solid var(--tinta); margin-bottom:8px; font-family:'Archivo Narrow', sans-serif; } .newsletter button{ width:100%; padding:9px; background:var(--tinta); color:var(--papel); font-family:'Anton', sans-serif; border:none; cursor:pointer; } /* ===== FOOTER ===== */ footer{ margin-top:60px; background:var(--tinta); color:var(--papel); padding-bottom:90px; /* deja lugar al banner de instalar app */ position:relative; } footer .stripe-bar{position:absolute; top:0; left:0;} footer .footer-inner{ padding:34px 0 24px; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:30px; } footer .f-brand .f-logo{ font-family:'Anton', sans-serif; font-size:22px; color:var(--amarillo); letter-spacing:.5px; margin-bottom:8px; } footer .f-brand p{ font-size:13px; color:rgba(243,239,227,.65); line-height:1.5; max-width:32ch; } footer .f-col h5{ font-family:'Anton', sans-serif; font-size:13px; color:var(--papel); letter-spacing:.5px; margin-bottom:12px; border-bottom:2px dashed var(--magenta); padding-bottom:6px; width:fit-content; } footer .f-col ul{list-style:none;} footer .f-col li{margin-bottom:8px;} footer .f-col a{ color:rgba(243,239,227,.7); text-decoration:none; font-size:13px; } footer .f-col a:hover{color:var(--amarillo);} footer .f-col .f-mail{ color:rgba(243,239,227,.7); font-size:13px; } .support-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; background:var(--magenta); color:var(--tinta); font-family:'Anton', sans-serif; font-size:13px; padding:10px 16px; text-decoration:none; border:2px solid var(--papel); transform:rotate(-1.5deg); } .support-btn:hover{background:var(--amarillo);} footer .f-social{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; } footer .f-social a{ width:36px; height:36px; background:rgba(243,239,227,.08); border:2px solid rgba(243,239,227,.35); display:flex; align-items:center; justify-content:center; } footer .f-social a svg{width:16px; height:16px; fill:var(--papel);} footer .f-social a:hover{background:var(--magenta); border-color:var(--magenta);} footer .f-bottom{ border-top:1px solid rgba(243,239,227,.15); padding:16px 0; font-size:11px; color:rgba(243,239,227,.5); text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; } footer .f-bottom svg{width:18px; height:12px; border:1px solid rgba(243,239,227,.3); flex-shrink:0;} footer .fake-attr{display:none;} /* el texto de atribución de Blogger se oculta acá */ @media (max-width:820px){ footer .footer-inner{grid-template-columns:1fr; gap:26px; text-align:center;} footer .f-brand p{margin:0 auto;} footer .f-col h5{margin-left:auto; margin-right:auto;} footer .f-social{justify-content:center;} } /* ===== Banderitas del selector de idioma (SVG, se ven igual en todos los navegadores) ===== */ .flag-icon{ width:18px; height:12px; vertical-align:middle; margin-right:4px; border-radius:2px; } /* ===== BANNER "INSTALAR APP" (ahora dispara instalación real vía beforeinstallprompt) ===== */ .install-banner{ position:fixed; left:0; right:0; bottom:0; z-index:999; background:var(--tinta); border-top:4px solid var(--amarillo); box-shadow:0 -4px 14px rgba(0,0,0,.25); display:flex; align-items:center; gap:14px; padding:10px 16px; transform:translateY(0); transition:transform .25s ease; } .install-banner.hidden{transform:translateY(110%);} .install-banner .ib-icon{ width:40px; height:40px; flex-shrink:0; background:linear-gradient(135deg, var(--azul), var(--magenta)); border:2px solid var(--papel); display:flex; align-items:center; justify-content:center; font-family:'Anton', sans-serif; color:var(--papel); font-size:18px; } .install-banner .ib-text{flex:1; min-width:0;} .install-banner .ib-text strong{ display:block; font-family:'Anton', sans-serif; color:var(--papel); font-size:14px; letter-spacing:.3px; } .install-banner .ib-text span{ display:block; color:rgba(243,239,227,.7); font-size:12px; } .install-banner .ib-install{ font-family:'Anton', sans-serif; background:var(--magenta); color:var(--tinta); border:none; padding:9px 16px; font-size:13px; cursor:pointer; flex-shrink:0; border:2px solid var(--papel); } .install-banner .ib-close{ background:none; border:none; color:rgba(243,239,227,.6); font-size:20px; line-height:1; cursor:pointer; flex-shrink:0; padding:4px 6px; } /* ===== BOTÓN "VOLVER ARRIBA" ===== */ .back-to-top{ position:fixed; right:16px; bottom:78px; z-index:998; width:42px; height:42px; border-radius:50%; background:var(--amarillo); border:2px solid var(--tinta); display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; color:var(--tinta); cursor:pointer; box-shadow:2px 2px 0 rgba(20,18,16,0.25); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease, color .2s ease; } .back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); } .back-to-top:hover{background:var(--magenta); color:var(--papel); border-color:var(--papel);} @media (max-width:680px){ .back-to-top{ width:34px; height:34px; font-size:14px; right:10px; bottom:70px; } } /* ---- modal con instrucciones ---- */ .install-modal-overlay{ position:fixed; inset:0; background:rgba(20,18,16,.7); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; } .install-modal-overlay.open{display:flex;} .install-modal{ background:var(--papel); border:4px solid var(--tinta); max-width:360px; width:100%; box-shadow:8px 8px 0 rgba(20,18,16,.3); transform:rotate(-.5deg); } .install-modal .im-head{ background:var(--amarillo); border-bottom:3px solid var(--tinta); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; } .install-modal .im-head h4{font-family:'Anton', sans-serif; font-size:16px;} .install-modal .im-head button{background:none; border:none; font-size:20px; cursor:pointer;} .install-modal .im-body{padding:16px 18px 20px;} .install-modal .im-body ol{margin-left:18px; font-size:14px; line-height:1.6;} .install-modal .im-body p.tag{ font-family:'Anton', sans-serif; font-size:12px; background:var(--tinta); color:var(--amarillo); display:inline-block; padding:3px 8px; margin-bottom:10px; transform:rotate(-2deg); } @media (max-width:480px){ .install-banner .ib-text span{display:none;} } /* ===== FRANJA DE REDES SOCIALES ===== */ .social-strip{ background:var(--magenta); border-top:4px solid var(--tinta); border-bottom:4px solid var(--tinta); margin-top:40px; padding:14px 0; } .social-strip .wrap{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; } .social-strip .label{ font-family:'Anton', sans-serif; color:var(--tinta); font-size:15px; letter-spacing:.5px; transform:rotate(-2deg); } .social-icons{ display:flex; gap:12px; flex-wrap:wrap; } .social-icons a{ width:42px; height:42px; background:var(--papel); border:3px solid var(--tinta); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:transform .15s; } .social-icons a svg{width:20px; height:20px; fill:var(--tinta);} .social-icons a:nth-child(odd){transform:rotate(-4deg);} .social-icons a:nth-child(even){transform:rotate(4deg);} .social-icons a:hover{background:var(--amarillo); transform:scale(1.08) rotate(0deg);} @media (max-width:820px){ .hero{grid-template-columns:1fr;} .hero-photo{min-height:0; aspect-ratio:16/10;} .hero-videos{flex-direction:row;} .video-box{flex:1;} .content-layout{grid-template-columns:1fr;} .card-grid{grid-template-columns:1fr;} .card-grid-full{grid-template-columns: repeat(2, 1fr);} .ad-slot{width:100%; max-width:none;} } /* Menú hamburguesa: SOLO para móvil real. En PC/tablet el menú simplemente pasa a dos líneas si no entra, sin ocultarse. */ @media (max-width:680px){ nav.mainnav a{padding:12px 16px; font-size:14px;} .nav-inner{justify-content:space-between; flex-wrap:wrap;} .nav-toggle{display:flex;} nav.mainnav ul{ display:none; flex-direction:column; flex-basis:100%; order:3; border-top:2px solid var(--tinta); overflow-x:visible; width:100%; } nav.mainnav ul.open{display:flex;} nav.mainnav ul a{ width:100%; border-right:none; border-bottom:1px solid rgba(20,18,16,.2); justify-content:space-between; white-space:normal; } nav.mainnav ul li:last-child a{border-bottom:none;} .nav-search{width:auto; flex:1; order:2; margin:0; max-width:220px; min-width:0;} .nav-search input{flex:1; width:auto; min-width:0;} /* submenús dentro del desplegable mobile: se ven como bloque normal, sin flotar */ .nav-drop-btn{ width:100%; border-right:none; border-bottom:1px solid rgba(20,18,16,.2); justify-content:space-between; white-space:normal; } .nav-dropdown{ position:static; border:none; box-shadow:none; background:rgba(20,18,16,.06); width:100%; } .nav-dropdown a{ color:var(--tinta); padding-left:34px; border-bottom:1px solid rgba(20,18,16,.12); white-space:normal; } .has-dropdown.open .nav-dropdown{display:flex;} .nav-dropdown{display:none;} .has-dropdown{width:100%;} .has-dropdown.open .nav-drop-btn{background:var(--magenta); color:var(--papel);} } /* ===== Ajustes responsive adicionales (agregado por Claude) ===== */ @media (max-width:600px){ .wrap{padding:0 12px;} .masthead-inner{padding:14px 0 16px; justify-content:center; text-align:center;} .ad-slot{height:70px; font-size:11px;} .hero-videos{flex-direction:column;} .card-grid-full{grid-template-columns:1fr;} .hero-title{font-size:clamp(26px, 8vw, 36px);} .content-ad-slot, .sidebar-placeholder{min-height:120px; height:auto; padding:16px;} footer{padding-bottom:110px;} } @media (max-width:360px){ .wa-lcd-track{font-size:10px;} .nav-search{max-width:150px;} } /* Evita que las imágenes subidas rompan el layout de las tarjetas */ .card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .card .thumb:has(img)::after{content:none;} /* La foto grande destacada de portada (mantiene recorte prolijo, la caja tiene una altura fija que viene del grid de .hero en la home) */ .hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; } /* La foto grande DENTRO de una nota: acá la caja no tiene alto fijo, se achica o agranda según la forma real de la imagen — así nunca quedan franjas de color a los costados ni se recorta el contenido */ .hero-photo.hero-photo--article{ min-height:0; display:block; background:none; } .hero-photo.hero-photo--article img{ position:static; inset:auto; width:100%; height:auto; max-height:640px; object-fit:contain; display:block; margin:0 auto; } /* Slots de AdSense: mismo aspecto visual que los placeholders del mockup */ .adsense-slot{display:block; overflow:hidden;} /* ===== Texto de páginas simples (aviso legal, privacidad, cookies, contacto, etc.) ===== */ .page-content{max-width:820px; padding:34px 0 60px;} .page-content h1{ font-family:'Anton', sans-serif; font-size:clamp(28px, 5vw, 42px); line-height:1.05; margin-bottom:22px; } .page-content h2{ font-family:'Anton', sans-serif; font-size:22px; margin:30px 0 12px; } .page-content p{margin-bottom:16px; line-height:1.6; font-size:15px;} .page-content ul, .page-content ol{margin:0 0 16px 22px;} .page-content li{margin-bottom:6px; line-height:1.5;} .page-content a{color:var(--magenta); text-decoration:underline;} .page-content strong{font-weight:700;} .page-content em{font-style:italic;} /* ===== Cuerpo de las notas (contenido markdown de cada artículo) ===== */ .articulo-cuerpo h2{ font-family:'Anton', sans-serif; font-size:24px; margin:32px 0 14px; } .articulo-cuerpo h3{ font-family:'Anton', sans-serif; font-size:19px; margin:26px 0 10px; } .articulo-cuerpo p{margin-bottom:18px; line-height:1.65; font-size:16px;} .articulo-cuerpo ul, .articulo-cuerpo ol{margin:0 0 18px 24px;} .articulo-cuerpo li{margin-bottom:8px; line-height:1.55;} .articulo-cuerpo a{color:var(--magenta); text-decoration:underline;} .articulo-cuerpo strong{font-weight:700;} .articulo-cuerpo em{font-style:italic;} .articulo-cuerpo blockquote{ border-left:4px solid var(--magenta); padding:4px 0 4px 18px; margin:0 0 18px; font-style:italic; color:#3a352f; } .articulo-cuerpo img{max-width:100%; height:auto; display:block; margin:20px 0;} /* Transición suave cuando termina de cargar una foto (evita el destello) */ .foto-suave{opacity:0; transition:opacity .4s ease;} .foto-suave.cargada{opacity:1;}