/*
Theme Name: Códigos Control Remoto Universal
Theme URI: https://codigosremoto.com/
Author: codigosremoto.com
Description: Tema minimalista para codigosremoto.com. Cabecera oscura, acento rojo, tipografía Open Sans clara. Optimizado para artículos Gutenberg de códigos de control remoto universal y para las páginas dinámicas generadas por el plugin "Encontrar mi código".
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codigosremoto
Tags: minimal, technical, dark-header, custom-menu, custom-logo, footer-widgets, blog, two-columns
*/

/* ========================================================
   1. RESET & VARIABLES
   ======================================================== */
:root {
	--ccr-bg:           #ffffff;
	--ccr-bg-soft:      #f8fafc;
	--ccr-text:         #0f172a;
	--ccr-text-soft:    #475569;
	--ccr-text-dim:     #94a3b8;
	--ccr-border:       #e2e8f0;
	--ccr-border-soft:  #f1f5f9;
	--ccr-accent:       #fe0000;
	--ccr-accent-dark:  #cc0000;
	--ccr-nav-bg:       #0f172a;
	--ccr-nav-text:     #f1f5f9;
	--ccr-nav-text-dim: #94a3b8;
	--ccr-code-bg:      #f1f5f9;

	--ccr-font:         "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ccr-font-mono:    "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

	--ccr-radius:       6px;
	--ccr-radius-lg:    10px;

	--ccr-width:        1280px;
	--ccr-width-narrow: 820px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--ccr-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ccr-text);
	background: var(--ccr-bg);
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a {
	color: var(--ccr-accent-dark);
	text-decoration: none;
	transition: color .15s ease;
}
a:hover { color: var(--ccr-text); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.3;
	color: var(--ccr-text);
	margin: 1.6em 0 .6em;
}
h1 { font-size: 2rem; margin-top: 0; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

code, pre, kbd {
	font-family: var(--ccr-font-mono);
	font-size: .92em;
	background: var(--ccr-code-bg);
	padding: .15em .4em;
	border-radius: 4px;
}
pre {
	padding: 1em;
	overflow-x: auto;
	line-height: 1.5;
}
pre code { background: transparent; padding: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--ccr-border);
	margin: 2rem 0;
}

/* ========================================================
   2. LAYOUT CONTAINERS
   ======================================================== */
.ccr-container {
	max-width: var(--ccr-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}
.ccr-container-narrow {
	max-width: var(--ccr-width-narrow);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* ========================================================
   3. HEADER (dark nav)
   ======================================================== */
.ccr-site-header {
	background: var(--ccr-nav-bg);
	color: var(--ccr-nav-text);
	border-bottom: 1px solid #1e293b;
}
.ccr-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 1.5rem;
}

.ccr-site-branding a {
	color: var(--ccr-nav-text);
	font-weight: 600;
	font-size: 1.15rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}
.ccr-site-branding a:hover { color: var(--ccr-accent); }

/* Custom logo image: cap at 50px height, scale width proportionally */
.ccr-site-branding .custom-logo,
.ccr-site-branding img.custom-logo {
	max-height: 50px;
	width: auto;
	height: auto;
	display: block;
}
.ccr-site-branding .custom-logo-link { display: inline-block; line-height: 0; }

.ccr-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--ccr-accent);
	color: var(--ccr-nav-bg);
	border-radius: var(--ccr-radius);
	font-weight: 700;
	font-size: .85rem;
	font-family: var(--ccr-font-mono);
}

/* Main nav */
.ccr-main-nav ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}
.ccr-main-nav a {
	color: var(--ccr-nav-text);
	font-size: .95rem;
	text-decoration: none;
}
.ccr-main-nav a:hover,
.ccr-main-nav .current-menu-item a { color: var(--ccr-accent); }

