/*
Theme Name: R & M Cielos Americanos
Theme URI: https://rymcielosamericanos.cl
Author: FlowCode AI
Description: Tema de bloques a medida para R & M Cielos Americanos — especialistas en cielos americanos, perfilería e iluminación LED en la zona sur de Chile. Diseño arquitectónico premium (grafito + dorado LED).
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: rym
*/

/* ============================================================
   R&M — Custom front-end styles (bespoke components)
   ============================================================ */

:root{
  --rym-ink:#0E1417;
  --rym-graphite:#161F24;
  --rym-bone:#FFFFFF;
  --rym-mist:#F4F6F8;
  --rym-cloud:#FFFFFF;
  --rym-steel:#6E7E86;
  --rym-gold:#D7A23C;
  --rym-amber:#ECC06A;
  --rym-line:rgba(255,255,255,.10);
  --rym-line-dark:rgba(14,20,23,.10);
}

html{ scroll-behavior:smooth; overflow-x:clip; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }

/* ---- Selection & focus ---- */
::selection{ background:var(--rym-gold); color:var(--rym-ink); }
a{ text-underline-offset:3px; }

/* ---- Ceiling-grid background (dark sections) ---- */
.rym-grid-bg{ position:relative; isolation:isolate; }
.rym-grid-bg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(14,20,23,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,20,23,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%, #000 35%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 70% 10%, #000 35%, transparent 78%);
}
/* warm LED glow */
.rym-glow{ position:relative; isolation:isolate; overflow:hidden; }
.rym-glow::after{
  content:""; position:absolute; z-index:-1; width:46rem; height:46rem; top:-16rem; right:-10rem;
  background:radial-gradient(closest-side, rgba(215,162,60,.20), rgba(215,162,60,0) 70%);
  pointer-events:none;
}

/* ---- Eyebrow / kicker ---- */
.rym-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rym-gold);
}
.rym-eyebrow::before{
  content:""; width:26px; height:2px; background:var(--rym-gold); display:inline-block;
}

