/* encajebolillos.es — tema "encaje"
   Paleta cálida elegida por Carmiña (coral, mostaza, salvia, lavanda, terracota).
   Tipografías del sistema — sin descargas externas, sin tracking.
   ─────────────────────────────────────────────────────────────────── */

:root{
 /* paleta */
 --crema:    #fff8ee;
 --crema-2:  #fdf3df;
 --tinta:    #2c2538;
 --tinta-2:  #5a526a;
 --rosa:     #d24e72;       /* coral - acento principal */
 --rosa-d:   #a23253;
 --mostaza:  #d49a2c;       /* dorado cálido */
 --salvia:   #6b9b7c;       /* verde tranquilo */
 --lavanda:  #8b6db2;       /* morado suave */
 --teja:     #c8643d;       /* terracota */
 --linea:    #e9dec8;       /* borde marfil */
 --sombra:   0 4px 28px rgba(80,40,60,.08);
 --sombra-h: 0 8px 36px rgba(80,40,60,.14);

 /* tipografías del sistema — sin fuentes externas */
 --serif: 'Iowan Old Style','Apple Garamond',Baskerville,'Times New Roman','Droid Serif',Times,'Source Serif Pro',serif;
 --sans:  -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
 --mono:  ui-monospace,'Cascadia Code','Source Code Pro',Menlo,Consolas,monospace;

 --max: 1140px;
 --r:   12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--crema);
 color:var(--tinta);
 font:400 17px/1.65 var(--sans);
 -webkit-font-smoothing:antialiased;
 background-image:
   radial-gradient(circle at 8% 8%, rgba(210,78,114,.06) 0, transparent 36%),
   radial-gradient(circle at 92% 14%, rgba(107,155,124,.07) 0, transparent 40%),
   radial-gradient(circle at 50% 96%, rgba(212,154,44,.05) 0, transparent 44%);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rosa-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(210,78,114,.35);transition:.2s}
a:hover{color:var(--rosa);text-decoration-color:var(--rosa)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--rosa);color:#fff;padding:.55rem 1rem;border-radius:6px;z-index:100;text-decoration:none}

/* ── HEADER ───────────────────────────────────────────────────────── */
.site-header{
 background:linear-gradient(180deg,#fffaf0 0%,#fff8ee 100%);
 border-bottom:2px dotted var(--linea);
 position:sticky;top:0;z-index:50;
 backdrop-filter:saturate(1.2);
}
.site-header .wrap{display:flex;align-items:center;gap:1.4rem;min-height:78px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit;border:0}
.brand img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}
.brand strong{font:700 1.35rem/1 var(--serif);display:block;color:var(--rosa-d);letter-spacing:-.01em}
.brand em{font:400 .8rem var(--sans);color:var(--tinta-2);font-style:italic;letter-spacing:.01em}
.primary{margin-left:auto}
.primary ul{list-style:none;display:flex;gap:1.1rem;margin:0;padding:0}
.primary a{color:var(--tinta);text-decoration:none;font-weight:500;font-size:.94rem;padding:.35rem .1rem;border-bottom:2px solid transparent;border-radius:0}
.primary a:hover{color:var(--rosa);border-bottom-color:var(--rosa)}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--tinta)}
.lang-switch a{
 padding:.32rem .7rem;background:var(--mostaza);color:#fff;
 border-radius:99px;font-size:.78rem;letter-spacing:.06em;font-weight:700;
 text-decoration:none;box-shadow:var(--sombra);
}
.lang-switch a:hover{background:var(--teja);color:#fff}

@media(max-width:820px){
 .nav-toggle{display:block;order:3;margin-left:auto}
 .lang-switch{order:2}
 .primary{order:4;width:100%}
 .primary ul{display:none;flex-direction:column;gap:.4rem;padding:.6rem 0}
 #nav.open{display:flex !important}
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{padding:3.5rem 1.25rem 1.2rem;text-align:center;position:relative}
.hero::after{
 content:"";display:block;width:120px;height:18px;margin:1.4rem auto 0;
 background:radial-gradient(circle,var(--rosa) 22%,transparent 28%) 0 0/24px 18px repeat-x;
 opacity:.55;
}
.hero h1{font:700 clamp(2.2rem,5.5vw,3.8rem)/1.05 var(--serif);margin:0 0 .8rem;color:var(--tinta);letter-spacing:-.015em}
.hero .lede{font-size:1.16rem;color:var(--tinta-2);max-width:640px;margin:0 auto;font-family:var(--serif);font-style:italic}

/* ── GRID DE TARJETAS ─────────────────────────────────────────────── */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.6rem;padding:2.5rem 1.25rem}
.card{
 background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.5rem 1.4rem 1.2rem;
 box-shadow:var(--sombra);display:flex;flex-direction:column;gap:.6rem;transition:.25s;position:relative;overflow:hidden;
}
.card::before{
 content:"";position:absolute;top:0;left:0;right:0;height:5px;
}
.card.c-0::before{background:var(--rosa)}
.card.c-1::before{background:var(--mostaza)}
.card.c-2::before{background:var(--salvia)}
.card.c-3::before{background:var(--lavanda)}
.card.c-4::before{background:var(--teja)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra-h)}
.card .meta{font-size:.78rem;color:var(--tinta-2);margin:0;letter-spacing:.04em;text-transform:uppercase}
.card .meta a{color:var(--tinta-2);text-decoration:none;border-bottom:1px dotted var(--tinta-2)}
.card .meta a:hover{color:var(--rosa)}
.card h2{font:600 1.5rem/1.2 var(--serif);margin:.2rem 0;color:var(--tinta)}
.card h2 a{color:inherit;text-decoration:none}
.card h2 a:hover{color:var(--rosa)}
.card p{margin:0;color:var(--tinta-2);font-size:.96rem}
.card .readmore{margin-top:auto;font-weight:600;font-size:.92rem;color:var(--rosa);text-decoration:none;align-self:flex-start;border-bottom:2px solid transparent;padding-bottom:2px}
.card .readmore:hover{border-bottom-color:var(--rosa)}