.ccr-main-nav .sub-menu {
	display: none;
	position: absolute;
	background: #1e293b;
	padding: .5rem 0;
	border-radius: var(--ccr-radius);
	min-width: 180px;
	margin-top: .5rem;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ccr-main-nav li { position: relative; }
.ccr-main-nav li:hover > .sub-menu { display: block; }
.ccr-main-nav .sub-menu li { display: block; }
.ccr-main-nav .sub-menu a {
	display: block;
	padding: .4rem 1rem;
	font-size: .9rem;
}

/* Mobile menu toggle */
.ccr-menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--ccr-nav-text-dim);
	color: var(--ccr-nav-text);
	padding: .4rem .7rem;
	border-radius: var(--ccr-radius);
	cursor: pointer;
	font-size: .9rem;
}

@media (max-width: 768px) {
	.ccr-menu-toggle { display: inline-block; }
	.ccr-main-nav { display: none; flex-basis: 100%; }
	.ccr-main-nav.is-open { display: block; }
	.ccr-main-nav ul {
		flex-direction: column;
		gap: 0;
		padding: .5rem 0 1rem;
	}
	.ccr-main-nav li { width: 100%; }
	.ccr-main-nav a { display: block; padding: .6rem 0; border-bottom: 1px solid #1e293b; }
	.ccr-main-nav .sub-menu {
		display: block;
		position: static;
		background: transparent;
		padding: 0 0 0 1rem;
		box-shadow: none;
	}
	.ccr-header-inner { flex-wrap: wrap; }
}

/* ========================================================
   4. HERO (front-page)
   ======================================================== */
.ccr-hero {
	background: var(--ccr-bg-soft);
	padding: 3.5rem 0 2.5rem;
	border-bottom: 1px solid var(--ccr-border);
	text-align: center;
}
.ccr-hero h1 {
	font-size: 2.2rem;
	margin: 0 0 .5rem;
	letter-spacing: -.01em;
}
.ccr-hero p {
	color: var(--ccr-text-soft);
	font-size: 1.05rem;
	max-width: 600px;
	margin: 0 auto 1.5rem;
}
.ccr-hero-stats {
	display: inline-flex;
	gap: 1rem;
	margin-top: 1rem;
	font-size: .9rem;
	color: var(--ccr-text-dim);
	font-family: var(--ccr-font-mono);
}
.ccr-hero-stats strong { font-weight: 600; }

/* ========================================================
   5. PAGE/POST CONTENT
   ======================================================== */
.ccr-main { padding: 2.5rem 0 3.5rem; }

.ccr-article header h1 {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}
.ccr-article-meta {
	color: var(--ccr-text-dim);
	font-size: .9rem;
	margin-top: -1rem;
	margin-bottom: 2rem;
}
.ccr-article-meta a { color: var(--ccr-text-soft); }

/* Always provide breathing room between the title and the first content block */
.ccr-article > .ccr-content > *:first-child {
	margin-top: 0;
}
.ccr-article header + .ccr-content {
	margin-top: 1rem;
}

.ccr-content > * { max-width: var(--ccr-width-narrow); margin-left: auto; margin-right: auto; }
.ccr-content > .alignwide { max-width: 900px; }
.ccr-content > .alignfull { max-width: none; margin-left: 0; margin-right: 0; }

.ccr-content ul, .ccr-content ol { padding-left: 1.4em; }
.ccr-content li { margin: .25em 0; }
.ccr-content blockquote {
	padding: .25rem 0 .25rem 1.25rem;
	color: var(--ccr-text-soft);
	font-style: italic;
	margin: 1.5rem 0;
	border-left: 3px solid var(--ccr-border);
}
.ccr-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 1.5rem 0;
	font-size: .95rem;
}
.ccr-content th, .ccr-content td {
	border: 1px solid var(--ccr-border);
	padding: .55rem .8rem;
	text-align: left;
}
.ccr-content th { background: var(--ccr-bg-soft); font-weight: 600; }

/* Plugin codes display (dynamic pages /codigos-control-remoto-universal-tv-samsung/)
   The plugin outputs paragraphs like:
   <p><strong>Códigos de N dígitos :</strong> 0854, 1037, …</p>
   We give them a discreet light background to make the codes block stand out,
   but no red on strong, no monospace, and bold words elsewhere stay inline. */