/* ---- Buttons polish ---- */
.wp-block-button__link{ transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.wp-block-button__link:hover{ transform:translateY(-2px); }
.rym-btn-gold .wp-block-button__link{ box-shadow:0 10px 30px -12px rgba(215,162,60,.7); }
.rym-btn-gold .wp-block-button__link:hover{ box-shadow:0 16px 40px -12px rgba(215,162,60,.85); }

/* ---- Header ---- */
.rym-announce{ background:#FBF6EC; color:#6E5A33; border-bottom:1px solid rgba(190,131,28,.18); }
.rym-announce p{ margin:0; font-size:.8rem; letter-spacing:.02em; }
.rym-announce .rym-dot{ color:var(--rym-gold); }
.rym-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rym-line-dark);
}
.rym-logo{ text-decoration:none; display:inline-flex; align-items:center; gap:.7rem; }
.rym-logo .mark{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--rym-ink),#26333a);
  color:var(--rym-amber); font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.05rem;
  box-shadow:inset 0 0 0 1px rgba(236,192,106,.35);
}
.rym-logo .name{ line-height:1.05; }
.rym-logo .name strong{
  display:block; font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:1.05rem; letter-spacing:.01em; color:var(--rym-ink);
}
.rym-logo .name span{
  display:block; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--rym-steel);
}
.rym-bar{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; position:relative; }
.rym-bar-right{ display:flex; align-items:center; gap:.9rem; }
.rym-nav{ display:flex; align-items:center; gap:1.6rem; }
.rym-nav a{
  text-decoration:none; color:var(--rym-graphite); font-weight:500; font-size:.96rem;
  position:relative; padding:.2rem 0;
}
.rym-nav a:hover{ color:var(--rym-ink); }
.rym-nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--rym-gold); transition:width .2s ease;
}
.rym-nav a:hover::after{ width:100%; }
.rym-nav-cta{
  display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap;
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.95rem;
  background:var(--rym-gold); color:var(--rym-ink); padding:.6rem 1.25rem; border-radius:11px;
  box-shadow:0 10px 26px -14px rgba(215,162,60,.8); transition:transform .18s ease, box-shadow .18s ease;
}
.rym-nav-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(215,162,60,.9); }
.rym-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:.45rem; border-radius:9px; }
.rym-burger span{ width:26px; height:2px; background:var(--rym-ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }

@media(max-width:900px){
  .rym-burger{ display:flex; }
  .rym-nav{
    position:absolute; top:calc(100% + .7rem); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--rym-bone); padding:.25rem 1.25rem 1rem;
    border-top:1px solid var(--rym-line-dark); border-bottom:1px solid var(--rym-line-dark);
    box-shadow:0 24px 36px -22px rgba(14,20,23,.45);
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease;
  }
  .rym-nav a{ padding:.95rem .2rem; border-bottom:1px solid var(--rym-line-dark); font-size:1.02rem; }
  .rym-nav a:last-child{ border-bottom:0; }
  .rym-menu-toggle:checked ~ .rym-nav{ transform:none; opacity:1; pointer-events:auto; }
  .rym-menu-toggle:checked ~ .rym-bar-right .rym-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .rym-menu-toggle:checked ~ .rym-bar-right .rym-burger span:nth-child(2){ opacity:0; }
  .rym-menu-toggle:checked ~ .rym-bar-right .rym-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media(max-width:420px){
  .rym-logo .name span{ display:none; }
  .rym-nav-cta{ padding:.55rem 1rem; }
}

/* ---- Stat band ---- */
.rym-stat .num{
  font-family:"Space Grotesk",sans-serif; font-weight:700; line-height:1;
  font-size:clamp(2.4rem,5vw,3.4rem); color:var(--rym-ink);
}
.rym-stat .num::after{ content:""; display:block; width:34px; height:3px; background:var(--rym-gold); border-radius:3px; margin:.7rem auto 0; }
.rym-stat .lbl{ color:var(--rym-steel); font-size:.92rem; margin-top:.5rem; }

/* ---- Product cards ---- */
.rym-prod{ position:relative; overflow:hidden; border-radius:18px; background:var(--rym-cloud);
  border:1px solid var(--rym-line-dark); box-shadow:0 1px 2px rgba(14,20,23,.04), 0 16px 32px -22px rgba(14,20,23,.18);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; height:100%; }
.rym-prod:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(14,20,23,.45); border-color:rgba(215,162,60,.5); }
.rym-prod .wp-block-image{ margin:0; overflow:hidden; aspect-ratio:16/9; background:#fff; }
/* Source product images are 500x250 banners with a baked-in blue title + wave.
   Zoom into the centre to show only the clean material swatch. */
.rym-prod .wp-block-image img{ width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.82); transform-origin:center 58%; transition:transform .6s ease; display:block; }
.rym-prod:hover .wp-block-image img{ transform:scale(1.92); }
.rym-prod .rym-prod-body{ padding:1.15rem 1.25rem 1.35rem; }
.rym-prod h3{ font-size:1.08rem; margin:0 0 .35rem; color:var(--rym-ink); }
.rym-prod p{ margin:0 0 .85rem; color:var(--rym-steel); font-size:.92rem; line-height:1.5; }
.rym-prod .rym-consult{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem;
  color:var(--rym-ink); text-decoration:none;
}
.rym-prod .rym-consult span{ color:var(--rym-gold); transition:transform .2s ease; }
.rym-prod:hover .rym-consult span{ transform:translateX(4px); }
.rym-prod .rym-tag{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  background:rgba(14,20,23,.78); color:#fff; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px; backdrop-filter:blur(4px);
}

