/* Blog del equipo · mitienda.beauty · Estilo Farmasi */
@font-face{font-family:"Cheque Serif";font-style:normal;font-weight:400 900;font-display:swap;src:url(/blog/fonts/playfair.woff2) format("woff2")}
@font-face{font-family:"Cheque Serif";font-style:italic;font-weight:400 900;font-display:swap;src:url(/blog/fonts/playfair-italic.woff2) format("woff2")}
:root{
  --bg:#fff;--ink:#262A4A;--muted:#6C7090;--line:#E6E8F0;--soft:#EEF0F8;
  --accent:#DB414C;--accent-t:#C8323F;--tint:#FDEEF0;--good:#1B8A5A;--warn:#B26A00;
  --ease:cubic-bezier(.23,1,.32,1);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Outfit,system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--accent-t)}
.wrap{max-width:640px;margin:0 auto;padding:0 20px 80px}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 0 0;font-size:14px;color:var(--muted)}
.top a{color:inherit;text-decoration:none}
.top a.back::before{content:"← ";font-family:var(--mono)}
.top img{width:22px;height:22px;vertical-align:-6px;margin-right:6px}
.brand{font-weight:300;letter-spacing:.18em;font-size:12px}
.kick{font-size:15px;color:var(--muted)}
.kick b{color:var(--accent-t);font-weight:600}