.emc-codes-content p {
	background: var(--ccr-bg-soft);
	padding: .8rem 1rem;
	border-radius: var(--ccr-radius);
	margin: .6rem 0;
	font-size: .95rem;
	line-height: 1.7;
}
.emc-codes-content p > strong:first-child {
	display: block;
	margin-bottom: .25rem;
	font-weight: 700;
}
/* Inline strong tags (not the first child) must stay inline */
.emc-codes-content p strong:not(:first-child) {
	display: inline;
	margin: 0;
	font-weight: 700;
}

/* ========================================================
   6. POST LIST (index, search results, archive)
   ======================================================== */
.ccr-post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.ccr-post-card {
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius-lg);
	padding: 1.25rem 1.5rem;
	transition: border-color .15s ease;
}
.ccr-post-card:hover { border-color: var(--ccr-accent); }
.ccr-post-card h2 {
	margin: 0 0 .35rem;
	font-size: 1.25rem;
}
.ccr-post-card h2 a { color: var(--ccr-text); }
.ccr-post-card h2 a:hover { color: var(--ccr-accent-dark); }
.ccr-post-card-meta {
	color: var(--ccr-text-dim);
	font-size: .85rem;
	margin-bottom: .5rem;
}
.ccr-post-card-excerpt {
	color: var(--ccr-text-soft);
	font-size: .95rem;
	margin: 0;
}

/* Pagination */
.ccr-pagination {
	margin-top: 2.5rem;
	display: flex;
	gap: .5rem;
	justify-content: center;
	flex-wrap: wrap;
}
.ccr-pagination a, .ccr-pagination span {
	padding: .5rem .9rem;
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius);
	color: var(--ccr-text-soft);
	font-size: .9rem;
	text-decoration: none;
}
.ccr-pagination .current {
	background: var(--ccr-accent);
	border-color: var(--ccr-accent);
	color: #fff;
}
.ccr-pagination a:hover { border-color: var(--ccr-accent); color: var(--ccr-text); }

/* ========================================================
   7. FOOTER
   ======================================================== */
.ccr-site-footer {
	background: var(--ccr-nav-bg);
	color: var(--ccr-nav-text-dim);
	padding: 2rem 0 1.5rem;
	margin-top: 4rem;
	font-size: .9rem;
}
.ccr-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	margin-bottom: 1.5rem;
}
.ccr-footer-widgets h3 {
	color: var(--ccr-nav-text);
	font-size: .95rem;
	margin: 0 0 .75rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.ccr-footer-widgets ul { list-style: none; padding: 0; margin: 0; }
.ccr-footer-widgets li { margin: .25rem 0; }
.ccr-footer-widgets a { color: var(--ccr-nav-text-dim); }
.ccr-footer-widgets a:hover { color: var(--ccr-accent); }
.ccr-footer-bottom {
	border-top: 1px solid #1e293b;
	padding-top: 1rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
}
.ccr-footer-bottom a { color: var(--ccr-nav-text-dim); }
.ccr-footer-bottom a:hover { color: var(--ccr-accent); }

/* ========================================================
   8. SEARCH FORM (WordPress core)
   ======================================================== */
.search-form {
	display: flex;
	gap: .5rem;
	max-width: 500px;
}
.search-form label { flex: 1; }
.search-form .search-field {
	width: 100%;
	padding: .55rem .75rem;
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius);
	font-size: .95rem;
	font-family: var(--ccr-font);
}
.search-form .search-field:focus {
	outline: none;
	border-color: var(--ccr-accent);
	box-shadow: 0 0 0 3px rgba(254, 0, 0, .15);
}
.search-form .search-submit {
	padding: .55rem 1rem;
	background: var(--ccr-accent);
	color: #fff;
	border: 0;
	border-radius: var(--ccr-radius);
	cursor: pointer;
	font-weight: 600;
	font-size: .95rem;
}
.search-form .search-submit:hover { background: var(--ccr-accent-dark); }

/* ========================================================
   9. 404 PAGE
   ======================================================== */
