/*
Theme Name: Pet Content
Theme URI: https://petcontent.com
Author: Pet Content
Author URI: https://petcontent.com
Description: Tema a medida para Pet Content — productora de contenido audiovisual potenciado por AI para marcas de mascotas. Landing "Contenido que mueve colitas" con soporte para WordPress y WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pet-content
Tags: custom-colors, custom-menu, featured-images, translation-ready, e-commerce
WC requires at least: 6.0
WC tested up to: 9.0
*/

:root{
  --orange:#F25C22;
  --orange-2:#F17818;
  --brand-deep:#A8380A;
  --orange-text:#D6480F;
  --ink:#1A1A18;
  --ink-70:rgba(26,26,24,.7);
  --paper:#F3ECE1;
  --paper-hi:#FBF8F1;
  --green:#A1CBAA;
  --lav:#AC9FEF;
  --line:rgba(26,26,24,.14);
  --shadow:0 18px 40px -22px rgba(26,26,24,.45);
  --r-lg:30px; --r-md:20px; --r-sm:14px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Nunito Sans",system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:"Fredoka","Nunito Sans",sans-serif; font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.hand{font-family:"Caveat",cursive; font-weight:700; color:var(--orange-text); font-size:1.5rem; line-height:1}
.eyebrow{font-family:"Nunito Sans"; font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; color:var(--brand-deep)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:"Fredoka"; font-weight:600;
  font-size:1.02rem; padding:.85em 1.5em; border-radius:100px; border:2px solid var(--ink);
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s; background:var(--ink); color:var(--paper-hi)}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(26,26,24,.6)}
.btn.orange{background:var(--orange); border-color:var(--ink); color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:rgba(26,26,24,.06)}

/* ---------- site header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
.site-header.stuck{border-color:var(--line); box-shadow:0 8px 24px -20px rgba(26,26,24,.5)}
body.admin-bar .site-header{top:32px}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center; gap:11px}
.brand .mark{width:42px; height:42px; flex:none}
.brand-logo{height:50px; width:auto; display:block}
.brand .custom-logo{height:50px; width:auto; display:block}
.brand-logo-foot{height:44px; width:auto; display:block; flex:none}
.brand .name{font-family:"Fredoka"; font-weight:700; font-size:1.4rem; line-height:1}
.brand .name b{color:var(--orange-text); font-weight:700}
.menu{display:flex; align-items:center; gap:34px}
.menu a.lnk{font-weight:600; font-size:.98rem; position:relative; padding:4px 0}
.menu a.lnk::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--orange); border-radius:2px; transition:right .25s}
.menu a.lnk:hover::after{right:0}
.menu .btn{display:none}
.navbtns{display:flex; align-items:center; gap:14px}
.cart-link{display:inline-flex; align-items:center; gap:6px; font-family:"Fredoka"; font-weight:600; font-size:.95rem; color:var(--ink)}
.cart-count{background:var(--orange); color:var(--ink); border:1.5px solid var(--ink); border-radius:100px; padding:0 .5em; font-size:.78rem; min-width:1.6em; text-align:center}
.burger{display:none; width:44px; height:44px; border:2px solid var(--ink); border-radius:12px; background:none; cursor:pointer; align-items:center; justify-content:center}
.burger span,.burger span::before,.burger span::after{content:""; display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative}
.burger span::before{position:absolute; top:-6px}.burger span::after{position:absolute; top:6px}

/* ---------- hero ---------- */
.hero{position:relative; padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.15rem,7vw,5.2rem); font-weight:700; overflow-wrap:break-word}
.hero-grid > div{min-width:0}
.hero h1 .col{position:relative; color:var(--orange-text); white-space:nowrap}
.hero h1 .col svg{position:absolute; left:-2%; right:-2%; bottom:-.18em; width:104%; height:.4em}
.hero .lead{font-size:1.2rem; color:var(--ink-70); margin:22px 0 6px; max-width:30ch}
.checks{list-style:none; padding:0; margin:22px 0 30px; display:grid; gap:12px}
.checks li{display:flex; align-items:flex-start; gap:12px; font-weight:500}
.checks .tick{flex:none; width:26px; height:26px; border-radius:50%; background:var(--green); display:grid; place-items:center; margin-top:1px}
.checks .tick svg{width:14px; height:14px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-note{display:flex; align-items:center; gap:8px; margin-top:24px}
.hero-note .hand{font-size:1.35rem}

/* hero visual card */
.showcard{position:relative}
.showcard .frame{position:relative; background:var(--ink); border-radius:var(--r-lg); aspect-ratio:4/5;
  overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--ink)}