/* ---- Feature / beneficio cards ---- */
.rym-feature{ height:100%; border:1px solid var(--rym-line-dark); border-radius:16px; padding:1.5rem 1.4rem;
  background:var(--rym-cloud); box-shadow:0 1px 2px rgba(14,20,23,.04), 0 14px 30px -22px rgba(14,20,23,.16);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.rym-feature:hover{ box-shadow:0 1px 2px rgba(14,20,23,.04), 0 22px 44px -24px rgba(14,20,23,.26); }
.rym-feature:hover{ border-color:rgba(215,162,60,.55); transform:translateY(-4px); }
.rym-feature .ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem;
  background:rgba(215,162,60,.12); color:var(--rym-gold); margin-bottom:1rem; }
.rym-feature h3{ font-size:1.05rem; margin:0 0 .4rem; color:var(--rym-ink); }
.rym-feature p{ margin:0; color:var(--rym-steel); font-size:.92rem; line-height:1.55; }

/* ---- Process steps ---- */
.rym-step{ position:relative; padding-top:.5rem; }
.rym-step .n{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:2.6rem; color:var(--rym-gold);
  line-height:1; }
.rym-step h3{ font-size:1.08rem; margin:.6rem 0 .4rem; color:var(--rym-ink); }
.rym-step p{ margin:0; color:var(--rym-steel); font-size:.92rem; line-height:1.55; }

/* ---- Brand logos ---- */
.rym-brand img{ height:42px !important; width:auto !important; object-fit:contain;
  filter:grayscale(1) contrast(.9) opacity(.7); transition:filter .25s ease; }
.rym-brand:hover img{ filter:grayscale(0) opacity(1); }

/* ---- Gallery / obras ---- */
.rym-obra{ overflow:hidden; border-radius:14px; background:#0E1417; }
.rym-obra img{ width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.7); transform-origin:center 58%; transition:transform .55s ease; display:block; }
.rym-obra:hover img{ transform:scale(1.8); }
/* hero / team images are clean full photos — no zoom crop */
.rym-obra:first-child img{ transform:scale(1.02); transform-origin:center; object-position:center; }
.rym-obra:first-child:hover img{ transform:scale(1.08); }

/* ---- Framed hero image ---- */
.rym-hero-frame{ position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(14,20,23,.10);
  box-shadow:0 34px 70px -38px rgba(14,20,23,.40); }
.rym-hero-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.rym-chip{
  position:absolute; bottom:1rem; left:1rem; display:flex; align-items:center; gap:.7rem;
  background:rgba(14,20,23,.72); backdrop-filter:blur(8px); border:1px solid var(--rym-line);
  padding:.7rem .95rem; border-radius:14px; color:#fff;
}
.rym-chip b{ font-family:"Space Grotesk",sans-serif; font-size:1.4rem; color:var(--rym-amber); line-height:1; }
.rym-chip small{ display:block; font-size:.72rem; color:#C7D2D8; letter-spacing:.04em; }

/* ---- Page hero band (inner pages) ---- */
.rym-pagehero{ position:relative; }
.rym-pagehero h1{ color:var(--rym-ink); }

/* ---- Contact form ---- */
.rym-form{ display:grid; gap:.9rem; }
.rym-form label{ font-size:.82rem; font-weight:600; color:var(--rym-graphite); display:block; margin-bottom:.35rem; letter-spacing:.01em; }
.rym-form input, .rym-form textarea, .rym-form select{
  width:100%; padding:.8rem .9rem; border:1px solid rgba(14,20,23,.16); border-radius:11px;
  font:inherit; font-size:.95rem; background:#fff; color:var(--rym-ink); transition:border-color .15s ease, box-shadow .15s ease;
}
.rym-form input:focus, .rym-form textarea:focus, .rym-form select:focus{
  outline:none; border-color:var(--rym-gold); box-shadow:0 0 0 3px rgba(215,162,60,.18);
}
.rym-form .rym-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.rym-form button{
  appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; letter-spacing:.02em;
  background:var(--rym-gold); color:var(--rym-ink); padding:.95rem 1.4rem; border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 12px 30px -14px rgba(215,162,60,.8);
}
.rym-form button:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(215,162,60,.9); }
@media(max-width:600px){ .rym-form .rym-row{ grid-template-columns:1fr; } }

