/*
Theme Name: Tu Propio Patrón
Theme URI: https://tupropiopatron.com
Description: GeneratePress child theme for Tu Propio Patrón — websites for construction subcontractors at $99/month flat.
Author: Tu Propio Patrón
Template: generatepress
Version: 1.0.0
Text Domain: tupropiopatron
*/

/* ==========================================================
   TU PROPIO PATRÓN — brand system
   Graphite + construction orange, hazard accents, hard shadows
   ========================================================== */
:root{
  --ink:#171a1f; --ink2:#232830; --paper:#faf7f2; --card:#ffffff;
  --orange:#ff5a1f; --orange-d:#e04a12; --amber:#ffb800;
  --dim:#5d6570; --line:#e7e1d8; --green:#1fa653; --wa:#25d366;
  --shadow:6px 6px 0 rgba(23,26,31,.9);
  --shadow-sm:4px 4px 0 rgba(23,26,31,.85);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.tpp{font-family:'Segoe UI',-apple-system,Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden;}
.tpp img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px;}
section{padding:70px 0;}
h1,h2,h3{letter-spacing:-.5px;}

.hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--amber) 0 16px,var(--ink) 16px 32px);}

/* header */
.tpp-head{background:var(--paper);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:90;}
.tpp-head .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;}
.wordmark{font-weight:900;font-size:20px;text-transform:uppercase;letter-spacing:.5px;line-height:1;}
.wordmark span{color:var(--orange);}
.wordmark small{display:block;font-size:10.5px;font-weight:700;color:var(--dim);letter-spacing:1.8px;margin-top:3px;}
.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.6px;font-size:15px;padding:14px 24px;border:3px solid var(--ink);border-radius:10px;box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .08s;}
.btn:hover{transform:translate(-1px,-1px);}
.btn:active{transform:translate(3px,3px);box-shadow:none;}
.btn.small{font-size:13px;padding:11px 18px;}
.btn.big{font-size:17px;padding:17px 30px;}
.btn.ghost{background:var(--card);color:var(--ink);}