.ccr-404 {
	text-align: center;
	padding: 4rem 1rem;
}
.ccr-404 h1 {
	font-size: 4rem;
	color: var(--ccr-accent);
	margin: 0;
	font-family: var(--ccr-font-mono);
}
.ccr-404 p { color: var(--ccr-text-soft); max-width: 500px; margin: .5rem auto 1.5rem; }

/* ========================================================
   10. GUTENBERG ALIGNMENTS
   ======================================================== */
.alignleft  { float: left;  margin: .25rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .25rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1rem auto; }
.wp-block-image figcaption {
	font-size: .85rem;
	color: var(--ccr-text-dim);
	text-align: center;
	margin-top: .25rem;
}

/* Sticky helpers */
.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
}
.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	color: var(--ccr-text);
	display: block;
	font-size: .9rem;
	padding: 1rem;
	position: absolute;
	top: 5px; left: 5px;
	z-index: 100000;
}

/* ========================================================
   12. GUTENBERG TABLE BLOCK
   ======================================================== */
.wp-block-table {
	margin: 1.5rem 0 2rem;
}
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	background: var(--ccr-bg);
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius);
	overflow: hidden;
}
.wp-block-table thead {
	background: var(--ccr-nav-bg);
}
.wp-block-table thead th {
	color: var(--ccr-nav-text);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .8rem;
	letter-spacing: .04em;
	padding: .75rem 1rem;
	text-align: left;
	border: 0;
}
.wp-block-table tbody td {
	padding: .7rem 1rem;
	border-top: 1px solid var(--ccr-border-soft);
	vertical-align: middle;
}
.wp-block-table tbody tr:hover {
	background: var(--ccr-bg-soft);
}
.wp-block-table tbody tr:nth-child(even) {
	background: rgba(241, 245, 249, .35);
}
.wp-block-table tbody tr:nth-child(even):hover {
	background: var(--ccr-bg-soft);
}

/* Links inside the table - clear call-to-action style */
.wp-block-table tbody td a {
	color: var(--ccr-accent-dark);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
.wp-block-table tbody td a:hover {
	border-bottom-color: var(--ccr-accent-dark);
	color: var(--ccr-accent-dark);
	text-decoration: none;
}

/* Striped variant from Gutenberg */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--ccr-bg-soft);
}

/* Captions */
.wp-block-table figcaption {
	color: var(--ccr-text-dim);
	font-size: .85rem;
	text-align: center;
	margin-top: .5rem;
}

/* Responsive: scroll horizontally on small screens */
@media (max-width: 600px) {
	.wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.wp-block-table table { min-width: 480px; }
}

/* ========================================================
   17. HOME PAGE — Gutenberg full control layout
   ========================================================
   The home page template uses a single full-width main column.
   - Default blocks: centered with max-width 1280px and 1.5rem side padding
   - alignwide blocks: same centering but with max-width 1440px
   - alignfull blocks: edge-to-edge, full viewport width
   - Columns block: use it (70/30) to create a "content + sidebar" layout
   ======================================================== */

.ccr-main-home {
	padding: 0;
}

