/* ============================================================
   CANARIAS COCINA · Bloques Extra — K a P
   Librería de componentes adicionales lista para usar.
   NO incluida en ninguna página aún — importar cuando se necesite:
     <link rel="stylesheet" href="/assets/cc-blocks-extra.css">
   Depende de cc-brand.css (variables --serif, --accent, --ink, etc.)
   ============================================================ */

/* ─── K · cc-flotante ──────────────────────────────────────
   Imagen fondo full-width con texto flotando encima.
   Uso:
     <section class="section cc-flotante sub-reveal" data-bg="SLUG">
       <div class="cc-flotante-bg"></div>
       <div class="cc-flotante-in">
         <span class="cc-flotante-eye">Eyebrow</span>
         <h2 class="cc-flotante-h">Headline<br/>en dos líneas</h2>
         <p class="cc-flotante-sub">Subtítulo opcional.</p>
         <a href="#formulario" class="btn-gold">CTA</a>
       </div>
     </section>
   El data-bg lo resuelve cc-brand.js igual que el resto.
   ─────────────────────────────────────────────────────────── */
.cc-flotante {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 50vw, 580px);
  display: flex;
  align-items: center;
}
.cc-flotante-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transition: transform 14s ease-out;
}
.cc-flotante:hover .cc-flotante-bg { transform: scale(1.03); }
.cc-flotante::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,.18) 100%
  );
  pointer-events: none;
}
.cc-flotante-in {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(48px,7vw,88px) var(--pad);
}
.cc-flotante-eye {
  display: block;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.cc-flotante-h {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  line-height: 1.08;
  color: var(--cream);
  margin: 0 0 20px;
  max-width: 580px;
}
.cc-flotante-sub {
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  color: rgba(245,240,230,.65);
  max-width: 460px;
  margin: 0 0 32px;
  line-height: 1.65;
}

/* ─── L · cc-galeria ───────────────────────────────────────
   Cuadricula editorial de fotos.
   Modificadores: --tall (doble alto), --wide (doble ancho)
   ─────────────────────────────────────────────────────────── */
.cc-galeria.section { padding-left: 0; padding-right: 0; }
.cc-galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(220px, 24vw, 340px);
  gap: 4px;
}
.cc-galeria-item {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
.cc-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
  display: block;
}
.cc-galeria-item:hover img { transform: scale(1.05); }
.cc-galeria-item--tall  { grid-row: span 2; }
.cc-galeria-item--wide  { grid-column: span 2; }
.cc-galeria-cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
  color: var(--cream);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.cc-galeria-item:hover .cc-galeria-cap { opacity: 1; transform: translateY(0); }
@media(max-width: 768px) {
  .cc-galeria-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-galeria-item--wide { grid-column: span 1; }
}
@media(max-width: 480px) {
  .cc-galeria-grid { grid-template-columns: 1fr; }
  .cc-galeria-item--tall, .cc-galeria-item--wide { grid-row: span 1; grid-column: span 1; }
}

/* ─── M · cc-dato ──────────────────────────────────────────
   Cifra unica de impacto. Para animacion: data-count="200" class="cc-count"
   ─────────────────────────────────────────────────────────── */
.cc-dato.section { text-align: center; }
.cc-dato-in { max-width: 640px; margin: 0 auto; }
.cc-dato-num {
  display: block;
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(5rem, 18vw, 14rem);
  line-height: .88;
  color: var(--cream);
  letter-spacing: -.03em;
}
.cc-dato-unit {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--accent);
  font-size: .38em;
  letter-spacing: 0;
  vertical-align: super;
}
.cc-dato-label {
  display: block;
  font-size: clamp(.72rem, 1.1vw, .88rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245,240,230,.5);
  margin-top: 20px;
}
.cc-dato-desc {
  max-width: 420px;
  margin: 20px auto 0;
  font-size: clamp(.88rem, 1.3vw, 1rem);
  color: rgba(245,240,230,.55);
  line-height: 1.7;
}

/* ─── N · cc-comparativa ───────────────────────────────────
   Dos columnas: generico vs. la marca.
   ─────────────────────────────────────────────────────────── */