/* ── PAGINADOR ────────────────────────────────────────────────────── */
.pager{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem 3rem;font-size:.95rem;gap:1rem;flex-wrap:wrap}
.pager a{padding:.55rem 1rem;border-radius:99px;background:#fff;border:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
.pager a:hover{border-color:var(--rosa);color:var(--rosa)}
.pager span{color:var(--tinta-2)}

/* ── ARTÍCULO ─────────────────────────────────────────────────────── */
.single{padding:2.5rem 1.25rem 3.5rem;max-width:740px}
.breadcrumb{font-size:.84rem;color:var(--tinta-2);margin-bottom:1.4rem}
.breadcrumb a{color:var(--tinta-2);text-decoration:none;border-bottom:1px dotted var(--tinta-2)}
.breadcrumb a:hover{color:var(--rosa);border-bottom-color:var(--rosa)}
.single h1{font:700 clamp(1.95rem,4.2vw,2.9rem)/1.1 var(--serif);margin:0 0 .6rem;color:var(--tinta);letter-spacing:-.012em}
.single .meta{font-size:.88rem;color:var(--tinta-2);margin:0 0 2.2rem;font-style:italic}

.prose{font-size:1.07rem;line-height:1.78;color:var(--tinta)}
.prose h2{
 font:700 1.65rem/1.25 var(--serif);margin:2.4rem 0 .9rem;color:var(--rosa-d);
 position:relative;padding-bottom:.3rem;
}
.prose h2::after{
 content:"";display:block;width:48px;height:3px;background:var(--mostaza);
 border-radius:99px;margin-top:.35rem;
}
.prose h3{font:600 1.3rem/1.3 var(--serif);margin:1.9rem 0 .55rem;color:var(--salvia)}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{padding-left:1.4rem;margin:0 0 1.2rem}
.prose ul li::marker{color:var(--rosa)}
.prose ol li::marker{color:var(--lavanda);font-weight:700}
.prose li{margin:.35rem 0}
.prose blockquote{
 border-left:4px solid var(--mostaza);
 padding:.5rem 0 .5rem 1.2rem;margin:1.6rem 0;
 color:var(--tinta-2);font-family:var(--serif);font-size:1.18rem;font-style:italic;
 background:linear-gradient(90deg,rgba(212,154,44,.07),transparent);
}
.prose code{background:var(--crema-2);padding:.1rem .35rem;border-radius:4px;font-family:var(--mono);font-size:.92em;color:var(--teja)}
.prose pre{background:var(--tinta);color:#f7e7d6;padding:1rem;border-radius:8px;overflow-x:auto;font-family:var(--mono)}
.prose pre code{background:transparent;color:inherit;padding:0}
.prose a{font-weight:500;color:var(--rosa-d)}
.prose img{margin:1.7rem auto;border-radius:var(--r);box-shadow:var(--sombra)}
.prose hr{border:0;height:18px;background:radial-gradient(circle,var(--mostaza) 18%,transparent 22%) 0 0/22px 18px repeat-x;opacity:.45;margin:2.4rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1.4rem 0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.prose th,.prose td{padding:.7rem .8rem;border-bottom:1px solid var(--linea);text-align:left}
.prose th{font-weight:700;background:var(--crema-2);color:var(--rosa-d)}
.prose .headerlink{opacity:0;margin-left:.4rem;font-size:.8em;text-decoration:none}
.prose h2:hover .headerlink,.prose h3:hover .headerlink{opacity:.5}

/* ── CARMIÑA — citas y notas a pie (estilo "cuaderno") ──────────── */
.prose p:first-of-type::first-letter{
 font-family:var(--serif);font-size:3.2rem;float:left;line-height:1;
 padding:.3rem .55rem 0 0;color:var(--rosa);font-weight:700;
}

/* ── TAGS ────────────────────────────────────────────────────────── */
.tags{margin-top:2.2rem;font-size:.88rem;display:flex;flex-wrap:wrap;gap:.4rem}
.tags a{
 display:inline-block;background:var(--crema-2);padding:.32rem .8rem;
 border-radius:99px;color:var(--tinta-2);text-decoration:none;
 border:1px solid var(--linea);font-weight:500;
}
.tags a:hover{background:var(--rosa);color:#fff;border-color:var(--rosa)}

/* ── PREV/NEXT + RELATED ─────────────────────────────────────────── */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.5rem 0;font-size:.94rem}
@media(max-width:600px){.post-nav{grid-template-columns:1fr}}
.post-nav a{padding:1rem 1.1rem;border:1px solid var(--linea);border-radius:var(--r);background:#fff;color:var(--tinta);text-decoration:none;line-height:1.4}
.post-nav .next{text-align:right}
.post-nav a:hover{border-color:var(--rosa);color:var(--rosa);background:#fff}

.related{margin-top:3rem;padding:1.8rem 0 0;border-top:2px dotted var(--linea)}
.related h2{font:700 1.4rem var(--serif);margin:0 0 1rem;color:var(--lavanda);position:relative;padding-bottom:.3rem}
.related h2::after{content:"";display:block;width:48px;height:3px;background:var(--lavanda);border-radius:99px;margin-top:.35rem}
.related ul{list-style:none;padding:0;margin:0}
.related li{padding:.55rem 0;border-bottom:1px dotted var(--linea)}
.related li a{font-weight:500;color:var(--tinta);text-decoration:none}
.related li a:hover{color:var(--rosa)}
.related small{color:var(--tinta-2)}

/* ── LISTADOS (categoría / etiqueta / archivo) ───────────────────── */
.listing{padding:2.5rem 1.25rem 3rem}
.listing h1{font:700 clamp(1.8rem,4vw,2.6rem) var(--serif);margin:0 0 1.4rem;color:var(--rosa-d)}
.article-list{list-style:none;padding:0;margin:0}
.article-list li{padding:.9rem 0;border-bottom:1px dotted var(--linea);display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.article-list time{font-size:.82rem;color:var(--tinta-2);min-width:135px;font-variant-numeric:tabular-nums}
.article-list a{font-weight:500;color:var(--tinta);text-decoration:none}
.article-list a:hover{color:var(--rosa)}
.article-list small{color:var(--tinta-2)}

/* ── FORMULARIO DE CONTACTO ──────────────────────────────────────── */
.contact-form{display:flex;flex-direction:column;gap:1.1rem;background:#fff;padding:1.6rem;border-radius:var(--r);border:1px solid var(--linea);box-shadow:var(--sombra);margin:1.6rem 0}
.contact-form label{font-weight:600;font-size:.95rem;display:flex;flex-direction:column;gap:.4rem;color:var(--tinta-2)}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
 font:400 1rem var(--sans);padding:.7rem .85rem;
 border:2px solid var(--linea);border-radius:8px;background:var(--crema);
 color:var(--tinta);transition:border-color .2s;width:100%;
}
.contact-form input:focus,.contact-form textarea:focus{outline:0;border-color:var(--rosa);background:#fff}
.contact-form textarea{resize:vertical;font-family:var(--sans)}
.contact-form button{
 background:var(--rosa);color:#fff;border:0;padding:.85rem 1.6rem;
 border-radius:99px;font-weight:700;font-size:1rem;cursor:pointer;
 align-self:flex-start;transition:.2s;letter-spacing:.02em;
 box-shadow:0 3px 10px rgba(210,78,114,.3);
}
.contact-form button:hover{background:var(--rosa-d);transform:translateY(-1px)}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.site-footer{
 background:linear-gradient(180deg,var(--crema-2) 0%,#fdebd0 100%);
 border-top:2px dotted var(--linea);
 padding:2.5rem 1.25rem 2rem;margin-top:3.5rem;
}
.site-footer .wrap{text-align:center;color:var(--tinta-2);font-size:.93rem}
.brand-mini{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-style:italic}
.brand-mini img{opacity:.85}
.footlinks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;padding:0;margin:1rem 0}
.footlinks a{color:var(--tinta-2);text-decoration:none;border-bottom:1px dotted var(--tinta-2)}
.footlinks a:hover{color:var(--rosa);border-bottom-color:var(--rosa)}
.madeby{margin:1rem 0 0;color:var(--lavanda);font-style:italic;font-family:var(--serif);font-size:.95rem}
.madeby small{display:block;color:var(--tinta-2);font-style:normal;font-family:var(--sans);font-size:.82rem;margin-top:.4rem}

/* ── 404 ────────────────────────────────────────────────────────── */
.not-found .btn{display:inline-block;background:var(--rosa);color:#fff;padding:.8rem 1.6rem;border-radius:99px;text-decoration:none;font-weight:600;box-shadow:var(--sombra)}
.not-found .btn:hover{background:var(--rosa-d)}

/* ── IMPRESIÓN ──────────────────────────────────────────────────── */
@media print{
 .site-header,.site-footer,.post-nav,.related,.tags,.contact-form,.lang-switch,.nav-toggle{display:none}
 .single{max-width:none}
 body{background:white}
 a{color:black;text-decoration:none}
}