/*
Theme Name: PB Floricultura e Buquê
Author: PB Floricultura
Description: Landing page de buquês preparada para WordPress, desktop e mobile.
Version: 1.0.0
Text Domain: pb-floricultura-buques
*/

  :root{
    --bg: #F7F5F2;
    --paper: #FFFFFF;
    --ink: #241A19;
    --ink-soft: #635250;
    --wine: #C0201A;
    --wine-deep: #8E1712;
    --blush: #EDE6E0;
    --blush-soft: #F1EBE5;
    --sage: #6E7550;
    --line: #E2DAD3;
    --radius: 6px;
    --maxw: 1180px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Karla', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Lora', serif;
    font-weight:600;
    color:var(--ink);
    margin:0;
  }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(251,245,242,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; max-width:var(--maxw); margin:0 auto;
  }
  .brand{
    font-family:'Lora', serif; font-style:italic; font-weight:500;
    font-size:clamp(1.05rem, 2.4vw, 1.35rem); letter-spacing:0.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .brand span{ font-style:normal; color:var(--wine); }
  .header-cta{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--wine); color:#fff; text-decoration:none;
    padding:11px 20px; border-radius:999px; font-size:0.92rem; font-weight:600;
    transition:background 0.2s ease;
    white-space:nowrap;
  }
  .header-cta:hover{ background:var(--wine-deep); }

  /* Hero */
  .hero{
    display:grid; grid-template-columns:1.05fr 0.95fr;
    align-items:center; gap:56px;
    padding:64px 32px 76px; max-width:var(--maxw); margin:0 auto;
  }
  .hero h1{
    font-size:clamp(2.1rem, 3.6vw, 3.1rem);
    line-height:1.18;
  }
  .hero h1 em{
    font-style:italic; color:var(--wine);
  }
  .hero p.lede{
    margin-top:22px; max-width:46ch;
    font-size:1.08rem; color:var(--ink-soft);
  }
  .delivery-note{
    margin-top:14px; font-size:0.92rem; color:var(--wine-deep); font-weight:600;
  }
  .hero-ctas{ margin-top:28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--wine); color:#fff; text-decoration:none;
    padding:15px 26px; border-radius:999px; font-weight:600; font-size:1rem;
    box-shadow:0 10px 24px -12px rgba(110,27,22,0.55);
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .btn-primary:hover{ background:var(--wine-deep); transform:translateY(-1px); }
  .btn-secondary{
    display:inline-flex; align-items:center; gap:9px;
    background:transparent; color:var(--wine); text-decoration:none;
    padding:14px 22px; border-radius:999px; font-weight:600; font-size:1rem;
    border:1.5px solid var(--wine);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .btn-secondary:hover{ background:var(--wine); color:#fff; }
  .hero-note{ display:block; margin-top:16px; font-size:0.88rem; color:var(--ink-soft); }
  .hero-figure{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    aspect-ratio:4/5;
  }
  .hero-figure img{ width:100%; height:100%; object-fit:cover; }
  .hero-figure::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(36,26,25,0) 55%, rgba(36,26,25,0.34) 100%);
  }
  .hero-tag{
    position:absolute; left:20px; bottom:20px; z-index:2;
    color:#fff; font-family:'Lora', serif; font-style:italic; font-size:1.05rem;
  }

  /* Intro strip */
  .intro-strip{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--blush-soft);
  }
  .intro-strip .wrap{
    display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
    padding:38px 32px;
  }
  .intro-item h3{ font-size:1.02rem; margin-bottom:6px; }
  .intro-item p{ margin:0; color:var(--ink-soft); font-size:0.94rem; }

  /* Catalog */
  .catalog{ padding:88px 32px 40px; max-width:var(--maxw); margin:0 auto; }
  .catalog-head{ max-width:56ch; margin-bottom:52px; }
  .catalog-head h2{ font-size:clamp(1.7rem, 2.6vw, 2.3rem); }
  .catalog-head p{ margin-top:14px; color:var(--ink-soft); font-size:1.02rem; }

  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px 24px;
  }
  .card{
    background:var(--paper);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    display:flex; flex-direction:column;
  }
  .card.tall{ grid-row: span 2; }
  .card-media{
    position:relative;
    overflow:hidden;
  }
  .card.tall .card-media{ aspect-ratio:3/4; }
  .card:not(.tall) .card-media{ aspect-ratio:4/3; }
  .card-media img{
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.5s ease;
  }
  .card:hover .card-media img{ transform:scale(1.04); }
  .card-body{
    padding:20px 22px 22px;
    display:flex; flex-direction:column; flex:1;
  }
  .card-body h3{ font-size:1.12rem; margin-bottom:8px; }
  .card-body p{
    margin:0 0 18px; color:var(--ink-soft); font-size:0.93rem;
    flex:1;
  }
  .card-cta{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--wine); text-decoration:none; font-weight:600; font-size:0.92rem;
    border-top:1px solid var(--line); padding-top:14px;
    transition:color 0.2s ease, gap 0.2s ease;
  }
  .card-cta:hover{ color:var(--wine-deep); gap:12px; }
  .card-cta svg{ flex-shrink:0; }

  /* Closing CTA */
  .closing{
    margin:88px 32px 0;
    max-width:var(--maxw); margin-left:auto; margin-right:auto;
    background:var(--wine);
    border-radius:calc(var(--radius) + 6px);
    padding:64px 48px;
    display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px;
    align-items:center;
    color:#fff;
  }
  .closing h2{ color:#fff; font-size:clamp(1.6rem, 2.4vw, 2.1rem); line-height:1.25; }
  .closing p{ color:#F3DCD6; margin-top:14px; max-width:44ch; }
  .closing-cta{ text-align:right; }
  .btn-light{
    display:inline-flex; align-items:center; gap:10px;
    background:#fff; color:var(--wine-deep); text-decoration:none;
    padding:16px 28px; border-radius:999px; font-weight:600; font-size:1rem;
    transition:transform 0.2s ease;
  }
  .btn-light:hover{ transform:translateY(-1px); }
  .closing-note{ margin-top:14px; font-size:0.86rem; color:#F3DCD6; }

  footer{
    padding:48px 32px 40px; text-align:center;
    color:var(--ink-soft); font-size:0.88rem;
  }
  footer .brand{ display:block; margin-bottom:6px; font-size:1.1rem; white-space:normal; overflow:visible; }

  @media (max-width: 900px){
    .hero{ grid-template-columns:1fr; padding-top:40px; }
    .hero-figure{ order:-1; aspect-ratio:5/4; }
    .intro-strip .wrap{ grid-template-columns:1fr; gap:22px; }
    .grid{ grid-template-columns:repeat(2,1fr); }
    .card.tall{ grid-row:auto; }
    .card.tall .card-media{ aspect-ratio:4/3; }
    .closing{ grid-template-columns:1fr; padding:44px 28px; text-align:left; }
    .closing-cta{ text-align:left; }
  }
  @media (max-width: 560px){
    .wrap, .hero, .catalog, .closing{ padding-left:20px; padding-right:20px; }
    .header-inner{ padding:14px 20px; }
    .grid{ grid-template-columns:1fr; }
    .header-cta span{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
    html{ scroll-behavior:auto; }
  }


/* WordPress + mobile hardening */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{margin:0}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit}
a[x-apple-data-detectors]{color:inherit!important;-webkit-text-fill-color:currentColor!important;text-decoration:none!important}
@media(max-width:900px){
  .hero{grid-template-columns:1fr!important;gap:28px!important}
  .hero-figure{order:-1!important;width:100%!important;aspect-ratio:5/4!important}
  .intro-strip .wrap{grid-template-columns:1fr!important}
  .closing{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .wrap,.hero,.catalog,.closing{padding-left:16px!important;padding-right:16px!important}
  .header-inner{padding:12px 16px!important;gap:10px!important}
  .brand{max-width:60vw!important;font-size:15px!important}
  .header-cta{padding:10px 13px!important}
  .hero{padding-top:28px!important;padding-bottom:52px!important;gap:24px!important}
  .hero h1{font-size:clamp(2rem,10vw,2.8rem)!important}
  .hero p.lede{font-size:1rem!important}
  .hero-ctas{flex-direction:column!important;align-items:stretch!important}
  .btn-primary,.btn-secondary{width:100%!important;justify-content:center!important;text-align:center!important;white-space:normal!important}
  .intro-strip .wrap{padding:30px 16px!important}
  .catalog{padding-top:58px!important;padding-bottom:24px!important}
  .catalog-head{margin-bottom:30px!important}
  .grid{grid-template-columns:1fr!important;gap:18px!important}
  .card,.card.tall{grid-row:auto!important}
  .card-media,.card.tall .card-media,.card:not(.tall) .card-media{aspect-ratio:4/3!important}
  .card-cta{min-height:44px!important;align-items:center!important}
  .closing{margin-top:56px!important;padding-top:38px!important;padding-bottom:38px!important}
  .closing-cta{text-align:left!important}
  .btn-light{width:100%!important;justify-content:center!important;text-align:center!important;white-space:normal!important}
  footer{padding-left:16px!important;padding-right:16px!important}
}
@media(max-width:390px){
  .header-cta{padding:9px 11px!important}
  .hero h1{font-size:1.95rem!important}
  .delivery-note,.hero-note{font-size:.84rem!important}
  .card-body{padding:16px!important}
}