.ccr-main-home .ccr-content > * {
	max-width: var(--ccr-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
}

.ccr-main-home .ccr-content > .alignwide {
	max-width: 1440px;
}

.ccr-main-home .ccr-content > .alignfull {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Standard spacing between top-level blocks on the home */
.ccr-main-home .ccr-content > * + * {
	margin-top: 1.25rem;
}

/* Hero and FAQ are full-width sections, no top margin if first/last */
.ccr-main-home .ccr-content > .alignfull:first-child {
	margin-top: 0;
}

/* ===== Hero (Group block with class "ccr-hero-group" + alignfull) ===== */

.ccr-hero-group {
	background: var(--ccr-bg-soft);
	padding: 3rem 1.5rem 2.5rem !important;
	border-bottom: 1px solid var(--ccr-border);
	text-align: center;
	margin-bottom: 2.5rem !important;
}

/* Center the hero's children in a max-width column even though
   the group itself is full-width */
.ccr-hero-group > * {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ccr-hero-group h1 {
	font-size: 2.2rem;
	font-weight: 700;
	margin: 0 0 .5rem !important;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.ccr-hero-group > p {
	color: var(--ccr-text-soft);
	font-size: 1.05rem;
	margin: 0 auto 1.5rem !important;
}

.ccr-hero-group > p:last-of-type {
	font-size: .9rem;
	color: var(--ccr-text-dim);
	font-family: var(--ccr-font-mono);
	margin-top: 1.25rem !important;
	margin-bottom: 0 !important;
}

.ccr-hero-group .emc-search-container {
	background: #ffffff !important;
	border: 1px solid var(--ccr-border) !important;
	border-radius: var(--ccr-radius-lg) !important;
	padding: 1.25rem 1.5rem !important;
	max-width: 720px;
	margin: 0 auto !important;
}

.ccr-hero-group .emc-search-title,
.ccr-hero-group .emc-search-description {
	display: none;
}

/* ===== "Content + sidebar" Columns block ===== */
/* When you add a Columns block on the home to recreate a sidebar layout,
   the sidebar column should look nice. The thinner column gets sidebar styling
   when you add the class "ccr-sidebar-col" to it. */

.ccr-sidebar-col {
	font-size: .95rem;
}
.ccr-sidebar-col > * + * {
	margin-top: 1.25rem;
}

/* Style nested groups inside the sidebar column as widget boxes */
.ccr-sidebar-col .wp-block-group,
.ccr-sidebar-col > .wp-block-list,
.ccr-sidebar-col > .wp-block-heading + ul {
	background: var(--ccr-bg-soft);
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius-lg);
	padding: 1.25rem 1.5rem;
}

.ccr-sidebar-col h2,
.ccr-sidebar-col h3 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--ccr-accent);
	display: inline-block;
}

.ccr-sidebar-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ccr-sidebar-col li {
	padding: .35rem 0;
	border-bottom: 1px solid var(--ccr-border-soft);
}
.ccr-sidebar-col li:last-child { border-bottom: 0; }
.ccr-sidebar-col li a {
	color: var(--ccr-text);
	text-decoration: none;
}
.ccr-sidebar-col li a:hover {
	color: var(--ccr-accent-dark);
}

/* ===== FAQ section (Group block with class "ccr-faq-group" + alignfull) ===== */

.ccr-faq-group {
	background: var(--ccr-bg-soft);
	padding: 3rem 1.5rem !important;
	border-top: 1px solid var(--ccr-border);
	margin-top: 3rem !important;
	margin-bottom: 0 !important;
}

.ccr-faq-group > * {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ccr-faq-group > h2 {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	margin: 0 auto 2rem !important;
}

.ccr-faq-group details,
.ccr-faq-group .wp-block-details {
	background: var(--ccr-bg);
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius-lg);
	margin: 0 auto .75rem !important;
	padding: 0 !important;
	transition: border-color .15s ease;
	overflow: hidden;
}
.ccr-faq-group details:hover,
.ccr-faq-group .wp-block-details:hover,
.ccr-faq-group details[open],
.ccr-faq-group .wp-block-details[open] {
	border-color: var(--ccr-accent);
}

.ccr-faq-group summary {
	padding: 1rem 1.25rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ccr-text);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 3rem;
}
.ccr-faq-group summary::-webkit-details-marker { display: none; }
.ccr-faq-group summary::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ccr-accent);
	line-height: 1;
}
.ccr-faq-group details[open] summary::after,
.ccr-faq-group .wp-block-details[open] summary::after {
	content: "−";
}

.ccr-faq-group details > p,
.ccr-faq-group .wp-block-details > p,
.ccr-faq-group details > div,
.ccr-faq-group .wp-block-details > div {
	padding: 0 1.25rem 1.1rem;
	color: var(--ccr-text-soft);
	font-size: .95rem;
	line-height: 1.65;
	margin: 0;
}

/* No footer top margin when FAQ is the last element */
.ccr-faq-group + .ccr-site-footer {
	margin-top: 0;
}