.showcard .frame .scene{position:absolute; inset:0; background:
   radial-gradient(120% 90% at 70% 15%, rgba(242,92,34,.35), transparent 55%),
   radial-gradient(90% 80% at 15% 90%, rgba(172,159,239,.4), transparent 60%),
   var(--ink)}
.bigmark{position:absolute; inset:0; display:grid; place-items:center}
.bigmark svg,.bigmark img{width:min(62%,230px); height:auto}
.play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%;
  background:var(--paper-hi); display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.6); cursor:pointer;
  transition:transform .2s}
.play:hover{transform:translate(-50%,-50%) scale(1.07)}
.play::after{content:""; width:0; height:0; margin-left:5px; border-left:20px solid var(--orange); border-top:12px solid transparent; border-bottom:12px solid transparent}
.frame .tag{position:absolute; left:18px; bottom:18px; background:rgba(251,248,241,.92); color:var(--ink);
  font-family:"Fredoka"; font-weight:600; font-size:.9rem; padding:.4em .9em; border-radius:100px}
.frame .rec{position:absolute; right:18px; top:18px; display:flex; align-items:center; gap:7px; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.12em}
.frame .rec i{width:9px; height:9px; border-radius:50%; background:#ff5b5b; display:block}
.sticker{position:absolute; z-index:3; background:var(--orange); color:var(--ink); font-family:"Fredoka"; font-weight:600;
  padding:.7em 1.1em; border-radius:18px; box-shadow:var(--shadow); font-size:.95rem; line-height:1.05; text-align:center; border:2px solid var(--ink)}
.sticker.tl{top:-22px; left:-26px; transform:rotate(-8deg); background:var(--lav); color:var(--ink)}
.sticker.br{bottom:-20px; right:-22px; transform:rotate(7deg)}
.paw{position:absolute; opacity:.9; z-index:1}
.p1{top:8%; right:-30px}.p2{bottom:16%; left:-34px}

/* ---------- marquee ---------- */
.marquee{background:var(--ink); color:var(--paper-hi); overflow:hidden; padding:16px 0; margin-top:34px;
  transform:rotate(-1.4deg) scale(1.03); border-top:3px solid var(--orange); border-bottom:3px solid var(--orange)}
.marquee .track{display:flex; gap:44px; white-space:nowrap; width:max-content; animation:scroll 26s linear infinite}
.marquee span{font-family:"Fredoka"; font-weight:600; font-size:1.15rem; display:flex; align-items:center; gap:44px}
.marquee .dot{color:var(--orange); font-size:1.4rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- section base ---------- */
section{position:relative}
.sec{padding:96px 0}
.sec-head{max-width:640px; margin-bottom:52px}
.sec-head.center{margin:0 auto 56px; text-align:center}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.1rem); margin-top:12px}
.sec-head p{color:var(--ink-70); font-size:1.12rem; margin-top:16px}

/* value icons row (identity) */
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.value{background:var(--paper-hi); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 24px; transition:transform .18s, box-shadow .18s}
.value:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.vhead{display:flex; align-items:center; gap:13px; margin-bottom:12px}
.vico{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center}
.value:nth-child(1) .vico{background:rgba(242,92,34,.15)}
.value:nth-child(2) .vico{background:rgba(172,159,239,.24)}
.value:nth-child(3) .vico{background:rgba(255,120,120,.18)}
.value:nth-child(4) .vico{background:rgba(161,203,170,.32)}
.value h3{font-size:1.08rem; line-height:1.15}
.value p{font-size:.95rem; color:var(--ink-70)}

/* intro / showreel split */
.intro-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.reel{display:flex; flex-direction:column; align-items:center; gap:16px}
.reel-frame{position:relative; width:100%; background:linear-gradient(150deg,var(--lav),var(--green)); border-radius:var(--r-lg);
  aspect-ratio:16/11; overflow:hidden; border:3px solid var(--ink); box-shadow:var(--shadow)}