.cc-comparativa.section { padding-left: 0; padding-right: 0; }
.cc-comparativa-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.cc-comparativa-col {
  padding: clamp(28px, 4vw, 52px);
  background: var(--ink-2);
}
.cc-comparativa-col--highlight {
  background: var(--ink-3);
  border-top: 2px solid var(--accent);
}
.cc-comparativa-tag {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  color: rgba(245,240,230,.45);
  margin-bottom: 22px;
}
.cc-comparativa-col--highlight .cc-comparativa-tag {
  border-color: var(--accent);
  color: var(--accent);
}
.cc-comparativa-tit {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  color: var(--cream);
  margin: 0 0 24px;
  line-height: 1.2;
}
.cc-comparativa-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-comparativa-list li {
  font-size: .88rem;
  color: rgba(245,240,230,.55);
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}
.cc-comparativa-list li::before { content: "—"; position: absolute; left: 0; color: var(--line-soft); }
.cc-comparativa-col--highlight .cc-comparativa-list li { color: rgba(245,240,230,.75); }
.cc-comparativa-col--highlight .cc-comparativa-list li::before { content: "¹3"; color: var(--accent); }
@media(max-width: 640px) { .cc-comparativa-in { grid-template-columns: 1fr; } }

/* ─── O · cc-testimonial ───────────────────────────────────
   Cita de chef / restaurante.
   ─────────────────────────────────────────────────────────── */
.cc-testimonial.section { padding: clamp(56px,7vw,96px) var(--pad); }
.cc-testimonial-in { max-width: 720px; margin: 0 auto; text-align: center; }
.cc-testimonial-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  line-height: 1.55;
  color: var(--cream);
  font-style: italic;
  margin: 0 0 36px;
  quotes: none;
}
.cc-testimonial-quote::before { content: "\201C"; color: var(--accent); }
.cc-testimonial-quote::after  { content: "\201D"; color: var(--accent); }
.cc-testimonial-author { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.cc-testimonial-avatar {
  width: 52px; height: 52px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--accent); flex-shrink: 0;
}
.cc-testimonial-name { display: block; font-size: .9rem; color: var(--cream); font-weight: 500; letter-spacing: .04em; }
.cc-testimonial-role { display: block; font-size: .76rem; color: rgba(245,240,230,.48); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }

/* ─── P · cc-proceso-visual ────────────────────────────────
   Pasos horizontales conectados por linea. Usa --steps:N en style.
   ─────────────────────────────────────────────────────────── */
.cc-proceso-visual.section { overflow: hidden; }
.cc-proceso-visual-in { max-width: var(--max); margin: 0 auto; }
.cc-proceso-steps {
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), 1fr);
  position: relative;
  padding-top: 8px;
}
.cc-proceso-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(50% / var(--steps, 4));
  right: calc(50% / var(--steps, 4));
  height: 1px;
  background: var(--line-soft);
}
.cc-proceso-step { padding: 0 clamp(8px, 1.5vw, 20px); text-align: center; position: relative; }
.cc-proceso-num {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1rem;
  color: var(--accent);
  margin: 0 auto 20px;
  background: var(--ink);
  position: relative; z-index: 1;
  transition: background .3s, color .3s;
}
.cc-proceso-step:hover .cc-proceso-num { background: var(--accent); color: var(--ink); }
.cc-proceso-tit { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); margin: 0 0 8px; }
.cc-proceso-desc { font-size: .82rem; color: rgba(245,240,230,.5); line-height: 1.55; margin: 0; }
@media(max-width: 768px) {
  .cc-proceso-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .cc-proceso-steps::before { display: none; }
}
@media(max-width: 480px) { .cc-proceso-steps { grid-template-columns: 1fr; gap: 28px; } }

/* ─── UTILIDADES ANIMACION ──────────────────────────────────
   Usadas por cc-anim-plus.js
   ─────────────────────────────────────────────────────────── */
.sr-child {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.sr-child.sr-visible { opacity: 1; transform: none; }

.reveal-line-wrap { overflow: hidden; display: block; }
.reveal-line-inner {
  display: block;
  transform: translateY(108%);
  transition: transform .65s var(--ease);
}
.reveal-line-inner.rli-visible { transform: translateY(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(.93);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal-scale.sub-visible { opacity: 1; transform: scale(1); }

.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal-clip.sub-visible { clip-path: inset(0 0% 0 0); }