/*
Theme Name: PB Floricultura
Author: PB Floricultura
Description: Landing page de coroas de flores preparada para WordPress, desktop e mobile.
Version: 1.0.0
Text Domain: pb-floricultura
*/

  :root{
    --ink:#1F2A22;
    --ink-soft:#2B392F;
    --moss:#4A5D45;
    --parchment:#EFEAE0;
    --parchment-soft:#F6F3EC;
    --gold:#A9824C;
    --gold-soft:#C9A46B;
    --white:#FFFFFF;
    --ash:#7C7669;
    --whatsapp:#3E8E5B;
    --radius:14px;
    --max:1120px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Work Sans', sans-serif;
    background:var(--parchment);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    line-height:1.12;
    letter-spacing:-0.01em;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    opacity:0.75;
  }

  /* ---------- STICKY TOP BAR ---------- */
  .topbar{
    position:sticky; top:0; z-index:50;
    background:var(--ink);
    color:var(--parchment-soft);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .topbar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:12px; padding-bottom:12px; gap:16px;
  }
  .brand{
    font-family:'Fraunces', serif;
    font-size:19px;
    font-weight:600;
    letter-spacing:0.01em;
  }
  .brand span{color:var(--gold-soft);}
  .topbar-actions{display:flex; align-items:center; gap:10px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 18px;
    border-radius:999px;
    font-weight:600;
    font-size:14.5px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .btn:focus-visible{outline:2px solid var(--gold-soft); outline-offset:3px;}
  .btn-whatsapp{background:var(--whatsapp); color:#fff;}
  .btn-whatsapp:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(62,142,91,0.35);}
  .btn-call{background:transparent; color:var(--parchment-soft); border-color:rgba(255,255,255,0.28);}
  .btn-call:hover{border-color:var(--gold-soft); color:var(--gold-soft);}
  .btn-call-light{background:transparent; color:var(--ink); border-color:rgba(31,42,34,0.3);}
  .btn-call-light:hover{border-color:var(--ink);}
  .btn-sm{padding:9px 14px; font-size:13.5px;}
  .icon{width:16px; height:16px; flex-shrink:0;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--ink);
    color:var(--parchment-soft);
    overflow:hidden;
    padding:76px 0 88px;
  }
  .hero-photo{
    position:absolute;
    inset:0;
    z-index:0;
    background-size:cover;
    background-position:center 25%;
    filter:blur(3px) saturate(1.05) brightness(0.85);
    transform:scale(1.03);
  }
  .hero-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, rgba(31,42,34,0.97) 0%, rgba(31,42,34,0.94) 32%, rgba(31,42,34,0.72) 62%, rgba(31,42,34,0.5) 100%);
  }
  .hero-wreath{
    position:absolute;
    right:-120px; top:50%; transform:translateY(-50%);
    width:560px; height:560px;
    opacity:0.08;
    pointer-events:none;
    z-index:1;
  }
  .hero-inner{position:relative; z-index:2; max-width:640px;}
  .hero .eyebrow{color:var(--gold-soft); margin-bottom:18px;}
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--gold-soft);
    color:var(--ink);
    font-weight:700;
    font-size:14px;
    padding:10px 18px;
    border-radius:999px;
    margin-bottom:20px;
  }
  .hero-badge svg{width:16px; height:16px; flex-shrink:0;}
  .hero h1{
    font-size:clamp(32px, 4.6vw, 50px);
    margin-bottom:20px;
  }
  .hero p.lead{
    font-size:17.5px;
    color:rgba(239,234,224,0.82);
    max-width:520px;
    margin-bottom:32px;
  }
  .hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px;}
  .hero-ctas .btn{padding:14px 24px; font-size:15.5px;}
  .urgency-strip{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--gold-soft);
    border:1px solid rgba(201,164,107,0.35);
    padding:9px 16px;
    border-radius:999px;
  }
  .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-soft); flex-shrink:0;}

  /* ---------- TRUST STRIP ---------- */
  .trust{
    background:var(--parchment-soft);
    border-bottom:1px solid rgba(31,42,34,0.08);
  }
  .trust .wrap{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    padding:36px 24px;
  }
  .trust-item{
    text-align:center;
    padding:0 12px;
    border-left:1px solid rgba(31,42,34,0.1);
  }
  .trust-item:first-child{border-left:none;}
  .trust-item .num{
    font-family:'Fraunces', serif;
    font-size:26px;
    color:var(--moss);
    display:block;
    margin-bottom:4px;
  }
  .trust-item .lbl{font-size:13px; color:var(--ash);}

  /* ---------- SECTION SHARED ---------- */
  section{padding:76px 0;}
  .section-head{max-width:600px; margin-bottom:44px;}
  .section-head .eyebrow{color:var(--moss); margin-bottom:12px;}
  .section-head h2{font-size:clamp(26px, 3.2vw, 36px); color:var(--ink);}
  .section-head p{color:var(--ash); margin-top:12px; font-size:15.5px;}

  .divider-wreath{
    display:flex; justify-content:center; margin:0 auto;
    width:44px; height:44px; opacity:0.55; color:var(--moss);
  }

  /* ---------- MODELOS ---------- */
  .models-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  .info-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 14px;
    background:var(--parchment-soft);
    border:1px solid rgba(74,93,69,0.25);
    border-radius:999px;
    padding:12px 22px;
    margin-bottom:28px;
    font-size:14px;
    color:var(--moss);
  }
  .info-banner strong{color:var(--ink); font-weight:600;}
  .info-sep{color:var(--ash); opacity:0.6;}
  .model-card{
    background:var(--white);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid rgba(31,42,34,0.08);
    display:flex; flex-direction:column;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .model-card:hover{box-shadow:0 14px 30px rgba(31,42,34,0.1); transform:translateY(-3px);}
  .model-photo{
    aspect-ratio:1/1;
    background:var(--parchment-soft);
    display:flex; align-items:center; justify-content:center;
    padding:14px;
  }
  .model-photo img{width:100%; height:100%; object-fit:contain;}
  .model-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .model-body h3{font-size:17px; color:var(--ink); font-weight:500;}
  .model-price{
    font-family:'IBM Plex Mono', monospace;
    font-size:15px;
    color:var(--moss);
    font-weight:500;
  }
  .model-body p{font-size:13.5px; color:var(--ash); flex:1;}
  .model-body .btn{align-self:flex-start; margin-top:2px;}

  /* ---------- COMO FUNCIONA ---------- */
  .steps{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }
  .step{position:relative; padding-top:8px;}
  .step .step-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--gold);
    letter-spacing:0.08em;
    display:block;
    margin-bottom:14px;
  }
  .step h3{font-size:19px; margin-bottom:10px; color:var(--ink);}
  .step p{font-size:14.5px; color:var(--ash);}

  /* ---------- COBERTURA ---------- */
  .coverage-bg{background:var(--ink); color:var(--parchment-soft);}
  .coverage-bg .section-head h2{color:var(--parchment-soft);}
  .coverage-bg .section-head p{color:rgba(239,234,224,0.7);}
  .coverage-bg .eyebrow{color:var(--gold-soft);}
  .cities{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .city-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius);
    padding:26px 24px;
  }
  .city-card h3{font-family:'Fraunces', serif; font-size:20px; margin-bottom:10px; color:var(--gold-soft); font-weight:500;}
  .city-card p{font-size:14px; color:rgba(239,234,224,0.75);}

  /* ---------- FAQ ---------- */
  .faq-item{
    border-bottom:1px solid rgba(31,42,34,0.12);
  }
  .faq-q{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 4px;
    background:none; border:none;
    font-family:'Fraunces', serif;
    font-size:17px;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
  }
  .faq-q:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
  .faq-mark{
    flex-shrink:0; width:22px; height:22px;
    color:var(--gold);
    transition:transform .25s ease;
  }
  .faq-item.open .faq-mark{transform:rotate(45deg);}
  .faq-a{
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .faq-item.open .faq-a{max-height:200px;}
  .faq-a p{padding:0 4px 20px; font-size:14.5px; color:var(--ash); max-width:640px;}

  /* ---------- CTA FINAL ---------- */
  .cta-final{
    background:var(--ink);
    color:var(--parchment-soft);
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .cta-final .wrap{position:relative; z-index:2;}
  .cta-final h2{font-size:clamp(26px,3.6vw,38px); max-width:600px; margin:0 auto 16px;}
  .cta-final p{color:rgba(239,234,224,0.75); max-width:480px; margin:0 auto 30px; font-size:15.5px;}
  .cta-final .hero-ctas{justify-content:center;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--parchment-soft); border-top:1px solid rgba(31,42,34,0.1); padding:36px 0;}
  footer .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;}
  .footer-brand{font-family:'Fraunces', serif; font-size:16px; color:var(--ink);}
  .footer-meta{font-size:13px; color:var(--ash);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:900px){
    .trust .wrap{grid-template-columns:repeat(2,1fr); gap:24px 0;}
    .trust-item:nth-child(3){border-left:none;}
    .models-grid{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:1fr; gap:32px;}
    .cities{grid-template-columns:1fr;}
    .hero-wreath{width:380px; height:380px; right:-160px;}
  }
  @media (max-width:560px){
    .topbar .brand{font-size:16px;}
    .btn-call span.full{display:none;}
    .models-grid{grid-template-columns:1fr 1fr; gap:14px;}
    .hero{padding:56px 0 64px;}
    section{padding:56px 0;}
    .model-body .btn{
      width:100%;
      justify-content:center;
      white-space:normal;
      text-align:center;
      font-size:12.5px;
      padding:10px 8px;
      line-height:1.25;
    }
    .model-body{padding:14px 14px 16px;}
    .model-body h3{font-size:15.5px;}
  }

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