/* ---- Contact info rows ---- */
.rym-info a{ color:inherit; text-decoration:none; }
.rym-info .it{ display:flex; gap:.85rem; align-items:flex-start; padding:.85rem 0; border-bottom:1px solid var(--rym-line-dark); }
.rym-info .it .ico{ width:40px; height:40px; flex:0 0 40px; border-radius:10px; display:grid; place-items:center;
  background:rgba(215,162,60,.14); color:var(--rym-gold); font-size:1.15rem; }
.rym-info .it b{ display:block; color:var(--rym-ink); font-size:.96rem; }
.rym-info .it span{ color:var(--rym-steel); font-size:.9rem; }

/* ---- Footer ---- */
.rym-footer{ border-top:1px solid rgba(14,20,23,.10); }
.rym-footer a{ color:var(--rym-graphite); text-decoration:none; }
.rym-footer a:hover{ color:var(--rym-gold); }

/* ---- Grid helpers (used inside wp:html blocks) ---- */
.rym-grid{ display:grid; gap:1.4rem; }
.rym-grid-4{ grid-template-columns:repeat(4,1fr); }
.rym-grid-3{ grid-template-columns:repeat(3,1fr); }
.rym-grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:1000px){ .rym-grid-4{ grid-template-columns:repeat(2,1fr); } .rym-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .rym-grid-4,.rym-grid-3,.rym-grid-2{ grid-template-columns:1fr; } }

.rym-obra-grid{ display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; }
.rym-obra-grid .rym-obra:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.rym-obra-grid .rym-obra:nth-child(6){ grid-column:span 2; }
@media(max-width:900px){ .rym-obra-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } .rym-obra-grid .rym-obra:nth-child(1){ grid-column:span 2; } .rym-obra-grid .rym-obra:nth-child(6){ grid-column:span 1; } }

.rym-brandrow{ display:flex; flex-wrap:wrap; gap:2.4rem 3.2rem; align-items:center; justify-content:center; }
.rym-brand{ display:inline-flex; }

.rym-checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.rym-checklist li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--rym-graphite); font-size:1rem; line-height:1.5; }
.rym-checklist li::before{ content:"✓"; color:var(--rym-gold); font-weight:700; flex:0 0 auto; margin-top:.05rem; }

/* ============================================================
   Catálogo (CPT producto / linea / obra)
   ============================================================ */
/* Línea overview cards (page Productos) */
.rym-linea-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(4,1fr); }
@media(max-width:1000px){ .rym-linea-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .rym-linea-grid{ grid-template-columns:1fr; } }
.rym-linea{ position:relative; display:flex; flex-direction:column; text-decoration:none; border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid var(--rym-line-dark);
  box-shadow:0 1px 2px rgba(14,20,23,.04), 0 14px 30px -22px rgba(14,20,23,.16);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.rym-linea:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -24px rgba(14,20,23,.26); border-color:rgba(215,162,60,.5); }