@media (max-width: 640px) {
	.ccr-hero-group { padding: 2rem 1rem 1.75rem !important; }
	.ccr-hero-group h1 { font-size: 1.7rem; }
	.ccr-faq-group { padding: 2rem 1rem !important; }
	.ccr-faq-group > h2 { font-size: 1.3rem; }
	.ccr-faq-group summary { font-size: .95rem; padding: .85rem 1rem; padding-right: 2.75rem; }
	.ccr-faq-group summary::after { right: 1rem; }
}


/* ========================================================
   18. PRE-FOOTER (home page only, two columns with cards)
   ========================================================
   Desktop: [ FAQ cards ] [ Programar card ]
   Mobile : [ Programar ] (top)
            [ FAQ ] (below)
   ======================================================== */
.ccr-prefooter {
	background: var(--ccr-bg-soft);
	border-top: 1px solid var(--ccr-border);
	padding: 2.25rem 0 2.5rem;
	margin-top: 2.5rem;
}

.ccr-prefooter-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.75rem;
	align-items: start;
}

.ccr-prefooter-col {
	min-width: 0;
}

/* Section titles */
.ccr-prefooter-col h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ccr-text);
	margin: 0 0 1rem;
	text-align: left;
	letter-spacing: -.005em;
}

/* ----- Column 1: FAQ cards ----- */
.ccr-prefooter-faq details,
.ccr-prefooter-faq .wp-block-details {
	background: var(--ccr-bg);
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius-lg);
	margin: 0 0 .55rem;
	padding: 0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 4px rgba(15, 23, 42, .03);
	transition: box-shadow .18s ease, border-color .15s ease, transform .15s ease;
	overflow: hidden;
}
.ccr-prefooter-faq details:hover,
.ccr-prefooter-faq .wp-block-details:hover {
	box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .06);
	border-color: var(--ccr-border);
}
.ccr-prefooter-faq details[open],
.ccr-prefooter-faq .wp-block-details[open] {
	border-color: var(--ccr-accent);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .08);
}
.ccr-prefooter-faq summary {
	padding: .8rem 1rem;
	font-weight: 600;
	font-size: .95rem;
	color: var(--ccr-text);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
	line-height: 1.4;
}
.ccr-prefooter-faq summary::-webkit-details-marker { display: none; }
.ccr-prefooter-faq summary::after {
	content: "+";
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.35rem;
	color: var(--ccr-accent);
	line-height: 1;
	font-weight: 400;
}
.ccr-prefooter-faq details[open] summary::after,
.ccr-prefooter-faq .wp-block-details[open] summary::after { content: "−"; }
.ccr-prefooter-faq details > p,
.ccr-prefooter-faq details > div,
.ccr-prefooter-faq .wp-block-details > p,
.ccr-prefooter-faq .wp-block-details > div {
	padding: 0 1rem .9rem;
	color: var(--ccr-text-soft);
	font-size: .9rem;
	line-height: 1.6;
	margin: 0;
}

/* ----- Column 2: Programar — single big card with article list ----- */
.ccr-prefooter-programar {
	background: var(--ccr-bg);
	border: 1px solid var(--ccr-border);
	border-radius: var(--ccr-radius-lg);
	padding: 1.25rem 1.35rem 1.1rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 4px rgba(15, 23, 42, .03);
}
.ccr-prefooter-programar h2 {
	margin-bottom: .9rem;
	padding-bottom: .65rem;
	border-bottom: 1px solid var(--ccr-border-soft);
}
.ccr-prefooter-programar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ccr-prefooter-programar li {
	padding: 0;
	margin: 0;
	border-bottom: 1px solid var(--ccr-border-soft);
}
.ccr-prefooter-programar li:last-child {
	border-bottom: 0;
}
.ccr-prefooter-programar li a {
	color: var(--ccr-text);
	text-decoration: none;
	font-size: .9rem;
	line-height: 1.4;
	display: block;
	padding: .55rem 0;
	transition: color .15s ease, padding-left .15s ease;
}
.ccr-prefooter-programar li a:hover {
	color: var(--ccr-accent-dark);
	padding-left: .25rem;
}
.ccr-prefooter-more {
	margin: .9rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--ccr-border-soft);
	font-size: .88rem;
	text-align: right;
}
.ccr-prefooter-more a {
	color: var(--ccr-accent-dark);
	text-decoration: none;
	font-weight: 600;
}
.ccr-prefooter-more a:hover {
	text-decoration: underline;
}