/* 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:560px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  .topbar .wrap{gap:8px!important}
  .topbar-actions{gap:7px!important}
  .topbar .btn{min-width:0}
  .hero{padding-top:48px!important;padding-bottom:56px!important}
  .hero h1{font-size:clamp(30px,10vw,42px)!important}
  .hero p.lead{font-size:16px!important}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .urgency-strip{width:100%;justify-content:center;border-radius:12px;text-align:center}
  .trust .wrap{grid-template-columns:1fr 1fr!important;gap:22px 0!important}
  .models-grid{grid-template-columns:1fr!important;gap:18px!important}
  .model-photo{aspect-ratio:4/3!important}
  .model-body .btn{width:100%;justify-content:center}
  .info-banner{border-radius:14px!important;text-align:center}
  .cities{grid-template-columns:1fr!important}
  .cta-final .hero-ctas{flex-direction:column}
  footer .wrap{flex-direction:column;align-items:flex-start!important}
}
@media (max-width:390px){
  .brand{font-size:15px!important}
  .btn-sm{padding:9px 11px!important;font-size:12.5px!important}
  .hero h1{font-size:29px!important}
  .trust .wrap{grid-template-columns:1fr!important}
  .trust-item{border-left:none!important;border-top:1px solid rgba(31,42,34,.1);padding-top:16px}
  .trust-item:first-child{border-top:none;padding-top:0}
}