/* Datos por confirmar (solo mientras es borrador) */
mark.pc{background:#FFF4DB;color:#7A4A00;border-bottom:1.5px dashed var(--warn);padding:0 3px;border-radius:3px;font-size:.92em}
.borrador{position:sticky;top:0;z-index:5;margin:0 -20px;padding:9px 20px;background:#FFF4DB;color:#7A4A00;font-size:13px;border-bottom:1px solid #F0D9A8}
.borrador b{font-family:var(--mono)}

/* ---------- Índice ---------- */
.b-hero{padding:40px 0 8px}
.b-hero h1{font-size:clamp(40px,11vw,64px);line-height:1;font-weight:800;letter-spacing:-.025em;margin-top:8px}
.b-hero .lead{font-size:18px;color:var(--muted);margin-top:16px;max-width:36ch}
.posts{list-style:none;padding:0;margin-top:32px;border-top:1.5px solid var(--ink)}
.post{border-bottom:1px solid var(--line)}
.post a{display:grid;grid-template-columns:1fr 104px;gap:16px;padding:20px 0;text-decoration:none;color:inherit}
.post .f{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em}
.post h2{font-size:23px;line-height:1.15;font-weight:800;letter-spacing:-.01em;margin-top:6px}
.post h2 .num{color:var(--accent);font-weight:700;display:block;font-size:.95em;margin-top:2px}
.post p{font-size:15px;color:var(--muted);margin-top:8px}
.post .quien{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--ink);font-weight:500}
.post .quien img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.post .thumb{width:104px;height:138px;border-radius:14px;object-fit:cover;object-position:50% 30%}
.b-nota{margin-top:20px;font-size:14px;color:var(--muted)}

/* ---------- Artículo ---------- */
.a-hero{padding:32px 0 0}
.a-hero h1{font-size:clamp(36px,10vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.025em;margin-top:8px}
.cifra{margin-top:20px;border-top:1.5px solid var(--ink);padding-top:14px}
.cifra .big{font-weight:800;font-size:clamp(46px,14vw,72px);line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.cifra p{font-size:16px;margin-top:8px;max-width:34ch}
.firma-a{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--muted)}
.firma-a img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.firma-a b{display:block;color:var(--ink);font-weight:600;font-size:15px}
.foto{margin-top:24px}
.foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 45%;border-radius:18px;background:var(--soft)}
figcaption{font-size:14px;color:var(--muted);margin-top:8px}

.cuerpo{margin-top:40px}
.cuerpo>p{margin-top:16px}
.cuerpo>p:first-child{font-size:19px;line-height:1.55;margin-top:0}
.cuerpo h2{font-size:clamp(26px,7vw,32px);line-height:1.1;font-weight:800;letter-spacing:-.015em;margin-top:52px;scroll-margin-top:52px}
.cuerpo h2+p{margin-top:12px}
.cheque-fig{margin:24px -4px 0}
.cheque-fig svg{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 1px 0 rgba(38,42,74,.08)}

.reqs{list-style:none;padding:0;margin-top:20px;border-top:1.5px solid var(--ink)}
.reqs li{display:grid;grid-template-columns:7.2ch 1fr;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.reqs .num{font-size:24px;font-weight:700;color:var(--ink);text-align:right}
.reqs span{font-size:16px}
.reqs small{display:block;color:var(--muted);font-size:14px;margin-top:2px}

.linea{list-style:none;padding:0;margin-top:20px;position:relative}
.linea::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.linea li{position:relative;padding:0 0 22px 28px}
.linea li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--muted)}
.linea li.hito::before{background:var(--accent);border-color:var(--accent)}
.linea .cuando{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
.linea .que{display:block;font-weight:600;font-size:17px;margin-top:2px}
.linea .det{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.linea .det .num{color:var(--ink);font-weight:500}

.habitos{list-style:none;padding:0;margin-top:18px;display:grid;gap:10px}
.habitos li{background:var(--soft);border-radius:14px;padding:14px 16px;font-size:16px}
.habitos b{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}

.nadie{list-style:none;padding:0;margin-top:16px}
.nadie li{padding:14px 0;border-top:1px solid var(--line)}
.nadie li:last-child{border-bottom:1px solid var(--line)}
.nadie b{display:block;font-size:17px}

.honest{margin-top:28px;padding:16px 18px;border:1.5px solid var(--ink);border-radius:14px;font-size:16px}
.honest b{font-weight:700}

/* ---------- Simulador ---------- */
.sim{margin-top:64px;scroll-margin-top:52px}
.sim h2{font-size:clamp(28px,8vw,36px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.sim>p{color:var(--muted);margin-top:10px;max-width:42ch}
.ejemplos{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ejemplos button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font:500 14px/1.2 Outfit,sans-serif;cursor:pointer;transition:transform 160ms var(--ease)}
.ejemplos button:active{transform:scale(.97)}
.ejemplos button[aria-pressed="true"]{background:var(--tint);border-color:var(--accent);color:var(--accent-t)}
.ejemplos small{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:4px}
.ejemplos button[aria-pressed="true"] small{color:var(--accent-t)}
.campos{display:grid;gap:14px;margin-top:20px}
.campo label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.campo input,.campo select{width:100%;font:500 17px/1.2 Outfit,sans-serif;color:var(--ink);background:#fff;border:1px solid #CDD1E0;border-radius:12px;padding:13px 14px;appearance:none;-webkit-appearance:none}
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23262A4A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.campo .pref{position:relative}
.campo .pref span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);color:var(--muted)}
.campo .pref input{padding-left:30px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.campo input:focus,.campo select:focus{outline:2.5px solid var(--accent-t);outline-offset:1px;border-color:transparent}
.vista{margin-top:20px}
.vista .cheque-vivo svg{width:100%;height:auto;display:block;border-radius:6px}
.mes{margin-top:12px;font-size:15px;color:var(--muted)}
.mes .num{color:var(--ink);font-weight:500}
.acciones{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:14px;padding:15px;font:700 16px/1.2 Outfit,sans-serif;text-decoration:none;cursor:pointer;background:var(--accent);color:#fff;transition:transform 160ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn svg,.btn2 svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.btn2{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:14px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:600 15px/1.2 Outfit,sans-serif;cursor:pointer;transition:transform 160ms var(--ease)}
.btn2:active{transform:scale(.97)}
.aviso{margin-top:14px;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.aviso svg{flex:none;width:16px;height:16px;margin-top:2px;stroke:var(--muted);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Cierre ---------- */
.end{margin-top:64px;padding:28px 20px;border-radius:18px;background:var(--ink);color:#fff}
.end h2{font-size:28px;line-height:1.1;font-weight:800}
.end p{color:#C9CBE0;margin-top:10px}
.end .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.end .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.end .who small{display:block;color:#C9CBE0;font-size:13px}
.end .btn{margin-top:18px}
.mas{margin-top:40px;border-top:1.5px solid var(--ink)}
.mas a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.mas a::after{content:"→";font-family:var(--mono);color:var(--accent-t)}
.mas a small{display:block;font-weight:400;color:var(--muted);font-size:14px}
footer{margin-top:40px;font-size:13px;color:var(--muted)}

a:focus-visible,button:focus-visible{outline:2.5px solid var(--accent-t);outline-offset:2px;border-radius:6px}
@media(hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-t)}
  .ejemplos button:hover{border-color:var(--ink)}
  .post a:hover h2{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
  .mas a:hover{color:var(--accent-t)}
}

/* ---------- Escritorio ---------- */
@media(min-width:1000px){
  .wrap{max-width:1160px;padding:0 40px 100px}
  .borrador{margin:0 -40px;padding:9px 40px}
  /* índice */
  .b-grid{max-width:none}
  .b-hero p{max-width:60ch}
  .b-hero{padding-top:72px}
  .b-hero h1{font-size:68px}
  .posts{margin-top:80px}
  .post a{grid-template-columns:1fr 168px;gap:32px;padding:28px 0}
  .post h2{font-size:32px}
  .post p{font-size:16px;max-width:48ch}
  .post .thumb{width:168px;height:210px}
  /* artículo */
  .a-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:72px;align-items:end;padding-top:40px}
  .a-hero{padding-top:24px}
  .a-hero h1{font-size:64px}
  .foto{margin-top:0}
  .a-body{margin-top:88px}
  /* cuerpo en una sola columna a todo lo ancho; solo el texto corrido lleva tope para leer cómodo */
  .a-body{max-width:none}
  .cuerpo>p,.cuerpo>ul:not(.reqs):not(.linea),.cuerpo>ol:not(.linea),.cuerpo>h2+p{max-width:68ch}
  .cuerpo{margin-top:0}
  .cuerpo>p:first-child{max-width:34em;font-size:26px;line-height:1.35;font-weight:500;letter-spacing:-.01em;text-wrap:pretty}
  .cuerpo>h2{font-size:36px;margin-top:72px;padding-top:28px;border-top:1.5px solid var(--ink)}
  .cuerpo>h2+p{font-size:19px;line-height:1.5}
  .cheque-fig{margin:28px 0 0}
  .reqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:0;margin-top:28px}
  .reqs li{display:block;border-top:1.5px solid var(--ink);border-bottom:0;padding:16px 0 0}
  .reqs .num{display:block;text-align:left;font-size:44px;line-height:1;margin-bottom:10px}
  .linea{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:28px}
  .linea::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1.5px}
  .linea li{padding:26px 0 0}
  .linea li::before{top:0}
  .linea .que{font-size:20px}
  .honest{max-width:62ch;padding:20px 24px;font-size:17px}
  .sim{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px 64px;margin-top:104px;padding:48px;background:var(--soft);border-radius:18px}
  .sim>h2,.sim>p,.sim>.ejemplos{grid-column:1/-1}
  .sim>p{margin-top:-12px}
  .sim .campos{margin-top:0;align-content:start}
  .sim .vista{margin-top:0}
  .acciones{grid-template-columns:1fr 1fr}
  .end,.mas{max-width:none}
  .end>p{max-width:60ch}
  .mas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
  .end{padding:44px 48px;margin-top:104px}
  .end h2{font-size:40px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.top img{display:inline-block}
.post h2 .num{font-family:inherit;font-weight:800}
.post .thumb{object-position:30% 40%}
.cuerpo p .num,.linea .det .num,.mes .num{font-family:inherit;font-weight:600}