/* hero */
.hero{position:relative;padding:72px 0 60px;background:var(--paper);}
.hero .wrap{max-width:860px;text-align:center;}
.eyebrow{display:inline-block;background:var(--ink);color:var(--amber);font-weight:800;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;padding:8px 16px;border-radius:6px;margin-bottom:22px;}
.hero h1{font-size:clamp(34px,7vw,58px);line-height:1.05;font-weight:900;text-transform:uppercase;}
.hero h1 .rot{color:var(--orange);border-bottom:6px solid var(--amber);white-space:nowrap;}
.hero .sub{font-size:clamp(16px,4vw,19px);color:var(--dim);max-width:600px;margin:20px auto 26px;}
.hero .sub b{color:var(--ink);}
.ticks{display:grid;gap:10px;max-width:480px;margin:0 auto 30px;text-align:left;}
.tick{display:flex;gap:11px;align-items:flex-start;font-weight:700;font-size:16px;}
.tick .c{flex:0 0 26px;height:26px;background:var(--green);color:#fff;border:2.5px solid var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;margin-top:1px;}
.wa-line{margin-top:14px;font-size:14.5px;color:var(--dim);}
.wa-line a{color:var(--green);font-weight:800;text-decoration:none;}

/* price card */
.pricewrap{padding-top:0;}
.pricecard{max-width:460px;margin:0 auto;background:var(--card);border:3px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.pricecard .top{background:var(--ink);color:#fff;text-align:center;padding:26px 20px 22px;}
.pricecard .amount{font-size:64px;font-weight:900;line-height:1;color:var(--amber);}
.pricecard .amount small{font-size:20px;color:#fff;font-weight:700;}
.pricecard .per{color:#c8cdd4;font-size:14px;margin-top:4px;}
.pricecard ul{list-style:none;padding:22px 26px;}
.pricecard li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-weight:600;font-size:15px;}
.pricecard li:last-child{border:none;}
.pricecard li em{font-style:normal;color:var(--orange);font-weight:900;}
.pricecard .foot{padding:0 26px 26px;text-align:center;}

/* templates */
.temps{background:var(--ink);color:#fff;}
.temps h2, .money h2{font-size:clamp(26px,6vw,38px);font-weight:900;text-transform:uppercase;text-align:center;}
.temps .sub2{color:#aeb6c0;text-align:center;max-width:560px;margin:12px auto 40px;}
.tgrid{display:grid;gap:24px;}
@media(min-width:820px){.tgrid{grid-template-columns:repeat(3,1fr);}}
.tcard{background:var(--card);color:var(--ink);border:3px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:6px 6px 0 rgba(255,90,31,.9);display:flex;flex-direction:column;}
.tcard .thumb{aspect-ratio:4/3;position:relative;overflow:hidden;background:#dfe3e8;}
.tcard .thumb iframe{position:absolute;top:0;left:0;width:1200px;height:1700px;border:0;transform-origin:0 0;pointer-events:none;}
.tcard .pad{padding:18px 20px 22px;text-align:center;}
.tcard h3{font-size:18px;font-weight:900;text-transform:uppercase;}
.tcard p{color:var(--dim);font-size:13.5px;margin:6px 0 14px;}

/* money */
.money{background:var(--paper);}
.money .grid{display:grid;gap:34px;align-items:center;max-width:920px;margin:0 auto;}
@media(min-width:860px){.money .grid{grid-template-columns:1fr 1fr;}}
.money .mathcard{background:var(--card);border:3px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:26px;}
.money .row{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px;}
.money .row:last-child{border:none;}
.money .row b{font-size:20px;font-weight:900;}
.money .bad b{color:#d92d20;}
.money .good b{color:var(--green);}
.money .note{font-size:13px;color:var(--dim);margin-top:10px;text-align:center;}
.money h2{text-align:left;}
.money p{color:var(--dim);margin-top:14px;font-size:16px;}
.money p b{color:var(--ink);}

/* features */
.feats{background:var(--card);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);}
.feats h2{font-size:clamp(26px,6vw,36px);font-weight:900;text-transform:uppercase;text-align:center;margin-bottom:38px;}
.fgrid{display:grid;gap:18px;}
@media(min-width:700px){.fgrid{grid-template-columns:repeat(3,1fr);}}
.feat{border:3px solid var(--ink);border-radius:12px;padding:20px;background:var(--paper);box-shadow:var(--shadow-sm);}
.feat .ic{font-size:26px;margin-bottom:10px;}
.feat b{display:block;font-size:16px;margin-bottom:4px;}
.feat span{color:var(--dim);font-size:13.5px;line-height:1.5;}

/* deal band */
.deal{background:var(--orange);border-bottom:3px solid var(--ink);}
.deal .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;color:#fff;}
.deal h2{font-size:clamp(24px,5.5vw,34px);font-weight:900;text-transform:uppercase;}
.deal .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.deal .tags span{background:rgba(0,0,0,.25);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;padding:6px 12px;border-radius:999px;}
.deal .btn{background:var(--ink);border-color:#fff;box-shadow:4px 4px 0 rgba(255,255,255,.8);}

/* faq */
.faq h2{font-size:clamp(26px,6vw,36px);font-weight:900;text-transform:uppercase;text-align:center;margin-bottom:30px;}
.faq .qs{max-width:660px;margin:0 auto;}
.faq details{background:var(--card);border:3px solid var(--ink);border-radius:12px;margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden;}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:800;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--orange);font-size:24px;font-weight:900;}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 20px 18px;color:var(--dim);font-size:14.5px;}

/* close */
.closeband{background:var(--ink);color:#fff;text-align:center;}
.closeband h2{font-size:clamp(28px,6.5vw,40px);font-weight:900;text-transform:uppercase;max-width:680px;margin:0 auto 14px;}
.closeband p{color:#aeb6c0;max-width:520px;margin:0 auto 26px;}

/* footer */
.tpp-foot{background:var(--ink);color:#8a93a0;border-top:1px solid rgba(255,255,255,.12);padding:26px 0 110px;text-align:center;font-size:13px;}
.tpp-foot a{color:#c8cdd4;}
@media(min-width:760px){.tpp-foot{padding-bottom:26px;}}

/* floating whatsapp + sticky cta */
.wa-fab{position:fixed;right:16px;bottom:86px;width:56px;height:56px;border-radius:50%;background:var(--wa);border:3px solid var(--ink);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:28px;text-decoration:none;z-index:99;}
@media(min-width:760px){.wa-fab{bottom:24px;}}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:rgba(250,247,242,.95);backdrop-filter:blur(8px);border-top:3px solid var(--ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:95;}
.sticky-cta .btn{display:block;text-align:center;max-width:560px;margin:0 auto;}
@media(min-width:760px){.sticky-cta{display:none;}}