.reel-frame .inner{position:absolute; inset:0; display:grid; place-items:center; background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 45%)}
.stat-row{display:flex; gap:38px; margin-top:30px; flex-wrap:wrap}
.stat b{font-family:"Fredoka"; font-weight:700; font-size:2.3rem; display:block; color:var(--orange-text); line-height:1}
.stat span{font-size:.9rem; color:var(--ink-70); font-weight:600}

/* benefits 3-col */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.bcard{background:var(--paper-hi); border:2px solid var(--ink); border-radius:var(--r-md); padding:32px 28px; transition:transform .18s}
.bcard:hover{transform:translateY(-6px)}
.bcard .num{font-family:"Caveat"; font-weight:700; font-size:2.6rem; color:var(--orange-text); line-height:.7}
.bcard h3{font-size:1.4rem; margin:14px 0 10px}
.bcard p{color:var(--ink-70); font-size:1rem}

/* packages */
.pkg-wrap{background:var(--ink); border-radius:40px; padding:70px 44px; color:var(--paper-hi); position:relative; overflow:hidden}
.pkg-wrap .glow{position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(80px); opacity:.35}
.pkg-wrap .g1{background:var(--orange); top:-160px; right:-120px}
.pkg-wrap .g2{background:var(--lav); bottom:-200px; left:-120px}
.pkg-head{text-align:center; max-width:600px; margin:0 auto 48px; position:relative}
.pkg-head h2{font-size:clamp(2rem,4vw,2.9rem)}
.pkg-head p{color:rgba(243,236,225,.72); margin-top:14px}
.pkgs{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative}
.pkg{position:relative; background:var(--paper-hi); color:var(--ink); border-radius:var(--r-md); padding:34px 28px; display:flex; flex-direction:column; transition:transform .2s}
.pkg:hover{transform:translateY(-6px)}
.pkg.pop{background:var(--orange); color:var(--ink); transform:scale(1.04)}
.pkg.pop:hover{transform:scale(1.04) translateY(-6px)}
.ribbon{position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:"Fredoka"; font-weight:600; font-size:.74rem; letter-spacing:.05em;
  background:var(--ink); color:#fff; padding:.42em 1.05em; border-radius:100px; white-space:nowrap; box-shadow:var(--shadow)}
.pkg h3{font-family:"Fredoka"; font-size:1.7rem}
.pkg .price{font-family:"Fredoka"; font-weight:700; font-size:2.7rem; margin:10px 0 2px; line-height:1}
.pkg .price small{font-size:1rem; font-weight:500; opacity:.7}
.pkg .desc{font-size:.96rem; margin:12px 0 20px; opacity:.85}
.pkg ul{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:11px; font-size:.94rem}
.pkg li{display:flex; gap:9px; align-items:flex-start}
.pkg li svg{flex:none; margin-top:3px}
.pkg .btn{width:100%; justify-content:center; margin-top:auto}
.pkg.pop .btn{background:var(--ink); color:var(--paper-hi); border-color:var(--ink)}

/* advantages 4-up */
.adv{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.acard{padding:30px 24px; border-radius:var(--r-md); color:var(--ink)}
.acard:nth-child(1){background:var(--orange); color:var(--ink)}
.acard:nth-child(2){background:var(--lav)}
.acard:nth-child(3){background:var(--green)}
.acard:nth-child(4){background:var(--ink); color:var(--paper-hi)}
.ahead{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.acard .aico{flex:none; width:42px;height:42px;border-radius:50%;background:rgba(26,26,24,.14);display:grid;place-items:center}
.acard:nth-child(4) .aico{background:rgba(243,236,225,.18)}
.acard h3{font-size:1.22rem}
.acard p{font-size:.94rem; opacity:.92}

/* contact */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start}
.contact-copy h2{font-size:clamp(2rem,4vw,3rem)}
.contact-copy p{color:var(--ink-70); margin-top:16px; font-size:1.1rem}
.contact-copy .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.chip{background:var(--paper-hi); border:1px solid var(--line); border-radius:100px; padding:.5em 1em; font-weight:600; font-size:.9rem; display:flex; gap:8px; align-items:center}
.petform{background:var(--paper-hi); border:2px solid var(--ink); border-radius:var(--r-lg); padding:36px; box-shadow:var(--shadow)}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600; font-size:.86rem}
.field label i{color:var(--brand-deep); font-style:normal}
.field input,.field textarea{font-family:inherit; font-size:1rem; padding:.8em .95em; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,92,34,.16)}
.field textarea{resize:vertical; min-height:96px}
.petform .btn{width:100%; justify-content:center; margin-top:6px}
.formok{display:none; text-align:center; padding:14px; background:rgba(161,203,170,.35); border-radius:12px; font-weight:600; margin-bottom:16px}