/* ----- Mobile: single column, Programar first ----- */
@media (max-width: 768px) {
	.ccr-prefooter { padding: 1.75rem 0 2rem; }
	.ccr-prefooter-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.ccr-prefooter-programar { order: 1; }
	.ccr-prefooter-faq { order: 2; }
	.ccr-prefooter-col h2 { font-size: 1.15rem; }
}

/* No margin on footer if prefooter is right above */
.ccr-prefooter + .ccr-site-footer { margin-top: 0; }

/* ========================================================
   19. AUTHOR ARCHIVE PAGE
   ======================================================== */
.ccr-author-bio {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	text-align: left;
	padding: 1.5rem 0 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--ccr-border);
}

.ccr-author-avatar img {
	border-radius: 50%;
	display: block;
}

.ccr-author-info {
	flex: 1;
	text-align: left;
}

.ccr-author-name {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	text-align: left;
	color: var(--ccr-text);
}

.ccr-author-description {
	color: var(--ccr-text-soft);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 .75rem;
	text-align: left;
}
.ccr-author-description p { margin: 0 0 .5rem; }
.ccr-author-description p:last-child { margin-bottom: 0; }

.ccr-author-website {
	margin: 0;
	font-size: .9rem;
}
.ccr-author-website a {
	color: var(--ccr-accent-dark);
	text-decoration: none;
}
.ccr-author-website a:hover { text-decoration: underline; }

.ccr-author-posts-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
	color: var(--ccr-text);
}

@media (max-width: 640px) {
	.ccr-author-bio {
		flex-direction: column;
		gap: 1rem;
	}
	.ccr-author-name { font-size: 1.4rem; }
}

/* ========================================================
   20. POST CARDS (blog index + author archive)
   ======================================================== */
.ccr-post-card-categories {
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .35rem;
}
.ccr-post-card-categories a {
	color: var(--ccr-accent);
	text-decoration: none;
}
.ccr-post-card-categories a:hover { color: var(--ccr-accent-dark); text-decoration: underline; }

.ccr-post-card-author {
	color: var(--ccr-text);
	font-weight: 600;
	text-decoration: none;
}
.ccr-post-card-author:hover { color: var(--ccr-accent-dark); text-decoration: underline; }


/* ==========================================================================
   AÑADIR AL FINAL DE codigosremoto/style.css

   Estilos para los tres bloques nuevos de la plantilla dinámica reescrita:
   migas de pan, marcas relacionadas y buscador de repesca.
   Usa las variables ya definidas en el tema.
   ========================================================================== */

/* --- Migas de pan --- */
.ccr-breadcrumb {
	font-size: .85rem;
	color: var(--ccr-text-soft);
	margin-bottom: 1.25rem;
}

.ccr-breadcrumb a {
	color: var(--ccr-text-soft);
	text-decoration: none;
}

.ccr-breadcrumb a:hover,
.ccr-breadcrumb a:focus {
	color: var(--ccr-accent);
	text-decoration: underline;
}

/* --- Bloques de enlaces (marcas relacionadas / buscador) --- */
.ccr-related,
.ccr-search-again {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ccr-border);
}

.ccr-related h2,
.ccr-search-again h2 {
	font-size: 1.15rem;
	margin: 0 0 1rem;
}

.ccr-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: .5rem .75rem;
}

.ccr-related li a {
	display: block;
	padding: .6rem .8rem;
	background: var(--ccr-bg-soft);
	border: 1px solid var(--ccr-border-soft);
	border-radius: var(--ccr-radius);
	color: var(--ccr-text);
	text-decoration: none;
	font-size: .9rem;
}

.ccr-related li a:hover,
.ccr-related li a:focus {
	border-color: var(--ccr-accent);
	color: var(--ccr-accent);
}

@media (max-width: 480px) {
	.ccr-related ul {
		grid-template-columns: 1fr;
	}
}