/*
Theme Name: Luz de Cada Día
Description: Tema de una sola página para la web de Luz de Cada Día: velas aromáticas, decorativas y artesanales, hechas a mano en Madrid.
Version: 1.1
Author: Luz de Cada Día
Text Domain: luz-de-cada-dia
*/


  :root{
    --paper:#F6F1E4;
    --paper-deep:#ECE3CC;
    --ink:#332B1F;
    --cherry:#B14B4E;
    --forest:#697A5C;
    --gold:#C08A3E;
    --peach:#E3A276;
    --card-bg:#FFFCF4;
    --line: rgba(51,43,31,0.32);
    --line-soft: rgba(51,43,31,0.14);
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-stamp: 'Special Elite', 'Courier New', monospace;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#211C13;
      --paper-deep:#181309;
      --ink:#F1E7D2;
      --cherry:#E08A8C;
      --forest:#A9BF98;
      --gold:#E3B45B;
      --peach:#E3A276;
      --card-bg:#2A2416;
      --line: rgba(241,231,210,0.32);
      --line-soft: rgba(241,231,210,0.14);
    }
  }
  :root[data-theme="dark"]{
    --paper:#211C13;
    --paper-deep:#181309;
    --ink:#F1E7D2;
    --cherry:#E08A8C;
    --forest:#A9BF98;
    --gold:#E3B45B;
    --peach:#E3A276;
    --card-bg:#2A2416;
    --line: rgba(241,231,210,0.32);
    --line-soft: rgba(241,231,210,0.14);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  .wrap{ max-width:1100px; margin:0 auto; padding:0 28px; }
  .stamp{ font-family:var(--font-stamp); letter-spacing:0.08em; font-size:0.72rem; }
  ::selection{ background:var(--cherry); color:var(--paper); }
  :focus-visible{ outline:2px solid var(--cherry); outline-offset:3px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:20;
    background:var(--paper);
    border-bottom:1px solid var(--line-soft);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 28px;
    max-width:1100px; margin:0 auto;
  }
  .brandmark{
    display:flex; align-items:center; gap:10px;
    text-decoration:none;
  }
  .brandmark img{ height:46px; width:auto; }
  nav.links{ display:flex; gap:26px; }
  nav.links a{
    text-decoration:none;
    font-size:0.92rem;
    border-bottom:1px solid transparent;
    padding-bottom:2px;
  }
  nav.links a:hover{ border-bottom-color:var(--cherry); }
  @media (max-width:680px){ nav.links{ display:none; } }

  /* ---------- Hero ---------- */
  .hero{
    padding:56px 28px 60px;
    text-align:center;
  }
  .hero-logo{ width:min(220px, 55vw); margin:0 auto 20px; }
  .eyebrow-ribbon{
    display:inline-block;
    font-family:var(--font-stamp);
    font-size:0.75rem;
    letter-spacing:0.14em;
    color:var(--paper);
    background:var(--cherry);
    padding:5px 16px;
    transform:rotate(-1.2deg);
    margin-bottom:22px;
  }
  h1.hero-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(2.2rem, 5.6vw, 3.7rem);
    margin:0 0 18px;
    line-height:1.08;
  }
  h1.hero-title em{ font-style:italic; font-weight:500; color:var(--cherry); }
  .hero p.lede{
    max-width:520px; margin:0 auto 30px;
    font-size:1.08rem; opacity:0.85;
  }
  .btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .btn{
    display:inline-block;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.95rem;
    padding:13px 30px;
    text-decoration:none;
    border:1.5px solid var(--ink);
    background:transparent;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .btn.primary{ background:var(--ink); color:var(--paper); }
  .btn.primary:hover{ background:var(--cherry); border-color:var(--cherry); }
  .btn.ghost:hover{ background:var(--ink); color:var(--paper); }

  section{ padding:72px 0; }
  .divider{
    height:1px;
    background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
    max-width:1100px; margin:0 auto;
  }
  .kicker{
    font-family:var(--font-stamp); letter-spacing:0.1em;
    font-size:0.72rem; color:var(--cherry); margin:0 0 10px;
  }
  h2{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1.75rem, 3.2vw, 2.4rem);
    margin:0 0 20px; line-height:1.15;
  }

  /* ---------- About ---------- */
  .about-grid{
    display:grid; grid-template-columns: 1.1fr 0.9fr;
    gap:52px; align-items:center;
  }
  .about-grid p{ max-width:54ch; margin:0 0 16px; }
  .about-photo{
    border:1px solid var(--line); padding:8px;
    background:var(--card-bg);
  }
  .about-photo img{ width:100%; height:auto; }
  .about-photo .cap{
    font-family:var(--font-stamp); font-size:0.68rem;
    letter-spacing:0.05em; text-align:center; padding-top:8px; opacity:0.7;
  }
  @media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } }

  /* ---------- Products ---------- */
  .products{ background:var(--paper-deep); }
  .line-tabs{ display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
  .line-tag{
    font-family:var(--font-stamp); font-size:0.7rem; letter-spacing:0.08em;
    padding:5px 12px; border:1px solid var(--line);
  }
  .group-title{
    font-family:var(--font-display); font-weight:600; font-style:italic;
    font-size:1.15rem; margin:40px 0 18px; color:var(--cherry);
  }
  .group-title:first-of-type{ margin-top:0; }
  .product-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:26px;
  }
  .card{
    background:var(--card-bg);
    border:1px solid var(--line-soft);
    position:relative;
    overflow:hidden;
  }
  .card .photo{ aspect-ratio: 4 / 3; overflow:hidden; }
  .card .photo img{ width:100%; height:100%; object-fit:cover; }
  .card .body{ padding:18px 18px 22px; text-align:center; }
  .card h3{
    font-family:var(--font-display); font-weight:600;
    font-size:1.15rem; margin:0 0 4px;
  }
  .card .note{
    font-family:var(--font-stamp); font-size:0.65rem; letter-spacing:0.06em;
    color:var(--forest); margin:0 0 8px;
  }
  .card p.desc{ font-size:0.88rem; opacity:0.82; margin:0; }
  .card.anchor{ border:1.5px solid var(--cherry); }
  .anchor-flag{
    position:absolute; top:10px; left:10px; z-index:2;
    background:var(--cherry); color:var(--paper);
    font-family:var(--font-stamp); font-size:0.6rem; letter-spacing:0.06em;
    padding:3px 9px;
  }
  .card.custom{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:34px 22px; border:1.5px dashed var(--line);
    background:transparent;
  }
  .card.custom h3{ margin-bottom:8px; }
  .card.custom p{ font-size:0.9rem; opacity:0.82; margin:0 0 18px; max-width:28ch; }
  .card.custom a{
    font-family:var(--font-body); font-weight:600; font-size:0.88rem;
    text-decoration:none; border-bottom:1.5px solid var(--cherry); padding-bottom:2px;
  }

  /* ---------- Craft / process ---------- */
  .craft-grid{
    display:grid; grid-template-columns: 0.85fr 1.15fr;
    gap:48px; align-items:center;
  }
  .craft-photo{ border:1px solid var(--line); padding:8px; background:var(--card-bg); }
  .craft-photo img{ width:100%; height:auto; }
  .craft-list{ display:flex; flex-direction:column; gap:22px; }
  .craft-item{ text-align:left; }
  .craft-num{
    font-family:var(--font-display); font-style:italic; font-size:1.5rem;
    color:var(--gold); display:block; margin-bottom:6px;
  }
  .craft-item h4{ margin:0 0 6px; font-size:1.02rem; font-family:var(--font-display); font-weight:600; }
  .craft-item p{ margin:0; font-size:0.9rem; opacity:0.82; }
  @media (max-width:800px){ .craft-grid{ grid-template-columns:1fr; } }

  /* ---------- Where to find ---------- */
  .find-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
  .find-block h3{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin:0 0 12px; }
  .find-block ul{ list-style:none; margin:0; padding:0; }
  .find-block li{
    padding:10px 0; border-bottom:1px solid var(--line-soft);
    font-size:0.94rem; display:flex; justify-content:space-between; gap:12px;
  }
  .find-block li span.when{
    font-family:var(--font-stamp); font-size:0.7rem; color:var(--forest); white-space:nowrap;
  }
  @media (max-width:760px){ .find-grid{ grid-template-columns:1fr; gap:36px; } }

  /* ---------- Contact / footer ---------- */
  footer{ background:var(--ink); color:var(--paper); padding:60px 0 30px; }
  footer .wrap{ text-align:center; }
  footer h2{ color:var(--paper); }
  footer .lede{ opacity:0.78; max-width:440px; margin:0 auto 28px; }
  .contact-row{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
  .contact-row a{
    text-decoration:none; border-bottom:1px solid rgba(246,241,228,0.4);
    padding-bottom:3px; font-size:1rem;
  }
  .contact-row a:hover{ border-bottom-color:var(--peach); color:var(--peach); }
  .fine{
    text-align:center; font-family:var(--font-stamp); font-size:0.68rem;
    letter-spacing:0.06em; opacity:0.5;
  }

  .hero{ text-align:left; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
  .hero .btn-row{ justify-content:flex-start; }
  .hero p.lede{ margin-left:0; }
  .hero-photo{ border:1px solid var(--line); padding:8px; background:var(--card-bg); }
  .hero-photo img{ width:100%; height:auto; }
  .card .photo{ aspect-ratio:4 / 5; }
  @media (max-width:800px){
    .hero{ text-align:center; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero .btn-row{ justify-content:center; }
    .hero p.lede{ margin-left:auto; }
  }


  .figuras-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
  .figuras-main{ border:1px solid var(--line); padding:8px; background:var(--card-bg); }
  .figuras-main img{ width:100%; height:auto; }
  .figuras-grid p{ max-width:54ch; }
  .tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
  .tiles figure{ margin:0; }
  .tiles img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--line-soft); }
  .tiles figcaption{ font-family:var(--font-stamp); font-size:0.65rem; letter-spacing:0.05em; text-align:center; margin-top:6px; opacity:0.75; }
  @media (max-width:800px){ .figuras-grid{ grid-template-columns:1fr; } }

  /* Paleta de marca: salvia, dorado de la llama, taupe y crema */
  :root{
    --paper:#FAF5EA; --paper-deep:#EEE8D7; --ink:#4A3C31;
    --cherry:#6B7A5E; --forest:#7D6A50; --gold:#C8963E; --peach:#E3C58A;
    --card-bg:#FFFCF5; --line:rgba(74,60,49,0.32); --line-soft:rgba(74,60,49,0.14);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#2A251E; --paper-deep:#201C16; --ink:#F3EBDA;
      --cherry:#A9B89A; --forest:#C9B590; --gold:#E0B25C; --peach:#E3C58A;
      --card-bg:#342E25; --line:rgba(243,235,218,0.32); --line-soft:rgba(243,235,218,0.14);
    }
  }
  :root[data-theme="dark"]{
    --paper:#2A251E; --paper-deep:#201C16; --ink:#F3EBDA;
    --cherry:#A9B89A; --forest:#C9B590; --gold:#E0B25C; --peach:#E3C58A;
    --card-bg:#342E25; --line:rgba(243,235,218,0.32); --line-soft:rgba(243,235,218,0.14);
  }
  .brandname{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--ink); white-space:nowrap; }
  .hero-logo-img{ width:150px; height:auto; margin:0 0 4px -8px; }
  .hero-title{ font-size:clamp(2.7rem, 6.5vw, 4.4rem); margin-bottom:8px; }
  .tagline{ font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--cherry); margin:0 0 18px; }
  .chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 28px; padding:0; }
  .chips span{ font-family:var(--font-stamp); font-size:0.7rem; letter-spacing:0.06em; border:1px solid var(--line); padding:4px 10px; }
  @media (max-width:800px){ .hero-logo-img{ margin:0 auto 4px; } .chips{ justify-content:center; } }
  @media (max-width:420px){ .brandname{ font-size:0.95rem; } }

  /* Paleta tomada del nuevo logo */
  @media (prefers-color-scheme: light){ :root{ --ink:#4F463E; --cherry:#6E7259; --forest:#716355; --gold:#D9A653; } }
  .brandmark img{ height:54px; }
  .hero-logo-img{ width:200px; margin-left:-4px; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .brandmark img, :root:not([data-theme="light"]) .hero-logo-img{ background:#FAF5EA; border-radius:14px; padding:6px; }
  }
  :root[data-theme="dark"] .brandmark img, :root[data-theme="dark"] .hero-logo-img{ background:#FAF5EA; border-radius:14px; padding:6px; }
  :root[data-theme="light"]{ --ink:#4F463E; --cherry:#6E7259; --forest:#716355; --gold:#D9A653; }

  .masonry{ column-width:220px; column-gap:12px; margin-top:24px; }
  .masonry img{ width:100%; height:auto; display:block; margin:0 0 12px; border:1px solid var(--line-soft); break-inside:avoid; }

  body.admin-bar header{ top:32px; }
  @media (max-width:782px){ body.admin-bar header{ top:46px; } }