/* ---------- site footer ---------- */
.site-footer{background:var(--ink); color:var(--paper-hi); padding:70px 0 34px; margin-top:20px}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(243,236,225,.16)}
.foot-brand .name{font-family:"Fredoka"; font-weight:700; font-size:1.5rem}
.foot-brand .name b{color:var(--orange)}
.foot-brand p{color:rgba(243,236,225,.7); margin-top:14px; max-width:34ch}
.foot-brand .gpgc{font-family:"Caveat"; font-weight:700; font-size:1.6rem; color:var(--green); margin-top:20px; display:inline-flex; gap:8px; align-items:center}
.fcol h3{font-family:"Fredoka"; font-weight:600; font-size:1.05rem; margin:0 0 16px}
.fcol a{display:block; color:rgba(243,236,225,.72); padding:6px 0; transition:color .15s}
.fcol a:hover{color:var(--orange)}
.foot-bot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:26px; font-size:.85rem; color:rgba(243,236,225,.6)}

/* scroll reveal */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  .marquee .track{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- generic content (pages, posts, WooCommerce) ---------- */
.page-wrap{padding:64px 0 80px; min-height:40vh}
.page-wrap .page-title{font-size:clamp(2rem,4vw,3rem); margin-bottom:24px}
.entry-content{max-width:760px; margin:0 auto}
.entry-content > *{margin-bottom:1.1em}
.entry-content a{color:var(--orange-text); text-decoration:underline; text-underline-offset:2px}
.entry-content h2,.entry-content h3{margin:1.4em 0 .5em}
.entry-content img{border-radius:var(--r-md)}

/* light-touch harmony for WooCommerce buttons so the shop matches the brand */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  background:var(--ink); color:var(--paper-hi); border-radius:100px; font-family:"Fredoka",sans-serif; font-weight:600; border:2px solid var(--ink)}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{background:#000}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt{
  background:var(--orange); color:var(--ink); border-color:var(--ink)}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{background:var(--orange-2)}