.rym-linea-ph{ display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:#F1F3F5; }
.rym-linea-ph img{ width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.82); transform-origin:center 58%; transition:transform .5s ease; display:block; }
.rym-linea:hover .rym-linea-ph img{ transform:scale(1.92); }
.rym-linea-body{ padding:1rem 1.2rem 1.25rem; background:#fff; }
.rym-linea-body small{ color:var(--rym-gold); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.rym-linea-body h3{ color:var(--rym-ink); font-size:1.12rem; margin:.3rem 0 0; }
.rym-linea-body .go{ display:inline-flex; gap:.4rem; margin-top:.6rem; font-size:.88rem; font-weight:600; color:var(--rym-ink); }
.rym-linea-body .go span{ color:var(--rym-gold); transition:transform .2s ease; }
.rym-linea:hover .go span{ transform:translateX(4px); }

/* Producto cards (línea archive / query loop).
   WP envuelve los items en .wp-block-post-template DENTRO del .wp-block-query,
   así que la grilla va en el post-template, no en el wrapper. */
.rym-cat-grid .wp-block-post-template{
  display:grid !important; gap:1.4rem; grid-template-columns:repeat(4,1fr);
  margin:0; padding:0; list-style:none;
}
.rym-cat-grid .wp-block-post-template > li{ list-style:none; margin:0; }
.rym-cat-grid .rym-pcard{ height:100%; }
@media(max-width:1100px){ .rym-cat-grid .wp-block-post-template{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .rym-cat-grid .wp-block-post-template{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .rym-cat-grid .wp-block-post-template{ grid-template-columns:1fr; } }
.rym-pcard{ border:1px solid var(--rym-line-dark); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(14,20,23,.04), 0 14px 30px -22px rgba(14,20,23,.16);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.rym-pcard:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(14,20,23,.4); border-color:rgba(215,162,60,.5); }
.rym-pcard a{ text-decoration:none; color:inherit; display:block; }
.rym-pcard .ph{ aspect-ratio:1/1; overflow:hidden; background:#F1F3F5; }
.rym-pcard .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.rym-pcard:hover .ph img{ transform:scale(1.06); }
.rym-pcard .bd{ padding:.9rem 1rem 1.1rem; }
.rym-pcard .bd h3{ font-size:1rem; margin:0; color:var(--rym-ink); line-height:1.25; }
.rym-pcard .bd .meta{ display:block; margin-top:.5rem; font-size:.8rem; color:var(--rym-gold); font-weight:600; }

/* Query-loop versions (WP post-template) */
.wp-block-post-template.rym-cat-grid{ margin:0; padding:0; }
.rym-cat-grid li{ list-style:none; margin:0; }

/* Single producto */
.rym-spec-title{ font-size:1.3rem; margin:2rem 0 1rem; }
.rym-spec-wrap{ overflow-x:auto; border:1px solid var(--rym-line-dark); border-radius:14px; }
.rym-spec-table{ width:100%; border-collapse:collapse; font-size:.94rem; background:#fff; }
.rym-spec-table th, .rym-spec-table td{ text-align:left; padding:.8rem 1.1rem; vertical-align:top; border-bottom:1px solid var(--rym-line-dark); }
.rym-spec-table th{ width:38%; color:var(--rym-graphite); font-weight:600; background:#F4F6F8; font-family:"Space Grotesk",sans-serif; }
.rym-spec-table td{ color:#4A565C; }
.rym-spec-table tr:last-child th, .rym-spec-table tr:last-child td{ border-bottom:0; }
/* En teléfonos, apilar etiqueta sobre valor (evita cortes feos de palabras largas) */
@media(max-width:560px){
  .rym-spec-table, .rym-spec-table tbody, .rym-spec-table tr, .rym-spec-table th, .rym-spec-table td{ display:block; width:auto; }
  .rym-spec-table tr{ border-bottom:1px solid var(--rym-line-dark); padding:.2rem 0; }
  .rym-spec-table tr:last-child{ border-bottom:0; }
  .rym-spec-table th{ background:transparent; border:0; padding:.7rem 1.1rem .1rem; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--rym-steel); }
  .rym-spec-table td{ border:0; padding:.1rem 1.1rem .7rem; font-size:1rem; color:var(--rym-ink); }
}
.rym-prod-intro{ font-size:1.08rem; color:#4A565C; line-height:1.65; }
.rym-spec-note{ margin-top:1.4rem; padding:1.2rem 1.4rem; border-radius:14px; background:#F4F6F8;
  border:1px solid var(--rym-line-dark); border-left:4px solid var(--rym-gold); color:#4A565C; font-size:.96rem; line-height:1.55; }
.rym-spec-note strong{ color:var(--rym-ink); }

/* Reveal on scroll */
.rym-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.rym-reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .rym-reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }