/*
Theme Name: atmp.
Theme URI: https://atmpmagazine.com
Author: atmp. magazine
Description: Tema editorial para atmp. magazine. Construido sobre el design system de la revista: coral sobre rosa, papel cálido, esquinas a cero y filetes en lugar de sombras. Tipografía Playfair Display 900 para titulares, Archivo para texto y DM Mono para etiquetas.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atmp
Tags: blog, news, editorial, block-theme, full-site-editing
*/

/* ============================================================
   Tokens. Duplican theme.json para el CSS propio del tema.
   ============================================================ */
:root{
  --coral-600:#e13f3f;--coral-500:#fe5050;
  --pink-200:#ffceec;--pink-100:#ffe4f4;
  --ink-900:#140f0f;--ink-800:#241c1c;--ink-600:#5c4e4e;--ink-500:#8a7b7b;--ink-300:#dcd2d2;--ink-200:#ece5e5;--ink-100:#f5f1f1;
  --paper:#fffaf7;--white:#fff;
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;
  --tracking-label:.14em;--tracking-eyebrow:.22em;
  --page-pad:64px;--container-max:1360px;
  --border-rule:3px;
  --ease-editorial:cubic-bezier(.2,.7,.2,1);
  --dur-fast:160ms;--dur-slow:420ms;--dur-reveal:720ms;
  --shadow-focus:0 0 0 2px var(--paper),0 0 0 4px var(--coral-500);
}
@media (max-width:900px){ :root{ --page-pad:40px } }
@media (max-width:600px){ :root{ --page-pad:20px } }

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-wrap:pretty}
:where(h1,h2,h3,h4){text-wrap:balance}
::selection{background:var(--coral-500);color:var(--white)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Esquinas a cero en todo: el sistema no usa redondeos salvo tags */
.wp-block-image img,.wp-block-post-featured-image img,.wp-block-cover{border-radius:0}

/* ============================================================
   Cabecera: nameplate + banner de secciones
   ============================================================ */
.atmp-nameplate{background:var(--pink-200);padding:64px var(--page-pad) 40px}
.atmp-nameplate__inner{max-width:var(--container-max);margin:0 auto;display:grid;justify-items:start;gap:20px}
.atmp-nameplate h1{margin:0;line-height:0}
.atmp-logo{display:inline-block;background:var(--coral-500);
  -webkit-mask-image:url("./assets/logo-wordmark.png");mask-image:url("./assets/logo-wordmark.png");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.atmp-nameplate .atmp-logo{width:min(46vw,340px);aspect-ratio:701/259;height:auto}
.atmp-nameplate h2{font-family:var(--font-mono);font-weight:400;font-size:.8125rem;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--coral-500);
  line-height:1.32;margin:0}

.atmp-banner{position:sticky;top:0;z-index:40;background:var(--pink-200);border-top:1px solid rgba(254,80,80,.25)}
.admin-bar .atmp-banner{top:32px}
@media (max-width:782px){ .admin-bar .atmp-banner{top:46px} }
.atmp-banner__inner{max-width:var(--container-max);margin:0 auto;display:flex;align-items:center;gap:24px;padding:13px var(--page-pad)}
.atmp-dot{flex:0 0 auto;display:inline-block;width:11px;height:11px;border-radius:50%;
  background:var(--coral-500);border:none;transition:transform var(--dur-fast) var(--ease-editorial)}
.atmp-dot:hover{transform:scale(1.25)}
.atmp-banner__links{display:flex;align-items:center;gap:24px;flex:1 1 auto;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.atmp-banner__links::-webkit-scrollbar{display:none}
.atmp-banner__links a{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--coral-500);text-decoration:none;border-bottom:2px solid transparent;
  padding-bottom:2px;white-space:nowrap;transition:border-color var(--dur-fast) var(--ease-editorial)}
.atmp-banner__links a:hover,.atmp-banner__links a[aria-current="true"]{border-bottom-color:var(--coral-500)}
.atmp-banner__end{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.atmp-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;font-size:.6875rem;padding:8px 14px;
  background:var(--coral-500);color:var(--white);text-decoration:none;border:1px solid transparent;
  border-radius:2px;transition:background-color var(--dur-fast) var(--ease-editorial)}
.atmp-btn:hover{background:var(--coral-600);color:var(--white)}

/* ============================================================
   Franjas de sección
   ============================================================ */
.atmp-strip{padding:80px var(--page-pad);scroll-margin-top:72px}
.atmp-strip.is-pink{background:var(--pink-100)}
.atmp-strip.is-ink{background:var(--ink-900);color:var(--pink-200)}
.atmp-strip.is-ink :where(h1,h2,h3,h4){color:var(--pink-200)}
.atmp-strip > *{max-width:var(--container-max);margin-left:auto;margin-right:auto}

/* Cabecera de sección: filete de 3px que se dibuja al entrar */
.atmp-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;padding-top:20px;margin-bottom:40px;flex-wrap:wrap}
.atmp-head::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--border-rule);
  background:var(--ink-900);transform-origin:left center}
.is-ink .atmp-head::before{background:var(--pink-200)}
.js .atmp-head::before{transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-editorial)}
.js .atmp-head.is-in::before{transform:scaleX(1)}
.atmp-head h2{font-size:1.75rem;margin:0}
.atmp-head__title{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.atmp-eyebrow{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--ink-500)}
.is-ink .atmp-eyebrow{color:rgba(255,206,236,.5)}
.atmp-more{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--coral-500);text-decoration:none;white-space:nowrap}
.atmp-more:hover{color:var(--ink-900)}

/* ============================================================
   Query loops: portada y tarjetas
   ============================================================ */
.atmp-hero{padding:64px var(--page-pad) 80px}
.atmp-hero .wp-block-columns{max-width:var(--container-max);margin:0 auto;gap:64px}
.atmp-hero .wp-block-post-title{font-size:clamp(2.25rem,7vw,5.25rem);line-height:.86;letter-spacing:-.035em;margin:24px 0 0}
.atmp-hero .wp-block-post-title a{color:var(--ink-900);text-decoration:none;transition:color var(--dur-fast) var(--ease-editorial)}
.atmp-hero .wp-block-post-title a:hover{color:var(--coral-500)}
.atmp-hero .wp-block-post-excerpt{margin-top:24px;font-size:1.3125rem;line-height:1.32;color:var(--ink-600);max-width:38ch}
.atmp-hero .wp-block-post-featured-image img{aspect-ratio:4/5;object-fit:cover;width:100%}
.atmp-hero .wp-block-post-terms a{background:var(--pink-200);color:var(--coral-500);text-decoration:none;
  padding:6px 14px;border-radius:999px;font-size:.8125rem;display:inline-block}

.atmp-grid .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;list-style:none;padding:0;margin:0}
.atmp-grid .wp-block-post-template > li{margin:0}
.atmp-grid .wp-block-post-featured-image{margin-bottom:16px}
.atmp-grid .wp-block-post-featured-image img{aspect-ratio:4/5;object-fit:cover;width:100%;
  transition:transform var(--dur-slow) cubic-bezier(.16,1,.3,1)}
.atmp-grid li:hover .wp-block-post-featured-image img{transform:scale(1.03)}
.atmp-grid .wp-block-post-title{font-size:1.375rem;margin:12px 0 0}
.atmp-grid .wp-block-post-title a{color:var(--ink-900);text-decoration:none;transition:color var(--dur-fast) var(--ease-editorial)}
.atmp-grid li:hover .wp-block-post-title a{color:var(--coral-500)}
.atmp-grid .wp-block-post-terms a{background:var(--pink-200);color:var(--coral-500);text-decoration:none;
  padding:4px 10px;border-radius:999px;font-size:.6875rem;display:inline-block}
/* Sin foto destacada: bloque rosa con la etiqueta del sistema */
.atmp-grid li:not(:has(.wp-block-post-featured-image))::before,
.atmp-hero:not(:has(.wp-block-post-featured-image)) .atmp-ph{content:""}
.atmp-ph{background:var(--pink-200);aspect-ratio:4/5;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--coral-500)}

/* ============================================================
   Entrada y página
   ============================================================ */
.atmp-article{padding:64px var(--page-pad) 80px}
.atmp-article .wp-block-post-title{font-size:clamp(2rem,5.5vw,4rem);line-height:.94;letter-spacing:-.03em;
  max-width:20ch;margin:0 0 24px}
.atmp-byline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--ink-200);border-bottom:1px solid var(--ink-200);padding:16px 0;margin-bottom:40px}
.atmp-byline *{font-family:var(--font-mono)!important;font-size:.6875rem!important;
  letter-spacing:var(--tracking-label)!important;text-transform:uppercase!important;color:var(--ink-500)!important}
.atmp-byline a{text-decoration:none}
.entry-content > *,.wp-block-post-content > *{max-width:64ch}
.entry-content > .alignwide,.wp-block-post-content > .alignwide,
.entry-content > .alignfull,.wp-block-post-content > .alignfull{max-width:none}
.wp-block-post-content p{margin:0 0 1.15em;text-indent:0}
.wp-block-post-content p:last-child{margin-bottom:0}
/* Capitular en el primer párrafo del artículo */
.atmp-article .wp-block-post-content > p:first-of-type::first-letter{
  font-family:var(--font-display);font-weight:900;font-size:4.6em;line-height:.76;
  float:left;margin:.06em .08em 0 0;color:var(--coral-500)}
.wp-block-details summary{font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--coral-500);cursor:pointer}
.wp-block-details{border-top:var(--border-rule) solid var(--ink-900);padding-top:16px}

/* ============================================================
   Pie
   ============================================================ */
.atmp-foot{background:var(--ink-900);color:var(--pink-200);padding:80px var(--page-pad) 40px}
.atmp-foot__grid{max-width:var(--container-max);margin:0 auto;display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;gap:48px;align-items:start}
.atmp-foot .atmp-logo{width:92px;height:34px;background:var(--pink-200)}
.atmp-foot p{margin-top:20px;font-size:.875rem;color:rgba(255,206,236,.62);max-width:28ch}
.atmp-foot__h{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:rgba(255,206,236,.5)}
.atmp-foot__links{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.atmp-foot a{color:var(--pink-200);font-size:.875rem;text-decoration:none}
.atmp-foot a:hover{color:var(--white)}
.atmp-foot__bar{max-width:var(--container-max);margin:64px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,206,236,.32);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:rgba(255,206,236,.5)}

/* ============================================================
   Entrada de página
   ============================================================ */
@keyframes atmpRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes atmpWipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.js .atmp-nameplate h1{animation:atmpWipe var(--dur-reveal) var(--ease-editorial) both}
.js .atmp-nameplate h2{animation:atmpRise var(--dur-slow) var(--ease-editorial) both;animation-delay:200ms}
.js .atmp-hero .wp-block-post-title{animation:atmpWipe var(--dur-reveal) var(--ease-editorial) both;animation-delay:360ms}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .atmp-hero .wp-block-columns{flex-wrap:wrap!important;gap:40px}
  .atmp-hero .wp-block-column{flex-basis:100%!important}
  .atmp-hero .wp-block-post-featured-image img{aspect-ratio:3/2}
  .atmp-foot__grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:820px){
  .atmp-grid .wp-block-post-template{grid-template-columns:1fr;gap:40px}
  .atmp-grid .wp-block-post-template > li{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:start}
  .atmp-grid .wp-block-post-featured-image{margin-bottom:0}
  .atmp-grid .wp-block-post-featured-image img{aspect-ratio:1/1}
}
@media (max-width:600px){ .atmp-foot__grid{grid-template-columns:1fr;gap:32px} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .js .atmp-head::before{transform:scaleX(1)}
}