.woocommerce span.onsale{background:var(--orange); color:var(--ink); border-radius:100px}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info{border-top-color:var(--orange)}
.woocommerce ul.products li.product .price{color:var(--orange-text)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:56px}
  .showcard{max-width:420px; margin:0 auto}
  .intro-grid,.contact-grid{grid-template-columns:1fr; gap:40px}
  .values{grid-template-columns:repeat(2,1fr)}
  .adv{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .menu{position:fixed; inset:74px 0 auto 0; background:var(--paper); flex-direction:column; gap:0; padding:10px 24px 26px;
    border-bottom:1px solid var(--line); transform:translateY(-140%); transition:transform .3s; box-shadow:var(--shadow)}
  .menu.open{transform:none}
  body.admin-bar .menu{top:120px}
  .menu a.lnk{padding:14px 0; width:100%; border-bottom:1px solid var(--line)}
  .menu .btn{display:inline-flex; margin-top:16px; width:100%; justify-content:center}
  .burger{display:flex}
  .navbtns .btn.desktop{display:none}
  .cards3,.pkgs{grid-template-columns:1fr}
  .pkg.pop{transform:none}.pkg.pop:hover{transform:translateY(-6px)}
  .sec{padding:70px 0}
  .frow{grid-template-columns:1fr}
  .pkg-wrap{padding:48px 22px}
}
@media(max-width:782px){
  body.admin-bar .site-header{top:46px}
}
@media(max-width:480px){
  .values,.adv{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
}


/* =======================================================
   IDENTIDAD GLOBAL PET CONTENT — coherencia en todas las secciones
   ======================================================= */

/* Logo: tamaño correcto por encima de CSS de WooCommerce/plugins */
.site-header .brand .brand-logo,
.site-header .brand .custom-logo,
.site-header .brand img{height:50px !important; width:auto !important; max-width:230px !important}

/* Tipografia de marca en TODO el contenido (paginas, tienda, cuenta, checkout) */
.page-wrap, .page-wrap p, .page-wrap li, .page-wrap td, .page-wrap th, .page-wrap label,
.woocommerce, .woocommerce p, .woocommerce li, .woocommerce td, .woocommerce th, .woocommerce label,
.woocommerce input, .woocommerce select, .woocommerce textarea, .woocommerce button{
  font-family:"Nunito Sans", system-ui, sans-serif}
.page-wrap h1,.page-wrap h2,.page-wrap h3,.page-wrap h4,.page-wrap h5,
.woocommerce h1,.woocommerce h2,.woocommerce h3,.woocommerce h4,
.woocommerce-account h1,.woocommerce-account h2,.woocommerce-account h3{
  font-family:"Fredoka","Nunito Sans",sans-serif !important; letter-spacing:-.01em}

/* Enlaces de contenido en naranja de marca */
.page-wrap a:not(.button):not(.btn):not(.wp-block-button__link){color:var(--orange-text)}

/* Aire y contenedor consistentes (UX) */
.page-wrap{padding-top:56px; padding-bottom:88px}
.woocommerce .woocommerce-breadcrumb{color:var(--ink-70); margin-bottom:22px}

/* Botones WooCommerce = pildoras de marca */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce #place_order,
.woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button{
  font-family:"Fredoka",sans-serif !important; font-weight:600 !important;
  border-radius:100px !important; border:2px solid var(--ink) !important;
  padding:.8em 1.6em !important; transition:transform .16s ease, box-shadow .16s ease, background .16s}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{background:var(--ink) !important; color:var(--paper-hi) !important}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover{
  transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(26,26,24,.6)}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order,
.woocommerce #respond input#submit.alt, .wc-block-components-button{
  background:var(--orange) !important; color:var(--ink) !important; border-color:var(--ink) !important}

/* Campos de formulario (checkout, cuenta, registro) al estilo del landing */
.woocommerce form .input-text, .woocommerce input[type="text"], .woocommerce input[type="email"],
.woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"],
.woocommerce textarea, .woocommerce select, .page-wrap input[type="text"],
.page-wrap input[type="email"], .page-wrap textarea{
  border:1.5px solid var(--line) !important; border-radius:12px !important;
  padding:.72em .9em !important; background:#fff !important; color:var(--ink) !important;
  font-family:"Nunito Sans",sans-serif !important}
.woocommerce form .input-text:focus, .woocommerce input:focus,
.woocommerce textarea:focus, .woocommerce select:focus{
  outline:none !important; border-color:var(--orange) !important;
  box-shadow:0 0 0 3px rgba(242,92,34,.16) !important}

/* Precios y ofertas en color de marca */
.woocommerce .price, .woocommerce span.amount, .woocommerce .woocommerce-Price-amount{color:var(--orange-text)}
.woocommerce span.onsale{background:var(--orange); color:var(--ink); border-radius:100px}

/* Tablas, cajas y avisos redondeados y de marca */
.woocommerce table.shop_table, .woocommerce .cart_totals table,
.woocommerce ul.order_details, .woocommerce-account .woocommerce-MyAccount-content{border-radius:var(--r-md)}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error{
  border-top:3px solid var(--orange) !important; border-radius:var(--r-sm); background:var(--paper-hi)}
.woocommerce .quantity .qty{border-radius:10px; border:1.5px solid var(--line)}

/* Titulos de producto en Fredoka */
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Fredoka",sans-serif !important}


/* Video de entrada en la tarjeta del hero */
.frame video.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.frame .rec, .frame .tag{z-index:2}


/* Video demo en la seccion Proyectos */
.reel-frame video.reel-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:var(--ink)}
.reel .tag{z-index:2}